Free Squarespace Code Snippets for Web Designers

Over the years my personal database of CSS code snippets has GOT GAME. A lot of them I use on pretty much every project. In the spirit of community, I’ve decided to start sharing ones I think will be helpful for all the fabulous Designers I have here in our community.

I’m all about standing out from the crowd, being bold and unequivocally you or your brand. I will make sure these CSS snippets will help you take standard Squarespace elements and change them to suit your (or your clients) brand.

I’d love to hear if you end up using these or adding them to your database so please reach out if you do🖤

Active Icon for Navigation Links

When your website visitors are on a web page, it’s best practice to add an indication on the menu item that they are on that page. By default, the indication is usually an underline, but why not customise this? When choosing your active icon, be thoughtful of accessibility, make sure there is more than just a colour indication as some people are colour blind!

/**-- ACTIVE NAV ITEM ICON  --**/

.header-nav-item--active a {
  position: relative;
}

.header-nav-item--active a::after {
    content:'';
  position:absolute;
  background-image:url(YOUR SVG OR PNG FILE PATHWAY GOES HERE);
  background-size:contain;
  background-repeat:no-repeat;
  width: 15px; /*UPDATE IF NEEDED*/
  height: 15px; /*UPDATE IF NEEDED*/
  top:40%; /*UPDATE IF NEEDED*/
  left: -20px; /*UPDATE IF NEEDED*/
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index:2;
  opacity: 1;
  -webkit-transition: 0.8s ease;
  -o-transition: 0.8s ease;
  transition: 0.8s ease;
}

/*-- hide initial underline --*/
.header-nav-item--active>a {
  background-image: none!important;
}

Adding a custom highlight text colour

When you highlight text on a webpage, the default colour is a royal blue, dependent on the browser you’re using. You can easily update this to match the brand colours of the website.

::-moz-selection {
  background: COLOUR GOES HERE;
}

::selection {
  background: COLOUR GOES HERE;
}

Replace the standard bullet point with a custom branded bullet point

Easily implement arrows, ticks or stars next to text, by replacing the bullet point with a custom graphics.

/*--- BULLET POINTS --*/
ul[data-rte-list] li>*:first-child::before {
    padding-right: 10px;
    content: "";
  
}

/*---
CUSTOM BULLET POINT
---*/

ul li {
  padding-bottom: 10px; /*CHANGE IF NEEDED*/
}
  
ul[data-rte-list] li>*:first-child::before {
    content: '' !important;
    display: inline-block;
    background-image: url(YOUR SVG GOES HERE);
    background-repeat: no-repeat;
    background-size: 10px;/*CHANGE IF NEEDED*/
    background-position: center;
    width: 18px; /*CHANGE IF NEEDED*/
    height: 18px;/*CHANGE IF NEEDED*/
    position: absolute;
    margin-right: 0px;
    margin-bottom: 0px;
}