Custom CSS for Foster Template Squarespace

This template is in Brine Family, so you can use many other CSS here.

Some Custom CSS you will need when using Foster Template Squarespace!

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  or Facebook with your site url. I’ll give you exact CSS..

4. If you want to apply CSS for only Desktop, Tablet, Phone. Please use

/* Desktop */
@media screen and (min-width:992px) {
write your css here
}
/* Tablet */
@media screen and (min-width:768px) and (max-width:991px) {
write your css here
}
/* Phone */
@media screen and (max-width:767px) {
write your css here
}

Header

Hide Cart Icon

.tweak-header-cart-style-cart .Header .Cart {
    display: none;
}

Hide Site Title

.Header-branding {
    display: none;
}

Removing Navigation & Header in One Page

First, you need to find Page ID.

Then, use

/* Remove header */
body#collection-57daf0ad579fb3865d077492 header.Header {
    display: none;
}
/* Or remove only Site Title */
body#collection-57daf0ad579fb3865d077492 .Header-branding {
    display: none;
}
/* or remove only Navigation */
body#collection-57daf0ad579fb3865d077492 .Header-nav {
    display: none;
}

Each page will have different body#collection-57daf0ad579fb3865d077492

Change Navigation Style

/* Navigation Items */
.Header-nav a {
    color: red !important;
    font-size: 20px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
}
/* Navigation spacing */
.Header-nav {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-right: 70px;
}

Change Background Header

/* Header background color */
header.Header {
    background-color: green;
}
/* Header background image */
header.Header {
    background-image: url(https://static1.squarespace.com/static/5794fb3…/t/57fe776…/1476294516298/?format=750w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% 20%;
}

Fixed Header on Top

header.Header {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

Change the pagination text on the Foster template from “Older/Newer” to “Next/Back”

Make active page unclickable in main navigation

a.Header-nav-item.Header-nav-item--active {
    pointer-events: none;
}

Change Link Address of Site Title

Add to Page Settings > Advanced > Header Injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 <script>$(document).ready(function () {
           $(".Header-branding a[href]").attr("href", "http://www.google.com/");
         });
 </script>

Underline active navigation item

a.Header-nav-item.Header-nav-item--active {
    text-decoration: underline;
}

Add “Menu” text to Hamburger Icon

.Mobile-bar-menu:before {
    content: "Menu";
    display: block;
    margin-bottom: 10px;
    color: red;
    font-size: 18px;
}

[data-nc-container="top-center"] {
    flex-direction: column-reverse !important;
}

Decrease padding top/bottom Navigation

.Header-nav {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Decrease Header Padding Top/bottom

.Header-inner {
    padding-top: 0;
    padding-bottom: 0;
}

Footer

Nav link color in footer

.Footer-nav a {
    color: green;
}
.Footer-nav a:hover {
    color: #f00;
}

Change Footer background color & Image

footer.Footer {
    background-color: red;
}

footer.Footer {
    background-image: url(https://static1.squarespace.com/static/5794fb3…/t/57fe776…/1476294516298/?format=750w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% 20%;
}

Hide footer specific page

First, you need to find Page ID.

Then, use

body#collection-57daf0ad579fb3865d077492 footer.Footer {display:none;}

Each page will have different body#collection-57daf0ad579fb3865d077492

Share this post:

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

Leave a Reply

avatar
  Subscribe  
Notify of