Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 4 – Style the Typical Page Content

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is move on to styling the typical page content and that is the section right in here, this is our typical page content. We’ll start off going back to Thesis Design Options and start off with our fonts.

Styling the Header

We’re using Verdana as our main site font, we’re not showing interior layout borders and we’re not showing this cool shadow effect. Our primary text color is going to be that darkish gray and let’s leave the link color this color here. We’ll come down to our content, I want to make the main content 15 pt and we’ll take care of the header here real quickly as well while we’re at it.

The header is going to have Arial, it’s going to be 36 pixels , we’re going to make it white and then the tag line is going to be inherited from the header, that’s going to be 14pt but it’s going to have a different light gray, more of a blue gray.

We’ll scroll down here to headlines and the headline font family is going to be Arial so it’s not inherited from the body. It’s font size I like nice and big so we’re going to take it up to 30 pt. It’s text color is going to be a different blue gray then the sub headlines are going to inherit from the headlines and they are also going to be the same blue gray.

For the moment, I think that’s good for this so hit save and refresh this. There we go, that’s a bit easier to read in this case now. We’re working on a page that has a sidebar. This is going to be a bit different than the homepage. That’s the Thesis Design Options section of it.

Add Page Margin and Padding

The next part is we’re going to add some page margin and padding. If you look at our example here for a second, if we zoom in on this, we’ve got this dark color in the background then we pull off the sides, the top, the bottom and the sides here to have the actual page color. What we need to do is give ourselves padding around the whole thing and we need to give this content area a background color of white.

Let’s come back over to this for a second and in fact, I think we’re going to open this up in FireFox so you can see what I’m talking about here because this is really the way I normally do it. I test in FireFox as I’m working along except that you’ll notice as soon as we turn on web developer, those background images go away.

If you’re creating a child theme you don’t really have any choice. You’re going to be using relative image locations and so web developer is going to have that limitation for you here and there’s not really anything you can do about it.

What we’re going to look at though is first, let’s find a thing that we can use to make this background white. Really, it’s the content box. Notice how the content box already has side padding and if we look at this here, actually, that padding comes from page. Notice it’s got a padding-left of 2.2em and a padding-right of 2.2em, it’s got the left and right padding.

Add Top and Bottom Padding to the Content Box

What we’re going to do is add some top and bottom padding to that to push the page down then we’re going to take content box and give it a background color of white. If you just want to see what that looks like, let’s scroll all the way down here for a second and we’ll say, content_area .page then we’re going to say padding-top:2.2em which is exactly what we have on the sides, and we’ll say the same thing for bottom, 2.2em.

If we scroll down here and hover over the content box, you can see it’s definitely got the padding. Notice how the page color butts all the way down here to the footer and again on our sample, we’ve got a background that shows down there? Come back over here to our sample for a second, we’ve got essentially the same width here as we have here.

What that really means is we want to give this page a bottom margin to push it away. Let’s do that as well, so we’ll just say, margin-bottom:2.2em. Now you can see it pushed it away so we ended up with the way we want it to look.

Give Content Box a Background Color

The other thing is we want to give the content box a background color of white so let’s come down here, content_area .page, content, content_box, background-color:#ffffff. Now, you can see we need to style the sidebar yet and there is other styling we have to do too but we’ve got this page part pretty well-handled with those two rules, adding the padding to and margin to content_area .page and then placing a white color in the content box.

We’re going to copy that, bring it over here to our CSS file, content_area .page, copy this column at content_area, save it, upload it, save it again then we’ll test it so there we have that. It looks like we’re going to have to do a bit of extra work on those edges. How does that work over here? Oh no, I guess it is pretty much like that.  It’s just that this gray section here throws it off a bit so we pretty much have that.

What happens over here? We’re going to move this up, let’s edit that page and move the heading around here for a second. We want it below the headline. Let’s just change our design options here for that. Thesis Design Options and Post Image and Thumbnails, flush left below the headline, hit save, see if that fixes it. It does, we’ve got that part of it done.

Add Color to the Sidebar

The next thing I want to do is add color to this sidebar. If you inspect this element, you might be tempted to come over here to sidebars and give it that background color of gray. The problem with doing that is that sidebars don’t go all the way to the bottom of the page necessarily. You end up with gray only part way down unless your sidebar was as tall as your content is.

Instead of doing it as a background color for sidebars, we’re really going to do it as a background for the content box. Again, in a very similar way that we did the footer, we’re going to have a background color and a background image for the content box.

We’re going to take that background image, it starts off from the top left corner, it’s going to repeat in the Y direction only, it’ll go all the way down to the bottom of the content box and keeping this appearance of the sidebar continuing down even if there’s no content here.

Let’s just to try and figure out how big that ought to be, that’s pretty much the size we wanted and it looks like it’s 322 pixels wide. Let’s just move up here a bit further and just double check that. I think that’s probably right. We’re going to make it 322 pixels wide and we’re going to make it this color right here and that color is ef005.

Create a Content Sidebar Background Image

I’m going to create a new image and I’m going to call it content-sidebar-background. It’s going to be 322 pixels wide, 20 pixels tall, 72 pixels and say start. Then we’re going to fill that with that color so now we have an image exactly the right size with the right color. We’re going to save it, see if we save it as PNG-24, everything else is a PNG, it’s only 172 bytes so that’s good enough. We’ll just save as content-sidebar-background.png.

As content box, we’ve got background color but we’re going to take those 3 things and paste them. I need to go grab that image and drag it over here, that’s content-sidebar-background, change the name of it. Background color will be ffffff, it’s going to repeat in the Y direction only so it’s going to repeat vertically and instead of bottom center, it’s going to be top left.

Give the Sidebar Background Color

We’ll go ahead and save that, upload it and we’ll come over here to images and we’ll upload that, come back over to design options, save it, refresh it. What I really meant was top right so we’ll come back over and say top right, save it, upload it, refresh it. Pardon me, I just did the image, I didn’t do the style.css so refresh it and there we go.

Now we have that sidebar color all the way over to the right. It doesn’t really matter how big the content area is, the sidebar is always going to be big enough to cover the whole thing. That’s the trick to getting a color that fills the sidebar even when there’s not enough content to fill the sidebar, it’s to put it as a background image in content box.

I forgot to finish styling this heading here so we’re going to do that first, just taking a look at what it looks like. Right now, it has some space here and it’s got a dotted border with the color under it, that’s what we need to adjust here. Let’s refresh this page and we’ll start from here.

Styling the Headline Area

First off, this is the headline area so we’ve got our div class headline area h1 and what we’re going to do to that is give it a bottom border. Let’s scroll down here to the bottom and let’s say, .headline_area h1. Let’s give it a border so it’ll be border-bottom:2px dotted and we’re going to give it a gray color, let’s just look at that gray color for a second. I’m going to have to zoom in on this, get that color, 84a1af. Come back over to this and #84a1af;. Now we’ve got the border.

We just need some space below it and I think what we’re going to do there is give the post box a bit of bottom margin to see if that does the trick here. Say, margin-bottom:1.1em; that did the job. Is that about right, 1.1em? Yeah, that looks about right. Let’s just take it down a bit, not quite, 1em. That’s the rest of the heading. Come on over to this, that’s inside of our content area so we’ll keep it there and paste that .headline_area h1, save it, upload it, save it and refresh it. There we go, we’ve got our heading done.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment