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

  • Adding Custom CSS to Home > Design > Custom CSS
  • Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
  • With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
  • Send me a message if you have any questions/the code doesn’t work (free).
  • You can send a donation if this is helpful for you 😉

Header

Hide Cart Icon

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

Hide Site Title

.Header-branding {
    display: none;
}

Add Tagline under Header

/* Add tagline */
h1.logo.logo-text a:after {
    content: "Tagline";
    display: block;
    font-size: 1.5rem;
}

Removing Navigation & Header in One Page

<style>
/* Remove header */
header.Header {
    display: none;
}
/* Or remove only Site Title */
.Header-branding {
    display: none;
}
/* or remove only Navigation */
.Header-nav {
    display: none;
}
</style>

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;
}

Move Navigation above Site Title/Logo

[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

Then, use

<style>
footer.Footer {display:none;}
</style>

Blog

Align Left Blog Date

/* align left blog date - blog list */
.Blog-meta.BlogList-item-meta {
    justify-content: left;
}
/* align left blog date - blog detail */
.Blog-meta.BlogItem-meta {
    justify-content: start;
}

Align Left Blog Title

/* align left blog title - blog list */
.BlogList-item-title {
    text-align: left !important;
}
/* align left blog title - blog detail */
h1.BlogItem-title {
    text-align: left !important;
}

 

Share this post:

Leave a Comment