Flores Template: Large images and minimal text let your beautiful work speak for itself.
In this post
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
#header .site-title a { color: #ff0000; }
One Page
body#collection-56c3709ab6aa6020e2418367 #header .site-title a { color: #ff0000; }
Remove Site Title
Entire Site
#header .site-title a { display: none; }
One Page
body#collection-56c3709ab6aa6020e2418367 #header .site-title a { display: none; }
Navigation Hover Color
Entire Site
nav#mainNavigation a:hover { color: #ff0000 !important; }
One Page
body#collection-54107165e4b0335e669da978 nav#mainNavigation a:hover { color: #ff0000 !important; }
Navigation Background Color
Entire Site
.nav-wrapper { background: #000 !important; }
One Page
body#collection-56c3709ab6aa6020e2418367 .nav-wrapper { background: #000 !important; }
Remove Navigation
Entire Site
.nav-wrapper { display: none; }
One Page
body#collection-56c3709ab6aa6020e2418367 .nav-wrapper { display: none; }
Change Hamburger Icon Color
Entire Site
.mobile-nav-toggle div { background: #ff0000 !important; }
One Page
body#collection-54107165e4b0335e669da978 .mobile-nav-toggle div { background: #ff0000 !important; }
Replace Hamburger Icon with Custom Icon
.mobile-nav-toggle { visibility: hidden; } .mobile-nav-toggle:before { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 30px; display: inline-block; }
Replace Hamburger Icon with word “Menu”
.mobile-nav-toggle { visibility: hidden; } .mobile-nav-toggle:before { visibility: visible; content: "Menu"; color: #ff0000; font-size: 18px; font-family: futura-pt; font-weight: bold; position: absolute; right: 10px; top: 5px; }
Add word “Menu” beside Hamburger Icon
.mobile-nav-toggle:before { content: "Menu"; color: #ff0000; font-size: 18px; font-family: futura-pt; font-weight: bold; position: absolute; right: 30px; bottom: 10px; }
Navigation Overlay Color
div#sidecarNav { background: #f1f6f7; }
Header Background Color
Entire Site
header#header { background: #ff0000 !important; }
One Page
body#collection-54107165e4b0335e669da978 header#header { background: #ff0000 !important; }
Sticky Header
Entire Site
header#header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; }
One Page
body#collection-54107165e4b0335e669da978 header#header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; }
Remove Header
Entire Site
header#header { display: none; }
One Page
body#collection-54107165e4b0335e669da978 header#header { display: none; }
Footer
Footer Background Color
Entire Site
footer#footer { background: #000; }
One Page
body#collection-58b5ed10bf629a356f09728a footer#footer { background: #000; }
Footer Background Image
Entire Site
footer#footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }
One Page
body#collection-58b5ed10bf629a356f09728a footer#footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }
Remove Footer
Entire Site
footer#footer { display: none !important; }
One Page
body#collection-58b5ed10bf629a356f09728a footer#footer { display: none !important; }
Blog
Remove Post Date
.entry-dateline { display: none; }
Remove Post Author
.entry-author { display: none; }
Remove Post Category
.entry-category { display: none; }
Align Left Post Title
Blog Page
.collection-type-blog.view-list .entry-title { text-align: left; }
All Posts
.view-item.collection-type-blog .entry-title { text-align: left; }
Align Left Post Info
Blog Page
.view-list.collection-type-blog header.entry-header { text-align: left; }
All Posts
/* Post Author, Post Date */ .view-item .meta-below-title { text-align: left; } /* Post Category, Post Title */ .view-item.collection-type-blog .title-desc-wrapper { text-align: left; }
Remove Post Category in Post Banner
All Posts
.view-item.collection-type-blog .post-category { display: none; }
One Post
body#collection-53348419e4b0c39637af6e82 .post-category { display: none; }
Remove Post Like/Share
All Posts
.view-item.collection-type-blog footer.entry-footer.clear { display: none; }
One Post
body#collection-53348419e4b0c39637af6e82 footer.entry-footer.clear { display: none; }
Remove Newest First
.comment-sort { display: none !important; }
Remove Subscribe via Email
span.subscribe.subscribe-control { display: none !important; }
Remove “Newer/Older Post”
.prev-label, .next-label { display: none; }
Rename “Newer/Older Post”
.prev-label, .next-label { visibility: hidden; } .prev-label:before { visibility: visible; content: "Pre New"; color: #333; font-size: 15px; } .next-label:after { visibility: visible; content: "New New"; color: #333; font-size: 15px; }
Change “Newer/Older Post” Color
.prev-label, .next-label { color: #ff0000; }
Other
Align Left Pate Title/Description
.desc-wrapper p { text-align: left; }
Remove Page Title/Description
Entire Site
/* Page Title */ .desc-wrapper p:first-child { display: none; } /* Page Description */ .desc-wrapper p:last-child { display: none; }
One Page
/* Page Title */ body#collection-540e1937e4b084aa623896a6 .desc-wrapper p:first-child { display: none; } /* Page Description */ body#collection-540e1937e4b084aa623896a6 .desc-wrapper p:last-child { display: none; }
Decrease Page Banner Height (Mobile)
Entire Site
@media screen and (max-width:640px) { .desc-wrapper { padding-top: 0; padding-bottom: 0; } }
One Page
@media screen and (max-width:640px) { body#collection-540e1937e4b084aa623896a6 .desc-wrapper { padding-top: 0; padding-bottom: 0; } }
Feature Image: Squarespace.com