Replacing Pagination Titles on Portfolio Pages

Does anyone have code to replace the pagination titles on all portfolio pages?

Instead of showing the next/prev project name, I need to just use the words "NEXT" and "PREVIOUS".

Thank you.

Hi @Moonside, I have a blog post on How to Replace or Remove Portfolio Pagination in Squarespace that should help!

Is

26 minutes ago, christyprice said:

Hi @Moonside, I have a blog post on How to Replace or Remove Portfolio Pagination in Squarespace that should help!

Hi Christyprice

Is there a way to use the predefined font families of the page? As in heading 1 , heading 3 etc ? 

I tried to add it somehow but am new on CSS so I am not doing it right.

.item-pagination-link .item-pagination-prev-next {
  display: block !important;
  font-size: 15px;
  font-family: ?? 
  text-transform: uppercase;
}

Hi @Panos_vsl, yes you'd just need to add the font family you want to use... can you share a link to your site and the font you'd like to use?

Ok I manage to do it I think  I am not sure.

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

.item-pagination-link .item-pagination-prev-next {
  display: block !important;
  font-size: 15px;
  font-family: "aktiv-grotesk"
  text-transform: uppercase;
}
.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
  font-size: 15px;
  font-family: "aktiv-grotesk"
  text-transform: uppercase;
}

is this the right way? 

@Panos_vsl, you have some redundant code in there. Try just this: 

.item-pagination-title {
  display:none;
}
.item-pagination-link .item-pagination-prev-next {
  display: block !important;
  font-size: 15px;
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
}
.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
  font-size: 15px;
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
}

What should I add to this code in order to substitute the words OLDER and NEWER at the bottom of the page for PREVIOUS and NEXT  ?

Thanks

5 hours ago, natalia said:

What should I add to this code in order to substitute the words OLDER and NEWER at the bottom of the page for PREVIOUS and NEXT  ?

Thanks

 

If you share link to portfolio page, we can take a look

12 hours ago, tuanphan said:

If you share link to portfolio page, we can take a look

Thanks for your interest.

20 hours ago, natalia said:

Thanks for your interest.

 

Please check at www.marinamanagt.squarespace.com/blog 

the blog has more than 100 posts, when we reach at the end of the first load we see the word OLDER in red and I would like to change it to PREVIOUS POSTS.

Same if you continue browsing and see OLDER and NEWER, I would like to read PREVIOUS and NEXT.

Thanks in advance. 

Add to Home > Design > Custom CSS

span.BlogList-pagination-link-label {
    visibility: hidden;
}
span.BlogList-pagination-link-label:before {
    visibility: visible;
    content: "Previous";
}

Does anyone know how to do this for sites on 7.0?

3 hours ago, sharine said:

Does anyone know how to do this for sites on 7.0?

Can you share link to portfolio page? We can give the code easier.

Hi @sharine, 7.0 doesn't use portfolio pages. Are you perhaps using a blog for your portfolio?

hello. hope everyone is well.

I have used @christyprice code posted on 22nd April. 

I have an error for font family line of code, i have highlighted in bold and included a screenshot of the custom css window.

.item-pagination-title {
  display:none;
}
.item-pagination-link .item-pagination-prev-next {
  display: block !important;
  font-size: 15px;
  font-family: "adelle-sans"
  text-transform: uppercase;
}
.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
  font-size: 15px;
  font-family: "adelle-sans"
  text-transform: uppercase;
}

I have looked around other posts the see if i could problme solve but nothing worked so far.

thanks if you can help :)

A quick guess.

Your font-family lines are not terminated with a semi-colon.

But without being able to see the site it is hard to know.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@Matthoosh I've updated the code above with the missing semicolons - thanks @creedonfor the catch there. If that doesn't work, as he mentioned, it's much easier to troubleshoot if you can share your site.

@creedon and @christyprice thank you both for getting back to me. 

I have used the adjusted code, with additional semicolon and it has worked. 

I sincerely appreciate it!

Hi Guys, I have tried the below code to complete remove pagination. However, it does not seem to work for me, can anyone help?

.item-pagination {
  display: none;
}

Kind regards, ]

Ryan

51 minutes ago, RyRy said:

can anyone help?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hi Creedon, 

Thank you! Please see below:

https://finch-seal-dt9f.squarespace.com/portfolio-2/project-one-w2dtx

PW: Letmesee2022

Kind regards, 

Ryan

@RyRy

You have a syntax error in your CSS.

_______ _______ _______ _______ __ | || || || || | | _ || _ || _ || _____|| | | | | || | | || |_| || |_____ | | | |_| || |_| || ___||_____ ||__| | || || | _____| | __ |_______||_______||___| |_______||__| Line Statement --------------- In 'site custom less': 68 69 //remove pragination// 70 .item-pagination {
    71 display: none;
    72 }

.^ SyntaxError INCOMPLETE_PARSE Unable to complete parse.

On 1/8/2022 at 10:08 PM, creedon said:

@RyRy

You have a syntax error in your CSS.

_______ _______ _______ _______ __ | || || || || | | _ || _ || _ || _____|| | | | | || | | || |_| || |_____ | | | |_| || |_| || ___||_____ ||__| | || || | _____| | __ |_______||_______||___| |_______||__| Line Statement --------------- In 'site custom less': 68 69 //remove pragination// 70 .item-pagination {
    71 display: none;
    72 }

.^ SyntaxError INCOMPLETE_PARSE Unable to complete parse.

 

Hi Creedon, 

Thank you for you reply! I am quite new to this. How do I correct the above. Any info will be greatly appreacited.

Kind regards, 

Ryan

On 1/15/2022 at 10:51 PM, RyRy said:

Hi Creedon, 

Thank you for you reply! I am quite new to this. How do I correct the above. Any info will be greatly appreacited.

 

Kind regards, 

Ryan

 

If you post all current code here, we can help easier

On 4/21/2020 at 10:59 PM, christyprice said:

Hi @Moonside, I have a blog post on How to Replace or Remove Portfolio Pagination in Squarespace that should help!

Hello @christyprice, I used your code and it works perfectly, thank you!

Just a question to help me understand better how it works - what is this part of the code for?:

.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
  font-size: 30px;
  text-transform: uppercase;
} 

When I change the font etc. in this part, I don't see visible changes like I do when editing the .item-pagination-link .item-pagination-prev-next { section above it.

Just out of curiosity!

Thanks again,

Lily

Hi @lilymyrennyn - one of those targets the previous link and one targets the next link. I know Squarespace has been making some base code changes, so there's always a chance that will change!