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.

1 2 3


.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;
}