3.6 Add Color, Look & Feel: Finer Points

Hey, this is Kezz. Welcome back to WordPress Theme Creation with Underscores. In the last lesson you setup the main coloring of your theme and you also integrated some cool little icons. In this lesson we're going to add some extra coloring and polish to some of the finer elements of your theme. But the first thing we're gonna do is add some little dividers in between those list items that we just added icons to. Just as we did in the last lesson, we will do that by first adding in a couple of mixins. And, here we go, here we have our widget-divider mixin, and that will be the default divider, that goes in between each of the list items. And, a widget-divider-top mixin, and that's just gonna be necessary in some of our nested sublists. We'll apply those mixins by first adding our default widget divider mixin into just the regular list item for our widgets. And that will be the styling that's used on almost all of the list items. Then we'll also add our widget divider top mixin here. Now, these classes and selectors are applying to the first list item in any nested list, so any sub-list. And the reason we do that is if there's no line put at the top of one of these nested lists, you get a bit of an ugly looking blank space. Now, we'll compile that. And there you go. You can see our subtle lines in between our list items. Everything in this theme is designed to be quite subtle. So, you see these very soft colors and soft differences between one color and the next. And, you can see all throughout the list we have the default widget divider. And then at the top of our sublist here, you'll see that top divider. Now we'll add in some coloring that will affect the individual posts. We have a few different mixins that we're gonna be adding for that. First off, we have our entry meta mixin, and that will style that little section where you see posted on this date by this person, etc. Then we have a dotted link class, and that's going to give us a slightly different style to only the links within the posts themselves. Following that we have some styling for our entry footer. And that is where our list of categories, list of tags, and the icons that we just added in earlier are held. And then below that we have a styling for our comments on each individual post and we will apply those mixins in our custom styles file. The entry-meta mixin goes into the entry-meta class. The dotted link mixin goes into the entry content class. The entry footer mixin goes into the entry footer class. And the comment mixin goes into the comment class here. Those mixins turn our individual post style into this. And we've got out post meta here. We've got our new link styling here and our entry for the styling here. The comment styling gives our comments this look, and we're using a slightly transparent color so that when we have nested replies, each one will be a little bit darker than the last. As the transparent color stacks on top of the previous color. >> The last two mixins are adding, one for our sticky posts, because you should try to design your sticky posts so they stand out, looking a little bit different from other posts. We also have one to darken the color of the links in the site footer. And that's done just enough to make sure that the text color contrast ratio is sufficient for accessibility purposes. To implement our sticky post style link, we're gonna add this new class, sticky, and we'll add our sticky post mixed in inside it. Now all posts that are set to sticky status in WordPress will have the sticky class applied to them. And that means our sticky posts will go from looking like this, to looking like this. And finally, we'll implement our site footer mixin by adding it to our site footer class, and that just turns the links in the footer to this color. You might not even really be able to see the difference there but if you check the contrast ratio using a tool like accessibility developer tools for Chrome, for example, you'll see that they actually are brought up from not quite a sufficient contrast accessibility purposes to being just right >> So, that's it. Well done. You've just finished the just add style part of this course. So you've completely taken your basic underscores theme and you've turned it into a custom styled version. Now that said, even if you've never touched PHP before follow me into the next section where I'll walk you through some customizations to the themes PHP files that will really help you to bring your theme up a notch. So we are going to start by learning how to load your custom fonts in, in a much more efficient way. And we will move on to adding a touch friendly menu, featured images, excerpt support, and some new widget locations. I'll see you there.