The three css tricks i use on Squarespace websites every time

There are several squarespace css tricks that I love to use on my websites, but there are a couple of tricks that are really transformative for a squarespace site. When it comes to images, fonts, and forms I always use this css code to style them on every site.

Images

First up is images. When I first started designing squarespace sites I realized that it was possible to make the images full width unless they were background images that filled the whole screen. I wanted to make one image hug just one side of the screen with no padding or margin.The only way to do this within squarespace’s settings is to remove the padding on the entire site, which can lead to problems with other pages down the line. With the custom code section of squarespace I can take away the padding on the image. To do this first inspect your page and copy and paste the image’s id. Then target the padding and margin, it will look something like the code below. You can target the left and right margin and play with the different pixel sizes until you get the right fit for your site.

/*image*/

#block-yui_3_17_2_1_1589845621087_13682

{

Padding-left:0px;

Margin-right:-20px;

}

Custom fonts

Another way to make your site differ from the typical squarespace template is to import custom fonts. I always add custom fonts to our website in order to move away from the list of standard fonts. In order to do this, you’ll first want to upload the custom font from your computer to squarespace. It will look something like this:

@font-face

{

Font-family: 'name';

Src: url('font url');

}

Then you’ll need to target the specific heading. It could be a heading 1,2,3,4,5 & 6. To do that enter the code below:

H1

{

Font-family: 'name';

}

Forms

Last but not least, almost every site has some sort of form and I always like to add this custom code to make it unique. Squarespace has a standard form block that isn’t bad, but I like to make sure the branding is consistent throughout the site and that it includes the form. The only thing you can do in the style editor of squarespace is edit the submit button. To target the rest of the form start with this code below.

This is for the form caption:

.Form-wrapper .Field-list .Field .Caption

{

Font-family: ‘font-name;font-size: 12px;color: #fff

}

This is for the form form fields:

.Form-wrapper .Field-list .Field .Field-element

{

Background-color: #fefefe;

Border: 1px solid #515151;

}

This is for the form form titles:

.Form-wrapper .Field-list .Title

{

Font-family: yourfontfamily;

Font-size: 10px;

Color: #000000;

Letter-spacing: .15em;

Text-transform: uppercase;

}