Bold & Pop : 5 Easy Codes to Customize Your Squarespace Site Like a Pro

By this time you probably know how obsessed we are with Squarespace. Its ease of use and versatility no matter what type of business you have is a huge win-win! One of the best parts of Squarespace is their templates. All their templates are modern and professional so even if you’re just starting out with your biz, it won’t look like it! Yay! (Need help picking a template? We’ve got you covered!) While it’s really easy to customize each template using the style editor and various blocks and features, we’ve rounded up some of our favorite and most popular pieces of coding to help give you a seriously custom look!

Custom Fonts

This is by far the most common code we add to sites especially for brands that use very specific fonts. This way you can keep your branding consistent throughout your website and other marketing materials.

You will need to first upload the font file in the Custom CSS section of your site. To find this, go to Design > Custom CSS. Then scroll to the bottom and click MANAGE CUSTOM FILES and then click ADD IMAGES OR FONTS. You’ll upload the font files there.

Use the code below and replace “Font-Name” with the name of your font and change the url to be the url of the font file you just added (if you click on the file after it loads, the link will show up in the Custom CSS field and you can copy and paste into the code).

The code should look something like this:

 

@font-face {

    font-family: 'Font-Name';

    Src: url      ('https://static1.squarespace.com/static/589e629a15d5dbf86995e2b/1487128320962/Font-Name.otf');}

 

To use the font for the following text, you’ll need to add this additional code (Use the font name you used for the font-family above where it says Font-Name):

Headers:

h1, h2, h3 {

    font-family: ‘Font-Name’ !important;

    }

Body/Paragraphs:

body, p {

    font-family: ‘Font-Name’ !important;

    }

Bold Banner Text:

desc-wrapper, strong {

    font-family: ‘Font-Name’ !important;

    }

Change Color/Thickness of Line Block

On some templates in Squarespace you are able to change the Line Block color through the Style Editor but on others, your only option is the default color for that template (usually grey or black). If you can’t adjust the color of your Line Block in the Style Editor, you can use this code to adjust both the color of your Line Block as well as the height/thickness. You'll want to replace #COLOR with whatever color you'd like and adjust the height accordingly as well. 

 

.sqs-block-horizontalrule hr { 
  background-color: #COLOR; height: 5px !important; }

 

If you just want to adjust the color, simply add this code without “height: 5px !important;” and vice versa for if you just want to adjust the height.

Change Social Media Icon Colors

Just like with your Line Block, on some templates you can adjust the color of your social icons in the Style Editor. However, if you can’t adjust, use the following code for the knockout style social media icons. Again, replace #COLOR with whatever color you desire! 

 

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

    fill: #COLOR !important; }

 

They’ll look at little something like this

Collapsable FAQ

Love those FAQ sections where it just displays the questions and you have to click the question for the answer to open? Like this! We’re sharing how you can do just that with your Squarespace site!

First, you need to add the below code in the site-wide Code Injection. To find this, go to Settings > Advanced > Code Injection Header:

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

Then, you need to add the jQuery script below to the page specific Code Injection. To find this, click the “gear” icon next to the page you want to add the FAQ to and then go to Advanced tab and voila, the Page Code Injection:

 

<script>

    $(document).ready(function(){

    $('.markdown-block .sqs-block-content h2').css('cursor','pointer');

    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();

    $(".markdown-block .sqs-block-content h2").click(function()     {$(this).nextUntil("h2").slideToggle();});

    });

</script>

 

Then you will need to add a Markdown Block on the page with the following structure:

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

Change Type Font and Color On Just a Few Words

Sometimes you just want one or two words in a sentence to be a different color or font which isn’t necessarily possible using the headers since it will change the whole sentence. So instead of using a text block, you’re going to use a Markdown Block and your sentence will look a little something like this:

 

Roses are <span style="color:red; font-family:Georgia; font-size:2em;">red.</span>

 

The text in between the <span> </span> (so in this case “red”) is what will be changed while the rest will remain the same as what you have in the Style Editor.

If you just want to adjust only the color, simply add this code without “font-family:Georgia; font-size:2em;” and vice versa for if you just want to adjust any of the other elements alone.

And there you have it! Five easy ways to customize your Squarespace website using code to make it feel more unique and on target with your brand!

Need a few other ideas on how to customize your Squarespace site without using code? We have your covered with those ideas too!

P.S. Exciting news! We launched a free #BoldBossTribe Facebook Group and would love for you to join us! Come on over!

6 Comments