Build Your Own Business Website header image

Customize Next & Previous Posts Links – Part 5 – Style Custom Post Navigation

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.

This is the 5th in an 8 part series that shows how to customize the Next Post/Previous Post links in Thesis. Now that we have created our own next post/previous post image links we are going to add css styles to them so that they will be properly aligned. We use the float property to accomplish this and discuss how it works.

Video Transcript

Okay so the next thing then to do is to style this so that we get our arrows where we want them. And so, the way we style this is to… let’s just go to Firefox. We’re going to use the Thesis structure. That’s why we copied and pasted all that Thesis stuff really was to use Thesis logic for determining whether or not an arrow should be displayed. And then also to use the Thesis HTML structure so that it’s easier for us to create the styling which makes this work.

So if we look at our… inspect the element here, you can see we’ve got this previous next post nav and the previous arrow has a class of previous. The other arrow doesn’t have a class of anything. So what we’re going to do then is let’s edit CSS, go to our custom CSS and let’s see… content. Okay, let’s just do it at the top. Grab that stuff and this is going to be previous post next post… previous and next post. And then it’s not going to be teaser row but it is div class previous next post nav, full copy, control V… let’s see, this actually gets a period there and they’re joined together in the same class so it’s div. So let’s say .custom previous next post nav p and then we’re going to make things float right. And the reason is that p is this one right here, right? And we want it to be over there so we’re going to make it float right and then we’ll take the p with the class of previous and we’ll float it left and one here and one over there.

Okay so float: right semi-colon. Okay you can see they’ve both jumped over there. Now we’re just going to copy this because they both actually are p tags for that but this going to be p .previous. For this right here, p class previous and we’re going to float that left. And now you can see that without too much difficulty, you have a previous and a next image here.

Okay so I’m going to go ahead and copy that to our custom CSS file. Now if these are too far apart, right… let’s just say you wanted to space them a little closer, you could say margin right: 50 px and then margin left: 50 px. There we go, so now they’re a little closer together and go ahead and copy this.

Pam asks, “Shouldn’t I have given this left one a smaller percentage of width?” And the answer to that is no. What the float does is the float reduces the element down to its minimum size. And so now for example, this is… that’s all the bigger it is and the reason why it’s only that big is because the float brings it all the way down to the minimum size. If this was not floated left, let’s just screw this up for a moment and we look at it now… oh because it’s floated right, it doesn’t matter. I’d have to undo everything in order for you to see that. But the thing is that when this floats, it drops down to its minimum size otherwise, it takes up the whole space. That’s what you were wondering.

Okay so now we have this set up with the images and the next thing we’re going to do is add this random link. Let’s see, we’re going to save that and then I want to open up… let’s see, categories, custom CSS and then we’re just going to come down here and control V and save it. Okay, might as well upload it too, custom CSS, upload. And what the heck, let’s check it in Internet Explorer, make sure it works.

Works fine in Internet Explorer, works fine in Firefox. Undoubtedly, it works fine in Chrome. It does, okay.

0 Comments… add one
0 comments… add one

Leave a Comment