Leaderboard

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.

I've been using Squarespace for years and just tried to start a site with 7.1 and I agree, it's awful. The lack of design customizability options is completely unusable for me. If they discontinue 7.0 without making major changes to 7.1 first I'll have to stop using the platform.

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

I've run into a bit of an issue with hiding individual collection pages in Squarespace 7.1. Normally, by clicking on the settings for a page, you are able to enable or disable that page. However with the new system of "Portfolio Collections" that page disable option does not exist for individual portfolio project pages. I may be mistaken, but as far as I can tell, there is no way to hide these pages (screenshots attached for reference). This is incredibly troubling as you cannot create drafts of projects, nor if you are duplicating other projects, they will be live with duplicate content until you fix it. I was thinking possibly that you could move collection pages to other collection pages(in the way you can move products from shop to shop), so in essence you could pre-build the portfolio page on a hidden portfolio collection and move it to the live portfolio collection, but there doesn't seem to be a way to do this either. Any advice on how I could make hidden pages in the existing Portfolio Collection system or is this just a fault in the new version?

I made some light changes to backgrounds and text styling via custom CSS to get the layout rolling before deciding what, if any Js would be needed. I've noticed that upon reloading to the site, the custom CSS changed only load when I go back to the custom CSS menu. If I am in 'Pages' and select a page that has already been styled with a new background, the background does not load until I go back to the custom CSS details menu. Has anyone else experienced this? (I am a developer- albeit new to Square Space- so please don't tell me to hire one. I need to sort this out for future reference. I've looked at the console and do not see any buggy issues happening there). Thank you in advance for your time and energy. Cheers, Charlie

Hey John, I've wrote up a short script that should solve your problem, I've included it in this blog post I wrote explaining how to solve the accessibility button issue: https://jolsonweddings.com/education/squarespace-buttons-accessible-name In short, you just have to add some extra HTML to your footer to give the buttons Aria-labels. Good luck! J.Olson

Howdy I used to be able to do this on other Squarespace templates so I'm not sure where I'm going wrong in 7.1. I've got a folder with two pages in it, and I want the folder itself to be a link to the first page in the folder. I've tried adding <a href="website/about">About</a> into the navigation title but that's not working. Any tips?

I'm surprised that changing country in the region settings for a site keeps the default US date and time format. Are there any plans to add custom date formats or to adhere to the international ISO 8601 standard for date and time? Not being able to use YYYY-MM-DD for dates or 24 hour time format without AM/PM is currently a no-go for transferring or creating Swedish sites to Squarespace. Is there a hidden solution to this anywhere that I have missed?

Agreed, it definitely feels like it's been made to accommodate business owners who know nothing about web (and probably are only shooting themselves in the foot by doing their own website) and a big middle finger to the designers they hire to build them sites (who actually know how to give them a site with brand consistency, that navigates easily, flows through information at a good pace, etc). I like the page layout features, but good god the type and color global changes are just shit.

323/5000 Version 7.1 is horrible, I feel like using any other web page creator page. It is not possible to modify the templates in 7.1 as much as in 7.0 They have gone back in functionality, squarespace 7.1 is made for the basic user who wants to have a website equal to any other website out there, not cool. Anyone knows how to go back to 7.0 from 7.1 on a new site?

There are some things that CSS is great for, but there are others where it isn’t recommended. This is one of those. If you want the logo centred in the navigation I recommend swapping to a Brine family template. There are Site Styles built in to allow this - and more besides. On the subject of CSS, check your current styles because you have some overflow currently:

You don't need code to remove the cart icon @tuanphan @Digital-Magpie There are two ways to remove the cart icon. The first is to delete all the Product Pages from your site. If your site doesn't contain any products, the cart icon will not appear on desktop or mobile. The other way is to go to Design > Site Styles and look for the HEADER: LAYOUT section. There's a setting called Cart Position and you can change the position to Hide. Once you save the settings, the cart icon will be hidden on desktop. Note that there's a second setting for the mobile view in the MOBILE:CART section. . .

If you want to create gallery slider & overlay text, you can use this plugin. I did for a client on ss 7.1 yesterday 😂 If you only want gallery & caption, you can search Gallery Caption round two on forum, there is a great guide by @brandon, of course it is free, just copy & paste code.

Would love to be able to add links to customer's Google Maps businesses with Google's new g.page URLs in the /settings/social-links menu where it would show as a Google icon instead of just a generic link icon. This would be a great way to link to a customer's business for any Google services (directions, reviews, photos, etc) Here's an example of the new link format. I think this is new within the last few months. Would love to see Squarespace support it! https://g.page/vammen-law?share

