Leaderboard

@HarKS Yes, there is a way to do this, and it is very easy to do so! Just go to your Squarespace site-click edit-then click the header and click the button that says “Edit header”. After you pressed that button, there should be a few different sections such as header layout, logo and site title,etc. You will want to press the section that says “style”. Now you can customize the link spacing, and more! I sent screen shots down below to help you more. Do you have any other questions? Thanks!

You can create your own page to do this. See https://support.squarespace.com/hc/en-us/articles/205814388-Creating-a-landing-page

Add the following to your custom css area after any code that may already be there // Change color of close, next and prev icons .sqs-lightbox-close, .sqs-lightbox-next, .sqs-lightbox-previous { &:before { color: #000 !important; // Substitute whichever color you want - I have set it to black #000 } } // Force arrows to always be visible .sqs-lightbox-next, .sqs-lightbox-previous { opacity: 1 !important; }

I am getting frequent contact form notices from 2 of my websites and they are spam. They all have the name listed twice, an email that typically doesn't go with the name or is non-specific, a fake or unfinished website, and 1 word in the message. See picture for example. Is there a way to block these or change something to minimize getting them?

Site URL: https://dgmedlemmer.squarespace.com/ Hi, Is it possible to sort i.e. summaries or achives alphabetically without plugin? If not, is it possible to sort anything Squarespace alphabetically? Maybe the Index collection? Or pages in a folder?

@derricksrandomviews You helped me fix it. There was a bad piece of code for a font in CSS stopping all other CSS working. Thanks so much.

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-section-5f6681abdc971b4710571861>.row>.span-4 { width: 33.33% !important; float: left !important; } }

Use this code in Design -> Custom CSS #collection-5f1d1f8d0e1af3503caff550.homepage .header-announcement-bar-wrapper { filter: invert(1) !important; } Please use the like button if it helps you! Best, Leopold

In addition to @paul2009's excellent advice it wouldn't hurt to quit out of your browser and also restart your machine. Get a fresh start with everything! 🙂

Can you share site url? We can help easier.

@derricksrandomviews I got rid of the Read More button. And added an animated scroll down gif instead. So much better, and makes sense. Now the visitor will scroll down right away and find the variety of content. Thank you!

The Read More button, with a super scroll template, like Brine or any 7.1 site, that button in the first section, tends to take people away from rest of the "first" page of your site. I think you need something that tells folks to scroll down. Your site has a lot of good stuff down there that folks may miss when they first visit. I know they can get back there but its best to make the first page just that, the first page.

Try this guide. https://beaverhero.com/2sites-same-subscription/

Can you share link to page where you use code block? We can check easier.

Hi Paul, Great, thanks for your help! cheers, Kennedy

Add to Page Settings . Advanced > Header <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 40vh !important; } } </style>

I jumped that gun on that one so don't use it. Not that you need it now but padding-left would be more correct. Updating my previous post.

Add the following to Design > Custom CSS. .site-title.canvas-style-masthead-logo-left #topNav>nav>ul>li>a { padding-bottom: 13px; } That is about half the space between than there was before. You can adjust the number to suit. Let us know how it goes.

Use this lightbox plugin. it should work.

Because it’s the cart, the CSS won’t take effect immediately. You’ll need to save it then refresh the page.

