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 7 – Part 9 – Add Posts Page CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The last thing we have to do here is to add the CSS to the posts page. Obviously, we’ve got these going on here but it’s not exactly the way we want it to look so we need to add our styling. Let’s open our style.css page and we’re going to start off by adding some images to this.

Add Images to style.css

You probably don’t need me to show you how to take those images out of that PSD file anymore so I’m not going to show you that but I am going to copy those images from some place else. These are the images that we need. We need this image here for our label and we need this image for our tags. We’re going to copy both of those images to our site.

I’m going to start that off by going to images, that is the bubble and the tag, copy them then I’m going to come down and place those in our images folder. Upload those to the site, both tag and bubble. Now that I have those, I can actually write some code for that. Copy this from my clip file.

Faux Page Title

I’ve got the faux-page-title and we’re going to give it some margin, a font-size, a font-weight, color, bottom padding, padding-left, and that dotted bottom border. We’re going to use that image bubble.png, we don’t want that to repeat and there’s a bit of adjustment I felt like I had to do so I’ll change the background-position to 0 and 2. Save that, upload it and take a look at it.

I’m actually doing this slightly differently than I did when I created this so it might now work exactly the way we want it to. Naturally, we have to go to Thesis Design Options and save this in order for that CSS to be applied. What I really want to do here is add another tag to this and that’s what I did differently. We’re going to copy this so I’m going to make it h1, I’m going to get rid of the font-weight and color in this and I’m going to get rid of the margin here and get rid of everything else.

We have a setting for the faux-page-title and a setting for the h1 which will actually make it behave better. When I originally created this, I didn’t make that faux-page-title an h1 tag which meant the post page didn’t have an h1 tag which was I think a mistake. We’ll upload that, we’ll recreate it and we’ll test it. There we go. Now we’ve got our h1 tag looking the way we want.

The next thing we need to do is get rid of a bit of this space here plus I want to add a dotted line to the bottom of this, that is the post box.

Set Up the Post Box Top

Now that we’re done with our faux-page-title, we’re going to add something to our post_box. We only want this post_box to happen on our Posts page so we are adjusting the post_box top by making the padding 0 which is the post_box.top is the very first post on a list of posts.

On our Posts page, we’re also adding this border-bottom:2px dotted with the same color as we elsewhere for the bottom of the post_box. We’ll upload that, save it and refresh it.

Some styling has to happen to the heading to get rid of the rest of this extra padding. Actually, no, that’s not being applied. What did I do wrong here? Posts page, post_box.top, posts_page, that’s the class I’ve added to that. Well, let’s see what’s going on here. I never saved this, save it. Upload the saved version, save it, test it, there we go. Now we’ve got the right kind of spacing at the top of this, we’ve got our dashed line here at the bottom.

Style the Headline

The next thing to do is to style our headline. Now, we have both h1 and h2 tags that need to be styled so that’s what we’re doing here. We have our headline headline_area h1.posts and our headline_area h2.posts.

We’re going to increase the font-size to 30 pixels, we’re going to make the  font-weight bold, we’re going to use this light blue color and we’re getting rid of the bottom-border that automatically happens in the other headline areas. We added the bottom-border to our standard headline area so for our Posts headline areas, we’re going to get rid of that bottom-border.

Apply Color to the Link

The other thing is that because the h2 is actually a link, we want to apply this color to the link as well so we’ve got our h2.posts a, it’s going to get that color. Go ahead and save that, upload that, save it and refresh it. Now we have our color and it stays this color. If we jump over to our regular post, it ends up with that color, that’s an h1 tag, it’s not a link anymore so that’s working.

Style Headline Meta

The next thing we want to style is this headline_meta. We’re going to specify the font-size at 13 pixels, font-style is normal, we’re going to give it this color, give the link part of it that bright blue color again and make it bold but we don’t want any border under it. For whatever reason, Thesis places a border under headline_meta links and we don’t want to exist here so we’re going to say border:0px so it doesn’t show up.

Under that abbreviation tag, it’s got an all caps text-transform automatically so we’re going to make that text-transform:none and a letter-spacing down to normal so that we get the style that we want. This is fairly straight forward, right? Go ahead and save that, upload it, refresh our CSS file and test it. There we go, Posted in: Working with an Architect on February 4, 2012. Looks exactly like what we want it to look.

Style the End

The last thing we have to do is style the end. There’s a bit more to do there because we’ve got several things happening but it’s all still pretty simple. We start off by eliminating the bottom-margin that exists down there so we’ve got our my-post-endings div. We’re adding a bottom-margin so we get some space to work with. We’ve got tag list that we call tags-in-posts.

We want this not to fill up the entire width of the post_box when there’s not enough room for it to stack. We’re giving it a max width of 330 pixels and we’re floating left so that the list starts with the left, it grows along here until it can’t grow anymore because it’s at 330 pixels, then it drops back down again and grows this way.

Style the Tags

There’s lots of tags, you could have a number of rows below that all inside of the same div. We’re going to make the font-size 13 pixels, give it that left padding so that this image that we’re using shows up beside it and that background-image is no repeat, it’s position is 0 0, we’re going to make the minimum height of this thing 30 pixels and again, like I said the max width is this 330 pixels.

For the tag links themselves, we want the font-weight to be bold and we want the color to be that bright blue color. We’re going to look at that first and we’ll look at the buttons so we’ll save that, upload it, refresh the CSS file, refresh our page and we’ve got our image, tags and these things sitting over here.

We have our two links that are stacked over beside it. These two links are going to become buttons over here off to the side. If we go to our Read More page, we don’t have that second button, it’s just pushing over here against the left so that’s the next thing for us to style.

Style Link Buttons

First off we have this div that is our link buttons, that’s what our buttons are wrapped in so we’re going to give that a width of 230 pixels and we’re going to float that div right. That whole container now floats to the right next to the container that is floating to the left.

Then we have our two different styles of buttons, we have our comments-in-posts button that we want inside of div.link-buttons to float all the way to the right then we have our read-more which we’re going to float right as well but we’re going to give it a right margin of 5 pixels.

Our read-more link is going to have this background color, that bright blue and its text color is going to be white, it’s going to have no text decoration but it’s going to have padding all the way around it. This button applies both to comments-in-posts a and read-more a, it’s the same style of button in both places.

Style the Hover

The same thing is true with our hover, we’re going to change our background-color a bit but our hover color is going to stay white. The reason why we’ve specified these colors in both places here is because Thesis has a hover color that would overwrite this and we don’t want that overwrite, we want to make sure it stays white.

These are our buttons, save the buttons, upload the buttons, refresh our CSS file and refresh this. Now we have a Read More tag, a 1 comment tag or a 0 comments tag. When the list is too long, it drops down below just like we want it to do and because we gave this a maximum width.

I do have to change the sidebar, we’ll get back to that next week. I’ve got sidebars styling that’s not working properly but our buttons nevertheless, are behaving properly that is they drop down below this.

If we go look at our specific blog post, we’ve got a 1 comment but we don’t have a read-more link there anymore so this always ends up looking the way you want it to look.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment