Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 18 – Style the Archive Post Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

We’ll save that Archive template. And now we’re going to style the Archive Post Box. Let’s come back over here to the packages and we’re going to go to our Main Post Box. We want an Archive Post Box so Post Formatting, add package Archive Post Box and we’ll leave it like this for the moment.

Set Options for Archive Post Box Package

Under our options and under our font setting, 375 was the width of the text. The headlines were 18 and the font weight was bold. We’ll let all the rest of those options be automatic. Save the CSS.

Then let’s get the query box post format. I’ll copy the Additional CSS. Essentially we want the same information to apply to our Archive Post Box although instead of saying query box here, it’s going to be post box.

Actually, what I really should have done is consolidated those, post box headline and post box headline a. If it’s not a link, I still want it to be that color. But it’s still not working for us because we we’re still not looking at our Toddlers. So to fix that I’m going to change this menu.

Remove Toddlers from Main Menu and Add to Category Menu

I want to come over here to menus, main menu. Is that right, is that what’s happening here so if we look at UberMenu for a second, so the main menu is the UberMenu, okay.

So then what we’ll do is we’ll come down here to Todds and we will remove it and then we’ll come up here to categories, to Toddlers, we’ll add it to the menu up above Kids. We’ll change it to Todds, save that menu. That doesn’t work inside the canvass but now when we go to Todds, we’re actually going to the category, there we go.

Review the Style Changes

Let’s come over to our skin editor just to make sure we got this right, Post Box, Archive Post Box, yep that is okay. Let’s save the CSS. The styling is almost done. Archive Nav must have a border but we can muck around with that in a little bit.

Set the Archive Type Post Box from the Regular Post Box

Why is this border existing, post-box, order-top, we want to get rid of that. Actually, what I think we really need to do is set aside the archive type post box from the regular post box.

The best way to do that is to come over here to the template and we’re on the Toddler Archive, on our Home Post Box and we’re going to say archive here under HTML class. Instead of home_post_box, it’ll say archive_post_box that’ll be the class then we will change our CSS so that this Archive Post Box also has that class.

Modify Additional CSS Styling

I also have to change those additional CSS items. So our headline in this case, should have the color, .headline a, .archive_post_box. Obviously I’ve just got a little something wrong here. Somebody knows this is 35 instead of 375, thank you. That’s the other place I need to change right there, .archive_post_box.headline a there we go so .archive_post_box.headline, .archive_post_box.headline a, headline a:hover okay.

Set Featured Image for Toddlers Education

Once you get this down for your first one, all the rest of them just fall into place. Obviously, Toddlers Education needed a featured image and so let’s come over here to edit post and set a featured image. Look for Toddlers Education, we’ll use that one, set featured image.

Now if we refresh this page, we’re going to get Toddlers Education then the Toddler Flu Symptoms and everytime we keep on adding a Toddler post to this, we’ll end up with something else so for Education, we’ve just got this and for Health, we’ve got this. We don’t have anything under Pottery Training currently, we don’t have anything under Child Care currently but now we’ve got our Toddlers stuff.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment