Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With our two widgetized areas the side bar and the footer in place and their global styles applied. So they appear where they're supposed to and have an overall look that matches our design. It's time to start focusing on the widgets themself. Looking back at the original design you'll see that our widgetized area as a lot of fun throughout. Each of the widgets have a bolded title with an underline. And the widget text is relatively small compared to the regular text that you see on the page.
This is all designed so that the widgetized area doesn't drag focus away from the main content because it is additional content. Now we need to apply this general styling to our widgets. In accordance with dry development principles. It's always a good idea to mark up all your widgets the same way and use consistent class names to make them easy to target with global styles. If we look back at functions.php and where we registered our widgets. You'll see here that each of our widgets within our widgetized areas starts with an aside and has the class widget.
And then, the widget name as the secondary class. And our widget titles are all wrapped in an H1 tag with the class widget title. And this goes for both our side bar widgets. And our footer widgets. That means if we create styles that targets widgets or widget title, they'll apply to both the side bar and the footer at the same time. And we'll have consistent styling across all our widgets. So now I can start applying that style. So I'll go to style.css and find the widgets section which is 9.0 and I'll search for it.
9.0, here I find the widget's area, and here you see I currently only have three rules. I have the widget rule, which just sets 1.5 m, margin on the bottom of each widget, and I have these two. Which sets the select elements to fit in widgets and also the search widget. Now these two I'm going to leave alone, but above that I'm going to add a whole new set of rules to target our widgetized areas. So start out by changing the widget class itself.
So I'll set the margin to 0, 0, and four em's to give each of the widgets more space below. Then I'll set the font family of the whole widget to Lato and sans serif as before. I'll set the font size for the widget itself to 16 pixels, and then I'll add a widget title rule. So widget title. I'll start by setting a margin between the widget title and the rest of the widgets, I'll set merge at bottom.
To Iem, then I'll set the font size of the widget. And here I've gone and checked my design and the font size is 24 pixels. And then I'll set that thick border at the bottom. So I'll set border bottom to two pixels solid and black. So now I've styled the overall widget and also the widget title. Now I need to check my styles on the actual page and here you see my title now looks like it matches our overall design. And the widget font size matches what I have in my designs as well.
When I look back at my design, you'll also notice I have my links are bolded while my regular text is regular font weight. Now I'll go back to my style sheet again, and I'll add that in. So I'll say, .widget a, font-weight, and I'll set the font weight to 700, which is one of the font weights that we got for our custom font. And I'll also set the color of the links to black. Save again and test the page again. And now you'll see my links are nice and bolded and, for example, here on the calendar you'll see that makes a significant difference.
My links are heavier and black, whereas the rest of the text has a slight gray color. And now we need to add a bunch of extra adjustments to position all my widgets exactly where they're supposed to be and align them. So if you go to the code snippets for this movie, you'll see here we have a set of rules for widget ul and widget li and li ul and so on. So all of these rules, once applied affect all these list. So when I reload now you'll notice that my lists are no longer shifting in and they don't have the bullets anymore.
And the lists look much nicer than they did before. So now my side bar looks great but if I scroll down to the bottom of my page. You'll notice I still have a little bit of work to do with my widget in the footer. In particular, I need to change the color of the title and also the title underline. And on wide screens I want each of the widgets to stack up net to one another. Instead of taking up the whole width of the screen like they do now. So if you go back to the code snippets and scroll to the bottom you'll see here we have a set of rules just for the footer widgets.
You can copy that out. I'll paste it in beneath Search Widget here and what these rules do is they set the footer widgets to center. Then they set the text color and border color for the titles. And then, they set each of thee widgets to be a max width of 320 pixels. So now I'll go and reload my page a final time. Now my photo widgets match the overall design in each of the widgets stacks next to the other. So that we can utilize the space in our footer better.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 60251 Viewers
61 Video lessons · 92826 Viewers
82 Video lessons · 104226 Viewers
56 Video lessons · 107279 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.