Skye CSS

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>