How to change the Custom Colors

Changing Colors in Dispatch are mainly done via the Theme Customizer. Certain elements such as Page Heros are controlled within the Header Element and are covered in that article. There are a few colors that are controlled by CSS. The rules for them are found in the Customizer > Additional CSS:

Primary Navigation

Hairline Border above desktop navigation

.main-navigation .inside-navigation {
    border-top: 0.5px solid #d4d7d8;
}

Menu item underline on hover

.main-navigation ul li:after {
    background-color: #000;
}

Navigation Search

.navigation-search.nav-search-active {
    background-color: rgba(255,255,255,0.95);
    top: 100%;
}

Buttons

All of the colors are controlled via the customizer. However the button border inherits the color of the font. This is set by this CSS:

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
    pointer-events: initial !important;
    border-color: inherit;
    border: 1px solid;
}

WP Show Posts – Card Style

Entry Title, Summary and Meta text color

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
}

Gradient overlay

To improve contrast of text a subtle gradient overlay is applied to the cards content wrapper.

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

Custom Featured Image Post Navigation Next/Previous

.post-nav {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 0.7em;
    text-transform: uppercase;
    background-color: #ff1956;
    color: #fff !important;
}

Related Posts

A guide to styling and making Dispatch your own

Dispatch is a Magazine style blog for your new website. Each of its features have been designed and built using GeneratePress and WP Show Posts. As expected…

Hooks – Custom Theme Elements

Dispatch uses a few Hook Elements and Block Elements to create some Custom Elements in the site.All of them provide dynamic output and should not require any…

Page and Post Heroes

Page Heroes are those big bold images and headlines you find at the top of your posts and pages. They sit just below the Site Header and…

Style Guide

Heading One H1 Heading Two H2 Heading Three H3 Heading Four H4 Heading Five H5 Heading Six H6 Font: Playfair Playfair is a transitional design. In the…