Squarespace Tips #3 - Text Styling

 

Bold Text Colour


Fancy adding an extra splash of colour to your text content?


The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.


Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

// BOLD TEXT COLOR //
b, strong {
color: #fecb2f !important;
}
 

 

Link Hover Colour


Some templates offer the option to change the link hover colour but if yours doesn't, you need this!


The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.


Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

// LINK HOVER COLOR //
a:hover {
 color: #fecb2f !important;
}
 

 

H4 and more

Ever wanted to add more heading styles to your text? With the code below you can have as many as you like - you are no longer limited to just H1, H2 and H3!

If you need help adding CSS to your Squarespace site please read our guide here.

Step 1: Add a Markdown Block and insert the following:

<h4>Some Text Here</h4>

Replacing the 'Some Text Here' with your required text content.

Step 2: Insert the CSS

h4 {
 font-size: 16px;
 font-weight: 400;
 color: red;
}

Step 3: Style your Heading

Now change the 16px to a value you want for the size of the text. Change the font-weight value to either 100, 200, 300... 700, 800 or 900 and change the colour to a colour of your choice. The great part about this is you can go back a repeat this tutorial with H5 and H6 and H7 and so on if you want to.

If you font size or colour is not changing then try putting !important between the value and the final ; like this:

font-size: 16px !important;
 

 

Underline Body Links

Depending on which template you're using, you may be able to change the styling of links within the main body text. However, if your template doesn't allow this, use this code snippet to change the style.

The following code snippets need to be inserted into your main CSS Editor window. The settings in bold can be changed to 'overline' or 'line-through'. If you need help adding CSS to your Squarespace site please read our guide here.

// UNDERLINE BODY LINKS //
main a {
text-decoration: underline !important;
}
 

 

Custom Bullet Point Icons

Sometimes bullet point lists can be less than exciting... If you want to make them look unique then this code will allow you to replace the standard bullet point with any image you like!

The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Step 1: Add the CSS

Copy and paste the code below to the Custom CSS editor on your Squarespace site. This code includes two bullet icon styles - one for the 'bulleted' list and one for the 'numbered' list, so you can include two different styles!

// CUSTOM BULLET POINT ICONS //

// REMOVE DEFAULT NUMBERS/BULLETS
ul[data-rte-list] li>*:first-child::before {
  display: none;
}

// BULLET POINT LIST //
ul li::before { 
  content: ' '; 
  display: inline-block; 
  background-image: url(); 
  background-repeat: no-repeat; 
  background-size: 20px; 
  background-position: center; 
  width: 20px; height: 20px; 
  position: absolute; 
  margin-left: -25px; 
  margin-right: 0px; 
  margin-top: 0px; 
  margin-bottom: 0px; 
}

// NUMBERED LIST //
ol li::before {
  content: ' ';
  display: inline-block;
  background-image: url();
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  width: 20px;
  height: 20px;
  position: absolute;
  margin-left: -25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

Step 2: Upload your new bullet point icon
Change the url() of the background-image to whichever image you would like to use.

To do this: in the CSS editor, click inside of the ( ) and then click 'Manage Custom Files', from here you can select an image file or upload a new one.

When you have done this you can adjust the size and positioning (by changing the bold values in the above code) to suit your site design!

Thumbnail photo credit - Squarespace.

 
 
TipsJoe Cory