CSS TRICKS

SIMPLE TRICKS TO UPDATE YOUR SQUARESPACE SITE


LAST UPDATED 02/04/2019

 

CSS stands for  “cascading style sheet” and its a fancy way of making your Squarespace website do something special, outside of its normal functions. Now if the idea of code gives you the heebie jeebies, don’t worry! If you make a mistake in your CSS, you can always just remove it and Squarespace will work as it was designed to. Consider your backspace button the ideal “undo” option. But when you are ready to make some design changes, here are some common CSS tricks I use on client sites.


CUSTOMIZE YOUR COOKIE BANNER

.sqs-cookie-banner-v2 {
  background: #36B3A8 !important;
  border: 5px solid #ffffff;
  border-radius: 3px;
}



CHANGE THE BACKGROUND COLOR ON YOUR FORM

.form-wrapper .field-list .field .field-element { 
    background-color: #cdedec !important;
    border: 1px solid #000000 !important;
}



ALIGN BANNER TEXT TO THE LEFT OR RIGHT (this one was specifically for the Bedford template but can work on a few others in that same theme)

 .desc-wrapper {
     text-align: left;
 }



Ready to get started on Squarespace?

Check out my 2019 Squarespace templates or choose your own adventure and browse my YouTube tutorials below!