Custom CSS for Aubrey Template Squarespace

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

Aubrey Template: Elegantly display your favourite photos and all the important details for your big day.

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

Site Title Color

Entire Site

.site-title a {
    color: #ff0000 !important;
}

One Page

body#collection-53c827cfe4b04ad07ef20f24 .site-title a {
    color: #ff0000 !important;
}

Site Title Font Size

Entire Site

.site-title a {
    font-size: 20px;
}

One Page

body#collection-53c827cfe4b04ad07ef20f24 .site-title a {
    font-size: 20px;
}

Mobile

@media screen and (max-width:640px) {
h1.site-title a {
    font-size: 20px;
}
}

Disable Site Title Link

.site-title a {
    pointer-events: none;
}

Remove Site Title

Entire Site

.site-title a {
    display: none !important;
}

One Page

body#collection-53c827cfe4b04ad07ef20f24 .site-title a {
    display: none !important;
}

Add Text above Title

h1.site-title:before {
    content: "New Text";
    font-size: 40px;
    color: #ff0000;
    font-weight: bold;
}

Navigation Hover Color

nav#main-navigation li a:hover {
    color: #ff0000;
}

Remove Navigation

Entire Site

nav#main-navigation {
    display: none;
}

One Page

body#collection-53c827cfe4b04ad07ef20f24 nav#main-navigation {
    display: none;
}

Decrease space between Site Title – Navigation

div#title-area {
    padding-top: 0 !important;
}

Remove Navigation

Entire Site

nav#main-navigation {
    display: none;
}
nav#mobile-navigation {
    display: none;
}

One Page

body#collection-53c827cfe4b04ad07ef20f24 nav#main-navigation {
    display: none;
}
body#collection-53c827cfe4b04ad07ef20f24 nav#mobile-navigation {
    display: none;
}

Menu Background Color (Mobile)

nav#mobile-navigation {
    background: #000;
}

Change word “Menu”

#mobile-navigation #mobile-navigation-label {
    visibility: hidden;
}
#mobile-navigation #mobile-navigation-label:after {
    content: "View Menu";
    visibility: visible;
    color: #ff0000;
    font-size: 20px;
    font-family: Lato;
}

Other

Page Background Color

Entire Site

div#outerWrapper {
    background: #000 !important;
}

One Page

body#collection-53c82aade4b06d1cfa9a4140 div#outerWrapper {
    background: #000 !important;
}

Page Background Image

Entire Site

div#outerWrapper {
    background: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg) no-repeat center center !important;
    background-size: cover !important;
}

One Page

body#collection-53c82aade4b06d1cfa9a4140 div#outerWrapper {
    background: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg) no-repeat center center !important;
    background-size: cover !important;
}

Featured Image: Squarespace.com

 

Share this post:

Leave a Comment