Lokeish Umak writes about his favorite topics, such as essay, poems, health, fitness, nutrition, etc. He also invites guests on his podcast show, "Chronicle Conversations."

Join us in celebrating the power of #storytelling

Published in History & Culture

on

Published in History & Culture

on

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

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

Join us in celebrating the power of #storytelling