Skye Template: Make your blog soar on Skye, a magazine-style template that gives your readers a streamlined yet immersive browsing experience on a clean and balanced grid layout.
In this post
Notes
- Adding Custom CSS to Home > Design > Custom CSS
- Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
- With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
- Send me a message if you have any questions/the code doesn’t work (free).
- You can send a donation if this is helpful for you 😉
Site Title
Site Title Color
Entire Site
span.site-title-text {
color: #ff0000;
}
One Page
<style>
span.site-title-text {
color: #ff0000;
}
</style>
Tagline Color
Entire Site
span.site-tagline {
display: block;
color: #000;
font-size: 15px;
}
One Page
<style>
span.site-tagline {
display: block;
color: #000;
font-size: 15px;
}
</style>
Remove Underline Site Title
.site-title.branding {
border-bottom: none;
}
Disable Site Title Link
Entire Site
.site-title.branding a {
pointer-events: none;
}
One Page
<style>
.site-title.branding a {
pointer-events: none;
}
</style>
Change Site Title Link
Add to Home > Settings > Advanced > Code Injection > Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.site-title a').attr('href','https://beaverhero.com');
});
</script>
Remove Site Title
Entire Site
span.site-title-text {
display: none;
}
One Page
<style>
span.site-title-text {
display: none;
}
</style>
Show tagline (Mobile)
@media screen and (max-width:640px) {
span.site-tagline {
display: block;
color: #000;
font-size: 15px;
}
}
Header Navigation
Sticky Header on Mobile
@media screen and (max-width:640px) {
div#headerAnnouncementWrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
main#page {
margin-top: 100px;
}
}
Replace Hamburger Icon with word “Menu”
Entire Site
a#navToggle {
visibility: hidden;
}
a#navToggle:after {
visibility: visible;
content: "MENU";
display: block;
color: #ff0000;
font-size: 20px;
}
One Page
<style>
a#navToggle {
visibility: hidden;
}
a#navToggle:after {
visibility: visible;
content: "MENU";
display: block;
color: #ff0000;
font-size: 20px;
}
</style>
Add word “Menu” beside Hamburger icon
a#navToggle:after {
content: "Menu";
display: block;
font-size: 20px;
color: #ff0000;
}
Navigation Overlay Color
.nav-open .main-nav-wrapper {
background: #f1f2f3;
}
Show Hamburger icon on Mobile
.nav-toggle-label {
display: block;
}
Move “x” icon to top on Mobile
@media screen and (max-width:640px) {
div#navCloseToggleWrapper {
top: 10px;
}
}
Underline Navigation Active Link
.nav-link--active a {
color: #f1f2f3 !important;
}
Desktop & Mobile Header
Header Background Color
Entire Site
div#headerAnnouncementWrapper {
background: #f1f2f3;
}
header#header {
padding-bottom: 3%;
padding-top: 3%;
}
One Page
<style>
div#headerAnnouncementWrapper {
background: #f1f2f3;
}
header#header {
padding-bottom: 3%;
padding-top: 3%;
}
</style>
Footer
Footer Background Color
Entire Site
footer#footer {
background: #f1f2f3;
}
One Page
<style>
footer#footer {
background: #f1f2f3;
}
</style>
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 center;
background-attachment: fixed;
}
One Page
<style>
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 center;
background-attachment: fixed;
}
</style>
Blog
Remove Post Date
Entire Site
time.dt-published.date-callout {
display: none;
}
One Blog Post
Edit post > Add Code Block > Paste below code
<style>
time.dt-published.date-callout {
display: none;
}
</style>
Remove separator between Post Date and Categories
.entry-title:after {
display: none !important;
}
Remove Post Categories
All Blog
.blog-meta-item.blog-categories {
display: none !important;
}
One Blog Post
Edit post > Add Code Block > Paste below code
<style>
.blog-meta-item.blog-categories {
display: none !important;
}
</style>
Remove Post Featured Image (Blog Page)
.excerpt-thumb {
display: none;
}
Remove Post Banner Image
All Posts
.blog-item-banner-image {
display: none;
}
One Blog Post
Edit post > Add Code Block > Paste below code
<style>
.blog-item-banner-image {
display: none;
}
</style>
Align Left Post Title/Date/Excerpt
.view-list.collection-type-blog .entry-text * {
text-align: left;
}
Remove Post Tags (Post Detail Page)
All Blog Posts
.blog-item-tags {
display: none;
}
One Blog Post
Edit post > Add Code Block > Paste below code
<style>
.blog-item-tags {
display: none;
}
</style>
Change “Related Posts” word
h2.related-title.responsive-padding--top {
visibility: hidden;
}
h2.related-title.responsive-padding--top:before {
visibility: visible;
content: "New Text";
display: block;
font-size: 20px;
color: #ff0000;
}
Remove Date from Next/Previous
h2.blog-item-pagination-title time {
display: none;
}
Other
Page Background Color
Entire Site
main#page {
background: #f1f2f3;
}
One Page
<style>
main#page {
background: #f1f2f3;
}
</style>
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: repeat-y;
background-size: contain;
background-position: center center;
}
One Page
<style>
main#page {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: repeat-y;
background-size: contain;
background-position: center center;
}
</style>
Featured Image: Squarespace.com
Such a wonderful collection of CSS, thank you! Is there an easy way to remove the date from the Next and Previous navigation?
Add to Home > Design > Custom CSS
h2.blog-item-pagination-title time {display: none;
}
Works like a charm, thank you!