@Superhanss I published a solution here: How to hide the empty shopping cart on Squarespace 7.1.

We have a custom form on our website for donors to give, and the additional information field includes info to which specific fund they want to give. However, when that donation is processed through Stripe, the additional information field is not reported. Thus, for our accountants to have knowledge of which fund the money should go to, they cannot see it in our Stripe reports. Any ideas as to how to get this additional information which is very important reported over to Stripe in all transactions?

Hi Kevin Great to see a Devlin site; there aren't many of those left. By default, the mobile padding is 40px. To reduce this to 14px, you can add this to Design > Custom CSS: @media (max-width: 640px) { #site>.wrapper, #footer>.wrapper { padding: 14px; } } -Paul

To remove the 'Featured' heading from all Carousel Summary Blocks, add this to Design > Custom CSS: /* Remove 'Featured' Heading from Summary Block Carousel */ .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading { display: none; }

I had this exact same issue today and support wasn't sure either. However, I managed to figure it out! You need to select blog post title above the header. Not very intuitive. See below:

I see that you have AJAX enabled on your website, try disabling AJAX on your website; this should make you anchor links work. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

Safari always causes problems... You can try contacting Squarespace Customer Care Livechat I don't use Safari

Works here.. https://www.loom.com/share/f39edb1b3b0744a5be774caee8683ec0

with dropdown, use .Header-nav-folder-title--active { border-bottom: 1px solid black; } .Header-nav-folder-item--active { border-bottom: 1px solid black; }

a.blog-more-link { visibility: hidden; } a.blog-more-link:before { content: "Tuan P"; visibility: visible; } .blog-more-link:after { visibility: visible; }

Hi @WeAcceptCrypto, This may get you close. The menu bars are visible for a second, and the X sits a little lower than Menu, but you can play around with those bits. Add this to Design > Custom CSS: .burger-inner::before { content: 'Menu'; width: 150%; height: 0px; } .burger-inner::after { height: 0px !important; } .burger-inner::before { content: 'Menu'; width: 150%; height: 0px; } .burger--active .burger-inner::before { content: 'X'; transform: none; width: 150%; }

Hi Gray in iframe. We can't use CSS to change it. Where did you get that code? You can edit background there 😄 But i think you can reduce width & center it. Like this @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1580944765966_4151 { width: 70%; margin: 0 auto; } } If you have more questions, you can post on SS forum. I still answer. But of course I only answer if I have free time. You can also send to my email, in the link below. I charge $50/hour.

add to Home > Design > Custom CSS @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1580944765966_4151 .sqs-block-content { height: 700px; } }

Thanks. I usually use this <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('.BlogList-item-readmore:contains("Read More")').text('Tuan SS'); </script>

