The CSS Hero Plugin will empower you to customize your website without having to learn the CSS programming language. However, as you use the plugin you will be learning about CSS and if you already have a working knowledge of CSS, it will help you as you customize your website. Whether you are a CSS Newbie or Novice, CSS Hero will make customizing your website a breeze.
A Very Basic Introduction to CSS
What is CSS? CSS stands for Cascading Style Sheets. This is a programming language that controls the styles and design of websites. And the cascading nature of the language means that the design styles cascade from one item to another unless they are specifically changed. This may not sound ideal, but it means you can set a base font for the entire website and only change the specific instances where you might want a different font. The alternative would be to set a font for each and every item.
CSS allows us to make changes that affect your entire website. But still gives us the ability to style individual elements differently. I use the word “elements” rather than items because in web design, we often have multiple items of the same type on a given page. Think of a blog page where you will have 5 blog posts. Each of those posts will have a Blog Title. Using CSS we can style all of the Blog Titles (the element- blog title) with a certain font and style rather than going to each item and making the same changes over and over again.
Now that you have a basic conceptual grasp of what CSS does and how it works, it’s best to jump right in and see how we can use the CSS Hero Plugin to change our styles.
Using CSS Hero to Adjust Fonts
There are three basic Font styles you’ll probably be working with. These include the Font Family (Font Face), Text Color, and Font Size. Using the CSS Hero Plugin, all we need to do is click on the crosshairs, choose the Text Element we want to style and choose the Text menu.
CSS Hero also provides a “Live Preview” so as you make changes, you can see live what those changes will look like on your website.
**Note- Please note that CSS Hero attempts to find all the elements you can style on the website, and it does a good job of finding those elements. If however CSS Hero can’t find the element you want to style, please refer to the Advanced Section later in this tutorial for a way to style hard to find elements.
Change the Text Color
You can change the Text Color by clicking on the color square and using the color picker or using the 6 letter HEX Color Code if you know it (example: #ffffff = white). For quick access to the colors you’ve previously used on the website you’re modifying, there is a section at the bottom of the color picker with recently used colors.
Change the Font Family (aka Font Face)
CSS Hero enables you to change the Fonts on your website quickly and easily. The Font Family option give you quick access to common web fonts as well as hundreds of Google Fonts which are available to use for FREE. Changing the font is as easy as clicking the drop down menu triangle and choosing the font you want.
Change the Size of Fonts
After you change the Font Family, many times the font will appear too big or too small because not all fonts are created equally. So it’s time to adjust the Font Size. Use the slider or type a number in the box and you’re done.
Additional Font Properties
CSS Hero can adjust many other Font Properties. Font Weight determines if the Font is Bold or Normal, Font Style is also known as Italics. There are Font Decorations like Underlining, Font Transforms for Uppercase/Lowercase, and even Font Alignment for Centered Text. Some of these properties require other CSS options to work properly and CSS Hero is smart enough to tell you when you need to set additional options.
Besides these Font Properties, there are advanced Font Properties you might want to look further at. The main on being the Line Height. Design Tip: Having a Line Height of 1.3x to 1.5x the Font Size generally makes for much more readable text on a website.
Using CSS Hero to Modify Your Website Backgrounds
Another common element of your website you may want to customize is the background of certain elements. This can be the main background of your entire website, it can be the background of a Form placed on your website, or it can be just the background of any element like your Post Titles.
Changing the Background Color
Changing the Background Color is simple. Choose the element that you want to adjust the background on, and select Background from the CSS Hero menu. Background Color is the first option and just like changing the Font Color, all you need to do is click on the color square and use the color picker to select the color you want. Also remember that a running list of the colors you’re using on the website appear just below the color picker.
Use a Background Gradient for more Style
If you want more than just one color, then a Gradient is what you’re looking for. Design Tip- It’s always good to have a Background Color selected as a fall back in case the person viewing your website can’t view the gradient colors. At least they will have one color rather than none.
Background Gradients are found under the Background Image option. This might not seem intuitive to you because it didn’t make sense to me at first either. But I believe the reason it’s under that menu is two fold. First you should choose a “fallback background color” and second because you can’t have both a gradient and an image as a background. It’s one or the other, so it makes sense for the Gradient and Background Image to be in the same category.
A Gradient is just two colors that blend into each other so the process of creating it is simple. Choose two colors as you did before with the Background Color and Font Color. Then choose how you want the colors to blend together with the Orientation option.
Set an Image as the background of an element
For a fancier effect you can also choose an image to be your background. Simply click on “Choose Image” and select an image for your computer or the Media Library.
Next you will choose the Background Properties.
* Background Repeat determines whether your image will repeat horizontally (Repeat X), repeat vertically (Repeat Y), repeat in both directions (Repeat), or not repeat at all (No Repeat). If you have a seemless image, you may want to repeat it to produce a wallpaper effect.
* Background Attachment is not what it appears to be. There are two options here worth noting. Scroll will scroll the image when you scroll down the page. If you choose this option, you should test it on a long page because at some point you will run out of image and what you will see “behind the image” is the background color. Fixed will pin the image to the top of the screen and it will not scroll when your page is scrolled. This is preferable if you want a consistant look to the website.
* Background Size give you some options, but I only recommend using these options if you don’t have an image large enough for your website and you really shouldn’t have an image that the wrong size. Please use Photoshop or a similar image editing program to resize the image if it’s not the ideal size you want.
* Background Position allows you to set the position of the image in case you want the starting location of the image to be different than the default
Those are the basics of using the CSS Hero Plugin. The rest of this tutorial will cover some more advanced topics. A better understanding of CSS will help you make more of these advanced changes, however I will provide a quick primer to help move you along.
Moderately Advanced CSS, the “Box Model”, and Box Customizations
Chris Coyer has a great tutorial about the CSS Box Model on his website and I highly encourage you to check it out if you’re interested in learning more.
Basically the CSS Box Model tells us that every element on our websites are boxes. And these boxes can be formatted in relation to each other. Two of the most common styling and formatting we can add to these boxes are Margins and Padding.
Margin is the space around a box. Margin gives your box room before the next box starts. Padding is the space inside the box between the walls of the box and the contents of the box. Think of this as the space between your bed or dresser and the wall in your bedroom. You need a little space there so you can move and not everything is touching the walls.
This can be a really advanced CSS topic and one that is beyond the scope of our simple website customizations. For the purpose of this tutorial we’ll take a look at several simple things you can do with the boxes.
Add a Border to an Element For Separation
In my video, I wanted to style a form I placed on the page with Gravity Forms. The reason I chose to add a border to that element is because it is a box within the box of the main content of my posts and I wanted to separate that content out. In most of my simple e-commerce websites, I like to separate the contact and payment forms from the rest of the page using simple styling like what I featured in the video.
So to add a border, select the element you want to style, and choose the “Border” option in the CSS Hero menu.
You have basically three options to use here. (In the video I mistakenly only talked about the first two options and missed the color option)
* Border Style determines if you want a solid line, dashed line, or dotted line.
* Border Width determines how wide your border will be.
* Border Color determines the color of the border.
For even fancier borders, you can style each side of the border seperatly. For fun, try to make the side borders solid and make the top and bottom borders dashed. You might like that look.
Border Radius is another option in the CSS Hero Menu and that will basically round the corners of the border/box. Again you can choose to round all the corners or round individual corners.
Adding Margin and Padding to add Visual Space
Remember that Margin is the space outside the box and padding is the space on the inside of the box between the wall and the contents. These are two more menu options in CSS Hero. You can set the Margins and Padding on each side of the boxes. *Note that the Margins and Padding do not need to be the same. You may choose to have more Margin below the box than on the sides.
Determining the Size of the Boxes
Size is another option you can set on your website elements. I showed you two use cases in my video. First to make the box a certain size and allow the content of the page to “Float” around the box. And I also showed you how you may need to adjust the size of boxes for mobile devices.
Making these adjustments is as simple as using the Width Slider. In rare instances you may need to also adjust the height, but that generally isn’t something that’s needed.
“Floating” the Boxes to allow text to “Wrap”
CSS Hero has many Advanced CSS options in the “Extra” Menu item. We won’t go in depth into those options. There’s just one option we want to touch on here. It’s the “Float” option.
When you have a small box within a larger box, (in our example, we have a smaller form box inside of our larger content box) you can choose the “Float” property to float the box to the left or right and enable the rest of the content on the page to flow around that box.
This is a moderatly advanced CSS property and your results may vary. If you want to try this property, remember to set the Margin, Padding, Size, and Float of the smaller/inner box. And see what happens.
If you need any help with these slightly more advanced CSS options, I offer a Quick Help service where I can do a quick video conference and show you what to do and troubleshoot for you.
Other Advanced Effects: Hover Effects
Hover Effects are most often associated with links, although they don’t necessarily need to not be applied to links. We’ve all been on websites where when we point our mouse at a link, the color of the link changes. That is a hover effect and it’s really easy to add in CSS Hero, you just need to know where to look to find it.
When you’re editing an item in CSS Hero, there is a little mouse pointer icon. When you click on that, you get a couple of options. The Normal option is what we’ve been editing all along. But you will also see a Hover option (perhaps also an Active and Visited. Active is used for the Active link you’re currently on and Visited for a link you’ve previously visited)
Click on Hover and you can adjust the Hover Styles. In general, you’ll want to change the Color and Text Decoration. I think it’s a good practice to have all links be underlined, but if your links aren’t already underlined, you can consider adding the underline to the Hover state, so when a person Hovers over a link, the underline appears and they know that it’s a clickable link. You’ll adjust these properties as you did before when we talked about Fonts and Text so we won’t go into these again here.
Customizing Your Website For Tablets and Phones
Most websites these days are “Responsive”, meaning that the design will alter a little for smaller screen sizes like tablets and phones. CSS Hero has a great option to help you style your website for these screen sizes. Just click on the screen size icon, choose a screen size and customize away!
It’s helpful to view all the changes you’ve made on the website in these alternate screen sizes to make sure that the changes you’ve made won’t have negative consequences on other screen sizes.
What to do when you CSS Hero can’t help you change the element you want…
Sometimes CSS Hero can’t find the element you want to change. Hey, nothing’s perfect right? You still might be able to style that element by viewing all of the CSS Selectors and choosing the one you think will affect what you want.
This is the button that will reveal all the available CSS Selectors. As you hover over the list of available selectors, you’re looking to see the blue box around the item you want to adjust. When you see it, choose that Element and see if your style changes will do what you want.
This process can be a little trial and error and it’s where a deeper understanding of CSS can help you target the very specific elements on your website.
Create a New CSS Element
If you’re familiar with CSS, you can also create a New CSS Element to specifically target an element on your website. This is more advanced stuff so, if you can do it, more power to you.
When All Else Fails (Undo with History or Reset)
CSS Hero has two options for you when all else fails. Use the History Menu to go back in time through your changes.
Or you can reset all changes and get back to the default theme. No shame in using this option. Sometimes we think we’re better designers than we really are. Yes, that’s my hand that’s raised. 😉 If you changes don’t look as good as you thought, just reset and try again.
Next Steps:
What would you like to do now?
- Purchase the CSS Hero Plugin and try it out. We appreciate you using our Affiliate Link so that we can receive a little income and continue to create high quality content for you.
- Hire a Professional. If you decided that this is a little too advanced for you, no problem. We offer a Quick Help service to aid you with whatever customizations you need for your website, or general consulting on plugins and problems.
Thanks for watching the video and reading through this guide. The Ultimate Guide to Customizing Your Website with CSS Hero! first appeared on HawaiiWP.com.
