Tip: Styling Pagination Links with Custom CSS

Important Notes
This tip requires using Custom CSS, which is a feature available to Pro, Premium and Business Class subscribers. You can read more about the feature here.
Pagination is not available to all users at this time. We are working on making this feature available to all users as quickly as possible.
Styling Entry Pagination Links
The container class for the pagination link area is pager-entries. This class can be used to add a background color or image for the whole pagination area, for example..pager-entries {
background-color: #dddddd;
padding: 5px;
margin: 0;
}
Styled pager-entries.
To style the left and right pagination areas, use pager-left and pager-right:.pager-entries .pager-left {
background-color: #bbbbbb;
padding: 5px;
}
.pager-entries .pager-right {
background-color: #777777;
padding: 5px;
}
Styled pager-left and pager-right.
You can also style the left and right pagination links. This is helpful if you want the links to use a different color or style from the other links on the weblog..pager-entries .pager-left a {
color: #FFFFFF;
text-decoration: none;
}
.pager-entries .pager-right a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
Styled pagination links.
The pagination links are separated by a which can be styled using the separator class. If you'd like to hide the separator, you can use display: none..pager-entries .pager-inner .separator {
display: none;
}
Below is an example of all of the above classes together, as the code would appear in Weblogs > Design > Custom CSS..pager-entries {
background-color: #dddddd;
padding: 5px;
margin: 0;
}
.pager-entries .pager-left {
background-color: #bbbbbb;
padding: 5px;
}
.pager-entries .pager-right {
background-color: #777777;
padding: 5px;
}
.pager-entries .pager-left a {
color: #FFFFFF;
text-decoration: none;
}
.pager-entries .pager-right a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.pager-entries .pager-inner .separator {
display: none;
}
Putting it all together.
Styling Comment Pagination Links
To style the pagination links for comments, you would use the same classes but replace pager-entries with pager-comments. Example:.pager-comments {
background-color: #dddddd;
padding: 5px;
margin: 0;
}
.pager-comments .pager-left {
background-color: #bbbbbb;
padding: 5px;
}
.pager-comments .pager-right {
background-color: #777777;
padding: 5px;
}
.pager-comments .pager-left a {
color: #FFFFFF;
text-decoration: none;
}
.pager-comments .pager-right a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.pager-comments .pager-inner .separator {
display: none;
}