Leaderboard

Delicate, understated, and calming? Or bold, exaggerated, and energetic? There are so many options when it comes to packaging design or general branding, each telling its own story. How would you describe your design style? How did you choose what was right for you? Share your tips below!

Try this custom css @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1609256643007_5560 { position: fixed; top: 25vh; } #block-yui_3_17_2_1_1609256643007_6227 { position: fixed; bottom: 12.5vh } }

Dear Squarespace team, Full-width sliding images with the ability to place the same or different text and buttons on each image is absolutely a feature we need. I get this request on literally almost every site I build. I believe it is a feature that would get used millions of times over. I love what you have built and the more I get used to 7.1, I can see it's advantages. Adding this feature would make 7.1 an absolute no-brainer. Please acknowledge our collective desire to have this implemented as soon as possible. Thank you for all you do!

Number one that comes to mind for me is a simple FAQ page, with or without anchors. https://waterclinicfl.com/faq Put the text over a background image, make it the focal point. I did that in the same site I posted the link to. Headlines become important, they help grab the viewers attention, so the text following is read, Also a page of technical info , for example a company that sells computers or audio equipment could have a page of manuals and guides that can be read online and/or could be downloaded.

Add to Design > Custom CSS #grid .item .wrapper { background-color: rgba(41,206,214,.95) !important; }

