Changing the "Older Posts" and "Newer Posts" buttons on the Blog Post Page

Site URL: https://caper-koi-g3ye.squarespace.com/rentme

Hi there!

Long story short I've resorted to the blog page to display my vintage items for rent (since they're not for sale - they're just there for customers to view and make their own selections) and I've noticed at the bottom of the page it says "Older Posts" and then "Newer Posts" on the next page (see image for details). Since I'm not using this for blogs this doesn't relate to what I'm doing so I would like to change it with in the code or by code injecting. Customer support turned me here so I would really love any help with how I would go about doing this! 

I've altered some code in the past but in Squarespace it seems that it won't let you check out the whole back office of code for the site, only code injection. 

Thanks in advance!! :)

32 minutes ago, BiancaNachtmare said:

Site URL: https://caper-koi-g3ye.squarespace.com/rentme

Hi there!

Long story short I've resorted to the blog page to display my vintage items for rent (since they're not for sale - they're just there for customers to view and make their own selections) and I've noticed at the bottom of the page it says "Older Posts" and then "Newer Posts" on the next page (see image for details). Since I'm not using this for blogs this doesn't relate to what I'm doing so I would like to change it with in the code or by code injecting. Customer support turned me here so I would really love any help with how I would go about doing this! 

I've altered some code in the past but in Squarespace it seems that it won't let you check out the whole back office of code for the site, only code injection. 

Thanks in advance!! 🙂

Do you want to change the text: older post, newer post to another word?

24 minutes ago, bangank36 said:

Do you want to change the text: older post, newer post to another word?

Whatever is easier! I would honestly just like to get rid of the words and have an arrow there

11 hours ago, BiancaNachtmare said:

Whatever is easier! I would honestly just like to get rid of the words and have an arrow there

Your site is private now. Kindly set it a site-wide password so we can take a look

45 minutes ago, bangank36 said:

Your site is private now. Kindly set it a site-wide password so we can take a look

Ok done! you should be able to view it with the password : gorm

https://caper-koi-g3ye.squarespace.com/rentme

1 hour ago, bangank36 said:

You can try adding to Home > Design > Custom Css

.blog-list-pagination 
> div > a > span {
  visibility: hidden;
}

to hide the title and keep the arrow

Let me know how it works

Support me by pressing 👍 if this useful for you

It worked!!! Thank you so much, you're amazing!! 

How would one remove pagination (not just hiding the links) so that all blog posts can be displayed on one page (instead of limiting to a few dozen, then a link to 'older posts')?

Hi, What if I want to change the text in this code instead of just hiding it and having the arrows? 

On 1/18/2024 at 3:39 AM, KyraH said:

Hi, What if I want to change the text in this code instead of just hiding it and having the arrows? 

Can you share link to your page? We can check easier

On 1/17/2024 at 3:39 PM, KyraH said:

Hi, What if I want to change the text in this code instead of just hiding it and having the arrows? 

I am also waiting on a solution for this! We would like the change the text of the arrow on our "Studio" page (set up as a basic grid blog) from "Older Posts" to "More Work". 

Also looking for a solution to only display 18 posts in stead of 20 (so we don't have 2 posts on the last line, without a 3rd post to fill the row). 

Our website is: https://chicory-bullfrog-azt4.squarespace.com/

PW: Creamhello

@Angelica_Cream You can add the JavaScript below to the Footer using Code Injection to change the text of the pagination label:

JavaScript

(function() {

 // Define constants for the desired text labels
 const NEXT_LABEL = 'More Work';
 const PREV_LABEL = 'Previous Work';

 // --- Pagination Label Updates ---

 // Get the pagination element from the page
 const pagination = document.querySelector('.blog-list-pagination');

 // Conditionally find the "prev" and "next" label elements within the pagination
 const prevLabel = pagination && pagination.querySelector('.prev-label');
 const nextLabel = pagination && pagination.querySelector('.next-label');

 // Update the text content of the labels if they exist
 if (nextLabel) {
   nextLabel.textContent = NEXT_LABEL;
 }
 if (prevLabel) {
   prevLabel.textContent = PREV_LABEL;
 }

})();

Be sure to place the code in between <script> tags like so:

<script>
  // Add JS code here
</script>

On 1/27/2024 at 2:16 AM, jpeter said:

@Angelica_Cream You can add the JavaScript below to the Footer using Code Injection to change the text of the pagination label:

JavaScript

(function() {

 // Define constants for the desired text labels
 const NEXT_LABEL = 'More Work';
 const PREV_LABEL = 'Previous Work';

 // --- Pagination Label Updates ---

 // Get the pagination element from the page
 const pagination = document.querySelector('.blog-list-pagination');

 // Conditionally find the "prev" and "next" label elements within the pagination
 const prevLabel = pagination && pagination.querySelector('.prev-label');
 const nextLabel = pagination && pagination.querySelector('.next-label');

 // Update the text content of the labels if they exist
 if (nextLabel) {
   nextLabel.textContent = NEXT_LABEL;
 }
 if (prevLabel) {
   prevLabel.textContent = PREV_LABEL;
 }

})();

Be sure to place the code in between <script> tags like so:

<script>
  // Add JS code here
</script>

 

Is there a way to accomplish this with Custom CSS instead? We don't have the package that allows for Code Injection.  

Suggestions above from @Beyondspace to show just the arrow were in CSS. Seems if you can remove remove the text in CSS, you should be able to change it also in CSS? 

Thanks in advance

On 1/30/2024 at 2:14 AM, Angelica_Cream said:

Is there a way to accomplish this with Custom CSS instead? We don't have the package that allows for Code Injection.  to show just the arrow were in CSS. Seems if you can remove remove the text in CSS, you should be able to change it also in CSS? 

Thanks in advance

Yes. We can use CSS code. If you share link to your site, we can check easier