Weekend Project: Styling pagination links with Custom CSS

June 10, 2011

Time for another handy CSS tip! This time, we're styling the pagination links that direct readers to more posts from your main page, as well as category and datebased pages. The first step is making sure you have text filled in for those links in Blogs > Settings > Posts. The link text can be anything you wish - just keep in mind that you want it to be clear to the reader that there are more great posts to read if they click those links!

Your links probably look something like this currently -

Useful but boring, right? That's where the Custom CSS feature comes in - you can style the links to make them bigger, bolder, a different color, add a background color, or even get rid of the text completely and use images instead.

A simple change is to make the text bigger and bolded, with a different link color. It will look like this:

The CSS for the above:

.pager-bottom {
font-weight: bold;
font-size: 18px;
}

.pager-bottom a { color: #994466; }

Maybe you'd like to put a background color behind the links, like this:

The CSS for the above:

.pager-bottom {
padding: 5px;
background-color: #334488;
}

.pager-bottom, .pager-bottom a { color: #FFFFFF; }

You can set a background color and a border, like this:

The CSS for the above:

.pager-bottom {
padding: 5px;
border: 1px solid #CCCCCC;
background-color: #EFEFEF;
font-size: 14px;
}

.pager-bottom, .pager-bottom a { color: #000000; }

So far we've styled the entire pagination area but you might want to style the back/next links separately. First, you'll want to hide the separator between the links and the chevrons that act as arrows. The code is:

.pager-bottom .separator, .pager-bottom .chevron { display: none; }

For a look that's a little fancier, we can style the links to use different colors to draw more attention to the "More Posts" link and round the corners for a little extra jazziness, like this:

The CSS for the above looks like:

.pager-bottom .pager-left a {
color: #FFFFFF;
background-color: #999999;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.pager-left { margin-right: 3px; }

.pager-bottom .pager-right a {
color: #FFFFFF;
background-color: #000000;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

You can also make the background color change when a link is hovered over, which looks like this:

You'd just include this CSS with the previous code:

.pager-bottom a:hover {
color: #FFFFFF;
background-color: #aa3366;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Let's scrap the text completely and use images instead. The end result looks like this:

You can upload your images in Library > File Manager so you can link to them in the CSS. You'll also need to make a note of the width and height of each image. The code for my image links above looks like:

.pager-bottom .pager-left a {
float: left;
display: block
min-height: 34px;
width: 102px;
padding-bottom: 15px;
text-indent: -1000em;
background: url(http://example.typepad.com/blog/back-image.gif) no-repeat;
}

.pager-bottom .pager-right a {
float: right;
display: block;
min-height: 34px;
width: 180px;
text-indent: -1000em;
background: url(http://example.typepad.com/blog/moreposts-image.gif) no-repeat;
}

.pager-bottom .separator, .pager-bottom .chevron { display: none; }

The text-indent: -1000em code hides the text so it doesn't show over the background image, so make sure to include that.

There are endless possibilities available to you with the Custom CSS feature. I hope this article gave you some ideas of how you can customize your blog just a bit more and make it extra special.

12:03 PM in Weekend Projects | Permalink | Comments (2)