Using rally template Squarespace allows users to get unprecedented level of freedom. Users can become their own designers by injecting their own content into the website.  Thanks to recent Squarespace changes it is an option now.

However, doing your own design while having zero coding experience still has some limitations.

You may still need some additional knowledge for tweaking up certain things.

Let’s just look at some examples you may have issues with:

Will Rally Template Squarespace be a best bet for me.

How to Hide a page on Squarespace.

Manage Squarespace newsletter button CSS.

Set up Squarespace newsletter block round button.

Use Squarespace CSS cheat sheet,

Apply Before and after image slider Squarespace 7.1.

 Rally template Squarespace is a perfect fit for those who has zero coding experience. Today any businessman or even specialist is need of creating its own website. Ordering website from a designer or buying a premade template is not always a solution.

Each person has its own vision and would like to put this vision on his website without interference from another person. No matter if that person is a distinguished designer or a programmer.

So, let’s look at limitations one by one to figure out what extra needs a Squarespace owner would need to be able to work with his site constructor as a master with canvas.

How to hide a page on Squarespace.

In order to hide a page on Squarespace you need to follow several steps:

On the top of your menu click “Pages”

Put your mouse over the page you want to hide till it transforms to gear icon.

In the pop menu go down to “Enable Page” option and switch it to off.

As an alternative you can grab the page name with mouse and drag it underneath the list of page names of your left menu column. The offline pages that are out of use are stored there.

Another alternative would be to set page to “Hide page from Search results”. This would leave the page in its current state but nobody would be able to find it through Google or other search engines.

Manage Squarespace newsletter button CSS.

You can make your Squarespace newsletter button CSS to become a part of brand identity through adjusting color, shape and styling.  Especially if you prefer to create a newsletter block on your website.

Unfortunately even with latest changes Squarespace does not give that level of customization and we would need to customize it using Squarespace newsletter button CSS code.

If you want to change button color on hover you would need to add following to your CSS:

.newsletter-form-button {

color: #7cccbd !important;

border-radius: 0px !important;

transition: all ease-in-out 700ms !important;

-webkit-transition: all ease-in-out 700ms !important;

-moz-transition: all ease-in-out 700ms !important;

background-size: 100% 200%;

background-color: transparent !important;

background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #fac827 50%) !important;

}

Squarespace newsletter block round button.

In case you would want to change the shape of Squarespace newsletter block round button.

Changing of shape is done with the following commands:

.newsletter-form-button {

  border-radius: 0px;

  -webkit-transition: ease-in-out 0.5s !important;

  -moz-transition: ease-in-out 0.5s !important;

  -ms-transition: ease-in-out 0.5s !important;

  -o-transition: ease-in-out 0.5s !important;

  transition: ease-in-out 0.5s !important;

}

.newsletter-form-button:hover {

  border-radius: 50px;

  -webkit-transition: ease-in-out 0.5s !important;

  -moz-transition: ease-in-out 0.5s !important;

  -ms-transition: ease-in-out 0.5s !important;

  -o-transition: ease-in-out 0.5s !important;

  transition: ease-in-out 0.5s !important;

}

Finally changing the size of form fields is done with following:

.sqs-block-newsletter .newsletter-form-field-element {

padding-top: 10px !important; padding-bottom: 10px !important;

}

All these types of commands injected in custom CSS fields.

In order to get there in the Squarespace menu you need to go to Design, Custom CSS. And then insert the code into the opened-up field.

While you can adjust styles and fonts with custom CSS, some elements would still require manual plugin installation.

Squarespace CSS Cheat Sheet

To better handle the above examples and apply other CSS tweaks many users create a certain Squarespace CSS Cheat Sheet. This cheat sheet usually contains all the CSS codes needed to customize a template in the way Squarespace is not allowing you to.

One of the major examples is introducing a new custom font. Unfortunately there is no way to embed it on users side and you will have to use CSS.

The only way to set up your custom font is to install it manually.

1. Open your Custom CSS  menu by choosing Design-> Custom CSS.

• Put following snippet inside:  @font-face @font-face {font-family: “”; src: url(“”) format(‘opentype’);}

• At the bottom of custom CSS you will find “Manage Custom Files”. That is where you need to upload your custom font.

• Once your custom font is uploaded fill in the set of quotation marks (after “font-family:”).
• Click on a second set of quotation marks src: url(“”) and then click on the uploaded font name from below. You should see how the font name should appear inside the quotation marks.
• Now when you font is uploaded you can add it to headings or paragraphs or even title. Here is the list of lines you should add to change the fonts:

 Heading 1
h1 {font-family: ’FONT-NAME’;}

Heading 2
h2 {font-family: ’FONT-NAME’;}

Heading 3
h3 {font-family: ’FONT-NAME’;}

Heading 4 
h4 {font-family: ’FONT-NAME’;}

paragraphs
p {font-family: ’FONT-NAME’;}

Using Custom CSS field you can customize the font and apply styles to elements of your website which are not supported by Squarespace.