Custom CSS for Flatiron Template Squarespace

Flatiron: Display multiple projects side by side with this unique portfolio layout popular with art directors, illustrators, and photographers.

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

Hide Site Title

Entire Site

span#site-title {
    display: none;
}

One Page

body#collection-56d9ff33b654f9ca48a33b7f span#site-title {
    display: none;
}

Disable Site Title Link

.siteTitle a {
    pointer-events: none;
}

Change Site Title Link

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.siteTitle a').attr('href','https://beaverhero.com');
});
</script>

Add Tagline under Site Title

.siteTitle a span:after {
    content: "tuanphan";
    display: block;
    font-size: 15px;
    text-transform: initial;
    color: red;
}

Hide Header Navigation

Entire Site

#navigator header#topBar ul#nav {
    display: none;
}

One Page

body#collection-56d9ff33b654f9ca48a33b7f #navigator header#topBar ul#nav {
    display: none;
}

Remove Header

Entire Site

header#topBar {
    display: none;
}
section#container {
    margin-top: 0 !important;
}

One Page

body#collection-56d9ff33b654f9ca48a33b7f header#topBar {
    display: none;
}
body#collection-56d9ff33b654f9ca48a33b7f section#container {
    margin-top: 0 !important;
}

Header Background Color

Entire Site

header#topBar {
    background: #ff0000 !important;
}

One Page

body#collection-56d9ff33b654f9ca48a33b7f header#topBar {
    background: #ff0000 !important;
}

Remove Underline in Navigation Active Link

#nav .active-link a {
    border-bottom: none !important;
}

Remove Underline when hovering Navigation Link

#nav li a:hover {
    border-bottom: none !important;
}

Site Title (Left) – Navigation (Right)

#navigator .siteTitle {
    float: left;
}

Site Title (Top) – Navigation (Bottom)

#navigator .siteTitle {
    float: none;
    text-align: center;
    max-width: 100%;
    padding-bottom: 0;
}
#navigator header#topBar ul#nav {
    float: none !important;
    max-width: 100% !important;
    text-align: center;
}

Site Title Color

Entire Site

span#site-title {
    color: #ff0000;
}

One Page

body#collection-56d9ff33b654f9ca48a33b7f span#site-title {
    color: #ff0000;
}

Change word “Menu”

#mobile-navigation #mobile-navigation-label:after {
   content: "New Menu" !important;
}

Menu Background Color (Mobile)

nav#mobile-navigation {
    background: #ff0000;
}
#mobile-navigation #mobile-navigation-label:after {
    color: #fff;
}

Home Page

Change word “View”

.project-title h3 {
    visibility: hidden;
}
.project-title h3:before {
    visibility: visible;
    content: "Click";
    display: block;
    text-align: center;
}

Products

Product Overlay Color

.no-touch .product-list-titles-overlay #productList .product:hover .product-overlay {
    background: #ff0000;
}

Remove Add to Cart

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

Remove Product Share Icon

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

Change Add to Cart Color

.sqs-add-to-cart-button {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #fff !important;
}

Change Add to Cart Text

.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:after {
    visibility: visible;
    content: "Add to basket";
    display: block;
    margin-top: -10px;
}

Hide Price

.product-price {
    display: none;
}

Featured Image: Squarespace.com