Themes & Templates: Why It Matters
Squarespace has a ton of fabulous premade website styles, designed to help anyone launch a gorgeous site right out of the box. While I make it my mission to help you style those websites even further, I first had to learn how Squarespace built so many different options. It turns out these use a theme and template system; every theme has a specific set of elements to it, that behave a specific way. Templates are the different versions of those themes with unique styles.
Why People Love Brine
In the communities and forums I participate in, people kept talking about Brine templates being the best, the most versatile. When I first got started, I didn't understand why these folks didn’t just make some code changes to get any template to do what they wanted. Then I had my light bulb moment.
CSS is Cascading Style Sheet
This means you can only change the style of a site, but not the functionality or the structure. Forcing any website, Squarespace or otherwise, to do something outside of its normal functions isn’t that easy, and doesn’t always look great, especially on responsive sites… but I will save that rant for another article. The long story made short, a majority of the Squarespace developers I trust use Brine templates and I am now one of them. This theme has a lot of flexibility and virtually all of the functionality I could want has already been coded, so I get to focus on making it pretty.
They all can be updated
All that being said, using custom CSS in Squarespace is a fabulous way to change or update any site to match the look of your brand. But, if a CSS code isn’t working it might be because it was written for a different theme.
But you just said….
Yup, I did say they can all be changed with CSS. But not every template uses the same name for the same thing. The page content is a great example of this. In Brine templates, the name for the main page content is .Main In Bedford templates it’s called #siteContent and in Pacific templates, it’s referred to as #page. The good news is that a majority of other things, like text, buttons and even quote blocks, use the same name. In my Custom CSS tutorials I try to specify the theme for the code I am sharing, so make sure you know the theme you are using!Use the chart below to look up your template name and confirm which theme you are using:
Don’t know your template name? Here is how you find out!
|Theme Name||Template Name||IMHO|
|Aviator||Aubrey, Aviator, Encore (discontinued)|
|Bedford||Anya, Bedford, Bryant, Hayden||Bedford is the first theme I started with, and still a strong favorite for easy to use layouts and styles|
|Brine||Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West||Brine is one of the most versital themes so I test all of my codes here!|
|Montauk||Julia, Kent, Montauk, Om|
|Pacific||Bryler (discontinued), Charlotte, Fulton, Horizon, Naomi, Pacific||Pacific & York are great templates for single page designs|
|Skye||Foundry, Indigo, Ready, Skye, Tudor|
|Tremont||Camino, Carson, Henson, Tremont|
|York||Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York||York & Pacific are great templates for single page designs|
What is my templates name?
If you don’t remember the template you started building with, this is how you find out! From your main menu, navigate to design, then to template. Here you will see which template is currently installed on your Squarespace website.