Tudor Template: A magazine-style website template with an adaptable grid layout and support for multiple author profiles.
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
span.site-title-text {
color: #ff0000;
}
One Page
body#collection-5673088c1115e0e8174bec86 span.site-title-text {
color: #ff0000;
}
Disable Site Title Link
Entire Site
.site-title.branding a {
pointer-events: none;
}
One Page
body#collection-5673088c1115e0e8174bec86 .site-title.branding a {
pointer-events: none;
}
Remove Site Title
Entire Site
span.site-title-text {
display: none;
}
One Page
body#collection-5673088c1115e0e8174bec86 span.site-title-text {
display: none;
}
Remove Site Tagline
Entire Site
span.site-tagline {
display: none !important;
}
One Page
body#collection-5673088c1115e0e8174bec86 span.site-tagline {
display: none !important;
}
Site Tagline Color
Entire Site
span.site-tagline {
color: #000;
}
One Page
body#collection-5673088c1115e0e8174bec86 span.site-tagline {
color: #000;
}
Site Tagline Under Site Title
span.site-tagline {
display: block !important;
}
Hide Site Tagline on Mobile
@media screen and (max-width:640px) {
span.site-tagline {
display: none !important;
}
}
Replace Hamburger Icon with Menu Button
Entire Site
a#navToggle {
visibility: hidden;
}
a#navToggle:after {
font-family: europa;
visibility: visible;
content: "Menu";
color: #fff;
font-size: 20px;
background: #000;
padding: 5px 20px;
border-radius: 20px;
}
One Page
body#collection-5673088c1115e0e8174bec86 a#navToggle {
visibility: hidden;
}
body#collection-5673088c1115e0e8174bec86 a#navToggle:after {
font-family: europa;
visibility: visible;
content: "Menu";
color: #fff;
font-size: 20px;
background: #000;
padding: 5px 20px;
border-radius: 20px;
}
Add word “Menu” beside Hamburger Icon
a#navToggle:after {
font-family: europa;
visibility: visible;
content: "Menu";
color: #000;
font-size: 20px;
padding-left: 5px;
}
Navigation Overlay Background Color
div#sideTrayWrapper {
background: #f1f2f3;
}
Navigation Overlay Width
div#sideTrayWrapper {
width: 50%;
}
Align Navigation Overlay Items
div#sideTrayWrapper * {
text-align: left;
}
Change Hamburger Icon Color
.nav-toggle-label svg {
stroke: red;
}
Show Hamburger Icon on Mobile
a#navToggle {
display: block;
}
Remove Hamburger Icon
a#navToggle {
display: none;
}
or you can use
a#navToggle {
visibility: hidden;
}
Move Navigation to Top (Mobile)
@media screen and (max-width:640px) {
div#mobileBar {
top: 0;
bottom: unset;
}
div#headerAnnouncementWrapper {
margin-top: 40px;
}
}
If you want to move Navigation Close “X” icon to top, use this CSS
@media screen and (max-width:640px) {
div#navCloseToggleWrapper {
top: 10px;
}
}
Header Background Color
Entire Site
div#headerAnnouncementWrapper {
background: #f1f2f3;
}
One Page
body#collection-5673088c1115e0e8174bec86 div#headerAnnouncementWrapper {
background: #f1f2f3;
}
Remove Header
Entire Site
div#headerAnnouncementWrapper {
display: none;
}
One Page
body#collection-5673088c1115e0e8174bec86 div#headerAnnouncementWrapper {
display: none;
}
Mobile Fixed Header
@media screen and (max-width:640px) {
/* Fixed Header */
div#headerAnnouncementWrapper {
top: 0;
left: 0;
right: 0;
z-index: 9999;
position: fixed;
background: #fff;
}
/* Remove Overlap */
main#page {
margin-top: 100px;
}
}
Footer
Footer Background Color
Entire Site
footer#footer {
background: #f1f5f9;
}
One Page
body#collection-5673088c1115e0e8174bec86 footer#footer {
background: #f1f5f9;
}
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-position: center center;
background-size: cover;
}
One Page
body#collection-5673088c1115e0e8174bec86 footer#footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Remove Footer
Entire Site
footer#footer {
display: none;
}
One Page
body#collection-5673088c1115e0e8174bec86 footer#footer {
display: none;
}
Blog
Remove Post Date
time.dt-published.date-callout {
display: none !important;
}
Remove Authors from Posts
All Posts
.blog-item-author-profile {
display: none !important;
}
One Post
body#item-56b13a878259b50be1895f64 .blog-item-author-profile {
display: none !important;
}
Two Posts
body#item-56b13a878259b50be1895f64 .blog-item-author-profile, body#item-12345iyiuwer983485 .blog-item-author-profile {
display: none !important;
}
Post Date Background Color
time.dt-published.date-callout {
background: #f2f3f4 !important;
color: #000 !important;
border-radius: 10px !important;
}
Remove Post Categories
.blog-meta-item.blog-categories {
display: none !important;
}
Remove Post Banner Image
.blog-item-banner-image {
display: none;
}
Change Post Title
.blog-item-title .entry-title {
color: #ff0000;
}
Change Post Meta Background Color (List Page)
article .entry-text {
background: #f1f2f3 !important;
}
Change Author Box Background
.blog-item-author-profile {
background: #f1f2f3;
}
Remove Share Icons Border
.Share.sqs-share-buttons .Share-buttons a {
border: none !important;
}
Change “Related Posts”
h2.related-title.responsive-padding--top {
visibility: hidden;
}
h2.related-title.responsive-padding--top:after {
visibility: visible;
content: "News";
font-size: 20px;
text-transform: uppercase;
color: #ff0000;
}
Padding between blog posts and header
@media screen and (min-width:901px) {
main#page {
margin-top: 150px !important;
}
}
Edit space between the blog posts
article.entry--list:not(.entry--related) {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Change “Leave a comment” text
label.blog-item-comments-toggle {
visibility: hidden;
}
label.blog-item-comments-toggle:before {
visibility: visible;
content: "Show/Hide comment";
}
/* Tudor – Always show comment */
/* Tudor - Always show comment */
div#blogItemCommentsContent {
opacity: 1 !important;
height: auto !important;
pointer-events: auto;
}
label.blog-item-comments-toggle {
display: none;
}
Blog Posts Background Color
.view-item.collection-type-blog main#page {
background: #f1f2f3;
}
Removing the dates showing up on previous/next blog post link
time.dt-published.date-pagination {
display: none;
}
Remove the next post/last post arrows
.blog-item-pagination-link {
display: none;
}
Other
Page Background Color
Entire Site
main#page {
background: #f1f2f3;
}
One Page
body#collection-5673088c1115e0e8174bec86 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-5673088c1115e0e8174bec86 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;
}
Translate Load More
.load-more {
visibility: hidden;
}
.load-more:after {
visibility: visible;
content: "Read More";
font-size: 20px;
}
Disable click through on blog thumbnail
.thumbnail-title-wrapper {
pointer-events: none;
}
Changing Blog Post Date Card Size Circle
/* Background and corner */
time.dt-published.date-callout {
background: #f1f2f3 !important;
border-radius: 10px !important;
}
/* Font size color */
time.dt-published.date-callout * {
color: #333;
font-size: 15px !important;
text-align: left;
}
Featured Image: Squarespace.com