Paginated Post Styling Like Twenty Thirteen Theme WordPress
- SOLVED
I split my posts in multiple pages and would like to edit the page numbers at the bottom of the page.
Now the numbers are all plain, here is what it looks like now: [[LINK href="http://listarama.com/10-interesting-facts-about-urine/"]][[/LINK]]
But I would like to get the numbers styled (something like in the Twenty Thirteen theme) and centered.
By the way, I'm using the Metro Pro theme for the Genesis Framework.
I'm sorry about that, I thought I posted the link, here it is
http://listarama.com/10-interesting-facts-about-urine/
Answers (4)
Fahad Murtaza answers:
Can you copy-paste the current CSS for navigation?
Fahad Murtaza comments:
Or just your website link and the URL to page which has the navigation?
Fahad Murtaza comments:
OK
I am doing the CSS now.
Fahad Murtaza comments:
OK
I just finished the CSS and here it is
Add it to the end of the css file i.e style.css in your theme folder
.entry-content .entry-pagination,.entry-content .pagination{
text-transform:uppercase;
}
.entry-content .entry-pagination a,.entry-content .pagination a{
text-transform:uppercase;
padding:5px;
background:#f96e5b;
color:#fff;
text-decoration:none;
}
I have just tested in a local copy of your site that I made for testing it. And works fine without affecting anything else. The CSS code only applies to the very specific thing i.e pagination within a post.
Check the screenshot here [[LINK href="https://www.dropbox.com/s/vz78qe2d2320slw/Screenshot%202013-11-19%2023.00.25.png"]] https://www.dropbox.com/s/vz78qe2d2320slw/Screenshot%202013-11-19%2023.00.25.png[[/LINK]]
Rednasil comments:
Fahd thanks a lot, I got the styling going on. But do you know how to get it centered??
Fahad Murtaza comments:
Centered like this?
https://www.dropbox.com/s/wyb4kyvfe0pwu0y/Screenshot%202013-11-20%2001.38.07.png
If so, the updated code is
.entry-content .entry-pagination,.entry-content .pagination{
text-transform:uppercase;
text-align:center;
}
.entry-content .entry-pagination a,.entry-content .pagination a{
text-transform:uppercase;
padding:5px;
background:#f96e5b;
color:#fff;
text-decoration:none;
}
Rednasil comments:
Yes I want it just like the screenshot you made.
I changed the code, but it's still not centered.
Fahad Murtaza comments:
Just clear you cache, it should resolve the issue if you have pasted code correctly.
Fahad Murtaza comments:
I took the screenshot after I made the code changes and tested it to make sure it works. I tried your online site link but http://listarama.com/wp-content/themes/metro-pro/style.css doesn't show any updated code.
Rednasil comments:
Hi Fahd, I am still not seeing it centered.
And I already tried on another browser+cleared the cache.
Any tips ??
Nirmal answers:
Can you please provide the site url ?
Nirmal comments:
.entry-pagination a {
padding: 5px 10px;
text-decoration: none;
background: #e63f2a;
border: 1px solid #e63f2a;
color: #fff;
}
.entry-pagination a:hover {
text-decoration: none;
color: #e63f2a;
background: #fff;
}
Please paste this to the extreme end of the <strong>style.css</strong> file in your current theme. To the extreme bottom of this file.
Nirmal comments:
Path to the style.css file: /wp-content/themes/metro-pro/style.css
Nirmal comments:
.entry-pagination a {
padding: 5px 10px;
text-decoration: none;
background: #f96e5b;
border: 1px solid #f96e5b;
color: #fff;
}
.entry-pagination a:hover {
text-decoration: none;
color: #f96e5b;
background: #fff;
}
Please paste this to the extreme end of the <strong>style.css file in your current theme</strong> here /wp-content/themes/metro-pro/style.css. To the extreme bottom of this file.
Balanean Corneliu answers:
Here is the original twentythirteen css for page/post navigation you can try to change your page navigation css part with this one.
/**
* 5.7 Post/Paging Navigation
* ----------------------------------------------------------------------------
*/
.navigation .nav-previous {
float: left;
}
.navigation .nav-next {
float: right;
}
.navigation a {
color: #bc360a;
}
.navigation a:hover {
color: #ea9629;
text-decoration: none;
}
.paging-navigation {
background-color: #e8e5ce;
padding: 40px 0;
}
.paging-navigation .nav-links {
margin: 0 auto;
max-width: 604px;
width: 100%;
}
.sidebar .paging-navigation .nav-links {
max-width: 1040px;
padding: 0 376px 0 60px;
}
.paging-navigation .nav-next {
padding: 13px 0;
}
.paging-navigation a {
font-size: 22px;
font-style: italic;
font-weight: 300;
}
.paging-navigation .meta-nav {
background-color: #e63f2a;
border-radius: 50%;
color: #fff;
display: inline-block;
font-size: 26px;
padding: 3px 0 8px;
text-align: center;
width: 50px;
}
.paging-navigation .nav-previous .meta-nav {
margin-right: 10px;
padding: 17px 0 23px;
width: 80px;
}
.paging-navigation .nav-next .meta-nav {
margin-left: 10px;
}
.paging-navigation a:hover .meta-nav {
background-color: #ea9629;
text-decoration: none;
}
.post-navigation {
background-color: #fff;
color: #ca3c08;
font-size: 20px;
font-style: italic;
font-weight: 300;
padding: 20px 0;
}
.post-navigation .nav-links {
margin: 0 auto;
max-width: 1040px;
}
.sidebar .post-navigation .nav-links {
padding: 0 376px 0 60px;
}
.post-navigation a[rel="next"] {
float: right;
text-align: right;
}
