Support » Theme: Sydney » next page button

  • Ok, sorry I’m asking a lot of questions here lately! Just can’t seem to figure certain things out and you guys help a lot!
    How can I change the appearance (& text?) of the ‘next’ and ‘previous’ buttons on my blog page, and the appearance of next and previous article buttons on single posts? I really don’t like how they look to be honest.

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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)

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘next page button’ is closed to new replies.