Build Your Own Business Website header image

Customize Next & Previous Posts Links – Part 7 – Replace Random Post Link Text with an Image

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 7th in an 8 part series that shows how to customize the Next Post/Previous Post links in Thesis. Now we are going to replace the link text created by the Random Post Link plugin with an image. Finally we’ll add the CSS styles to place the image properly – using absolute and relative positioning.

Video Transcript

So now the next thing we want to do however, is rather than having this be a random… having this word random post, we want that to be a random post image. So we do something very similar to what we did before.

Pam asks, “Can you put parameters on the random? That is, can you select random from or random from post within a certain date?” You know, I don’t think you can. Let’s look at the documentation here quickly. Fact…no. You know, it doesn’t look like it. It looks like the only thing it’s going to do is it will… what it does it is grabs a random link… a random post from off your site and then it also puts a cookie in the web browser so that it doesn’t serve that random post again the next time, right? So it checks against that cookie. However, you probably could hack the plugin to change that so that instead of post, it was a post type or instead of just a post, it was post within a date range or something like that. I wouldn’t be surprised if hacking that’s not particularly difficult.

But any case, back to this. You can see here from the directions that you can also enclose in quotation what you want the link text to be rather than being the random post. You could you know, for example say feeling lucky or whatever. But what we’re going to do is we’re going to put the image URL in here. And so, in order for us to do that, we need to go back over to my Media Library and this isn’t really a random image. This is really a new button but it was quick and easy to grab so I figured I’d grab it. Copy and then if we go to this and here’s that place where you would put the extra text. So we’ll put our double single quotation marks and then we’ll write an image tag for HTML, imgsrc equals double quotes and then paste that URL and then double quotes. And then title equals and then we may as well say pick a random post or view a random post.

Okay and then we’ll close out the image tag and then we’re going to save this and we’re going to upload it and we’re going to test it. Okay so now, I’ve got my little new button here.

So the next thing we’re going to do is we’re going do that absolute positioning, relative positioning thing that I did a seminar on a few weeks ago and if you want to see what I’m talking about there, please feel free to go to the live answers and look under position property. I’ve got a little seminar on how to use the position property but that’s what we’re going to use to move this up to right here.

So we come back over to custom CSS and now, here’s my next and previous post and this is my byob random image. So I’m going to copy that and I’m going to say… pardon me, I’m going to say… I’m going to move this div itself so I’m going to say div dot and then paste the name so div .byob random. And actually, if you recall, what I have to do is I have to make… in order for this absolute positioning to work properly, I have to make its container object, I have to give it a position of relative. And it’s immediate container object actually happens to be content. So we’re going to start off with div id content and give it a position of relative.

So… you know, I can’t type anymore. .custom #content and then 1, 2, 3… position: relative semi-colon. Okay so now that’s a position relative so now we can give this a position absolute. Position: absolute semi-colon and then I’m going to say bottom colon… let’s say 30 pixels. Oh well, let’s move it down to… let’s try 20 pixels. Pretty close, okay and then I’m going to say left: 250 pixels…. 300. Okay, 280. So you can see what I did was position absolute and that is… it’s going to be… and an absolute position relative to the content, div id content. And so relative div id content’s bottom, I want to go up 20 pixels and relative to div id content’s left side, I want to move left over 280 pixels. And you know, it almost looks like 290…. 285. I’m picky. Okay so we moved it to the left there and then let’s just make sure the height is right. Yeah, the height’s right.

Okay so now we’ve got our buttons here. I’m just going to go ahead and capture that and come back over to our custom CSS and paste it. Previous and next posts, just replace all of that text. Those of you who have been with me for a while will recognize that procedure where I just copy all of the affected sections, CSS sections and just replace the whole section rather than trying to copy and paste little bits. That way you don’t forget anything. And then we’re just going to refresh custom CSS and then we’ll come back over and let’s see, we’ll close that, come back over here, blog.

Okay so there we go. We’ve got our previous post, we’ve got a random post, and we’ve got a next post and we used images instead of text for that.

0 Comments… add one
0 comments… add one

Leave a Comment