Foundry Template: Captivating typography and a minimalist layout helps you tell your story with this subtle yet effective website template.
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
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; }
Featured Image: Squarespace.com
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?