Site logo

Archived topic

pagination style?

15 replies · Started by albabes on October 4, 2017

Viewing posts 1–15 of 16

How to style pagination Tom?

Assuming this is the css:

.paging-navigation:after,.paging-navigation:before{content:".";display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}
.paging-navigation:after{clear:both}
.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.site-main .paging-navigation .navigation{margin:0};

I remain baffled.
Thanks Tom
AL

Hi there,

You definitely don't want HTML like <br> in your CSS. What style are you looking for?

What do you want them to look like?

Hi Tom
Centered, with padding-top?

I installed Code Snippets Tom, added below, via run everywhere.

add_filter( 'generate_pagination_mid_size','tu_increase_pagination_numbers' );
function tu_increase_pagination_numbers() {
return 3;
}

Nothing changed.
http://computerdude.me/barter-for-flat-screen-tv/

Like this?:

.post-navigation {
    text-align: center;
    padding-top: 20px;
}

Man, ur up early, thanks Tom!

That Css changed it on individual pages, but not on the blog page? Plus can both items be on one lines?

PS. what is the reason the "add_filter "didn't increase font size?

Thanks

These links only display on single posts - do you have an example of them on archive pages?

You can do this:

.post-navigation {
    font-size: 20px;
}

.post-navigation .nav-previous, 
.post-navigation .nav-next {
    display: inline;
    padding: 0 20px
}

.nav-next .next:before {
    display: none;
}

.nav-next .next:after {
    content: "\f105";
    font-family: FontAwesome;
    padding-left:10px
}

Thanks you both. Fantastic.

Glad we could help! :)

Need some help with blog (Previous) - (Next) Navigation

I created a a custom post type with pods and added the following code in the single page template
to display the navigation

And added the following CSS to the Childtheme/Customizer/Additional CSS

.post-pag-wrap {
padding: 5px 0px;
box-sizing: border-box;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
width: 100%;
max-width: 600px;
margin: 10px auto 25px;
}
.post-pag-container {
width: 49%;
padding: 0px 5px;
box-sizing: border-box;
display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
vertical-align: top;
min-height: 50px;
}
.post-pag-container h4 {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
padding: 0px;
margin: auto;
margin-top: 5px;
margin-bottom: 0px;
}
.post-pag-container.prev {
text-align: left;
border-right: 1px solid #bbbbbb;
margin-right: -1px;
}
.post-pag-container.next {
text-align: right;
margin-left: -2px;
}
.post-pag-container.prev h4 {
text-align: left;
}
.post-pag-container.next h4 {
text-align: right;
}

My questions
How can I add this navigation to my normal Blog Page and post pages?
Where do I need to add the code?
How can I make it to show all Blog related pages in the same way?

Thanks
Casper

Hi there,

Any chance you can open a new topic?

Thanks!

This archived topic is closed to new replies.