Jump to content

how i can change / replace the text ""Older Posts >" in Blog to "Next Page"?

Recommended Posts

Hello all,  i have a question for Squarespace 7.1, how i can change / replace the text ""Older Posts >" in Blog to "More brands"?

I have used below CSS code, it worked for the Newer post, but Older post cant be seen, only detected once you hover on it.

/* Older posts */
nav.blog-list-pagination .next-label {
    visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
    visibility: visible;
    content: "More brands";
}

/* Newer posts */
nav.blog-list-pagination .prev-label {
    visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
    visibility: visible;
    content: "Previous brands";
}

Thanks in  advance for the help 🙂

Screenshot 2022-04-02 at 10.00.18 PM.png

Link to comment
  • 2 years later...
On 4/11/2024 at 8:48 PM, SocialStar said:

Does this code work for blogs in a membersite?

I'm not sure the original poster's code works as they mentioned they were having an issue with it. But yes in theory if the code was working it should work regardless if the Blog page is in Member Sites or not. The basic underlying structure of the Blog page does not change.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  /* begin newer older post text change */
  
    /* begin newer */
    
      .blog-list-pagination .newer .prev-label {
      
        visibility : hidden;
        
        }
        
      .blog-list-pagination .newer .prev-label::before {
      
        content : '[ enter text here between single quotes replacing square brackets ]';
        visibility : visible;
        
        }
        
      /* end older */
      
    /* begin older */
    
      .blog-list-pagination .older .next-label {
      
        visibility : hidden;
        
        }
        
      .blog-list-pagination .older .next-label::after {
      
        content : '[ enter text here between single quotes replacing square brackets ]';
        visibility : visible;
        
        }
        
      /* end older */
      
    /* end newer older post text change */
    
  </style>

This is for v7.1.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 4/12/2024 at 2:42 PM, creedon said:

I'm not sure the original poster's code works as they mentioned they were having an issue with it. But yes in theory if the code was working it should work regardless if the Blog page is in Member Sites or not. The basic underlying structure of the Blog page does not change.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  /* begin newer older post text change */
  
    /* begin newer */
    
      .blog-list-pagination .newer .prev-label {
      
        visibility : hidden;
        
        }
        
      .blog-list-pagination .newer .prev-label::before {
      
        content : '[ enter text here between single quotes replacing square brackets ]';
        visibility : visible;
        
        }
        
      /* end older */
      
    /* begin older */
    
      .blog-list-pagination .older .next-label {
      
        visibility : hidden;
        
        }
        
      .blog-list-pagination .older .next-label::after {
      
        content : '[ enter text here between single quotes replacing square brackets ]';
        visibility : visible;
        
        }
        
      /* end older */
      
    /* end newer older post text change */
    
  </style>

Let us know how it goes.

We ended up taking it out of the member site for other reasons but the code worked perfectly! Thanks

Link to comment
  • 2 months later...
  • 2 months later...
14 hours ago, axe43 said:

I have quite a few blog posts in one of my blog pages so at the bottom of the page I see an arrow saying "Older Posts". I want to change this to say "Next". How can I do that?

Can you share link a blog page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, axe43 said:

You can use this to Website Tools > Custom CSS

span.next-label {
    visibility: hidden;
}
span.next-label:after {
    content: "Next";
    visibility: visible;
}

image.png.30155551d1be5eec4e90b9306417cdd8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/1/2024 at 5:31 PM, axe43 said:

@tuanphan Thank you, that worked!

In mobile, the pagination title font sizes are very big. How can I reduce their size? (Let me know if I should raise a new question)

 

You can see this at the bottom of this page: https://www.thejainveganinitiative.org/all-events/paryushan-day-2

You can use this to Custom CSS

@media screen and (max-width:767px) {
.item-pagination-title {
    font-size: 14px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.