Header
Site Title Color
Entire Site
span.site-title-text {
color: #ff0000;
}
One Page
body#collection-55551c3ae4b085fe4d315750 span.site-title-text {
color: #ff0000;
}
Site Tagline Color
Entire Site
span.site-tagline {
color: #ff0000;
}
One Page
body#collection-55551c3ae4b085fe4d315750 span.site-tagline {
color: #ff0000;
}
Disable Site Title Link
Entire Site
.site-title.branding {
pointer-events: none;
}
One Page
body#collection-55551c3ae4b085fe4d315750 .site-title.branding {
pointer-events: none;
}
Site Tagline under Site Title
span.site-tagline {
display: block !important;
}
Remove Site Tagline on Mobile
@media screen and (max-width:640px) {
span.site-tagline {
display: none !important;
}
}
Remove Hamburger Icon
a#navToggle {
display: none;
}
or
a#navToggle {
visibility: hidden;
}
Replace Hamburger Icon with Menu Button
Entire Site
a#navToggle {
visibility: hidden;
}
a#navToggle:after {
visibility: visible;
content: "Menu";
font-size: 20px;
color: #fff;
background: #000;
padding: 10px 20px;
border-radius: 50px;
font-family: Lato;
}
One Page
body#collection-55551c3ae4b085fe4d315750 a#navToggle {
visibility: hidden;
}
body#collection-55551c3ae4b085fe4d315750 a#navToggle:after {
visibility: visible;
content: "Menu";
font-size: 20px;
color: #fff;
background: #000;
padding: 10px 20px;
border-radius: 50px;
font-family: Lato;
}
Add word “Menu” beside Hamburger icon
a#navToggle:after {
visibility: visible;
content: "Menu";
font-size: 20px;
color: #fff;
background: #000;
padding: 10px 20px;
border-radius: 50px;
font-family: Lato;
}
Change Hamburger Icon Color
.nav-toggle-label svg {
stroke: #ff0000;
}
Navigation Overlay Background Color
div#sideTrayWrapper {
background: #f1f2f3;
}
Navigation Overlay Width
div#sideTrayWrapper {
width: 50%;
}
Move Navigation Bar to Top (Mobile)
@media screen and (max-width:768px) {
div#mobileBar {
top: 0;
bottom: unset;
}
div#headerAnnouncementWrapper {
padding-top: 50px;
}
}
Navigation Bar Background Color (Mobile)
div#mobileBar {
background: #f1f2f3;
}
Replace Hamburger Icon with Custom Image/Icon
Entire Site
a#navToggle:after {
content: "";
background-image: url(https://image.flaticon.com/icons/svg/145/145802.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 30px;
height: 30px;
display: block;
visibility: visible;
}
a#navToggle {
visibility: hidden;
}
One Page
body#collection-55551c3ae4b085fe4d315750 a#navToggle:after {
content: "";
background-image: url(https://image.flaticon.com/icons/svg/145/145802.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 30px;
height: 30px;
display: block;
visibility: visible;
}
body#collection-55551c3ae4b085fe4d315750 a#navToggle {
visibility: hidden;
}
Header Background Color
Entire Site
div#headerAnnouncementWrapper {
background: #f1f2f3;
}
One Page
body#collection-55551c3ae4b085fe4d315750 div#headerAnnouncementWrapper {
background: #f1f2f3;
}
Remove Header
Entire Site
div#headerAnnouncementWrapper {
display: none;
}
main#page {
margin-top: 0 !important;
}
One Page
body#collection-55551c3ae4b085fe4d315750 div#headerAnnouncementWrapper {
display: none;
}
body#collection-55551c3ae4b085fe4d315750 main#page {
margin-top: 0 !important;
}
Footer
Footer Background Color
Entire Site
footer#footer {
background: #f1f2f3;
}
One Page
body#collection-55551c3ae4b085fe4d315750 footer#footer {
background: #f1f2f3;
}
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-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
One Page
body#collection-55551c3ae4b085fe4d315750 footer#footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
Remove Footer
Entire Site
footer#footer {
display: none;
}
One Page
body#collection-55551c3ae4b085fe4d315750 footer#footer {
display: none;
}
Blog
Remove Post Date
time.dt-published.date-highlight {
display: none;
}
Remove Separator between Title & Excerpt
.tweak-blog-show-divider .entry-title:after {
display: none;
}
Remove Post Excerpt
.entry-excerpt.p-summary {
display: none;
}
Remove Share Icons
body.view-item .sqs-share-buttons {
display: none;
}
Remove Heart icon (in share icons)
body.view-item .Share-buttons-item--like {
display: none;
}
Change Separator Color
.tweak-blog-show-divider .entry-title:after {
background: #ff0000;
}
Change Post Date Color
time.date-highlight {
color: #ff0000;
}
Remove Post Categories
.blog-category {
display: none;
}
Decrease space between blog posts
.blog-list article {
margin-right: 0 !important;
margin-bottom: 0 !important;
}
Remove Space between Header & Blog Posts
All Blog Posts
.view-item.collection-type-blog main#page {
margin-top: 150px !Important;
}
One Blog Post
body#collection-55551c3ae4b085fe4d315750 main#page {
margin-top: 150px !Important;
}
Disable Uppercase Post Excerpt
.entry-excerpt.p-summary p {
text-transform: inherit;
}
Decrease Post Title Font Size
h2.entry-title {
font-size: 3vw;
}
Remove Post Author (Detail Page)
.blog-meta-author {
display: none !important;
}
Show fulldate, include year
<!-- Code by @bangank36 - ssforum -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
var pubdate = document.querySelectorAll(".entry-title [pubdate][datetime]");
for (var i = 0; i < pubdate.length; i++) {
var d = pubdate[i].getAttribute("datetime");
var _date = new Date(d);
var year = _date.getFullYear();
var month = months[_date.getMonth()].slice(0, 3);
var date = _date.getDate();
pubdate[i].innerHTML = month + " " + date + ", " + year;
console.log(month + " " + date + ", " + year);
}
});
</script>
Other
Page Background Color
Entire Site
main#page {
background: #f1f2f3;
}
One Page
body#collection-55551c3ae4b085fe4d315750 main#page {
background: #f1f2f3;
}
Page Background Image
Entire Site
main#page {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
One Page
body#collection-55551c3ae4b085fe4d315750 main#page {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
Hi! I’m looking to remove the heart at the bottom of the Foundry Blog page.
Any tips? Thanks, xx
Hi. Just updated the code. https://beaverhero.com/foundry-squarespace/#Remove_Share_Icons
Hello, any idea how to restrict the max site width size, including the header? Thanks!
Hi. Can you share link to your site?