Style Editor Tweaks Cheatsheet

In this tutorial, I’ll show you how to finalize the set up of the style editor so that your site shows the template fonts, colors, spacing, tweaks, etc.

If you are a Squarespace Circle member and have access to the “import style pack (beta)” button at the bottom of the style editor, you can download the Granite Style Pack HERE.


SITE

  • Design: Full Width

  • Side Padding: 17px

  • Icons: Light

SITE: BORDER

  • Show Border: unchecked

SITE: LOADING

  • Enable Ajax Loading: unchecked

HEADER: TOP

  • Background: #000000

  • Padding: 5px

HEADER: BOTTOM

  • Padding: 30px

  • Center Layout: Horizontal

HEADER: LAYOUT

  • Element Spacing (Horizontal): 48px

  • Element Spacing (Vertical): 2px

  • Branding Position: Bottom Center

  • Tagline Position: Hide

  • Primary Nav Position: Bottom Center

  • Secondary Nav Position: Bottom Center

  • Social Position: Hide

  • Search Position: Hide

HEADER: BRANDING

  • Logo Width: 315px

HEADER: PRIMARY NAVIGATION

  • Link Spacing: 2em

  • Style: Fade

  • Font

    • Calluna Sans

    • Weight: 400

    • Style: Normal

    • Size: 12px

    • Letter Spacing: 0.25em

    • Text Transform: Uppercase

  • Color (Overlay): #3a3b3d

  • Folder Color (Overlay): #ffffff

  • Folder Text Color (Overlay): 3a3b3d

HEADER: SECONDARY NAVIGATION

  • Inherit Primary Navigation Styles: checked

MAIN

  • Color: #ffffff

  • Content Inset: 0

CONTENT: FONTS

  • Body Text

    • Calluna Sans

    • Weight: 300

    • Style: Normal

    • Size: 18px

    • Letter Spacing: 0.01em

    • Text Transform: None

    • Line Height: 1.5em

CONTENT: COLORS

  • Body Text

  • Links

FOOTER

  • Show Footer

  • Layout: Stacked

  • Padding: 0px

  • Alignment: Center

  • Background Color: #3a3b3d

FOOTER: BUSINESS

  • Show Business Info: unchecked

  • Show Business Hours: unchecked

FOOTER CONTENT: COLORS

  • Body Text: #ffffff

  • Links: #ffffff

MOBILE

  • Mobile Breakpoint: 1280px

MOBILE: TOP

  • Fixed Mobile Top: checked

  • Top Background: #ffffff

MOBILE: BOTTOM

  • Bottom Background: #ffffff

MOBILE: BRANDING

  • Position: Top Center

  • Logo Width: 180px (though you’ll want to adjust this if you’re using your own logo)

MOBILE: MENU ICON

  • Menu Icon Position: Top Left

  • Menu Icon: Hamburger

  • Menu Icon Color: #3a3b3d

MOBILE: SEARCH ICON

  • Position: Hide

MOBILE MENU: GENERAL

  • Side: Left

  • Backdrop Color: #ffffff

  • Show Close Button: checked

  • Close Background Color: #ffffff

  • Close Icon Color: #3a3b3d

  • Menu Color: #ffffff

  • Indicator Color: #3a3b3d

MOBILE MENU: PRIMARY

  • Font

    • Calluna Sans

    • Weight: 300

    • Style: Normal

    • Size: 14px

    • Letter Spacing: 0.25em

    • Text Transform: Uppercase

    • Line Height: 2em

  • Text Color: #3a3b3d

  • Convert Primary Nav to Buttons: unchecked

MOBILE MENU: SECONDARY

  • Inherit Primary Nav Styles: checked

04Kate Densmore