Custom CSS for Supply Template Squarespace

Supply Template: Engaging grid layouts and sidebar navigation make it easy for customers to browse and buy.

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  with your site url. I’ll give you exact CSS..

4. How to find Page ID: https://beaverhero.com/squarespace-how-to/

body#collection-56d86c682b8dde72910d59bd is Page ID. Each page will have different ID

Header

Entire Site

div#siteHeader img {
    display: none !important;
}

One Page

body#collection-56c3744907eaa0f5dd7e4ab8 div#siteHeader img {
    display: none !important;
}

Remove Site Title (Mobile)

Entire Site

@media screen and (max-width:640px) {
div#siteHeader #siteTitle {
    display: none !important;
}
}

One Page

@media screen and (max-width:640px) {
body#collection-56c3744907eaa0f5dd7e4ab8 div#siteHeader #siteTitle {
    display: none !important;
}
}

Site Title Color

Entire Site

div#siteHeader #siteTitle {
    color: #ff0000;
}

One Page

body#collection-56c3744907eaa0f5dd7e4ab8 div#siteHeader #siteTitle {
    color: #ff0000;
}

Replace Site Title with Logo (Mobile)

Entire Site

@media screen and (max-width:640px) {
div#siteHeader img {
    display: block !important;
}
h1#siteTitle {
    display: none !important;
}
}

One Page

@media screen and (max-width:640px) {
body#collection-56c3744907eaa0f5dd7e4ab8 div#siteHeader img {
    display: block !important;
}
body#collection-56c3744907eaa0f5dd7e4ab8 h1#siteTitle {
    display: none !important;
}
}

Navigation Hover Color

.navigation a:hover {
    color: #f7f8f9 !important;
}

Navigation Active Link Color

.navigation .active-link a {
    color: #f1f2f3 !important;
}

Remove Navigation

Entire Site

.navigation {
    display: none !important;
}

One Page

body#collection-56c3744907eaa0f5dd7e4ab8 .navigation {
    display: none !important;
}

Header Background Color

Entire Site

header#header {
    background: #000;
}

One Page

body#collection-56c3744907eaa0f5dd7e4ab8 header#header {
    background: #000;
}

Remove Header

Entire Site

@media screen and (max-width:640px) {
header#header {
    display: none !important;
}
}

One Page

@media screen and (max-width:640px) {
body#collection-56c3744907eaa0f5dd7e4ab8 header#header {
    display: none !important;
}
}

Sticky Header (Mobile)

Entire Site

@media screen and (max-width:640px) {
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
}

One Page

@media screen and (max-width:640px) {
body#collection-56c3744907eaa0f5dd7e4ab8 header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
}

Change Hamburger Icon Color

a#navOpen:before {
    color: #ff0000;
}

Replace Hamburger Icon with Custom Icon

a#navOpen:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

Replace Hamburger Icon with word “Menu”

a#navOpen:before {
    content: "Menu";
    color: #000;
    font-family: proxima-nova;
    font-size: 16px;
    position: absolute;
    right: 10px;
}

Add word “Menu” beside Hamburger Icon

a#navOpen:after {
    content: "Menu";
    font-family: proxima-nova;
    color: #000;
    font-size: 16px;
    position: absolute;
    left: -30px;
}

Navigation Overlay Color

div#under {
    background: #f1f2f3;
}

Footer

Remove Footer

Entire Site

footer#footer {
    display: none;
}

One Page

body#collection-56c3744907eaa0f5dd7e4ab8 footer#footer {
    display: none;
}

Shop

Product Overlay Color

.masonry-overlay {
    background: #f1f2f3 !important;
}

Align Product Info (Name, Price)

section.masonry-content {
    text-align: left !important;
}

Product Info Font Size (Name, Price)

section.masonry-content {
    font-size: 20px;
}

Change Sale Color

.product-mark.sale {
    background: #000;
    color: #fff;
    font-size: 20px;
    text-transform: lowercase;
    border-radius: 20px;
}

Rename Sale Text

.product-mark.sale {
    visibility: hidden;
}
.product-mark.sale:after {
    visibility: visible;
    content: "Sale Sale";
    color: #000;
    background: #f1f2f3;
    padding: 5px 10px;
    font-size: 15px;
}

Product Page

Remove Product Share

.collection-type-products span.squarespace-social-buttons.inline-style {
    display: none;
}

Remove Add to Cart

All Products

.sqs-add-to-cart-button-wrapper {
    display: none;
}

One Products

body#collection-56c3744907eaa0f5dd7e4ab8 .sqs-add-to-cart-button-wrapper {
    display: none;
}

Change Price Color

All Products

.view-item span.sqs-money-native {
    color: #ff0000;
}

One Product

body#collection-56c3744907eaa0f5dd7e4ab8 .view-item span.sqs-money-native {
    color: #ff0000;
}

Remove Quantity Input

All Products

.product-quantity-input {
    display: none;
}

One Product

body#collection-56c3744907eaa0f5dd7e4ab8 .product-quantity-input {
    display: none;
}

Blog – Blog Posts

Remove Post Date

Blog Page

.view-list .published {
    display: none;
}

Posts

.view-item .published {
    display: none;
}

Remove Post Like/Share

Blog Page

.view-list .entry-actions {
    display: none;
}

Posts

.view-item .entry-actions {
    display: none;
}

Increase Post Detail Width

All Posts

@media screen and (min-width:1025px) {
.view-item main#main {
    width: 1000px;
}
}

One Post

@media screen and (min-width:1025px) {
body#item-56c741cd4a51d919538d1466 main#main {
    width: 1000px;
}
}

Change Post Pagination Color

.pagination * {
    color: #ff0000 !important;
}

Featured Image: Squarespace.com

Share this post:

Leave a Reply

avatar
  Subscribe  
Notify of