Leaderboard

Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use. --------------------------------------------------------------------- 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 { position: static; } .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); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } 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

For help on the forum, no donation is required or expected 😀. We enjoy giving back. A simple click on 'thanks' or 'like' is very welcome if a post is helpful.

This is the way that the Avenue template works and there isn't a built-in style setting to prevent this happening. It can be achieved with some custom code, but Squarespace don't have the resources to provide help with code. If you go to Design > Custom CSS and add the code below, it will remove the header when you viewing an individual product, but it will appear on the products list page. .view-item.collection-type-products .extra-wrapper.page-header { display: none; } For the benefit of others who read this post: This snippet is for Squarespace 7.0 only, tested on the Avenue template in the author's question.

Adjust the column width and the gutter width setting under layout.

If you are experiencing overflow (the extra black area to the right) you are usually better off finding the cause, than adding workarounds. That said, the code above is incorrect and the cause of the no-scroll issue. It should be overflow-x: hidden not overflow: hidden

You can also do this with any image file. To do this: Add three Image Blocks and place them side-by-side to create three columns. Size the icons to the required size before you upload them to the Image Blocks. If the icon is narrower than the content area (as it is in the example you provided) then you will see the required blank space on both sides of the image. This preserves the original image quality. Add a Text Block below each icon for the associated text.

Add to Home > Design > Custom CSS .sqs-add-to-cart-button-inner { visibility: hidden; } .sqs-add-to-cart-button-inner:before { visibility: visible; content: "tuan ssforum"; position: absolute; }

I fixed it. Thank you.

Mobile browsers and operating systems define whether banner videos load. This isn't controlled by Squarespace. Whether banner videos load will depend on a visitor's connection speed, device and browser version. When the banner video cannot load, the mobile fallback image will appear (if configured). There isn't an alternative option built-in, but you could use code to show a gallery instead of the image on mobile devices. To do this, you'd add and format the gallery to the page and show it in place of the banner fallback image using CSS and a media query.

I'm testing & writing, but I have this problem. What do you think? My intention is to create a page like this, you will see the categories All Branding, Creative ... Click on each category, it will filter out the corresponding portfolios And this is my original intention. Create Portfolio pages, and change sub-pages according to a special structure. Then create Filterable Portfolio Page, use Summary Block + Code to connect sub-pages in Portfolio Pages. However, I have discovered that Summary Block does not allow displaying porfolios from Portfolio pages :( And here are 2 ways to solve this problem. what do you think? W1. Still create portfolio pages, with sub-pages using special url structure. Then create a Filterable Page, use the Gallery Block/Section, add images, and insert links to the corresponding portfolios of Portfolio Pages. pros is that you can use the default styles of Portfolios W2. Create Blog Page (with Blog page = Portfolio Page, Blog Posts = Portfolios). Then create a Filterable Page (Portfolio Page), use the Gallery Block/Section to connect to the posts in the created blog page. pros is that you can use tags, categories

No, Squarespace do not offer a Norwegian language option. If your site has been built in English, third party translation services like Weglot can translate the checkout into Norwegian, but if your site has been written in Norwegian, there isn't an option available to do this. This forum is not monitored for product feature requests, so if you'd like to request Norwegian as a feature request, you should open a ticket through Customer Support. They'll document your feedback and share it with the appropriate team.

Add Code Block > Then change text <table style="width:100%"> <tr> <th>Year</th> <th>Description</th> </tr> <tr> <td>Jill</td> <td>Smith</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> </tr> </table> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; text-align: left; } table#t01 { width: 100%; background-color: #f1f1c1; } </style>

Site URL: https://fonts.adobe.com/ i have access to lots of type through my adobe account, which allows for embedding of webfonts. the instructions for doing so are pretty cryptic. here are two screens with code i can copy, but am not sure where each of these bits of code go within the squarespace interface. would the <link rel...> code go into "settings > advanced > code injection"? here is the code it generates: <link rel="stylesheet" href="https://use.typekit.net/pyw0kmh.css"> and would the code from the screenshot below go in to the "design > custom css" area? here is the code it generates: font-family: sabbath-black, serif; font-weight: 400; font-style: normal; font-family: sabbath-black, serif; font-weight: 800; font-style: normal; thanks in advance for any help!

Hey Guys! I'M looking to add a delivery time slot on my checkout page. Working this way: IF you place your order from Tuesday X to Monday X you can choose to be deliver Thursday Y ( AM or PM) ) or Friday Y ( AM or PM ) Let me know if there's any integration you know! Cheers! Pierre

Hide Top or Bottom images?

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .gallery-slideshow { height: 40vh !important; } }

Try contacting sqspthemes first, their support is good

Hi everyone I’m looking for some inspiration please! I’ll be having a few pages on the site dedicated to groups of people - Board of Directors and Fellows. I’ve looked at gallery options and I’m struggling for ideas on how to best present a group of headshots. I’d like to have all their headshots and upon clicking/hovering a short biography should appear. Any ideas on best practice or innovative ways of designing such a page, or even any examples would be really appreciated. Thank you.

Add to Home > Design > Custom CSS .Header-inner.Header-inner--bottom { align-items: flex-end; }

Can you share link to blog post?

place in custom css #topNav nav .folder-collection ul li a { background-color:#F4F4F4; }

(y) I still create templates weekly. If you know a good design, you can suggest it here. If I can create it, I will share it on the blog. here logos template I created this morning with Markdown Block. (change logo on hover)

I see it works here. Did you insert my code or..? @media screen and (max-width:767px) { /* make image fullwidth */ .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } /* make spacing between text blocks - both side */ .blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) { padding-left: 6vw; padding-right: 6vw; } }

