Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

3.5 Add Color, Look & Feel: Main Colors & Icons

Now that your theme has all its essentials in place for great functionality, it’s time for it to get some personality! Let’s grab those digital paints and brushes, and splash some life onto the canvas you’ve created so far. We’ll use the main colors of your theme, and some spiffy new icons care of Font Awesome.

Related Links

3.5 Add Color, Look & Feel: Main Colors & Icons

Hey, this is Kezz. Welcome back to WordPress Theme Creation With Underscores. Now you have all your structures set up, and you have all your typography set up, and we are ready to move onto adding color. Now in this lesson, you're gonna learn how to add your main colors to your design, and you're also going to add in icons, and we'll be doing that with the Font Awesome icon library. Now before we add in our new colors, we wanna delete those temporary color guides that we used earlier. So, in your custom styles file, just remove those styling classes that you added earlier, and then in your custom vars file, remove the mixin guide. We're gonna begin by establishing our variables. First, we'll make a couple of little changes to the existing default variables. Now, again, you will get source code. So you can just copy over the code for this lesson from there, and paste it in. Or you can put in your own codes if you would like to do your own color design. After changing those variables, we're also gonna add in a couple of new variables of our own. It's a really good rule of thumb never to put any actual color codes anywhere in your CSS, and just use variables instead. You can that way keep all of the colors in your theme coordinated in one place. You know that then, if you want to change a color anywhere in your theme, all you have to do is come here and edit your variables. And for the same reason, we're also gonna be creating mixins to apply all of our coloring throughout our whole theme. So, whenever you want to change the way your colors are applied, you can just look at your coloring mixins. So, we'll be creating a series of coloring mixins, and we'll then take those mixins and we'll apply them to our custom styles. Now here's our first few mixins. Try to give your mixins meaningful names, so that you don't have to struggle when you come back later to remember what you used these mixins for. Now, the first one we have here is a body mixin. And we'll be applying that to the body element. And that's just gonna put a little border across the top of our site, and it's gonna set the background color of our design. The next two, as you can gather from the names, are styling our links and also styling our blockquote. To use these new coloring mixins, just grab the existing a element and blockquote element styling that you already have and delete it. And replace it with the code that you see here. Now we have our body element, and we're just including that body mixin straight into it. We are including our links mixin, and that's just going to output all of our required link styling CSS. And we have our blockquote element. And once again, we're just including that blockquote coloring mixin straight into it. Once all that's compiled, our theme now looks like this. Changing those default variables has changed the background color of our site. It's changed the color of our text and also the color of our links. Now we're gonna carry on adding in extra coloring mixins that we use to style all the elements of our site. Now, in this design, we're gonna create two different types of panels. We're gonna have the main panel, which will be the style that affects our posts and other areas around the posts, like the comments section. We're also gonna have a subpanel, and we're gonna use that styling to style our header area and our widgets. The code we'll use for those two panels is this. And we've got our main panel mixin, as I described, and our subpanel mixin. To apply the main panel mixin, we will add it in to this series of classes here, starting with the .hentry class. And when we compile it, that will give us this effect. We have the white background, and a light colored border and drop shadow, just to give us a very slight raised look. With the subpanel mixin, we'll add that to our site header class. And we'll also add it to our widget class. And when we compile that, we see this. Now, we just have a slightly different background color on our subpanels, and a subtle border and inset shadow this time, which gives the look of a small depression into that surface. Now we're ready to start adding in some icons to our design. And that's really just gonna help to give it some extra life. And to do that, we are going to import the Font Awesome style sheet, and that will let us use all of the icons in that icon library. Now, once more, we're using a straight CSS input here, but remember this is not the most efficient way. So, if you're happy to tackle some PHP in a later lesson, I'll show you a way to load these style sheets in more efficiently. And now we can drop in some code that will add icons into our post footer. And that will effect our category links area, the area that shows the tags for the post, the area that links to the comments, and the editing button. Now, what this code here does is, it picks out the classes that are wrapping each one of those areas, and it uses the before pseudo selector to just insert an icon right before each of those little wrappers. And in each of these cases, we've set the font family to be Font Awesome. And that little content line you see here, and the numbers in between these quotations marks, they determine which icon out of the Font Awesome library you'll be using. Now, I'll give you a link to a cheat sheet that you can use to look up the correct codes for any icon in that library that you want to use. When we save and compile, there's our new icons in our post footer. We'll do the same thing now for any list items in any of our side bar widgets. We're using the before pseudo selector again, and that's going to insert the icon that we choose before any of our list items. And that new code gives us these. With what we've just added, we have basically a default icon for any list items and widgets. But we can also add some different icons for specific types of widgets. After the code that we've just added, we'll add some extra code. Now, this code will overwrite what we just added, if we have either a recent comments, archive, category, or pages widget. And they'll give us a different type of icon on each one of those widgets. So we'll compile that, and now there. There's our page icons, which are different to our defaults. Our comment icons. Our archive icons. And our category icons. Now you've got all of your color variables set up and giving you a color palette to work with. You've got all the coloring set up for all of the main elements of your site. And you've got some cool little custom icons in there as well. Having taken care of those main coloring elements, in the next lesson, we're gonna take care of some of the smaller elements of your theme. I'll see you in the next lesson.

Back to the top