(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: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.

@jpeter that did the trick! thank you, thank you

Thank you! Worked like a charm 😄

Site URL: http://www.millerbest.com/ Hey guys, I currently have a website made with Avenue template. The home page is an index page, which features a variety of different images that click through to other pages. I currently have the 'show caption on hover' setting, but I'd love to get an animated gif playing/looping when hovering/mouse over. Is this possible? I've searched through the forum and found a few leads, but I'm not sure I understand where to embed the custom CSS and where to upload the gif etc. Thanks!

You can show two-line product titles or add custom badges to the products. I've linked some articles that I wrote about these. If a post helps you, please click a "Like" option below ↘️

That's because 7.1 kind of is the master template. The examples you start with are all just various iterations of the same code base - they're not distinct templates - as opposed to 7.0 which featured a number of different ones (which made the template name/family so important). I agree that Squarespace should make this clearer. The template name is now redundant for two reasons. First, 7.1 allows you to achieve the layout and look of all of the starter websites, regardless of which one you start with. Blog layout, colours, fonts, everything. The second is that 7.1 doesn't allow you to switch templates - the master template base makes this an unnecessary feature.

@tuanphan - adding the full URL worked! i only spent three days trying every other imaginable solution...

Add to Home > Design > Custom CSS /* remove white right */ @media screen and (max-width:640px) { html, body { overflow-x: hidden; } }

You will need to get the block id for each image. #block-yui_3_17_2_1_1599925188392_12878 .intrinsic .image-inset { border-top-left-radius: 40%; border-top-right-radius: 40%; }

Add to Home > Design > Custom CSS /* Staff - Wienkamp page */ @media screen and (min-width:768px) { div#block-b1204f7dea47721483c4>.row:nth-child(2) { display: flex; align-items: center; } }

OK, I was finally able to figure this out with youtubes API. I have a client that requested something similar, so I had to really get into this...... https://codepen.io/r-w-p/pen/KKzeVmb Currently not working 100% in firefox, you have to click play to get it to start working. Not sure whats up with that yet. Edit: fixed on firefox...... I hope.....

Hello, I'm re-doing my website using the Flatiron Template but want the galleries to be a grid like "Wells Template" and not a straight line. Essentially I prefer the homepage of flatiron but want to combine the galleries of Wells, is there a way to do this? Attached is an image how I want the galleries to look once clicking on the thumbnail. Thanks.

Add to Home > design > Custom CSS [data-section-id="5f52a4e32e2178461e254221"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; }

Add to Home > Design > Custom CSS .item-pagination[data-collection-type^="portfolio"] { display: none !important; }

Hey! Thanks for the answer! In my situation, since I'm using Portfolio component, individual projects (sub-pages) inside doesn't have similar settings: https://www.dropbox.com/s/8t90f0svjiemke9/Screenshot%202020-09-10%20at%2012.13.29.png?dl=0 Is it possible to lock individual projects in Portfolio component?

Add to Home > Design > Custom CSS /* Showroom title */ h3.nested-category-title { font-size: 3rem !important; }

Do you still need help on this? I will give the code

Add to Home > Design > Custom CSS /* burger 3 lines */ .burger-box .patty { transform: translatey(0) !important; height: 2px; }

Your site is private. Your code should work for 7.1, you are missing the } You should also use em and not px, you could try this as well. .header-nav a { font-size: .8em; } If you set your site up for password access, I can find out the correct code if these dont work.

Add to Home > Design > Custom CSS .blog-basic-grid--text { position: absolute; width: 100% !important; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; opacity: 0; background: transparent !important; } .blog-basic-grid--text * { color: white !important; } .blog-item a:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); transition: all 0.25s; opacity: 0; } article.blog-item:hover a:after { opacity: 1; } article.blog-item:hover .blog-basic-grid--text { opacity: 1; }

What's even more confounding, is that the controls are there. They simply don't work as yet. Social sharing is such an integral part of marketing for most of us, and it would seem to me that implementing this function should have been at the top of the list of things-to-do for the Squarespace team.

I agree these are ugly. We need the option to change colours and create something less intrusive. This should be base-standard with Squarespace and can't believe it's not on 7.1!

Hey zerosite, I'm not sure you already solved this, but to get the gallery to go under the navigation I've added this code in the page advanced tab. <style> .page-section:first-child { padding-top: 0!important; } </style I hope this helps :)

@DylanJ Were you able to find a solution to this?

Here's how I did it: 1. Name and enter your link: ex: #about 2. Add your anchor: code block: <p id="about"></p> 3. Smooth our scroll: Open custom css and add: html { scroll-behavior: smooth; } Site is still private for a client but I can link to it as proof once it's live.

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?

How did you fade in and out your index gallery? I haven't yet to have this question answered. I'm not a super coder, but it seems like the solution should be a simple one. Thanks.

add to Home > Design > Custom CSS /* Page 1 */ div#block-yui_3_17_2_1_1578074906228_52324 .image-card { background: purple; } /* Page 2 */ div#block-yui_3_17_2_1_1578084749729_31301 .image-card { background: blue; } You need to inspect html structure to find Block ID of 11 Pages. See how to find block iD

I could really use some help with this issue; has anyone tried to do anything similar?

So depending on the template you're using you should be able to remove it in the style editor. Failing that place the below in you websites CSS. .sqs-add-to-cart-button-wrapper {display:none!important}