- This topic has 15 replies, 4 voices, and was last updated 6 years, 6 months ago by albabes.
-
AuthorPosts
-
October 4, 2017 at 1:07 pm #397505albabes
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
ALOctober 4, 2017 at 2:30 pm #397553LeoStaffCustomer SupportHi there,
You definitely don’t want HTML like
<br>
in your CSS. What style are you looking for?October 4, 2017 at 2:48 pm #397571albabesThat was mistake, took out.
Want to style the pagination in the GP Theme Exhibit.
https://i.imgur.com/ULgN4ua.pngOctober 4, 2017 at 7:13 pm #397645TomLead DeveloperLead DeveloperWhat do you want them to look like?
October 4, 2017 at 8:20 pm #397663albabesHi Tom
Centered, with padding-top?October 4, 2017 at 8:51 pm #397674albabesI 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/October 4, 2017 at 11:14 pm #397717TomLead DeveloperLead DeveloperLike this?:
.post-navigation { text-align: center; padding-top: 20px; }
October 5, 2017 at 7:30 am #397874albabesMan, 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
October 5, 2017 at 9:34 am #398013TomLead DeveloperLead DeveloperThese 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 }
October 5, 2017 at 11:22 am #398052albabeshttps://i.imgur.com/yGymQvo.png
Single post page showing back/next link, set as top/bottom. Id like it (if possible) as /left-right.
Another ex: http://computerdude.me/barter-for-cargo-bike/
October 5, 2017 at 2:20 pm #398138LeoStaffCustomer SupportI’m not seeing Tom’s code here being added? https://generatepress.com/forums/topic/pagination-style/#post-398013
It should change them to side by side.
October 5, 2017 at 10:56 pm #398273albabesThanks you both. Fantastic.
October 6, 2017 at 12:04 am #398293TomLead DeveloperLead DeveloperGlad we could help! 🙂
October 10, 2017 at 11:22 pm #401074CasperNeed 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<?php previous_post_link(‘
<span>Previous</span>
<h4>%link</h4>
‘, ‘%title’, false);
?><?php next_post_link(‘
<span>Next</span>
<h4>%link</h4>
‘, ‘%title’, false);
?>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
CasperOctober 10, 2017 at 11:42 pm #401083TomLead DeveloperLead DeveloperHi there,
Any chance you can open a new topic?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.