Search the Community

Hey! Using this great resource from @tuanphan I have been able to figure out some simple CSS customizations, including hiding the pagination on blog posts using the code below. .item-pagination { display:none !important; } I thought I can replace .item-pagination with time.dt-published.blog-meta-item.blog-meta-item–date and .blog-meta-item.blog-meta-item–author.p-author.author to remove the Date and Author metadata respectively (location of which is outlined in the attached screenshot) but it doesn't seem to be working. It's worked flawlessly swapping out other class names but it's not working for these for some reasons. I know there is a toggle in the editor to remove these but that removes the metadata across the whole site, not just the blog that post is within (which is stupid that the settings don't just apply to that blog). I know how to correctly inject the code so it only applies to the pages I want, but I can't even get it to work in the sitewide Design>Custom CSS. The site is not published yet so I can't share the link but this should be easy to replicate on any site to test. You don't even have to save the Custom CSS to see the result. Does anyone have insight into what would need to be edited to the code above to get this to work? Is there any way to set it to have a higher priority than the toggle in the editor since it may be correct but just overrun by the built in settings? Could those classes be incorrect? Thanks!

Site URL: https://www.handverkslaget.squarespace.com Hi all 🙂 Are there anybody out there that would be able to help with the code injections for these? I have searched for results here, but couldn't find the answer. It's for pages where Squarespace doesn't have a system to change the language. Thank you! Best regards, Torgrim 🙂 STORE: When you click one of the items, you will see "Prev I Next" in the top right corner. I would like to be able to change this text, if easy to solve. When you click one of the "medlemskap" items, there are several options you can buy. I would like to change the text saying "Select". For items that are out of stock, see "Klistremerke" (Stickers), you will see that the box to purchase still says "Purchase". I would like to change this text if easy to solve. If you try to put some items in the shopping cart and continue checking things on the website, before going to the shopping cart in the top right corner, you will get to a page saying "Shopping cart", and below "Item", "Qty.", "Price", "Size", "Subtotal" and "Checkout" Is there a way to translate/change this text without too much work? The whole check out site is mostly english and I don't think this is any easy fix, so don't worry about it. CALENDAR: If easy solve, I would like to be able to change the english names on months and days. And also be able to use 24 hour system on the time/clock, instead of the british/american AM/PM function. BLOG: Under blog, where you have an overview of all blogs, it says "Read More" at the bottom. I would like to change this text if easy to solve. Same place as above. If possibe, I would like the dates to go Date/Month/Year instead of Month/Date/Year. Again, only if easy to solve. When clicking each blog post, on top you will see the Month/Date. I would like to translate the english months to another language, and have the date in front of the month. SEARCH BOXES: If possible, I would like to translate the text in the search boxes, saying "Search". FOOTER (All pages) At the bottom, you can see some links to other pages/sites. I would like to keep the Url link, but to remove the underline so that it looks cleaner. FAQs General question, but I tried this code injection (see https://www.kayleighnoele.com/blog/how-to-install-a-faq-dropdown-accordion-in-squarespace) for a FAQ dropdown system. I added it and it looks okay, but it doesn't seem to dropdown/close when clicking the question. I did install this here: https://handverkslaget.squarespace.com/ofte-stilte-sporsmaal-faqs (password: trond), but I can't see it work for me. Is it just me? Just if an easy solve.

Can anyone help me with a css-code so that I can change the Read More text on my front page to another language? I found a code that works only in the blog section and not on the front page. I am using the Souto-template. a.blog-more-link { font-size: 0 !important; } a.blog-more-link:before { content: "Les mer"; font-size: 14px; } .blog-more-link:after { transform: translatey(4px); } Thanks!

Hi there, I am trying to disable the responsive mobile design of a specific page on my website. I have tried several custom css codes but nothing seems to work. I just want the icons you see here to stay the way they look when you visit the page using a phone or a smaller screen. I want the layout of the images to stay the same regardless of the screen size. Could anyone help me? Thank you so much!

