3 ways to brand your squarespace site like a pro + free css

The secret is out! We L-O-V-E Squarespace and build all of our sites (as well as our own) on this incredibly user-friendly platform. And, while Squarespace offers a selection of beautiful templates, every so often the designs need a little extra something-something.

Typically we start customizing a website by creating unique, branded graphics in Adobe Creative Cloud, but we also tend to implement a little extra CSS coding so that we really deliver a bespoke site to our clients. Now, now, there is no reason to be intimidated by the letters "CSS" (which stand for Cascading Style Sheet, btw.) Just think of it as adding a fresh coat of paint to your site. And, once you know where to add and how to customize the code, you'll see how simple and easy it is to brand your Squarespace site like a pro with a little CSS magic!

Below, we are sharing three of our absolute favorite CSS customizations along with a step-by-step guide on how to apply them to your site. You'll be amazed at how quickly you can take your site up from basic to custom with just a few clicks.

 Blog - 3 Ways to Brand SS Site Like a Pro

1| Customize an Index Page Background Color

 Custom Index Background Color
.#lifestyle-intro { background-color: #f2e6e0;} }

To apply this bit of code simply head on over to the Admin panel on your Squarespace dashboard and follow these steps:

  1. Click on DESIGN and scroll down to find CSS
  2. Click on CSS and your coding window will open
  3. Copy the code above. I typically like to label all my CSS tweaks with a title (i.e. Custom Index Page Background Color, etc.) so that I know which group of code is used to achieve each technique.
  4. You will need to identify the index page slug url and apply it to the code above. For example, if you want to add a color to the page called 'Lifestyle Intro', your code will need to indicate this url #lifestyle-intro.
  5. In addition to the custom slug url, you will need to paste in the hex code for the color you would like to feature. For example, we typically use this pretty pale pink on our site #f2e5e0
  6. Finally paste the code in the CSS window and save.

2| Make Your Contact Form Standout with Branded Colors

 Custom Contact Form
.form-wrapper .field-list .field .field-element{ border:none; border-bottom: 3px solid; border-color: #ec4a87; background: #fff;
} }

To apply this bit of code simply head on over to the Admin panel on your Squarespace dashboard and follow these steps:

  1. Click on DESIGN and scroll down to find CSS
  2. Click on CSS and your coding window will open
  3. Copy the code above. I typically like to label all my CSS tweaks with a title (i.e. Custom Contact Form, etc.) so that I know which group of code is used to achieve each technique.
  4. Next you will need to paste in the hex code for the color you would like to feature as both your background color and the border color (or line) for each entry. On our site, we stick with standard white #f2e5e0 background and black #0000 lines.
  5. Finally paste the code in the CSS window and save.

2| Create a Custom Button in Your Site Navigation

 Custom Navigation Button
.Header-nav.Header-nav--primary .Header-nav-item:last-of-type {background-color: #f2e5e0;} }

To apply this bit of code simply head on over to the Admin panel on your Squarespace dashboard and follow these steps:

  1. Click on DESIGN and scroll down to find CSS
  2. Click on CSS and your coding window will open
  3. Copy the code above. I typically like to label all my CSS tweaks with a title (i.e. Custom Navigation Button, etc.) so that I know which group of code is used to achieve each technique.
  4. Next you will need to paste in the hex code for the color you would like your featured navigation button to appear in. Your button can really be any color you'd like, but it should be bold enough to stand out on your site, so that visitors are more inclined to click on it. We chose to feature that pretty pink again on our test site, #f2e5e0
  5. Finally paste the code in the CSS window and save.

Having trouble or looking for another CSS tip or trick? Give us a shout and we will give you a hand!