Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 23 – Style the Related Posts Display

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.

Now we’re going to style the related post display. Under our CSS and let’s see, this is Query Box Post Format, yes, we’re just going to do one more of those. Post Formatting, it’s going to be Related Posts and then it’s going to be .query_box.related.

The main thing we want to do here is make it, let’s see how wide is our stuff here, that is 513 so we want to put 3 of them in there. If we’re going to put 3 of them in there and have them equally-spaced, let’s call 160 so we’re going to give this a width, 165 and actually, we’re going to make them float:left.

Where did I say that was called? I’ve already forgotten, yeah, related_posts_box. So then we come back over and take a look at this, we should have that stuff kind of floating, not just about. This will look especially good, let’s add a heading to this so let’s get a new text box, call it Related Posts. We don’t need an HTML wrapper, we can disable the automatic p tags because this is going to be an h2, actually, this is not going to be an h2.

Add a Class to Related Posts

This is going to be a class we call faux-headline, it’s going to say Related Posts okay, Related Posts, and actually, I don’t think it can be inside of this, it’s going to have to be outside down here below that. The other thing I want to do is drag the Comment Form and Comment Head out of the Loop, it doesn’t need to be inside the Loop like that. Let’s see how that turns out, okay, little tiny, related posts, 6 Min Workout, I still need to close that.

That’s what it is, because these are floating:left, there is room to first off, to jump up beside it. You know, I almost feel like this needs to come out of the Loop also, if that comes out of the Loop, we’ll be better off and for that matter, we can drag this in our Loop. I think now, what will happen is this stuff should clear, I mean the float should be cleared so stuff doesn’t jump up beside it. No, it still isn’t, is it?

Well, we’re going to do one other thing then. Actually, we’ll just make sure Comment Head clears so we’ll come over here to CSS, is our Comment Head in here? Comments Intro, doesn’t look like it, Comment Head. Okay, well I’m just going to come up here at the top and add that to it then so #comment_head{clear:both;} and it will clear off the float so that stuff doesn’t sit funny like that. Not yet, does it?

I see, Comment Head is actually empty, it doesn’t have anything in it at all so it’s really Comment Form that should be clearing both, okay. Let’s see, let’s just do that one more time, #comment_form{clear:both;} okay, there we go.

Add a Featured Image to Related Posts

Now, we’re going to want to come in here and style this stuff as well. It would look way better if both of our pieces had images. So let’s edit this post and we add a featured image to the post and the image that it’s using is that notebook one so we’ll set that as the featured image and update. Then let’s view the post.

We have the Mommy Blog which also wants to do the same thing. Edit the post and so we’re going to set that featured image to Mommy Blog, that’s a celeb so we’ll pick this one then. So we’ve got our 3 sitting properly then we’re just going to change this font size down and we’re going to center this stuff.

If we come back over to our Skin Editor and we look at our Related Posts thing we created here. The Headline, that’s going to take the Headline down to 18 pixels, let’s take the line height down to 28 pixels and then let’s center the text, see how that looks. There we go and then we should just really quickly come up with a size for this faux-headline and how big is this stuff, 28 pixels.

If we come over here and just create another one, .faux_headline{font-size:28px; line-height:36px; margin:20px 0;} so we’ll just give ourselves something there for that faux-headline. It must have been faux hyphen(-) headline instead of faux underscore(_) headline, it was. Every little thing counts, okay so there’s our Related Posts with our 3 there in the middle and our regular post and if we go back and look at the one that we were actually looking at to start with.

Our Toddlers Education, we’ve got texts, image, related posts, comments, everything all laid out so that is the default the posts template. Now, what we’re going to do is create the Toddlers Post Template and assign and then we’ll do that for other stuff as well.

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