Custom CSS for Adirondack Template Squarespace

Adirondack Template: Clean, minimalist navigation and full header images provide an elegant framework for your creative vision.

 

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

Site Title Color

Entire Site

#header .site-title a {
    color: #ff0000;
}
#mobile-header .home-link {
    color: #ff0000;
}

One Page

body#collection-56c3709ab6aa6020e2418367 #header .site-title a {
    color: #ff0000;
}
body#collection-56c3709ab6aa6020e2418367 #mobile-header .home-link {
    color: #ff0000;
}

Site Title Font Size

Entire Site

#mobile-header .home-link {
    font-size: 20px;
}
#header .site-title a {
    font-size: 30px;
}

One Page

body#collection-56c3709ab6aa6020e2418367 #mobile-header .home-link {
    font-size: 20px;
}
body#collection-56c3709ab6aa6020e2418367 #header .site-title a {
    font-size: 30px;
}

Entire Site

#header .site-title a {
    display: none;
}
#mobile-header .home-link {
    display: none;
}

One Page

body#collection-56c3709ab6aa6020e2418367 #header .site-title a {
    display: none;
}
body#collection-56c3709ab6aa6020e2418367 #mobile-header .home-link {
    display: none;
}

Add word “Menu” beside Hamburger Menu

a#mobileMenu:after {
    content: "Menu";
    color: #ff0000;
    font-size: 20px;
    position: absolute;
    top: 20px;
    left: 45px;
}

Replace Hamburger icon with Custom Icon

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

Change Hamburger Icon Color

Entire Site

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

One Page

body#collection-56c3709ab6aa6020e2418367 a#mobileMenu:before {
    color: #ff0000;
}

Navigation Background Color

Entire Site

.nav-wrapper {
    background: #000 !important;
}

One Page

body#collection-56c3709ab6aa6020e2418367 .nav-wrapper {
    background: #000 !important;
}

Navigation Dropdown Color

Entire Site

.main-nav .folder .folder-child-wrapper li a {
    background: #f1f2f3;
}

One Page

body#collection-56c3709ab6aa6020e2418367 .main-nav .folder .folder-child-wrapper li a {
    background: #f1f2f3;
}

Remove Navigation

Entire Site

.nav-wrapper {
    display: none;
}

One Page

body#collection-56c3709ab6aa6020e2418367 .nav-wrapper {
    display: none;
}

Header Background Color (Mobile)

Entire Site

div#mobile-header {
    background: #000;
}

One Page

body#collection-56c3709ab6aa6020e2418367 div#mobile-header {
    background: #000;
}

Fixed Header (Mobile)

Entire Site

@media screen and (max-width:640px) {
div#mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.outer-wrapper {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}
}

One Page

@media screen and (max-width:640px) {
body#collection-56c3709ab6aa6020e2418367 div#mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
body#collection-56c3709ab6aa6020e2418367 .outer-wrapper {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}
}

Remove Header (Mobile)

Entire Site

div#mobile-header {
    display: none;
}

One Page

body#collection-56c3709ab6aa6020e2418367 div#mobile-header {
    display: none;
}

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #f1f2f3;
}

One Page

body#collection-56c3709ab6aa6020e2418367 footer#footer {
    background: #f1f2f3;
}

Footer Background Image

Entire Site

footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

One Page

body#collection-56c3709ab6aa6020e2418367 footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Remove Footer

Entire Site

footer#footer {
    display: none;
}

One Page

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

Shop

Align Left Product Title/Price

#productList .product-title {
    text-align: left !important;
}
#productList .product-price {
    text-align: left !important;
}

Change Product Price Color

#productList .product-price * {
    color: #ff0000;
}

Remove Product Price

#productList .product-price {
    display: none !important;
}

Change Product Price Currency

#productList .product-price .sqs-money-native:before {
    content: "AUD ";
}

Product Page

Remove “Back to Shop” Link

All Products

div#productNav {
    display: none !important;
}

One Product

body#item-56c35ac8555986cf566d3a57 div#productNav {
    display: none !important;
}

Remove Product Share Icon

.product-sharing {
    display: none !important;
}

Remove Add to Cart

All Products

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

One Product

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

Product belongs Certain Category

Change eyewear to category naem

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

Increase Product Short Description Width

All Products

