How to change the Custom Colors

Changing Volumes Colors are mainly done via the Theme Customizer. There are a few that are controlled by CSS. The rules for them are found in the Customizer > Additional CSS. They have been placed together at the top of the stack for easy access:

Link accents

Styling for Category Tags found in Blog Articles & Single Post Header and the Next / Previous links in the Featured image post navigation.
Link


.hero-category a, .post-nav, .entry-meta .cat-links a {
    background-color: #ff3366;
    color: #fff !important;
}

Custom Slide Out Navigation

Slide Out Header

This is a hooked element used to create the custom toggles.


/* bar at the top of slide out */
.slideout-header {
    background-color: #0b0521;
}
Slide Out Toggle

/* Menu Open colors */
.slideout-header .custom.slideout-toggle a {
    background-color: #ff3366;
}
/* Menu Exit colors */
.slideout-header .slideout-exit {
    color: #fff;
    background-color: #ff3366;
}
Slide Out Menu background

To create the slide down effect the Slide Out navigation background is set to transparent in the Customizer.



/* Background of menu */
#generate-slideout-menu .slideout-menu li {
    background-color: #0b0521;
}

Blog post navigation

The Blog post navigation page numbers and next previous styling.

123


.nav-links .page-numbers {
    background-color: #0b0521;
    color: #fff;
}

.nav-links .page-numbers:hover {
    background-color: #383f49;
    color: #fff;
}

Author Box


.author-box {
    background-color: #f1f6f7;
}

Comments Toggle

The show and hide toggle before the Posts Comments form.


.slider {
    background-color: #0b0521;
}

input:checked+.slider {
    background-color: #ff3366;
}
About devadmin

Author Bio Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Previous

Style Guide

Page and Post Heroes

Next