Adirondack Template: Clean, minimalist navigation and full header images provide an elegant framework for your creative vision.
In this post
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;
}
Remove Site Title/Logo
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;
}
}
Add Social Icons
See this video
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