Custom styling for Squarespace

Squarespace is a content management system used mainly by artists and creatives. It comes with a good selection of themes and is nicely responsive. Most features are styleable; If your theme doesnt give options for the styling you require- what are you going to do? Look for custom css of course. But what if you dont know anything about css?

Brooke runs Light Temple Yoga and wanted boxes around the prices to make them stand out more. Simple right? Hmmm… ok er, no! so she asked for help and through a friend found me: itDoesCompute. I started making a tutorial for Brooke*:

1. First, open chrome ‘inspect element’ f12

First, open chrome ‘inspect element’ f12and start looking for the div (container) surrounding the prices.

*ok so the tutorial would prove too much for her and probably anyone else with no web design hand coding experience, but it will be helpful for some of you i’m sure.

2. Searching for the element to style

Searching through div ids and classes we find the a.healcode-link.healcode-pricing-option-text-link which when hovered over highlights in blue the price!

3. Squrespace Custom CSS

Now in our squarespace dashboard we find DESIGN and under this ‘Custom CSS’ -click on this:

4. Adding the styling {border:1px black;}

Adding the styling a.healcode-link.healcode-pricing-option-text-link {border:1px black;} doesnt work. Neither does .healcode-pricing-option-text-link {border:1px black;}

**for more info on the border style please check w3 schools**

5. Squarespace needs full css border property

After realising squarespace needs full css border property {border:1px solid black;} not partial {border:1px black;} (and also too that i was trying to style a dynamically loaded element -the price div) – I managed to figure the element to style .sqs-block-content a {border:1px solid black;}-which worked.


6. The Border was too close

The Border was too close to the text so I added padding:4px left and right: .sqs-block-content a {border:1px solid black;padding-left:4px;padding-right:4px;}


Which was just right for Brooke – thanks for letting me help you!