Site URL: https://www.gamesdynamic.net I have a form on a reporting page that is accessed by using the button lightbox feature. I want to be able to control when that form is usable on my site. I am hoping there is some basic code I can inject to make that specific button unclickable, so I don't have to remove the form completely and remake it each time I want to enable/disable it. If there isn't a way to make it unclickable, is there atleast a way to hide it, but retain all the information in the form? The goal is to have a method that allows me to simply toggle the form button on and off but not have to remake the form. Thanks!

Site URL: https://asparagus-ocelot-cchc.squarespace.com/ Hi there, I could really do with some help, here's what I need to do: Is there a way to have more than 20 posts displayed on a blog on 7.1? I need infinite scrolling I also need for the thumbnails not to click through to the individual blog posts, but I still need a link on the excerpt text to link to an external website for each thumbnail Remove the Older Posts > pagination copy/link To add a border to the thumbnails. I have this working on my News blog but it doesn't work on this blog, which is basically a panel of logos that can be filtered by category. So far for the click through problem, I have been told to use this code in a code block: <style> article a { pointer-events: none; } </style> Which works but it also disables the excerpt link and the Older Posts > link... And I've been told to use this code for adding the border, which works fine on one blog but not on the other... section.blog-image-wrapper a { border: 1px solid black; display: block; } I'd really appreciate some help with this and I'm willing to pay 🙂 Lauren

I have a page that I want to use on my website a welcome page but then would be automatically redirected to another page and fade to it. Would this be possible and would someone be able to code it.

Hello everyone, I'm trying to embed a Typeform survey onto a "thank you" page after people opt in for a freebie. I'm on a Basic plan. I did it successfully but it appeared at the header and looked very messy as the nav bar was behind it. Is there a way to have it somewhere else on the page or make the nav bar disappear? Or do I need to upgrade in order to be able to do this? I only need it on a couple of separate pages, not across all pages. Thank you so much in advance for your help! Rosie

How do you hide code blocks from showing up as white space on your website?? This seems like a huge oversight on behalf of Squarespace. Unless there is an obvious way to do it I haven't found yet? I have code blocks for my anchor links that obviously have to go in specific spots on my page and there's no place for them to just be inline with something else. And when I use "display: none" in the custom css, they stop working. Any help would be greatly appreciated Thanks!

Site URL: http://www.wearethirdspace.org Hiya, I'm trying to stop the folders in my navigation menu linking to the first item on their list. I've tried using code from this thread and this thread in my CSS, and even adapting the header code injection from this blog - but none of that has worked! Can anyone help? I'm using Bedford. Thanks! 😅

Hi everyone, In the backend of the website, I have add a series of categories to help support the filtering. However, there are only a certain range of categories I wish to display (under titles) in a Summary Basic Grid. Is there a way to black out hide certain category labels? Thanks if your can help 🙂

Site URL: https://inktractor.com I'm trying to figure out a way to add social sharing buttons through code injection on squarespace 7.1 because it doesn't have share buttons. I think there's a way I can manually add at least a like button through say facebook's "like button configurator" but it would be a manual add to every blog post through a code block. I've been told I could circumnavigate this through code injection but I don't know how to change the code to make it a different link for every blog post. Can anybody help me? Here's the code I'm trying to modify to recognize individual blog posts: <div class="fb-share-button" data-href="https://inktractor.com/fiction" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Finktractor.com%2Ffiction&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

Hey you all! I'm pretty new to SS, so bare with me. I'm trying to reduce the spacing between the video and banner of the index page. It's the black block/banner here on my site to my site www.drpodcasts.com I've tried this code I found here on these forms, but it didn't work: <style> #page { padding-top; 30px; padding-bottom: 0px; } </style> Basically, I want to shorten the size of the banner page so the video is nearly flushed with the video. I know I could do this by going to Design>Styles>INDEX:PAGE>Padding (Overlay Pages), but this affects every index page. I want this type of padding adjustment, but to ONLY affect the index page of where my video is. I've also attached a screenshot of what I'm trying to achieve. Hopefully that makes sense and hopefully someone can help me with this! Thank you!

Hi everybody, I’m based in on Spain and working on a small project for the company where I work. I have an issue related to the currency display format. format display: €1,500.00 - desire format display: 1.500,00€ I didn't find any option available at Squarespace to change the format, so I guess it's necessary to inject code. I'm using version 7.0 - family Brine (Mentor model). Please, could you help me? Thanks a lot for your help, Jorge

Hi, everyone. I'm hoping for some help with code injection. Normally, I'd just play around with it myself, but since this is the checkout page, I need it to work right the first time! I would like people who check out to see the usual confirmation page, but after a few seconds, be directed to another page on the site (general-info). If possible, the usual confirmation page would show additional text saying something like, "Redirecting to General Information page..." also. I think I go to Settings/Advanced/Code Injection and down to Order Confirmation Page, but then.... ? Thanks for any help you can provide!

Site URL: https://www.hayloft.media/ I would like to run an instagram block / feed across bottom of my site, flush with the margins - no spaces at the sides! can anyone help me with some code to do this on the instagram block. I have the page hidden at the moment. the url is hayloft.media i'm using 7.1. I would be very grateful for help, thank you!

Hi everybody, hope that all community is safe during this period. I’m based in France and work on the redesign of my dad’s website specialized in Piano, accordion business . I’ve got an issue related to currency . Indeed basically Squarespace display price in this format : €1,050.25 and in France legally we’re not using the comma to split thousand . Moreover currency symbol must be display on this way : 1050,25€ Any smart people got some tips or code injection that could support me ...I’m starting to be annoyed to pay 💰 this great solution but can’t be able to launch the website ..:) thanks a lot and #stayathome

Site URL: https://hyparhymes.squarespace.com/ Hi, I am trying to layer my navigation. I would like to have the logo, then the hamburger icon, then social media icons - all centered. Is there a way to code this in? The Hamburger icon will need to show on both desktop and mobile. Password for website is $. Any help is appreciated. Thank you.

Hello, I am not sure if what I am looking to do has a specific name, I couldn't find anything related to it in the forums. I would like customers to be able to personnalize products. To do so, they would enter the text they want to have and it would then show up on the product image. This text would also be limited in the number of characters. Would it also be possible to have the text show up in the font I want (not a standard office font)? and ideally, color. It would then all be added to the cart. I hope my requirements are clear. Could anyone help me on how to write this code? Thank you

Site URL: https://www.shopmaisaguam.com/faqs I am trying to edit the size of the text in my FAQ drop down menu, more specifically the question. I customized it to display the text using the font default for Heading 5 (H5), however, I can't seem to find where I can edit the size for Heading 5. The font editor only allows for edits up to Heading 4 (H4). How can I edit the size of Heading 5? Or is it even possible? Second, I understand the code abbreviation for headings begin with the letter and then the number (H1, H2, H3...) but what is the abbreviation for paragraphs? If it isn't possible to edit the size specs for Heading 5 maybe I'll just switch it to Paragraph 1 instead?

Site URL: https://www.flowerfeatherfarm.com I added the Facebook messenger chat widget to my website but it is glitching and annoying and I want it gone. I thought I could just go remove the injected code the same way I added it, but no. The injected code box is blank on EVERY page but the annoying widget persists.

Site URL: https://experimentalbitchpresents.com/ Hello, I'd like to add a button to the images on a gallery block on a page (homepage) that's part of an index. Any help would be so appreciated! website: https://experimentalbitchpresents.com/ template: Mentor (added 2 yrs ago) Thank you!

Site URL: https://www.jupiter10.com Hi guys, I’m a looking for help on how to change the way the pricing is displayed on the Clay template from Squarespace. I’ve looked everywhere and cannot find a solution. I sell wallpapers and all my products have 2 variants, the client can either choose to buy a roll (£145) or a sample (£2). When I add the 2 product variants the pricing is displayed as IMAGE 1 = from £2 ( the sample price) However, I find it misleading and I would like the pricing to be displayed as IMAGE 2 = Roll £145 / Sample £2 - this way I think it’s much clearer to customers the actual price of the product. At the moment I can get away with hiding the price attribute from the page and inserting it as plain text, but I don’t think it’s good practice. Is there any code or plugin I could use that would force Squarespace to display both prices from the product variants? Any help will be appreciated, Thank you very much.

I have added the code on three separate occasions to create an accordian style faq but the answer to the question is always visible, I have Java script enabled in Firefox, has anyone any ideas?

Site URL: https://coralmountaingolfclub.com/test Hi all! Im looking to create a landing page for our website that is split screen so the viewer is immediately shown either "golf" or "dining" as the options. I have my code written out is VS Code but when I go to place it in the Custom CSS section it alters styles on other pages. I've read about using the collection id and using that to target specific pages but it doesn't work for me. Any Ideas? coralmountaingolfclub.com/test pass: test Thanks! Ill post my code below... HTML - Header Code Injection <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Split Landing Page</title> </head> <body id=collection-5eb5f7e1ef4eb24f7af96aeb> </body> <div class="container"> <div class="split left"> <h5>Golf</h5> <a href="#" class="button">Read More</a> </div> <div class="split right"> <h5> Dining</h5> <a href="#" class="button">Read More</a> </div> </div> <script> const left = document.querySelector(".left"); const right = document.querySelector(".right"); const container = document.querySelector(".container"); left.addEventListener("mouseenter", () => { container.classList.add("hover-left"); }); left.addEventListener("mouseleave", () => { container.classList.remove("hover-left"); }); right.addEventListener("mouseenter", () => { container.classList.add("hover-right"); }); right.addEventListener("mouseleave", () => { container.classList.remove("hover-right"); }); </script> </body> </html> CSS - Custom CSS #collection-5eb5f7e1ef4eb24f7af96aeb { /* variables that are called upon by later code. */ :root { --container-bg-color: rgba(90, 90, 90, 1); --left-bg-color: rgba(255, 255, 255, 0.25); --left-button-hover-color: rgba(255, 255, 255, 0.6); --right-bg-color: rgba(255, 255, 255, 0.25); --right-button-hover-color: rgba(255, 255, 255, 0.6); --hover-width: 70%; --other-width: 30%; --speed: 1250ms; } header { display: none; } footer { display: none; } /* The main elements of the page. */ html, body { padding:0; margin:0; font-family: Verdana, Geneva, Tahoma, sans-serif; width: 100%; height: 100%; overflow-x: hidden; } /* H5 is the main text on the sliders. Had to choose H5 becuse 1-4 are used by squarespace. */ h5 { font-size: 3.5rem; color: #fff; position: absolute; left: 50%; top: 20%; transform: translateX(-50%); white-space: nowrap; } /* The button styles. Will probably change in squarepace to look uniform. */ .button { display: block; position: absolute; left: 50%; top: 40%; height: 2.5rem; padding-top: 1.3rem; width: 15rem; text-align: center; color: #fff; border: #fff solid 0.2rem; font-size: 1rem; font-weight: bold; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); } .split.left .button:hover { background-color: var(--left-button-hover-color); border-color: var(--left-button-hover-color); } .split.right .button:hover { background-color: var(--right-button-hover-color); border-color: var(--right-button-hover-color); } .container { position: relative; width: 100%; height: 100%; background: var(--container-bg-color); } .split { position: absolute; width: 50%; height: 100%; overflow-x: hidden; } .split.left { left:0; background: url('https://static1.squarespace.com/static/5e1952f75a573311900e4f3b/t/5eb8fa9798232c36f5f5af41/1589181080159/golfcourse.jpg') center center no-repeat; background-size: cover; } .split.left:before { position: absolute; content: ""; width: 100%; height: 100%; background: var(--left-bg-color); } .split.right { right:0; background: url('https://static1.squarespace.com/static/5e1952f75a573311900e4f3b/t/5eb8fa9b75c2e1070e2b37b8/1589181083618/ironsclub.jpg') center center no-repeat; background-size: cover; } .split.right:before { position: absolute; content: ""; width: 100%; height: 100%; background: var(--right-bg-color); } .split.left, .split.right, .split.right:before, .split.left:before { transition: var(--speed) all ease-in-out; } .hover-left .left { width: var(--hover-width); } .hover-left .right { width: var(--other-width); } .hover-left .right:before { z-index: 2; } .hover-right .right { width: var(--hover-width); } .hover-right .left { width: var(--other-width); } .hover-right .left:before { z-index: 2; } @media screen and (max-width: 800px) { h5 { font-size: 2rem; } .button { width: 10rem; } } @media screen and (max-height: 700px) { .button { top: 70%; } } }