Hello there,
To change the posts navigation text, try doing the below steps:
1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box
;(function($) {
'use strict'
if( $('.posts-navigation').length ) {
var olderPostsText = 'Previous Posts';
var newerPostsText = 'Next Posts';
$('.posts-navigation .nav-previous a').text(olderPostsText);
$('.posts-navigation .nav-next a').text(newerPostsText);
}
})(jQuery);
4. Update
To style the link buttons, you can use this CSS code:
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
border: 1px solid #ccc;
padding: 5px 10px;
}
.post-navigation .nav-previous,
.posts-navigation .nav-previous {
padding-left: 0;
}
.post-navigation .nav-next,
.posts-navigation .nav-next {
padding-right: 0;
}
You should do your own styling. If you’re new to it, you can learn here: https://www.w3schools.com/css/
Regards,
Kharis
Thread Starter
Anouk
(@anouk197)
First of all, thank you for your reply!
I followed all your steps. I spend hours trying different things and researching online. I’ve scrolled through the link for CSS you gave me, although I knew most basics already.
What exactly do I change within the JavaScript to change the ‘previous’ and ‘next’ text? This is on my blog page; the overview of all posts. I want to have ‘newer’ instead of ‘previous’, and ‘older’ instead of ‘next’.
^ this is what it looks like now.
As you can see it is currently in boxes. I’d like to have it without boxes/background. Just the plain text and numbers. Also I’d like to have it in the center of the page.
Considering the layout of the navigation within singular posts:
I’d like to have this without boxes/background as well. Again, just the text. Also right now the text is in dark purple, and when you hover it becomes black. How do I make it black to begin with?
Sorry if I’m being annoying :’)
Hello there,
Try this JS code:
;(function($) {
'use strict'
if( $('body').hasClass('blog') && $('.posts-navigation').length ) {
var olderPostsText = 'Older';
var newerPostsText = 'Newer';
$('.posts-navigation .nav-previous a').text(olderPostsText);
$('.posts-navigation .nav-next a').text(newerPostsText);
}
})(jQuery);
For CSS code, you could use this one:
.post-navigation {
padding-left: 0;
padding-right: 0;
}
.post-navigation .nav-previous span,
.post-navigation .nav-next span {
display: none;
}
.post-navigation .nav-previous,
.post-navigation .nav-previous {
padding-left: 0;
}
.post-navigation .nav-next,
.post-navigation .nav-next {
padding-right: 0;
}
Regards,
Kharis
Thread Starter
Anouk
(@anouk197)
Thanks again!
For some reason, the JavaScript just doesn’t seem to work…
I also noticed the links to the pictures in my previous reply didn’t work, so here they are again:
https://drive.google.com/open?id=1U5H5nvbm4AeRcFH0EmztJHF17uUY1_US
https://drive.google.com/open?id=1g-MU57aoZbzaIs7nzATEhIUn_aI52iRN
With altering of the CSS code I managed to change the look of the navigation in the single posts. However, the navigation on the blog page/the overview of posts (see first link) I can’t seem to change with the CSS you gave me. What exact CSS do I need for this specifically? Which class etc.? I’d like it centered and without a background.
Thanks again!
> https://drive.google.com/open?id=1U5H5nvbm4AeRcFH0EmztJHF17uUY1_US
If I am correct, it isn’t default posts navigation of Sydney theme. Did you use extra plugin or third party code? Is it possible to share a link of your site here? So I can get the exact selector to use.
Regards,
Kharis
Thread Starter
Anouk
(@anouk197)
I just checked, but I’m not using any plugins or extra code that has anything to do with the navigation… I don’t get it… I have my site on coming soon mode actually. I don’t know if there’s any other option without the whole world being able to see? :’) Maybe I could make it public for an hour and send you the link privately? I don’t know if that’s an option?
Thread Starter
Anouk
(@anouk197)
I could make it public temporarily, since I really want to fix this issue. I would like a reply first though, to make sure that it isn’t public for an unneseccarily long time 😉
Hello there,
If you don’t want to share your site link here, you can move to our support channel, which allows private conversation via DM.
Regards,
Kharis
Thread Starter
Anouk
(@anouk197)
