Custom CSS for Bedford Template Squarespace

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

Bedford Template: On one of our most popular website templates, the wide banner images and bold buttons create clear calls to action.

bedford-demo-squarespace-com--1689x1080-500w

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. To find Page ID, read here

Header

Changing navigation link font

/* Navigation */
div#mainNavWrapper a {
    font-size: 20px;
    color: red;
    font-family: Arial;
}

Change Nav font colour on specific pages

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 div#mainNavWrapper a {
    font-size: 20px;
    color: red;
    font-family: Arial;
}

Sticky Header

header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
}

Sticky Header (One Page)

body#collection-52d8053ce4b0e26973428261 header#header {
position: fixed !important;
left: 0;
right: 0;
top: 0;
z-index: 999;
}

Fixed header banner overlap on mobile

I made a fixed header.

Now I notice an overlap, on mobile view; the header is overlapping the banner text.

Does anyone know how to fix this.

main#page {
    margin-top: 80px;
}

Hamburger Icon Color

.mobile-nav-toggle * {
    background: red !important;
}

 

Other

Background Image (One Page)

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 #siteWrapper {
    background-image: url(https://www.hanoi-office.com/themes/frontend/img/img_about.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

Adjust the color of hyperlinks on one page

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 a {
    color: #ff0000;
}

Remove date and time from Event Page

/* Date on Thumbnail */
.eventlist-datetag {
    display: none;
}
/* Date under title */
ul.eventlist-meta.event-meta {
   display: none;
}

Remove date and time from Event Detail Page

.eventitem-meta-date {
    display: none;
}

CSS for Banner Text

.banner-thumbnail-wrapper .desc-wrapper * {
    font-family: Arial !important;
    font-size: 20px !important;
}

Change Blog Banner Font

.collection-type-blog .sqs-featured-posts-gallery * {
    font-family: Arial !important;
}

Blog

Full justify on all body text

.view-item p {
    text-align: justify;
}

Remove published date

/* Date on Banner */
.published.post-date {
    display: none !important;
}
/* Date in blog listing page */
.published.entry-date {
    display: none;
}

Change the text in Comment Button “Post Comment”

.comment-btn {
    visibility: hidden;
}
.comment-btn:after {
    visibility: visible;
    content: "Submit a comment";
    color: #ff0000;
    font-weight: bold;
    background: #000;
    padding: 11px 29px;
    border-radius: 30px;
}

Change the color of the comment button

.comment-btn {
    background: #ff0000 !important;
    border-radius: 30px !important;
}

Featured Image: Squarespace.com

2 thoughts on “Custom CSS for Bedford Template Squarespace”

  1. This is all very helpful. Is there any code so that when the page is scrolled the sticky header will change in its background color or opacity?

    Reply

Leave a Comment