Guide
Enabled settings and simple CSS styles.
This template includes additional CSS for simple design tweaks. Everything else will be related to Squarespace’s built-in settings.
Go To Design > Custom CSS
Settings
Squarespace Settings
These built-in style settings that have been enabled.
-
Site Animations (Design Settings)
-
Image Block – Border Radius (Block Settings)
-
Text Block – Border Radius (Block Settings)
-
Header – Border Style (Header Settings)
-
Header – Drop Shadow (Header Settings)
Other style settings (fonts, colors, buttons, etc) can be found in the site styles.
Files
Downloadables
This template does not included any downloadable files. Images are sourced from Unsplash.
Text Block – Border Style
Adds a border style to the text block when the background setting is enabled.
// TEXT BLOCK - Border Style When Set With Background Setting //
.sqs-block.sqs-background-enabled {
border: 1px solid #eee;
}
Navigation Folder – Link Hover Style
Adds a hover border style and extra padding between the links in the navigation drop down folder.
// NAV FOLDER - Link Hover Style //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
}
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
padding: 10px 15px;
border: 1px solid #fff;
}
Navigation Folder – Border Style
Adds a border style, rounded corners, and padding to the navigation drop down folder.
// NAV FOLDER - Border Style //
.header-nav .header-nav-item--folder .header-nav-folder-content {
border: 1px solid #eee;
border-radius: 10px;
padding: 15px;
}
Mobile Menu – Link Size
Adjust the size of the links in the mobile menu.
// MOBILE MENU - Link Size //
@media screen and (max-width: 800px) {
.header-menu-nav-item a, .header--menu-open .header-menu .header-menu-cta a {
font-size: 22px !important;
font-weight: 700;
}
}
Italic Text – Pill Style
Adds a pill style to any text when set to italic.
// ITALIC TEXT - Pill Style //
em {
color: #265cff;
background: #EEF2FF;
padding: 8px 15px;
border: 0px solid #000;
border-radius: 5px;
font-style: normal;
}
Blog Post Image – Rounded Corners
Adds rounded corners to the blog post image.
Only applies to the Basic Grid, Side By Side, and Alternating Side By Side blog layouts.
// BLOG POST IMAGE - Rounded Corners //
.blog-alternating-side-by-side .image-wrapper, .blog-side-by-side .image-wrapper, .blog-basic-grid .image-wrapper {
border-radius: 10px !important;
}
Blog Read More Link – Button Style
Adds a button style to the blog post’s read more link. Applies to all blog layouts.
// BLOG READ MORE LINK - Button Style //
.blog-more-link {
background: #EEF2FF;
padding: 8px 15px;
border-radius: 5px;
font-weight: 700 !important;
}
.blog-more-link:after {
display: none;
}
Page Section – Border Style
Adds a border to the bottom of each page section.
// PAGE SECTION - Border Style //
.page-section {
border-bottom: 1px solid #eee;
}
Form Block – Background and Border Style
Adds a background color, padding, and border style to the form block’s text-based input fields.
// FORM BLOCK - Background and Border Style //
.form-wrapper .field-list .field .field-element, .eTv7qUMqLR9lJxpIAC3F, .form-wrapper .field-list textarea {
background: #fff;
border: 1px solid #ddd;
padding: 20px;
}
Coming Soon Page – Hide The Header and Footer
Hides the header and footer on the Coming Soon page. Use this free tool to find IDs of future pages.
// COMING SOON - Hide Header & Footer //
#collection-12345 {
header, footer {
display: none !important;
}}
Freebies
Free plugins library.
Customize your template even more with our library of 500+ Free Plugins for Squarespace.
