Styling

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

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 European Enlightenment in the late 18th century, broad nib quills were replaced by pointed steel pens as the popular writing tool of the day. Together with developments in printing technology, ink, and paper making, it became to print letterforms of high contrast and delicate hairlines that were increasingly detached from the written letterforms. This design lends itself to this period, and while it is not a revival of any particular design, it takes influence from the designs of John Baskerville and from ‘Scotch Roman’ designs. Being a Display (large size) design in the transitional genre, functionally and stylistically it can accompany Georgia for body text. volume button Color Plan #ff1956 #fbfbfb #f4f6f7 #3a3a3c   volume button