I'm noticing for the Forte template that the slideshow arrow (either the left or the right) remain visible while the slideshow is playing, even if the cursor is closer to the center... It only seems to disappear ONLY if u just enter the page & don't move ur mouse (and also that it's position is not near the left or right arrow)... In Mac, when refreshing the page & then not moving the mouse whatsoever (the cursor will be a black arrow), the slideshow arrows disappear, only to show just the visuals of the photos... If u nudge ur mouse even a little (which turns the cursor from a black arrow to a white glove/hand) then the arrows never go away, unless u refresh again... Anybody find a work-around for this? Also, is it possible to change the style of the arrows? I'd much rather a white-fill arrow with not box containing it. Thanks

Hi @emmaj. A1: There are a couple ways to do this. The JavaScript is setup so that you can pass in your own CSS selector. That allows you to set which galleries get descriptions (by default, all of them do). In your case, it sounds like you only want to select gallery lightboxes. So replace this line in the JavaScript: addGalleryItemDescriptions(); with addGalleryItemDescriptions(".gallery-lightbox"); An alternative way (instead of the above) would be to simply leave the JavaScript alone (so all galleries would still have descriptions) but then hide it on certain galleries using CSS. You'd use your browser's inspector/developer tools to find the correct selectors and write the CSS. Something like this might work: section.gallery-section .gallery-item-description { display: none !important; } A2: .gallery-item-description { text-align: left; } A3: This would technically be possible by using the image file name as the title. You'd be sure you name your file "This is my title.jpg", then the JavaScript component of the code I wrote could be amended to add that as the title (minus the file extension ".jpg".). That'd take a fair bit of additional custom development time, but it is possible.

Once someone has clicked the add to cart button (and the item has gone to their cart). How do I automatically redirect them to another page within the site? I thought maybe changing the ecommerce site to allow express checkout - so once they click purchase it redirects them to the checkout page - but instead would redirect to another page within the site. Ex. They want to purchase a blanket within the shop. They select how many they need and then select "purchase". Once they click "purchase" they are then directed to a new page allowing them to purchase monogramming for that blanket. Thanks ahead of time!

I have a question about this page: https://quadra-capital.squarespace.com/capital-raising password: quadracapital 1. Do you know if it's possible to move the plus icons under the second section to the left and right align the text? I inserted code to create the accordion on the FAQ page but I'm not sure if there's a way to switch the placement of the + icons on this specific page. 2. I had to insert the grey numbers as images. Do you know how I would decrease the padding of these to get them closer to the text boxes below? Thanks!

I've asked SquareSpace for the same thing. They should give users the options to override tax.

Can you provide link to your site?

Hi, I would like to remove the index page from appearing at the bottom of a page when I scroll down whilst using the Tremont template. Please help if you know any code that may work.

.tweak-blog-list-item-title-show .BlogList-item-title { font-family: 'VeggieParty' !important; }

Thank you! 😃 @tuanphan

Awesome. Thank you very much!

Unfortunately, I don't think that the Squarespace Subscriptions service is the panacea you are hoping for. At least not yet; this is an evolving product. To switch to Squarespace Subscriptions, customers will have to re-subscribe to your products themselves. There’s no way to import subscribers or their payment details and you cannot add them yourself, even if you used Stripe. If you want their new subscriptions to align with their current expiry dates, you'll also need to ask customers to re-subscribe in Squarespace on the date of their renewal.

@RWOLFE Can you provide us with a working link to a Gallery Page/Gallery Block on your site where you want to achieve this?

Yes, @hmfedders. You could do something like this, which would hide the description in a specific gallery on every-other item: [data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description { display: none; } Or you could target a list of gallery items individually by using their data-slide-url attribute: .gallery-grid-item[data-slide-url="1m274ar58gglbeuorp6quol3tmkhel-lx99y"] .gallery-item-description { display: none; } Do keep in mind that in the above examples, the data-section-id and data-slide-url would need to be changed to match your website. You can obtain these attributes using your browser's developer tools/inspector.

I too am in the same boat. I think this is a bug as going to the folder's slug directly takes you to the first page in the folder. Hopefully fixed soon.

Hi, I have a website with the Wexley template, and I'd like one of two things to happen when a user clicks on an image in a gallery on the page: 1) The click leads to another URL (clickthrough URLs are enabled) 2) The lightbox opens, but a caption appears under the image. Is either of these options possible? My site is www.dana-simmons.com Thanks!

I use @michaeleparkour's tool as well. Another option would be to embed a Wufoo, Typeform, or another 3rd party form that allows for uploads in a code block.

@CaptainMaze Add to Home > Design > Custom CSS .homepage .header-announcement-bar-wrapper { background: rgba(0,0,0,0) !important; }

Hi guys, I was having problems with this, but then found that replacing the header code (found here https://fontawesome.com/get-started) works well: <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> You will also need to remove the footer code mentioned above.

I'm having this same issue. I followed @ArminB 's advice, and the image is saved with a transparent background, but when I upload it into SS, the background is white! This isn't for my logo though, just an image on the site. Is this fixable? Thanks!

This is one of those things I can see SS overlooking and thinking "eh, who's really going to notice and, if they do, will they care?". That's a reasonable conclusion and one I would have shared. But having had people test various SS sites I will say this: it gets noticed, and it registers to people as a mistake and/or unprofessional. SS: if there is any way to fix this in the future, please do.

I found the solution to hiding the button on mobile. You have to code several scroll buttons in the CSS Editor, for different configurations as follows: @media only screen and (max-width:3000px) { .scrollup { width: 60px; height: 40px; position: fixed; bottom: 50px; right: 100px; display: none; } } And then add these next two, but leave the brackets inside blank: @media only screen and (max-width:480px) {} This one works for slightly smaller screens like tablets or when the phone is landscape: @media only screen and (max-width: 1000px) {}

In the commerce options click email settings. Scroll down to header. Add this: <a href="http://www.example.com" title="Check out example.com"><img src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" alt="Example.com logo" style="display:block;"></a> You can get the image source of your logo by going to your site, right click on your logo, and select 'copy image url'. You can change the width to whatever suits your needs by adjusting the 400w value.