Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our structure is looking good, our header is looking good, and we just finished with the navigation. So let's finish off styling of our sidebar. The last thing we have to do here are these little boxes over here, so if we look in the Photoshop file, this is what we are trying to accomplish, and now if we look in our index.html file, each of those boxes are within these divs here. Div with a class of widget. So that's what we are going to working with in our CSS.
Now I'll scroll to the bottom here, just after the navigation, and anything with a class of widget here is what we are going to be styling. Now in our Photoshop file, the only image we are going to be need is this gradient, little page curl thing here. That's this layer. I can verify that by turning at on and off, this layer here, Sidebar Box. So I am going to option click on the eyeball, and get just it activated.
Then in the Image I am going to Trim and give rid of all Transparent Pixels, so we have just it. I am going to Save for Web & Devices and call this image Widget Shadow and save it into our Images folder. Now, all of our widgets here now-- I know that little bit of confusing term here, because we are working with the Widget Corp. But widget is the proper term here, because eventually WordPress is going to be referring to these boxes as widgets.
We'll give each of these divs with a class of widgets a background of URL, where we go get this widget-shadow.png. We are going to set it in the top right with a no-repeat value. Now if we just save that and come out here and look, we are going to get our shadow in there. But the placement is a little weird. Because the edge of this image is actually a part of the shadow, it doesn't line up perfectly with our anchor links from our menu above.
We can fix that most easily by just nudging back in the size of those links, so if we just give each of those links a slightly smaller width, that should be getting lined up nicely. Now each of those widgets will have some padding applied to it, quite a bit of padding, give it 30 pixels, and we'll push it down away from the navigation with some top margin.
Also 30 pixels will stay geographically sound here. So we are making good progress there. Let's deal with this Latest Post here. We will remind ourselves with this is looking like in our Photoshop file. I am going to open this up and back out. It's the same color as this here. So let me go ahead and sample that color. We are displaying the latest post from our blogs, so having the color match the link to the blog kind of make sense there, and we'll remind ourselves with the HTML looks like.
It's this h4 tag within the div with a class of widget. So widget, h4, has this color that we just copied, and it's aligned to the right, so we will say text-align:right. That's a little bigger than the default font size. See it has a little bit of a shadow here? We are going to go ahead and copy that same text shadow that we used on the h1 tag for the site, so consistency in shadowing there.
It's uppercase letters, wherein the HTML file it's not uppercase. We will make it uppercase, text-transform: uppercase, and we'll give it some margin. We'll check in and see how it is doing in the browser. I am going to save that, reload the browser. Good, we are doing okay. It's a little more spaced out letter-wise, so we can use letter spacing.
Literally 5 pixels there, and I think we're about where we want to be. I think this is not bold, whereas in the browser here we are bold, so we can remove that bolding of font weight. Pretty good. Now right below that in the Photoshop mockup is this date field here, so it's the same color. We will make sure that we have a copy of that color as the background this time, instead of the text color. So in the HTML that's a div with a class of date here, so in the CSS we'll say widget.date.
It has a background of that color, and the text color, it's not white. It's a bit of a yellow color. We will try and get sample of it. It has a little padding of its own. It's also aligned to the right, but the special part of this is how it is aligned to the left here, all the way to the edge of the page, but we have padding on this widget that's going to affect that. So let's save and can see where we are in the browser.
Well, that background color didn't apply, because I spelled it wrong. So we'll fix that and reload. You can see it's pushed in this 30 pixels. Now that's what we told it to do, but we want to stretch it back out. So how we can do that is just giving it some extra width and then pulling it back to the left with a negative margin. So we will make its width maybe 235 pixels and use some margin.
Now we're going to push to the bottom, so maybe 12 pixels in the bottom, but also to the left -30 pixels. So if we Save there and reload, it should touch that edge just like we want to. There are few other things that we need to style with that. Let's take a look in Photoshop. It's uppercase, a little smaller of a font size, and letter spaced out a little bit. Not quite as much as the post though, and we should be right on with that. Yeah, perfect! Now we have the title for latest post. We will make that bigger and that's an h5 tag.
That's as low as we are going with other tags. Say the font-weight of it is also normal not bold. It's a little bit lager though actually, 18 pixels in size, and we will push the text below it down a little bit as well. So that's looking good. Now just the last thing as this text right here below it. That's a p tag, so widget p, and now we will make the color a light gray color, and its font size much smaller at 12 pixels.
So if we hit save and reload, there we have a nice looking sidebar unit. It's looking just like our Photoshop version, so with some very minor alterations, we can fix that bottom up, just changing a few colors and we will be ready to style the main content area.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104706 Viewers
56 Video lessons · 116608 Viewers
71 Video lessons · 85792 Viewers
131 Video lessons · 41050 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.