On squarespace version 7.1, when in mobile view, if you have a long list of categories, it creates a scrolling list that travels sideways and the breadcrumbs are gone on mobile. Insert this code into your Custom CSS to make the categories center align and wrap, with no scrolling. It also makes the breadcrumbs visible on mobile. @media only screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-children { padding-top: 30px; flex-wrap: wrap; overflow-x: hidden; justify-content: center; } } @media only screen and (max-width: 575px) { .product

@paul2009 @bangank36 Just added a spacer above the empty text block and it worked! Updated now.

Hello @SolveigTraeet, @bangank36 is correct. If you post a link to the page in question, someone can provide you the actual code for the selector that you need.

Elfsight only allows 200 page views per month . Tagembed offers 1,000 views per month. 🙂

You can add this to Design->Custom CSS .sqs-block-content .ui-open, .sqs-block-content .ui-closed { margin-bottom: 0; font-size: 16px; }

@chrisp14 You're so close to having 100% HTML I suggest you use a code block set to HTML and add the following. <style> .expertise-list { font-size: 2em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3em; list-style-type: none; /* remove bullets */ margin: 0; /* remove margins */ padding: 0; /* remove padding */ } .expertise-list a { font-size: 0.5em; } </style> <p> Areas of Expertise </p> <ul class="expertise-list"> <li> Art Direction &

I think we gotta need a plugin to replace the excerpt content to audio player. A link to audio source should be placed and use javascript to handle the conversion,

@khupp, if you want to apply this to buttons across your site use this code /* Add this code to Design -> Custom CSS */ .sqs-block-button a, [class*='button'], [class*='btn'] { font-family: 'Josefin Sans' !important; }

Ok I figured out one workaround for my situation. I currently offer USPS and local pickup options. I wanted to offer some items local only. If I set the size of the item to like 100" x 100" x 100" and 100lbs then its too big for USPS and it will only offer the local options to the customer.

Each of the blog item has it own collection id, you can get it using this tool Squarespace ID Finder - Chrome Web Store (google.com) Then edit the max-width of it like so #item-5fb16614e44daa6be05199f7.tweak-site-width-option-constrained-width .Site { max-width: 980px }

If you are on a Personal Plan, you can add CSS to the Custom CSS panel in Design > Custom CSS instead. However, to do this you'll need to identify the unique collection ID of each page where you want the logo to change. For example, to change the Work page, you'd add this instead: #collection-5fea1f43c45737001d813e30 { .header-title-logo img { filter: invert(100%); -webkit-filter: invert(100%); } } Note that collection-5fea1f43c45737001d813e30 is the ID of the Work page. You can find the IDs of other pages by following this guide. If this helps you, please clic

Override the max-width in your custom css .gallery-caption { position: absolute !important; top: 0; left: 0; background: rgba(0,0,0,.4); height: 100%; padding: 0; opacity: 0; max-width: inherit; }

Each block has a unique id, you can find it by using this extension Chrome Web Store - Extensions (google.com) and replace below snippet. Add it to Design->Custom CSS #block-yui_3_17_2_1_1610289839946_11793 .image-block-v2 img { border-radius: 20px; }

Add the following to Design > Custom CSS. /* change width of image card text */ #block-yui_3_17_2_1_1610291409313_7400.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) .image-card { width: 75%; } This is for a v7.1 and specific to aubreywade's site. It needs to be modified to work on other v7.1 sites. This is an example to show that you can add more space around the text of an image card. All of the code only effects specific blocks but could probably be adapted to sections of pages and the whole site if needed. Let us know how it goes.

(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

You can use this trick, notice the nth(1) nth(2) is indicated the first and second image, you can assign different image for next item that way section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-item-wrapper img { opacity: 1; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:hover .gallery-grid-item-wrapper img { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; opacity: 0; } section[data-section-id="5eeb4b1243290c2c625c7dcc"

Creedon! Thank you so so much, man! It works! I'm so excited :')

I updated my previous code post.

Add this to hide it .header-title-logo img { opacity: 0; } I also suggest you remove the white background in the logo

You should remove the code and replace with this, it make sure the column on mobile keep 1/3 of width Add the snippet below to Design-Custom CSS @media only screen and (max-width: 767px) { section[data-section-id="5ff523221e9d50058e860c7c"] .row .sqs-col-4 { width: 33.33% !important; float: left !important; } section[data-section-id="5ff6b26590f0197fa6727ede"] .row .sqs-col-4 { width: 33.33% !important; float: left !important; } }

Wow! Thank you so much! I'd like to say I was close but I wasn't. I didn't even think to add this portion of your code. Works great! And I did end up going with 174. Thank you so much! :first-child :first-child:not([id]).col

Thank you so much! That worked, super helpful thanks for your time!

I updated my previous code posting. Let us know how it goes.

Kindly share your site url

Add a code block to your page with the following HTML. <select id="archive-pages" onchange="window.open ( this.value, '_self' );"> <option value="#"> Choose your page </option> <option value="/page1.html"> Page 1 </option> <option value="/page2.html"> Page 2 </option> <option value="/page3.html"> Page 3 </option> </select> You will of course have to change the page name values and urls. Let us know how it goes.

I provided a guide for this here: https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

Thanks for the reply @tazmeah. So the error I was getting with the code was: Uncaught IntegrationError: successUrl must start with either http:// or https:// After talking with Stripe, we found out that it was the "window.location.protocol" from the successUrl and the cancelUrl that was causing the button not to work. After removing that and adding "https:" to the urls , the button worked like a charm. Couple of other things to keep in mind. Make sure you are using the live public key, the domain you are working with is added in Stripe. That's it! The Stripe rep said he will f

@Tomz it appears that you have added the code to the site's Header Injection instead of the homepage's Header Injection area. To clarify, the code should not be added to Settings > Advanced > Code Injection > Header. Instead, go to the Pages panel, and then find the site's homepage (not homepagem). Click the Settings [gear] icon beside the homepage name. When the Page Settings panel loads, click Advanced and you'll see a code injection area specific to this page. If a post helps you, please click a "Like" option below ↘️

The error from your code is directing you to read Stripe's Integration Security Guide. I would recommend reading that and see if any of it makes sense to you. It's possibly something you need to handle on their end.

Thank you for helping end 2020 on a high! Circling back on the background transitions... thanks a ton for the help I needed. Appreciate your kindness in support.

Thank you that worked!

I saw black where the video is, but you can try this section[data-section-id="INSERT ID NUMBER"] .section-background .sqs-video-background { top: 100px; }

Try this

I actually contacted support and had them submit a feature request for me. I highly suggest you do the same thing and maybe we can make that feature happen!!!

Quick view on search is not displaying results every time, I might even say "usually." What is working on my sites is turning off "quick view" (so that the user has to hit the return bar. Then I'm seeing results every time.

I completely agree - I NEED customizable item-specific shipping rates. I'm scouring this forum and online message boards to see if anyone has found a work-around for this!

Try adding this to Settings > Advanced > Code Injection > Header: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> And add this to Design > Custom CSS: .header-nav-item.header-nav-item--folder a.header-nav-folder-title:after { font-family: FontAwesome; content: "\f107"; padding-left: 4px; } You should see this: Let me know how you get on. -Paul

You can add to Home > design > Custom CSS, with Personal/Trial Plan a[href="/portfolio/page-url"] { display: none; }

Looks like they use a background image for the underlines instead of text decoration or borders, so this worked for me in the CSS Editor: a {background-image:none !important;}

Hi Yes, there's a workaround you can add for this. The code below assumes that the mobile version of your home page has the URL 'mobile'. Add the following code to the Code Injection area of the desktop Home page (you'll find this on the page settings on the Advanced tab): <script> if (screen.width<760) {window.location="/mobile";} </script> Paul UPDATEI've updated this answer to allow for devices with higher resolutions and to allow testing on browsers when the width has been reduced. Use the code below instead, adjusting the URL and the width (in pixels) to match