Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 15 – Style the Featured Posts

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’re continuing here to work on styling the featured posts on the front page template. And we’re not too far from this. We need some more space here and we need some more space in between each of these and we need the border below each one so that’s really the next thing we’re going to do.

Show Featured Posts Using Query Box

Let’s come back over here to the style and skin editor, CSS. He’s got some of these styles already there, #featured-stories so we could just copy that color and come over here to our post format and say .query_box and we got a border-bottom.

Let’s give it a margin-top of 24px and a padding-bottom of 10px, let’s see what that looks like. Here we go, so we’ve got a nice separation there, it’s pretty much it. We’ll get the rest of this stuff taken cared of here next time but now what happens is, you end up with these things automatically showing these featured posts because of that query box.

Let’s just delete that content. We’re deleting all these featured stories because we don’t need any of this content here anymore. Hit update, view our page and now, we’re still not quite there, maybe I didn’t save this CSS here.

Finished Result: Automatically Generated Featured Posts

There we go, so now we have a page of automatically generated featured posts on the front page and this set of posts will change based on which ones you have selected as being featured. You can use a query box to do all kinds of things and we’ll look at other ways to use a query box on other pages here in a moment.

0 Comments… add one

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

Leave a Comment