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;
}
Share this post on your Facebook, Twitter, or Pinterest page with the easy share icons below.
Neal Tucker is one of the world’s most engaging Disney influencers, with thousands of views and responses across his blog, podcast, and social media profiles every month.
Get started with more D Is For Disney content here
Join over 7,000+ subscribers and followers of D Is For Disney with Magic Mail. And always feel free to send Neal a message here.