andrew boddy design
Squarespace Web and branding designer

tips and insights

Squarespace Tips : CSS customisations - 2

Squarespace CSS Customisation

The more I work in Squarespace, the more i realise there is alway more to learn. I constantly find new techniques and coding by researching online, mostly in response to hitting a problem that i can’t solve using Squarespace’s standard style adjustments.

Here are some CSS Customisations that I found recently.

For the newbies…

Just copy and paste these bits of CSS Code on the Custom CSS section under the Design section.

Customcss.jpg
 

1. Coding a flat colour background for an index page (instead of using a coloured tile).

Sometimes you just want to simply colour the background of an index page to create separation from the previous page.

I have seen other blogs suggesting putting a coloured tile image in the background to achieve this, and while it does work, it has the limitation of the type on top, now reacting to it as though it were an image. This mean if you have set your text that appears over images to white (which is common) then your text over the colour tile will be white. So effectively you can’t set a light-tinted background because there will not be enough contrast.

The code below allows you to code a background colour keeping your default text colour (usually a darker text colour).

First you need to identify the URL Slug for that page. This targets the code to that page only.

Open the settings of that page by clicking on the gear icon for that page in the side menu.

CSS2.jpg
 

Start the code with a # symbol and directly after the URL slug with no space between.

eg: #services-text

Replace #f2f2f2 with your desired hex colour.

/* Colour Page Background */
#services-text
{background-color: #f2f2f2;}

2. Styling the form fields of a form

The standard Squarespace form is great for most applications, but sometimes it could benefit from a bit of styling.
You can use CSS to create more subtle variations to work with your design.

CSS styling on a Squarespace form

In the example above, the form field background, outline and title have been amended to work over the graphic background. See the code below.

/* Form Edits */
.form-wrapper .field-list .field .field-element {
background-color: rgba(255, 255, 255, 0.4);
border-style:solid;
border-color:#ffffff;
}
.title {
font-family: Proxima Nova, Open Sans, Corbel, Arial !important;
font-size: 12pt !important;
}

3. Removing a nav title from the main nav, whilst keeping the page in the index

This Squarespace CSS tweak specifically relates to the Pacific template and other templates that have a Jump Main Nav that comprise the titles of all the pages you are using in the index page. Sounds complex but it’s not when you see it in action.

In the site below, I wanted to remove the ‘HOME’ nav menu item that would automatically display Before ‘ABOUT’. There are already a lot of nav items and i wanted to thin the nav out.

Skye Flowstreym Squarespace Website

You simple target the URL slug as mentioned in first CSS hack.

in this case the URL slug is /home

So we take the slug home (minus the forward slash) and add -section with a # before the slug.
eg: #home-section

This appears twice in the code below. So you replace your URL slug in this configuration to make the nav title disappear.

/* Don't display Nav */
#mainNavigation
a[href*="/#home-section"],
#overlayNav #mobileNavWrapper nav div
a[href*="/#home-section"]
{ display:none; }

Amending the site using CSS can take a little bit more time, but it’s worth it to get the look you want.