Top 3 Easy CSS Tricks in Squarespace

Top 3 Easy CSS Tricks in Squarespace 

Probably everyone has a problem when the standard design settings in the Squarespace panel limit you and prevent you from changing some part of your site the way you need it. From my practice, though Squarespace makes it possible to customize the font, color and change some of the blocks visually, then with CSS you can change anything absolutely as you want.

 

 
iPhone 6-7-8 – 2@2x.png
 

In this tutorial I will share with you the most common tricks that save your time. and will make your website truly unique. This guide focuses on those who have no idea what CSS is and how to use it, so I tried to make it as simple as possible, easy to understand and easily repeatable.

 

If you do not go into details, everything you see on any site consists of two parts of HTML and CSS, and if compared with the house, then HTML is a wall and a roof, and CSS is your interior and the facade of the house. They work together and are used absolutely everywhere.

 

How to insert a CSS code

Simply open the Squarespace dashboard → Design → Custom CSS. In the window that you see on the left you need to add the CSS code.

open custom css.gif

How to identify a block

In order for CSS rules to work successfully for specific pages / blocks, you need to find their unique id.

The easiest way is to download an extension for Chrome that tells you the exact code you are looking for: Squarespace Collection / Block Identifier

 

CSS # 1. Making colorful gradient backgrounds.

 As you may have noticed - I adore the gradients and use them wherever I can :)

Therefore, this trick is for me number 1. Now I will show how to change the boring monotonous background into a colorful gradient.

To maximize the ease of using this hack we use two super cool services. My favorite collection of gradients: Fresh Background Gradients

And the plugin that I mentioned above.

1. Launch the plugin on the page where you want to change the background of a block and allocate the identifier to the block we want.

2. Go to Fresh Background Gradients and choose the gradient we like. Click on the Copy CSS button located in the lower right corner of the gradient.

3. Open Custom CSS by opening the Squarespace Admin Panel → Design → Custom CSS, modify the bottom snippet of the code and insert it.

Gradient code snippet

/* instead of #your_block_identifier insert identifier that you copied using Squarespace block identifier plugin */
#your_block_identifier {
  /* the code from webgradients.com */ 
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}


CSS # 2. Hide footer or header is a specific Squarespace page.

Often this is required when you want to make your linktree page for the Instagram, or post a preview on the page.

1. Open the page where we will hide the footer or header.

2. Launch Squarespace Block Identifier plugin.

3. Click on the selector that starts with #collection ...

2019-01-16 19.45.26.gif

4. Open Custom CSS by opening the Squarespace Admin Panel → Design → Custom CSS, modifying the bottom snippet of the code and inserting it.

#your_collection_id { 
/* hide the header */ 
  #header {
display: none;
}
/* hide the footer */
  #preFooter, #footer { 
    display: none;
  }
}


CSS # 3. Change font size of the specific title.

Yes, I know that the font size can be adjusted in Style Settings, but if you want to change the font size in just one place on the site, then use this CSS trick.

Open the page where we will hide the footer or header.

Launch the Squarespace Block Identifier plugin and select the block where our title is located.

Open Custom CSS by opening the Squarespace Admin Panel → Design → Custom CSS, modifying the bottom snippet of the code and inserting it.

#your_block_identifier { 
  /* change "p" to "h1", "h2", "h3" depends on what type of text you'd like to change */
  p {
    font-size: 20px; 
  }
}

There you have it! Hope this was helpful and helped make your Squarespace even more beautiful.

Other posts you might like: