What is a Layout?

Layouts are templates that tell Squarespace how to display your site, or in technical terms, they tell Squarespace what HTML to write to the browser. Layouts are made up of two separate parts: HTML and StringTemplate code. Your data (journal entries, pictures, etc) is completely separate from your site's layout, meaning that you can switch between layouts at any point. Your content is what Squarespace truly manages.

What is a Style?

A style represents visual customizations on top of a layout. Whereas editing an HTML template may be hard or time consuming (only attempted by users who want extreme control), editing a style is not. By editing a style, you can use Squarespace's visual interface to customize your fonts, colors, and various elements of your site's positioning. One layout with two different styles can look vastly different.

Can I make my own styles?

Yes. Squarespace provides you with many options for templates, but if you'd like, we provide advanced tools that allow you to customize and build styles you develop on your own. See this guide for more information on creating a custom style to make changes to your site appearance.

Can I share my styles with others who may also want to use them?

Yes. Within the Appearance editor, navigate to the Template tab, and click the export link to export your custom style. To import a style into your site, navigate to the Template tab within the Appearance editor, and click the import style link at the left of your screen.

Can I increase the width of my layout?

Yes. Click the "palette" icon in the upper right corner of your screen to access the Appearance Editor. Navigate to the Banner & Navigation tab, and click the button to "change widths." Choose the area on your site you'd like to change from the drop-down menu, and use the slider option to adjust this, or manually enter the pixel width into the "current value" field.

We have an illustrated guide for this here.

How do I change my site name? Title in browser window?

These notices may be changed from [Structure > Website Settings > Header & Footer] in your site manager.

Where do I set my time zone?

This is available in your website manager, under [Structure > Website Management > Locale].

How do I place a custom banner at the top of my website?

To make an image appear as a custom banner on your website, you must create a custom style for your website. To do this, click the "palette" icon in the upper right corner of your screen. In the appearance editor, navigate to the Templates tab, and click the "edit this style" link for your style. Follow the prompts to copy the style and create your custom style. See this guide for more information on creating a custom style.

Once you've made your own style, navigate to the Banner & Navigation tab within the appearance editor to add your banner image. Next to the "Banner Image (URL)" field is a button to "browse" for your banner image. You can use an existing image in General Storage, or select and upload an image from your computer. Once this is added, save your changes to apply this to your style. As a note, you'll need to ensure that your style is activated to apply your banner image to your live site.

We also have an illustrated guide for adding a banner image here.

How do I change my website fonts and colors?

To change fonts, colors and other visual elements, click the "brush" icon in the upper right corner of your screen to access the Appearance Editor. Once there, you will find many pre-defined styles that you can use for your website. To create your own custom style, click the 'Edit this style' link for a style you want to use as your starting point. Once you've created your own style, navigate to Fonts, Colors & Sizes within the Appearance Editor to choose the elements you want to modify and make your changes. When you're done, be sure to click the "enable style" button to apply your changes to your live site.

Why can't I use fonts from my hard drive on the web? Why are my font choices limited?

Only a certain set of fonts will work consistently across the web, and across all of the various clients that will be accessing your website. Squarespace's font choosers contain lists of all current "web safe", fonts.

I'm adjusting elements within my Customizable Elements interface. Occasionally, properties that I'm changing do not produce the expected results

In order to produce the final visual style for your site, elements from Customizable Elements are combined with elements from the Custom CSS tab of your site. Some designs on Squarespace rely on items in Custom CSS to specify advanced effects related to positioning or images that might appear on your site. To customize or remove these elements, remove lines that are appropriate from Custom CSS.

Which lines are appropriate? If you're trying to remove a background image that doesn't seem to be specified in Customizable Elements, there are most likely only a limited number of backgrounds specified from Custom CSS. Try removing them. Feel free to ask us for help doing this if you run into any problems.

There is a background color in my style that I can't seem to adjust. How can I remove or adjust this color?

Occasionally, your style will have a background color specified by an image rather than by a color in your Customizable Elements area. In order to adjust the colors in this image, you'll either have to provide your own version of the image, or remove the image from the Custom CSS area of your style editor.

What is the size of my banner area? What is the width of my website?

The size of the banner space is dependent on what layout you've selected, and what width you've selected for your layout. Within the Appearance Editor of your style there will be a recommended banner width, based on that individual style. You can view this from the Banner & Navigation tab, under the Banner Image (URL) field.

Alternately, you can measure your site to determine the size for your banner image. To measure your site, we recommend using the editing tool you'll be using to make your banner to measure the size of the layout. You can get a snapshot of your screen in windows using the Print Screen key, which you can then paste into your image editing program using the Paste function.

After adding your banner, you can adjust the padding/margins for the Header and/or Banner Image (if added) elements to adjust the position.

How can I add text to my banner image?

You should use the image editing program that you've used to create your image to add text to it. There is no way to overlay text from your site manager to the banner image once it has been uploaded.

Can I add a drop down menu to my site?

Yes. If you're using a horizontal navigation section on your site, you can add a folder to your navigation bar. You can add pages to your folder, which will automatically create a drop down menu in your navigation for you. See this guide for help with adding a horizontal navigation section to your site.

Note: Your horizontal navigation will only accept top level folders.

How do I add or change my background image?

To change your background image you'll need to create a custom style for your site. See this illustrated guide for help with this. In the appearance editor, navigate to the Fonts, Colors & Sizes tab, and choose the element you want to modify from the drop-down menu there. Click the background image field. If there is an existing image added there you can click clear to remove this from your site. To add a new image, click the select button -- you can either choose an existing image from your File Storage, or upload an image directly.

Can I remove the date from my journal entries?

Yes. You can configure the display of your journal elements directly in the configuration for the journal page. In the configuration screen, scroll down to the Post Display Options section to view your post elements. You can hover over an element, which will turn your cursor into a multi-directional arrow -- you can click there to drag this to a new location within your elements list, or move this to the unused element section to remove it from your entries.

*NOTE This feature is only available on V5 templates

Can I change the text on my send email page?

Yes. When logged in and viewing your send e-mail page, click the A icon in the upper right corner of your screen to switch to Content Editing Mode. Click direclty on the text that you would like to change to open the edit fields, and modify the text there.

How do I make my background image repeat down and across the page?

In the appearance editor, under Background Repeat, set this to not specified. With this setting, your background image will repeat horizontally and vertically.

Can I preview a style without changing my current layout?

Yes. By default, when clicking on styles in the Appearance manager of your site editor, styles are previewed and do not affect the way visitors see your site. To enable a style for your visitors, you must click Enable Style in the lower right while previewing. As a note, any structural changes you make (moving pages, widgets, etc.) will be immediately applied.