My favorite CSS for SquareSpace 7.1 sites.

So you started making a SquareSpace site thinking that it would be easy, right?

But, let me guess, once you started customizing your site, you weren’t able to fully make it your own. Or, perhaps, you got completely stuck on making broad changes to the colors and fonts.

No worries! I got you.

I have a previous SquareSpace hacks post to make your 7.0 site look more professional here, but if you have a 7.1 site, keep reading!

And if you’re wondering about the difference between 7.0 and 7.1, you can learn all about that here.

SquareSpace 7.1 has more varied layouts that you can mix and match. This gives you greater flexibility in creating the structure of each of your pages, but a custom CSS touch can still make your 7.1 site pop.

If you’re caught on the basic setup of SquareSpace 7.1, my Skillshare course “SquareSpace Customization Secrets” covers the basics too! You can try Skillshare for 14 days when you use this link.

What is CSS for SquareSpace 7.1?

CSS is a coding language, and it’s what you can use to alter the appearance of many SquareSpace website elements.

You’ll find the window to add custom CSS code under ‘Design’ at the very bottom of the menu.

CSS Code for SquareSpace 7.1

Here are two CSS changes I recommend for everyone to make their site look more professional and personalized.

Remove the underline from the header menu and footer links

The underline may not bother you, but I find that it makes the site look a little cluttered and just not as clean. Without the underline is more contemporary and sleek. Fortunately, it’s an easy change. All you need to do is add the following code to the CSS panel:

CSS code to remove the header menu underline:

.header-nav-item a{background-image:none!important}

CSS code to remove the footer link underline:

#footer-sections a {background-image:none!important}

Customize your contact form

Ideally, this is where potential clients are coming to get in touch, so I always think it adds a nice extra element of style to create a custom contact form using your colors. This is a common contemporary style that I like:

CSS code For SquareSpace 7.1 contact form

Note the form fields have an underline instead of being fully boxed, and the field background color has been changed. 

You can achieve this look with this code:

CSS code for contact form field backgrounds:

.form-wrapper .field-list .field .field-element {background: #d3d4db}

CSS code for contact form field underline:

.form-wrapper .field-list .field .field-element{ border-top:none!important; border-left:none!important; border-right:none!important; border-bottom:2px solid black!important}

The highlighted text represents where you would add your own color customization.

If you’d like to make more CSS changes, including the text highlight featured by the Contact form, check out my Skillshare course ‘CSS Customization Secrets’. You can try Skillshare for 14 days when you use this link.

Photo by Vlada Karpovich from Pexels

Best of luck! Xx, Kara

Ready for more?

Be sure to check out and subscribe to my YouTube channel. You can also view SkillShare courses (and a free two-week trial) here.

Sign up for services mentioned in post:

Squarespace ➡️ https://www.kcocreative.com/squarespace

Affiliate links! I only promote services that I have used myself, regardless of whether I have an affiliate account with them, and using affiliate links when available helps me to continue to provide useful information at no cost to my viewers/readers/peeps. Thank you 🥰