Jump to content

Replacing Pagination Titles on Portfolio Pages

Recommended Posts

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;
}

 

 

Link to comment

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? 

 

 

Link to comment

@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;
}

 

Edited by christyprice
added needed semicolons
Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, tuanphan said:

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

Thanks for your interest.

 
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. 
Link to comment
20 hours ago, natalia said:

Thanks for your interest.

 
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";
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...

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 :)

Screenshot 2021-08-14 at 18.35.50.png

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Link to comment
  • 4 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

 

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
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

Link to comment

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!

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.