div#productDetails {
    width: 70%;
}
div#productGallery {
    width: 29%;
}

One Product

body#item-56c35ac8555986cf566d3a57 div#productDetails {
    width: 70%;
}
body#item-56c35ac8555986cf566d3a57 div#productGallery {
    width: 29%;
}

Change Add to Cart Color

All Products

.sqs-add-to-cart-button {
    background: #f1f2f3 !important;
    color: #000 !important;
    border-radius: 50px !important;
    opacity: 1 !important;
}

One Product

body#item-56c35ac8555986cf566d3a57 .sqs-add-to-cart-button {
    background: #f1f2f3 !important;
    color: #000 !important;
    border-radius: 50px !important;
    opacity: 1 !important;
}

Rename Add to Cart Text

All Products

.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:before {
    content: "Order Now";
    color: #ff0000 !important;
    opacity: 1 !important;
    visibility: visible;
    display: block;
    position: absolute;
}

One Product

body#item-56c35ac8555986cf566d3a57 .sqs-add-to-cart-button-inner {
    visibility: hidden;
}
body#item-56c35ac8555986cf566d3a57 .sqs-add-to-cart-button-inner:before {
    content: "Order Now";
    color: #ff0000 !important;
    opacity: 1 !important;
    visibility: visible;
    display: block;
    position: absolute;
}

Product Background Color

All Products

.collection-type-products.view-item .content-inner-wrapper {
    background: #000;
}

One Product

body#item-56c35ac8555986cf566d3a57 .content-inner-wrapper {
    background: #000;
}

Product Background Image

All Products

.collection-type-products.view-item .content-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

One Product

body#item-56c35ac8555986cf566d3a57 .collection-type-products.view-item .content-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Blog

Align Left Post Title/Date

.collection-type-blog h1.title {
    text-align: left;
}
.collection-type-blog .date-author {
    text-align: left !important;
}

Remove Post Date

h2.date-author {
    display: none;
}
.view-item time {
    display: none;
}

Remove Post Tags

.tags-cats {
    display: none;
}

Remove Post Like/Share

.comment-share-like {
    display: none;
}

Decrease white space between Header & Post Title

.collection-type-blog.view-item .content-inner-wrapper {
    padding-top: 0;
}

Other

Site Background Color

Entire Site

body {
    background: #000;
}

One Page

body#collection-56c394e12fe1311397b709d2 {
    background: #000;
}

Translate “All” in Filters

ul.category-nav-links li.all a {
    visibility: hidden;
}
ul.category-nav-links li.all a:after {
    visibility: visible;
    content: "New All";
}

Translate “item” in basket

.absolute-cart-box .details .suffix {
    visibility: hidden;
}
.absolute-cart-box .details .suffix:before {
    visibility: visible;
    content: "new item";
}

Translate “Sign In” Button

span.sign-in {
     visibility: hidden;
 }
 span.sign-in:after {
     visibility: visible;
     content: "New Sign In Text";
     margin-left: -40px;
 }

Translate Check Out Button

.checkout-button span {
    visibility: hidden;
}
.checkout-button span:after {
    visibility: visible;
    content: "New Checkout Text";
    margin-left: -80px;
}

Translate “Shopping Cart” Title

h2.cart-title {
    visibility: hidden;
}
h2.cart-title:before {
    visibility: visible;
    content: "New Shopping Cart Title";
}

Translate “item” text

.cart-item-list-labels>span span {
    visibility: hidden;
}
.cart-item-list-labels>span span:before {
    visibility: visible;
    content: "New Item";
}

Translate “QTY”

.cart-item-list-labels div:nth-child(4) span span {
    visibility: hidden;
}
.cart-item-list-labels div:nth-child(4) span span:before {
    visibility: visible;
    content: "New QTY";
}

Translate “Price” (Cart Page – Table)

.cart-item-list-labels div:last-child span span {
    visibility: hidden;
}
.cart-item-list-labels div:last-child span span:after {
    visibility: visible;
    content: "New Price";
}

Translate “Sub Total”

.cart-container div:last-child span span {
    visibility: hidden;
}
.cart-container div:last-child span span:after {
    visibility: visible;
    content: "New Subtotal";
}

Featured Image: Squarespace.com

Share this post:

Start learning HTML/CSS basic to style your Squarespace Site.

Leave a Comment