Search the Community

Hi there! I have a team section using simple list and would like to have the button on each team member open full bio without leaving the page. Either as a dropdown or lightbox text. It seems that the button by default can only link to a page, website, file etc. Any help on this is greatly appreciated!

Hi, Hope somebody can help me out to place the read more text on 1 line? As well in the summary as on the blog overview page. (I've in this website 2 summaries on the homepage). It looks a bit less messy.

Hi all, Wondering if it's at all possible to add an expandable / read more button to paragraphs in Squarespace's pre-made content block/card sections (sorry not sure what these are called). I've added a screenshot below to show what I'm referring to. I'd ideally like to be able to add a read more button at the end of longer paragraphs to keep all text length consistent. As per the ones on the left — I've just done this as a text example to show what I mean. The ones on the right is how it would look without this. Open to any other ways this could be done also / any other blocks that could do this better. I know I could possibly just re-create these sections as normal text blocks and then put an accordion or something similar, but I'm just trying to keep it as simple as possible for the client to edit. Note, I haven't made the site as of yet, just planning out and used a random default template for the example below. Any advice would be greatly appreciated 🙂 Thanks! A

Site URL: https://designbycaitie.ca/blog Hey there, There are a few more changes I'd like to make to my blog collection page but can't figure out how to do them: 1. Add a 10px radius to the top corners of the container. (It worked for the bottom but didn't apply to the top.) 2. Add padding to the left and right sides of the text. (I thought I got it by targeting ".blog-basic-grid--text", but nothing happened the first few tries, and the last few it only worked on the left side and pushed the right side text out of the container, so I deleted my attempt.) 3. Push the "Read More" link down to (near) the bottom of the containers, so it's equally as far from the bottom as from the side (once the padding is in place). 4. Change the "Read More" link font colour to #606060. Thank you in advance!

Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237 Hi guys, After a long time with Squarespace community, I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own. Let 's move to the cool part Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it. step 1.mp4 Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.js"></script> <script> $(document).ready(function() { if (window.self!==window.top) { return; } $("[href='#read-more']").each(function(i, el) { // First calculate the initial space between the content and the readmore tag const contentEl = $(el).closest(".html-block, .sqs-block-content, .summary-excerpt, .image-subtitle"); const elBound = (el.getBoundingClientRect()); const contentBound = (contentEl[0].getBoundingClientRect()); contentEl.readmore({ collapsedHeight: Math.floor(elBound.y - contentBound.y), speed: 500, embedCSS: true, lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>' }) }); $(document).on("click", "[data-action='collapse-rmjs']", function() { const readmoreId = $(this).attr("aria-controls"); const contentEl = $(`#${readmoreId}`); if($(contentEl).closest('.sqs-block-image').length) { contentBound = $(contentEl).closest('.sqs-block-image')[0].getBoundingClientRect(); } else { const contentBound = (contentEl[0].getBoundingClientRect()); } window.scrollTo(0, windown.scrollY + contentBound.top); }); }); </script> <style> /* Tweak readmore js to hide the placeholder link */ [id*=rmjs] { transition: height 200ms; overflow: hidden; } [id*=rmjs] [href='#read-more'] { display: none; } body.sqs-edit-mode [href='#read-more'] { display: inline-block !important; } [data-readmore-toggle] { /* color of read more */ color: red; } </style> Notice: You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content step 2.mp4 After applying 2 above steps, here is the result you can achieve result-readmore-readless.mp4 Is it hard for you to follow my steps? Does it work properly on your site? If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me. 'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community Thanks for your attention! Support me by pressing 👍 if this useful for you

Site URL: http://www.painterofplace.com Recently updated the studio's website where I work and would love to hear what everyone thinks! Our main goal was to minimize the shops emphasis (mostly due to the time it takes to create a single piece compared to the revenue they bring in) and funnel visitors towards ordering a commissioned piece of art, which are more valuable overall. I also wanted to emphasize the exclusivity of the artwork to the potential collectors.

Hi, I wonder if there is a way to redirect the read more link in blog summaries to an external URL?

Site URL: https://www.janforcolorado.com/es/comunicados I have duplicate pages on my site for english and spanish language versions. However, I need to switch the "Read More" links on the squarespace pages to spanish using a custom change. How can I change that verbiage without changing it throughout the site?

Site URL: https://davidbrewsterwriter.com/blog I have a two level question relating to Bedford template: I want to change the 'read more' text on blog excerpts. I tried using the following custom CSS (as per other answers relating to other templates) but no luck. Bedford has a 'data-read-more' tag that I don't seem to be able to target. a.entry-more-link span { visibility: hidden; font-size: 0; } a.entry-more-link span:before { content: "Listen"; visibility: visible; font-size: 13px; } a.entry-more-link span:after { visibility: visible; } If I have more than one blog on my site, is there a way to target a change like this to a specific blog? Is it the same as targeting other pages using the relevant collection id? Thanks, David

Site URL: https://www.uscthetatau.org/meet-us-alum Hi there, I was wondering if there was a way to specify which blog posts the "Read more" link pops up on? Any suggestions would be greatly appreciated! Thank you in advance.

Hi Can any one help me understand one only one of my html code blocks work on squarespace? I have been able to have 2 markdown codes work on the same page, but with the HTML code it does not. I have two post, same html code, just different content. The code is for a read more/read less button. One works fine, but when I click on the other read more button it enables the first post to drop down instead of its own (second post). This is the code below - from some reading i think i need to add an element within the code that allows both or work separately on the same page? <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #more {display: none;} </style> </head> <body> <h2>Read More Read Less Button</h2> <p>CONTENT<span id="dots"></span><span id="more">eCONTENT.</span></p> <button onclick="myFunction()" id="myBtn">Read more</button> <script> function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } </script> </body> </html>

Site URL: https://salutem.squarespace.com/ Hi, I´m trying to change the read more link in blog posts. I have tried several alternatives and neither of them worked. I also need help with changing the back-text to something else in mobile menu. I´m currently using 7.0. version Basil template. I appreciate any help with this! 🤗

Site URL: https://www.2680.no/spisesteder Hi! I´m in the process of making a multilingual website, and for my non-english site, I need to change the text, of the "read-more link" in a summary block. Can anyone help? Thanks!

I'm currently working on moving a website from version 7.0 to 7.1 and in the current version there is a code block that contains code that makes it possible to click a button that says "read more" so more of the text becomes available to read so the webpage doesn't become too long, and after clicking it, it changes to "read less". When I try to implement the same code on the new website it doesn't work. Any suggestions on how I could solve this problem and why the old code doesn't work?

Site URL: https://corn-apricot-zn88.squarespace.com/ I am trying to hide specific "read more" text on my summary block on my "people page" I have it all turned on in the display settings and then wrote CSS to turn it off. And then I tried to target the specific BLOCK to turn it back on. Basically, I only want it to show and click through on 10 or so of the 70 people shown. It is either all on or all off, but it seems like I should be able to target text block and change this. no password

Site URL: http://www.ryanheflin.com Hello, I have tried using code to create a "read more/read less" button on one of my sections. This has worked, but the text bleeds into the next section instead of expanding the background of the section its on to accommodate the text. Help please!

Site URL: https://martinodibeltuloconcu.com/ Hello, I'm trying to set up a blog to appear on a summary block titled "Selected essays," and another below it, "Recent translations." When I click either on the titles or on the "read more" links they are inactive. In short, I can't seem to link the blog content to the "read more" and the title of the article. Thanks very much for your help.

Site URL: https://www.forthrightadvising.com/blog/push-and-pull-communications Hey there, I know that in a Summary block, when "Excerpt" is unchecked, the "Read More" button won't show up even when toggled on, but I've been trying to alter that with CSS. I've got Summary Blocks (carousel design) at the bottom of every blog for this client and we don't want to excerpt but we DO want a "Read More" option to show up below each: I'm still in my CSS learning curve, so naturally, the CSS I've been playing around with hasn't worked so far. I've been attempting different iterations of this: I've got Summary Blocks at the bottom of every blog for this client, so a site-wide/summary-block-wide code (that works better than my rudimentary attempt) would be lovely. Side notes: I DO have CSS for the arrows on the Summary Block (carousel design) that I can provide if need be, though none of it isolates the "Read More" links, just the ".sqs-gallery-controls." It's also a 7.0 site in the Brine family, if that info is needed. Happy to provide whatever else might be helpful too! Thanks all 🙂

When I put a text or paragraph in my website (Not a Blog) I want visitors to have a read more option so when they click they are redirected to the paragraph which contains the whole information (not a new page - just want to expand the existing reading section). Thank you

Site URL: https://newcommunity.org.uk/sunday-talks A few months ago I managed to change the default 'read more' link at the bottom of each of our Sunday talks to 'listen'. Each talk is a blog post. However, I have just discovered that when I access the page from the menu (Resources>Sunday Talks) it reverts to saying 'read more' rather than 'listen'. Not a massive deal, but I reckon most people who are accessing the page will come in via the menu. If I refresh it, it then reverts back to 'listen'. Given that I'm not entirely certain how I fixed it in the first place, any ideas as to how I can make sure it always says 'listen' regardless of how you access it? I'm attaching a picture of what I found in the Custom CSS section that might be how I fixed it in the first place.

Site URL: https://www.afrolatinfestyeg.com/gallery Hello there, I want to change the *Read More* button in my gallery of image to *Relieve The Moment*. Tried using some of the scripts in other questions like these but they did not work. The website URL is: https://www.afrolatinfestyeg.com/gallery Would really appreciate any help 🙂 Thanks in advance

Site URL: https://www.manueltarquini.com/blogtutorials Hi, how can I edit "Read More" to a "custom text", with a custom text size and colour and a background color (as a button)? I have a Wexley template and SS 7.0 https://www.manueltarquini.com/blogtutorials thank you

Site URL: https://recorder-jaguar-6lxy.squarespace.com/ On the site I am working on, I need the 'read more' buttons to be aligned. Help!

Site URL: https://water-pro.squarespace.com/ultraviolet-disinfection/uvlw-range-800-watt-amalgam Password: waterpro As you can see these product pages have way too much text. Does anyone know of a plugin or custom code that will add a 'Read more' toggle to reveal more text. Here is an example: https://www.rockshop.co.nz/shop/roland-dj808.html Or any other suggestions would be perfect. Cheers, Brent

Hello! I'm working on a website design using the Mercer template. I have updated the 'Read More' links of blog summary blocks to buttons. I would love to remove the arrow which follows read more. Here's the website (password: realestate). Please refer to the 'Featured Listings' section (as pictured below). Does anyone know how to do this? Many thanks!