K10M Posted April 2, 2022 Share Posted April 2, 2022 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 🙂 jjohansson 1 Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 Hi, Can you share link to page in screenshot? We can check easier 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
SocialStar Posted April 12 Share Posted April 12 Does this code work for blogs in a membersite? Link to comment
creedon Posted April 12 Share Posted April 12 (edited) 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 June 25 by creedon PRWORKS and jjohansson 1 1 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
SocialStar Posted April 18 Share Posted April 18 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 creedon 1 Link to comment
jjohansson Posted June 21 Share Posted June 21 Hi @creedon I was looking for this CSS and it just worked fine. I have one pending question regarding the "Read More" link in Blog. How could I replace that text? Link to comment
axe43 Posted August 30 Share Posted August 30 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? Link to comment
tuanphan Posted August 31 Share Posted August 31 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
axe43 Posted August 31 Share Posted August 31 @tuanphan the end of this page should show it https://www.thejainveganinitiative.org/ahimsa-paryushan-cookbook?category=Meals Link to comment
tuanphan Posted September 1 Share Posted September 1 14 hours ago, axe43 said: @tuanphan the end of this page should show it https://www.thejainveganinitiative.org/ahimsa-paryushan-cookbook?category=Meals You can use this to Website Tools > Custom CSS span.next-label { visibility: hidden; } span.next-label:after { content: "Next"; visibility: visible; } jjohansson 1 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
axe43 Posted September 1 Share Posted September 1 (edited) @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 Edited September 1 by axe43 Link to comment
tuanphan Posted September 3 Share Posted September 3 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; } } jjohansson 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment