Leaderboard

Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 . View Demo Site JavaScript Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> CSS Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { min-height: 60vh; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); } This is of course experimental. Do let me know how it works for you, or if you have questions. If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date. -Brandon

The code referred to was for 7.0 and needed to be modified for Squarespace 7.1. Here's a version that should work in your situation. https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71 Let me know how you get on.

@JeroenB @rosieames I posted a quick guide to help you add the year to Squarespace 7.1 blog posts: https://sf.digital/squarespace-solutions/date-styles-on-squarespace-71-blog-posts Let me know how you get on.

Hi @arek It's way too easy what you have to do is to put the following code to Settings > Advance > Code Injection>Header ,What this code will do it will pop up every time user visit the website. <script> window.localStorage.setItem('test', '0'); window.localStorage.setItem('squarespace-popup-overlay', '0'); </script> Tested and it worked perfectly fine , Hope it works perfectly fine for you 🙂 NOTE: TEST IT ON INCOGNITO OR ON PRIVATE WINDOW. If it works for you don't forget to mark it as solved by clicking arrow on top left of this answer 🙂

Hello and welcome to Scheduling on Squarespace! Are you interested in learning more about Squarespace Scheduling, like how to set up your Availability or book your first appointment? The Squarespace Scheduling team invites you to join us for one of our Get to Know Squarespace Scheduling webinars. In this expert-led webinar, you’ll learn the basics of the new built-in Scheduling tool and get to know more about our features and pricing plans. During the webinar, you’ll also have the opportunity to ask any questions you may have with our team standing by to assist! The webinar is free, yet space is limited. Register now to secure your seat: Sign me up As a note, these webinars are specifically for the Scheduling tool, so you can be using either the latest version of the platform, version 7.1, or the legacy version (7.0) . We’ll see you there!

Has anyone who has previously used Squarespace and was familiar with the design process tried making a new, from scratch site using 7.1? All of the Design customization is GONE! There's a super convoluted way to go in and customize in settings, but you still have way less control than before — not to mention the templated font combinations are TERRIBLE. Is there any way to go back and use the old Squarespace??! Is any one else as angry about this as I am? It's like Squarespace decided they wanted to make the design process baby boomer-friendly, since... yanno, that is who is designing the vast majority of websites.

You use SS 7.1? All sites in version 7.1 share the same template. That means: They all have the same style options and features. They all use sections to add content to pages. There isn't a need to switch templates, so that option isn't available in version 7.1. Instead, to try out different looks for your site: Change your global styles. Add new pages with different starter layouts. Create new sections to change a page's feel. For example, add a section with a background image at the top to create a page banner.

I would like to say a big thankyou to @tuanphan for helping me solve this tricky problem (we reverted to private messaging to nut out the solution), he really knows his stuff! 🙂

Hi @francescalo you can get it done in just 2 Steps , easily Let me share a code with you 🙂 Step 1 : Copy & Paste the follwoing code in HOME>DESIGN>CUSTOM CSS section. .Cart-inner>.icon{ display:none; } Step 2: Copy & Paste the follwoing code in SETTINGS>ADVANCE>CODE INJECTION and paste in FOOTER section. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script> $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>"); </script> It will do the Job 🙂 Screenshot is attahced on how it will look like 🙂 If it answers the question don't forget to mark it as solved 🙂

Hello - I am using the features layout / template on a page. I would like to add more rows of the block combination (image, header, text) - ie it gives me 3 rows of content, I need 10. Is there a way to copy and paste these rows / blocks so that I don't need to add each piece manually?

For anyone who has been trying to unsuccessfully install Google Adsense on their Squarespace site, here are the instructions This is a permanent solution, similar to the other method, but with changes. Please give it anywhere from 24 hours to a week to take effect. https://www.graesen.com/blog/resolve-google-adsense-your-earnings-may-be-at-risk-error-for-squarespace

Hi @tero.h.hakala First of all Yes its Important as servers uses these records as Trust/authentication checks when they receive something from other websites. So it is important to set it up. To set it up you can simply use these guide. https://support.google.com/a/answer/7026550?hl=en & https://support.squarespace.com/hc/en-us/articles/360001280748-Verifying-third-party-domains-for-Email-Campaigns Hope it Helps 🙂 Do Let us know if it works or not 🙂

Hi @annahahn1993, It's Quite easy Let me share a code with you in few hours 🙂 as soon as I get free.

Hi , You can use this code which will only Target the IPAD /* ----------- iPad Pro ----------- */ /* Portrait and Landscape */ @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) { /*PASTE YOUR CSS CODE HERE*/ } /* Portrait */ @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { /*PASTE YOUR CSS CODE HERE*/ } /* Landscape */ @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) { /*PASTE YOUR CSS CODE HERE*/ } Also please share your code so I can assist you better.

Site URL: https://www.weacceptcryptocurrency.com/ Squarespace defaults to showing either the site title or the site logo, but I want to show both in my Header. Is there a way to add this functionality with CSS? I have searched the forums and various other online tutorials and I can't seem to find anyone who's successfully done this on a Squarespace site.

Hi! So I have a customer that wants to sell products online and receive orders, but is not interested in accepting payments (I could not do it if I wanted to, Stripe and Square are not available in my country). She delivers products herself and charges on delivery. Is there a way to do this? Thank you!

Hi @EllieC. I definitely want to get back to that...I can see the issue. Unfortunately it might be awhile. But I'll post back if/when I get to it.

Hey @studiolinear This is how I've solved it on one of my client sites (you can check out the WIP with the below details) URL: tommy-laurence-new.squarespace.com P: tommyl I'm setting the anchor point using code injection blocks with the following - <p id="about"></p> ( @EduProduct, you can insert a code block into your page content using the "Code" item as below) - For the links, I'm then setting up links in the nav as follows - /home#about And then in the code injection, this is the code I'm using to set up the smooth scrolling on the anchor links - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> Hope that helps!

Hi there, I'm building a website in Squarespace 7.1 and I want to know if anyone has an answer for this. I'm looking to add a Gallery Block, and you're faced with two tabs, 'Upload Media' and 'Use Existing Gallery'. When I click on 'Use Existing Gallery', it says 'There are no collections'. How do I make a gallery collection so that it shows up when I try to add a Gallery Block? Thanks in advance

Hey @StephanieMemory Try changing the background-size from 90px to a larger value such as 500px: background-size: 500px;

If you really want to hide ALL code blocks then you can add this to Design > Custom CSS and it will remove the space created by the Code Block itself (17 pixels of padding around it): .sqs-block.code-block.sqs-block-code { padding: 0; } Note that in your case, you have also added a paragraph (within the Code Block). For example, this is one of them: <p id="cb-paper"> </p> You'll therefore need to hide the space created by this too, using something like this: .sqs-block.code-block.sqs-block-code p { margin-block-start: 0; margin-block-end: 0; }

#block-98f4117fe9611e045cba .sqs-block-button-element--small { color: #0000ff; border-color: #0000ff; } #block-98f4117fe9611e045cba .sqs-block-button-element--small:hover { background: red; color: black; }

add to Home > design > custom CSS @media screen and (max-width:640px) { .still-work-navigation-container {display: none;} }

(Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.

Agreed! I am forced to make all my actual galleries and porfolios into a separate blog in order to display them within other pages which is TOTALLY RIDICULOUS. Please build this functionality in ASAP!

Hi Christian - I found a way to make smooth scrolling work on my 7.1 website. It's still in construction and can't share but here' s how I achived it. This works in all browsers including mobile. ------------------------------------------------------------------------------------------------------------ 1. Insert this code in the HEADER CODE INJECTION <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script> <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script> 2. Insert this code in CUSTOM CSS html { --scroll-behavior: smooth; scroll-behavior: smooth; } 3. Create your anchor links. You will need to get the PAGE SECTION ID for the section you would want to anchor to. It looks like this: #page-section-5e2799dfc3035b3cf9e9c4d6 I have a hard time finding those IDs so what I do is right-click and inspect the section I want to anchor to and I do a search in the console and type: ID. Then you should be able to easily find all the page IDs. Once you have your page ID, you can create text links or buttons, whatever links you want and just put the # sign before the ID so it looks like this: #page-section-5e2799dfc3035b3cf9e9c4d6 That's it - smooth scrolling in all browsers and mobile. Note that in Chrome it will smooth scroll to a CODE BLOCK when using regular CODE block DIV IDs but it won't work in SAFARI / iPHONEs Mobile. Only the #page-sectionIDs work in all browsers.

This is an essential feature that is still missing. I've been using squarespace for 4 years now, and I can't tell you how much time I've wasted doing tedious block duplication. Please add this to the developer task list. Add it to a sprint, do something. Talk to a producer. Get it done!

I'm from europe and wondering why I have to use the weird american date format. If squarespace heavily advertises in europe, I'd think they'd cater to our date-format needs too. I'm a bit disappointed at this. It's one of these things that makes me feel not being taken seriously as a user. In a blog index I'd like to be able to show/hide dates in general, but also customize the format of the dates. I hope anyone who reads this can fix this, for all of us non-north-americans - aka the rest of the world. Cheers.

@C-A Add the following code to "code injection" --> "footer". <script> $('.header-menu-nav-item > a').click(function() { $('.header-burger-btn').click(); }); </script>

This is absolutely perfect. THANK YOU! Apologies for the late response as I've been nose deep in other projects and only coming up for air now. Thanks so much for your help and well wishes. Stay well and healthy yourself my friend. Positive spirit and positive attitude will get us through anything. 🙂 Carrie

You are a hero! Thank you! Is it a lot of extra trouble to get the date consistent site wide? So to also change it in the /blog page? In my opinion this should be standard to begin with and it's a flaw in the squarespace 7.1 templates.

BRAND NEW to building a blog. SO confused!! Let's start at the VERY BASIC!!!! I bought the year package... I see NO place to register or create a login. I have the "trial"...I'm afraid I'll build my blog and then lose it all in a week! HELP.

Hi , I don't think it's due to Viemo Code it might be some other issue , Anyhow you can use the follwoing code in HOME>DESING>CSS and it will fix the issue 🙂 .image-inset{ padding-bottom:0px !important; } Hope it helps 🙂

Hi everyone, Thank you for flagging this issue. We’ve noted this for our Design and Engineering teams to review, and they’ll use this feedback when implementing fixes and improvements in future releases. For now, I am closing this post; for any further questions regarding this issue, please reach out to the Customer Support team.

@DanielLucasDesigns Do you have the password for this website? I would love to help you with your issue. It is fairly simple to change the hover colors. I want to make sure I am targeting the correct links.

I'm getting this request from my clients, too. Hope they add the icon to the social media link library!

Wonder, huge help!!! Thank you 🙂

To change "Todos" text, add this code to Home > Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(function($){ $(".ProductList-filter-list-item-link").html(function() { return $(this).html().replace("Todos", "tuan phan"); }); }); </script>

Forgot your question. With Personal Plan Add this to Code Block <div class="accordion"> <input id="toggle1" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle1">Accordion Title 1</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle2" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle2">Accordion Title 2</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle3" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle3">Accordion Title 3</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle4" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle4">Accordion Title 4</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> and add this to Home > Design > Custom CSS @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700"); @import url("https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css"); .accordion * { margin: 0; padding: 0; } .accordion *, .accordion *:before, .accordion *:after { box-sizing: border-box; } .accordion { font: 16px/1 'Open Sans', sans-serif; color: #555; } .accordion{ transform: translateZ(0); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background: #fff; } .accordion > .accordion-toggle{ position: absolute; opacity: 0; display: none; } .accordion > label{ position: relative; display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; border-top: 1px solid #ddd; background: #fff; cursor: pointer; } .accordion > label:after { content: '\f078'; position: absolute; top: 0px; right: 20px; font-family: fontawesome; transform: rotate(90deg); transition: .3s transform; } .accordion > section{ height: 0; transition: .3s all; overflow: hidden; } .accordion > .accordion-toggle:checked ~ label:after{ transform: rotate(0deg); } .accordion > .accordion-toggle:checked ~ section{ height: 200px; } .accordion > section p { margin: 15px 0; padding: 0 20px; font-size: 12px; line-height: 1.5; }

Hi @goodwincreative. The function receives a string as its only parameter. That means what you pass must be a string, wrapped in quotes. You can then use single quotes inside the string. Like this: addGalleryItemDescriptions("section[data-section-id='5e584f84750bff750e72e2a8']"); Also, consider using the "<>" button in the toolbar when posting code on the forums. That makes it easier to read and check your code (and helps assure that the forum doesn't mess with it in some way when posting).

Add to Home > Design > Custom CSS .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent; }

Add to Bio Page Settings > Advanced > Header <style> .Parallax-item:first-child .Index-page-image:before { background-color: rgba(0,0,0,0); } </style>

Hi folks, in Squarespace 7.1 they've added a feature which loads the background image of a section only once you've scrolled to it. Generally, I really praise this move from Squarespace in order to make sites faster, but it is annoying when you reload a page you've already scrolled half-way down, and when you scroll up the images don't appear until the top of the screen is about 20% from the top of the image, so you're left with a blank area for the majority of the time scrolling through that section. I used to be able to manipulate the imagesLoaded function in 7.0, but I don't know how to trigger Squarespace getting the image src in 7.1. Anyone know how to do this? Thanks, Andrew

I'd also like this feature. I've just published a new blog, for a UK/European audience, and discovered that my post was published on the 2nd of November, 2020, instead of the 11th of February. This must surely be something basic for Squarespace to do?

Yep! We definitely need international time and date formats in 7.1 asap. This is 2020 and computers are pretty good at date and time conversions... 🙂

Hi @paisandhaze You can do this in Site Styles. Watch the video, or scroll down to Step 4: https://support.squarespace.com/hc/en-us/articles/205815278-Changing-colors

Hyphens drive me crazy! I always add this code to any Squarespace site I create: /* remove hyphens */ p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } You can find exact steps and another couple of snippets I use often in my blog post on Custom CSS Every Squarespace Website Needs.

Hello, I am setting up a blog using 7.1 and would like it to show as an infinite scroll. Does anyone know if this is possible? Is there a way to override the 20 post limit? I can code the summary block to exceed 30 posts but I need to use categories and these take the visitor back to the original blog. Any help or feedback would be greatly appreciated. Thanks! Marcus

@shelleyjavier Add to Home > Design > Custom CSS .social-icons-color-black.social-icons-style-knockout .sqs-use--mask:hover { fill: #ff0000 !important; } Reference: https://beaverhero.com/motto-template-squarespace/#ChangeFooterSocialIconon_Hover

How can I add an image behind the body text on one page? I am using the Montauk template. I really it would just sit behind the text, not take up full canvas background. Is this possible? Thanks in advance!