@Naitik thanks for the input 🙂 Already had a look at Memberstack and it does sound interesting! Just like @dnmddy I'm also curious about what does Memberstack offer in comparison to other membership solutions?

Can you describe in detail hover effect?

Our current landing page doesn't fill both the desktop and mobile screen - is there a way to change this? I see desktop fine here. Do you use Mac? Add to Page Settings > Advanced > Header <style> @media screen and (max-width:767px) { #page section { height: 100vh; } } </style> Video Block Dropdown Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1590072153932_8631 { box-shadow: 5px 2px 2px 1px black; }

Is there a way to align certain sections of text differently? Center: Which text? Left: Text under R2R Video? "only the best... to image girl on table?" On that same note, can we add a line break to text on a button? I think it needs JavaScript. I will check again later. I'd like to make the text in the footer appear in two columns - is this possible? Line Break Is it possible to align an image in the footer differently Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* footer text 2 columns */ div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-2 { float: left !important; width: 50% !important; } div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-4:nth-child(4) { clear: both; } /* remove footer line break */ div#block-yui_3_17_2_1_1589894668829_18511 br { display: none; } /* align footer image */ div#page-section-5ec2ddfd8d38477789f31095 .span-4 .span-2:first-child { width: 50% !important; margin: 0 auto !important; float: none !important; } } too many questions, I will check later

no, different is http & https Your site uses https, so iframe needs https

Add to Home > Design > Custom CSS h1.BlogItem-title { font-family: "weareesilk"; }

Can you share link to your site? I can take a look

Which code did you use? Can you post here?

As far as I know, there are 3 ways to do this. One is to use JavaScript to create new form, this is the form I made for a client a few days ago. (Complex) The second is to use the 3rd service The third is to use Contact Form (Checbox, Select...fields) + JavaScript

Squarespace support has confirmed this. One can just start ignoring these messages from Squarespace. The problem with this is if there were a real problem with the Mailchimp connection one would never know. It's just not practical to check every one of these messages. Mailchimp should be giving Squarespace a reason for the rejection, I've requested this be included in the email message so they can be easily filtered out.

Add to Home > Design > Custom CSS .product-mark.sold-out { font-size: 20px !important; color: red !important; }

Add to Home . Design > Custom CSS .products.collection-content-wrapper .grid-image-hover { opacity: 0 !important; } img.grid-image-cover { opacity: 1 !important; }

<style> .sqs-slice-image img { max-height: 150px !important; } .sqs-slice-body { margin-top: 100px !important; } </style>

I did the same this past month because it's utterly ridiculous that it's not included in the 'new' hype version, and was told the same. But someone on mgmt did reach out, though they didn't make any promises. It's a pain in the butt. I was also asking about recipe inserts - you know the easy inserts where people can print the recipe if they want? For blogs this is all fairly basic functionality and options. Not the kind of thing I want to be paying for and not have.

Add to Home > Design > custom CSS. Replace with your image url .collection-type-blog.view-item header.Header.Header--bottom { background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }

A good perspective and that makes sense with one caveat. If this is designed towards a mobile experience then why doesn't Squarespace offer more design options for the mobile features? Simple design tools, such as styling the hover state, not just the button color. Styling the mobile menu without needing to customize the living daylights out of everything? It does feel a like half-developed platform. Not as fully featured as 7.0, geared towards the mobile crowd, yet doesn't offer mobile design options.

Unfortunately, put my faith in squarespace and opened a 7.1 site without knowing all the 7.1 facts. And the only way to go to 7.0 again is to cancel the account and repurchase. Which is lame.

I'm also having a problem with date formatting. The American date formatting looks jarring to our predominantly European viewers. Is there a fix coming, Squarespace?

As you are using a Squarespace 7.0 Brine-family template, there's an option in Site Styles that allows you to set a constrained width, so the site content does not get wider than your chosen width. This can be useful on some sites to prevent content 'spreading'. You can read more in the support article Brine template family.

Has Squarespace hinted at when they will make image captions readily available? It's ludicrous that it's not, knowing Squarespace has a trillion sites requiring this very basic feature.

I'm mildly aghast that this isn't a current feature. I *knew* was just missing this feature somewhere... apparently not.

Hi @Heytherethanks, best practice is to make affiliate links nofollow links. In Squarespace that means using a Markdown block which is available on the Personal plan. Here's an example of what you'd put in a Markdown block for an affiliate link: <a href="http://affiliatelinkhere.com/" rel="nofollow" target="_blank">your link in text</a> You can use rel="nofollow" to let search engines know that your link shouldn't count in ranking the linked page. And target="_blank" opens the link in a new window, which is best practice for linking to sites outside your own. The code is too long for the window above, but if you click inside the code block and select all you can paste it into a text editor to see the whole thing.

Try this code: <style> .page-banner-wrapper {display:none;} </style>

All this info is so great @brandon In case Squarespace is keeping an eye on this, the most annoying thing now for my client is that they will have to go from a Personal to a Business plan to allow for the JS customisation. Adding captions to galleries is free for a Personal pricing plan in 7.0 ... hopefully the captions will be also added as default for 7.1.

I'm using the Rally template and I want the thumbnail image for each blog post to appear at the top of each individual blog post. What CSS code can I add to my advance settings to display the image either above or below my blog title? I've seen one where you can add it to the header but I don't want it in my header. Thank you!

You can deactivate the right click for the whole site. That makes it harder to just copy the images with right-click(But doesn't save you from google images ;-) ) Add the code to SETTINGS / ADVANCED / CODE INJECTION > HEADER <script src="http://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script>

Your advice worked without a hiccup. I am exulting in a moment of personal mastery. Kale—I owe you one.