Help Styling Pagination

[kavikalyn]

Hello, I built a site at http://JapaneseEmoticons.net using the basic Genesis theme and the Design Palette Pro plugin.

My home page shows the latest blog posts and the pagination at the bottom looks exactly how I want.

I have another page here: http://japaneseemoticons.net/all-japanese-emoticons/

Because the page was so huge I had to break it up into multiple pages using <!--nextpage-->.

How can I change the styling on the pagination on this page so it matches the nice bigger boxes on the homepage?

I figured out I can use CSS and tried copying and pasting bits of CSS I found on the Internet into the Freeform CSS section of the Design Palette Pro plugin and playing with that a bit and I was able to make some changes but I have no idea what to put to make it look the same as the homepage.

Thanks in advance for any help.

http://JapaneseEmoticons.net

[jbergen]

Hi,

The reason the pagination links for your single post entry don't look like those for your post archive is because the CSS used to style the archive pagination doesn't apply to entry pagination. A quick fix would be to add the following CSS rules that apply to entry pagination to your child theme's style.css file. Here's the code you can add below the existing .archive-pagination rules in your child theme's style.css file, line 1145:

.entry-pagination {
	display: inline;
}

.entry-pagination a {
	background-color: #5C98B9;
	color: #fff !important;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	padding: 8px 12px;
}

.entry-pagination a:hover,
.entry-pagination .active a {
	background-color: #BD363F;
}

This is what that will look like:

If you want to make it look even closer to the post archive pagination, you might want to look into Styling Page-Links in the codex.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[kavikalyn]

Thanks so much for the help! It's almost exactly how I'd like now.

Is it possible to make the current selected page in a red box exactly like the mouseover link instead of just a plain text number?

Is it also possible to add in next page and previous page buttons like on the homepage as well?

I tried reviewing that link but I don't really understand it...

Thanks again.

[Author]

Posts