[Sleek Theme] Customize Single Post Pagination

[wichtounetParticipant]

Hi,

I’m using the Sleek Child Theme. When I use <<!–nextpage–> on an article, the post is splitten in pages and the pages are displayed.

However, I don’t like the display of the pages:

Pages: 1 2 3 4

It is too small and it lacks previous and next pages links.

How can I customize it ? The ideal would be to use the same style as the Sleek theme use for the blog page pagination. Is there a way to achieve that ?

Thanks a lot

[SusanModerator Post count: 3258]

Can you please provide a link to your site so I can take a link? Thanks

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[wichtounetParticipant]

Hi,

Thank you, but I finally found a way to fix the problem. I unhooked genesis_do_post_content() and replaced the call to wp_link_poages() with new parameters and customization for the style.

Baptiste

[SusanModerator Post count: 3258]

I’m glad you were able to resolve the issue – I’m sorry no-one from the forum responded to your post until tonight.

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[theateradvisorParticipant Post count: 3]

New solution for anyone who is looking for them. We used the following code placed at the bottom of style.css:

/*The section below styles the whole post page numbers area*/
p.pages
{
font-size:18px;
display:block;
clear:both;
padding: 3px 0 5px 5px;
}

/*The section below styles the post page number links and visited links*/
p.pages a,
p.pages a:link,
p.pages a:visited,
p.pages a:active {
padding: 4px 8px !important;
margin: 3px !important;
text-decoration: none !important;
border: 1px solid #C8C8C2 !important;
background: #FCFCFC !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important;
color: #0088B3 !important;
}

/*The section below styles the post pagination link while hovering mouse over over it*/
p.pages a:hover {
border: 1px solid #a7a7a3 !important;
color: #fff !important;
background: #0088B3 !important;
}

 

You can adjust the font size, color etc very easily using this code, and it looks nice.

 

[Author]

Posts