CSS Enhancements for your Squarespace Site

CSS or Cascading Style Sheets is a language that describes the style of an HTML document. The adjustments will allow you to modify your Squarespace templates further than what the traditional style editor provides.

Before we get started there are two main areas to add CSS code on your site. The first is located under "Design" > "Custom CSS". Anything entered here will effect correlated items throughout the entire site. If you would like to only adjust elements on a specific page you will go to the page settings and enter the CSS between <style> </style> tags under page code injection.

1

Adjusting Horizontal (Line) Rules:

The default horizontal rule has a considerable amount of padding. To reduce this add the CSS below. The bolded value can be changed to your preference. Additionally, you can change the height value for line weight / thickness.
 

hr {
   height: 25px !important;
   margin-top: 0px !important;
   margin-bottom: 0px !important;
 }
 

Increased Line Thickness Example

Want to adjust the color of the line to better match your branding? Replace blue with your particular color or use any #hex color code such at #f2f2f2
 

hr {
   color: orange !important; 
   background-color: orange !important;         
   border-color: orange !important; 
 }

Line Color Change Example

---

2

Input / CONTACT Form STYLING

You may want to increase or decrease the overall height of an input form block.  Simply add the code below and change the value as neeeded.

input {
  height: 20px;
}

Reduced Height Example

How about adjusting the background color of the form fields.

                 .form-wrapper .field-list .field .field-element {
                       background-color: #79c0da
                       }

Colored Form Example

---

3

Announcement Bar Styling

The announcement bar is an effective way to promote a new feature on your site, product, or event. It can be accessed by going to "Design" > "Announcement Bar" and enabling it. Provide some depth to your announcement bar at the top of the page by adding a simple drop shadow.

.sqs-announcement-bar {
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.7)
 }

Announcement Bar with Drop Shadow Example

---

4

Hover Effect for Linked Images

If you're linking to a new page through images on your site you can create a dynamic fade hover effect by adding the code below. Simply change the hex code or opacity to increase or decrease the change.

a img.thumb-image:hover {
  background-color: #ffffff;
  opacity: 0.5;
}

---

Enjoy!