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

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