Jump to content

Change Blog List Pagination Older & Newer to custom text

Recommended Posts

  • Replies 17
  • Views 3.2k
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Add to Settings > Advanced > Code Injection > Header

<style>
nav.BlogList-pagination {
    margin-top: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
		$("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Older", "New older custom");  
    });
    $("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Newer", "New newer custom");  
    });
	});
</script>

 

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 5/5/2021 at 3:48 PM, miss-sammiedesigns said:

That would be great, thank you. You are very kind.

Add to Design > Custom CSS

/* Mobile issues */
@media screen and (max-width:640px) {
/* center image */
footer.Footer .slide {
    float: none !important;
    margin: 0 auto;
}
/* remove footer vertical lines */
footer.Footer .code-block {
    display: none;
}
}

 

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
  • 9 months later...

Hello I would also like to achieve this with the older-posts pagination wording in 7.1. Can you assist with code to update the older posts and newer posts wording to Next Page and Previous Page. 

As a side question can this pagination be removed?

Link to comment
On 2/8/2022 at 10:36 AM, danal said:

Hello I would also like to achieve this with the older-posts pagination wording in 7.1. Can you assist with code to update the older posts and newer posts wording to Next Page and Previous Page. 

As a side question can this pagination be removed?

Add to Design > Custom CSS

h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}

To remove, add this to Design > Custom CSS

h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: none !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
  • 1 year later...
On 5/1/2021 at 9:35 AM, tuanphan said:

Hi. Add to Settings > Advanced > Code Injection > Header

<style>
nav.BlogList-pagination {
    margin-top: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
		$("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Older", "New older custom");  
    });
    $("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Newer", "New newer custom");  
    });
	});
</script>

 

Hi Tuanphan - thanks for this. We have the same problem, but the script only works on the first page load. When we then use the pagination to forward or backward a page, it does again show the original labels. Hitting f5 remedies that, but it should work on the first load. Any pointers on how that could be achieved?

Thanks a lot in advance!

Edited by k_18
Link to comment
1 hour ago, k_18 said:

the script only works on the first page load. When we then use the pagination to forward or backward a page, it does again show the original labels.

This is because you are using a Brine-family template on Squarespace 7.0, and when Ajax Loading is enabled (as it currently is) the code injected in your header will only load on the initial site load, or a refresh. It won't load when other pages load.

To resolve this, you'll need to disable Ajax Page Loading in Site Styles or rewrite the code to work with this. For more details, see my guide entitled Why does Squarespace code only work on refresh?

Did this help? Please give feedback by clicking an icon below  ⬇️ 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 month later...

Hello.

I used the above code to change the pagination wording on a site, but I'd also like to try add this to the top of the blog page - so where the "More" links are at the bottom of the page, I'd like to be able to display these at the top of the page too so that people don't have to scroll all the way to the bottom to find more posts.

image.thumb.png.516496854d90bc3adeac1a4c548ebe3b.png

Thi is the link - https://www.foundregional.com.au/found-food-drink

Thanks.

Link to comment
On 6/9/2023 at 2:19 PM, KyahDigital said:

Yes, that's the one! 

My client wants the pagination option at the bottom and the top of the page so that people don't have to scroll down to get to the next page.

Add this code to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.blog-basic-grid .blog-list-pagination').insertAfter('div#block-yui_3_17_2_2_1662605728287_11102');
})
</script>
<style>
  .blog-list-pagination {
    margin-top: -20px;
}
</style>

 

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 6/11/2023 at 5:18 PM, tuanphan said:

Add this code to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.blog-basic-grid .blog-list-pagination').insertAfter('div#block-yui_3_17_2_2_1662605728287_11102');
})
</script>
<style>
  .blog-list-pagination {
    margin-top: -20px;
}
</style>

 

Thank you - it's added it to the top, but it doesn't look right:

image.thumb.png.554ea5e56175c7f6fc9cebbe95f6203c.png

Any suggestion for a fix?

Also - the client uses blogs for a number of different pages/sections on their site, so is there a way to make this a universal change for anywhere that's using a blog? Or do I need to add the code for each one and pull out the individual blocks in the code?

Thanks!

Link to comment
On 6/14/2023 at 1:14 PM, KyahDigital said:

Thank you - it's added it to the top, but it doesn't look right:

image.thumb.png.554ea5e56175c7f6fc9cebbe95f6203c.png

Any suggestion for a fix?

Also - the client uses blogs for a number of different pages/sections on their site, so is there a way to make this a universal change for anywhere that's using a blog? Or do I need to add the code for each one and pull out the individual blocks in the code?

Thanks!

That code should run on all pages.

You mean remove left More text or?

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
  • 8 months later...
On 2/19/2024 at 9:21 AM, JasonArend said:

Hi I'm trying to remove the numbered pagination at the bottom of the Blog list page on a 7.1 site. How do I do that?

You can use this code to Custom CSS box

.item-pagination[data-collection-type^="blog"] {
	display: none !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.