Viewers: in countries Watching now:
Before we go any further, let's apply some basic styling to the footer to ensure that it appears as a separate element on my page. Because right now, it looks similar to the sidebar. It also doesn't really separate from the other content. I'm going to give the footer a dark background and white font. And I'm also going to change the global font for all the footer content. Back in NetBeans, I'll first check out what the markup of the footer looks like. And here you see, in the footer.php file, I have the actual footer tag.
And the footer tag is wrapped in the class site footer. So if I target the site footer class then I'll style all the content within the footer itself. Now I can go to style.css, and the footer is in the bottom of the page, so I'm going to scroll all the way to the bottom, and add the footer in here. So I'll just borrow the markup for this comment here, and I'll add the footer. I'll call it thirteen for now footer and then I need to add the basic styling so here I'm going to make a sight footer selector and then I'll say padding 2em so that there's nice padding around it I'll sell the font family to auto and sans serif.
I'll set the font size to 16 pixels so it's a little bit smaller than the regular font size on the site. And I'll also set it in REMs. I'll set the color of the text to white and I'll set the background color to a dark gray. I'll save that and test what it looks like in the browser. So, I'll reload my browser and now you'll see my footer has a nice dark background. The text is all black and I have some nice padding around the contents. And if I scroll all the way to the bottom where you see the site info, you see that here the text is also styled in the correct font.
Now, it looks really weird and that's because all the links are still styled with the default styling, and all these links have the hover state. So I need to add another style to target the links. And I'll just set the color of the links to white and then while I'm at it, I'm going to align the site info, so that would be the actual information on the bottom so here we have powered by WordPress and theme name and so on. So I'll align that to the center so I'll say site-info, text-align, center.
No I can reload my page again and you'll see now all my links are white so that's easy to read and the site info at the bottom appears in the middle of the page and the footer has overall styling. That looks decent. Most importantly though, the footer is now separated from the rest of the content. Now of course, the widgets themself look pretty weak right now but that's fine because we're going to apply styles to all the widgets on the entire site. And because the mark up is the same. For the footer widget area, as it is for the regular widget area, when we apply styles to the regular widget area, the footer widget area will just inherit the same styles.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
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.