CSS customisations - 2

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.

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.

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.

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.

Squarespace web designer tips - removing nav title

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"]

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