Styling

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 of a Flint Skin Site it uses Custom CSS. At over 350 lines it is recommended, but not necessary, to move the Additional CSS to a Child Theme style sheet. So lets get onto making it your own. WP Show Posts Without WP Show Posts plugin, this Site wouldn’t exist. Another awesome product from Tom Usborne, WP Show Posts does exactly what the title says. Anywhere and everywhere in the case of Dispatch. So much so there is a dedicated page to explain its uses here. Social Icons – Desktop The Lightweight Social Icons widget has been added to the Header Widget. It only displays on Desktop as the Widget has the hide-on-mobile and hide-on-tablet-classes. Social Icons – Tablet and Mobile They are also displayed in the Slideout Navigation. Using the Slideout Widget. Social Icon Colors Colors are changed within the widget. Pagebuilders Can I use a page builder with Dispatch? Yes, you can if you wish. The only rule is that you need to use the Default Template for your Pages and Posts. To create a full width blank canvas template then follow these steps: Appearance > Elements > New Layout Disable Content Title Set Page Builder Container to Contained or Full Width Set Display Rules to the Pages you need a Blank canvas on. How do I change colors? The majority of Volumes colors are controlled by the Customizer. There are some Elements that are part of Volumes features that require CSS. This article covers where to make those changes: How to change the Custom Colors Logo and Site Identity Dispatch does not have a logo, just the Site Title. You … Seguir leyendo

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 added using the Header Element module, when activated provides the Elements menu in Dashboard > Appearance > Elements Dispatch has two Header Elements in place. But you can add as many as you need. Magazine Grid – Home Page Combined with the WP Show Posts plugin this header creates a 5 post card grid. Very few settings are required. These are the main points: Hero Content: WP Show Posts Short code Element Classes: wpsp-grid wpsp-card This creates the grid and styles the cards Padding: Zero padding Makes the grid fill the hero Display Rules: Front Page The shortcode required is found in the WP Show Posts list you created. More detail on creating these special lists can be found here. Single Post Template Tags: {{post_title}} Element Classes:  overlay This applies a Custom CSS Inner Box Shadow overlay to improve contrast for the text content. Container: Contained Inner Container: Contained Padding: Top: 36% and Bottom: 30px. This will keep images responsive whilst maintaining bottom spacing Background Image: Featured Image Disable Featured Image: Check This stops the featured image also being displayed in the post Display Rules: All Posts Creating new Header Elements Creating a new Header Element is as easy as creating a new post. This article explains how to: Header Element Overview Display Rules Display Rules are used to determine where a Header Element is displayed. Here are some pointers: Front Page When you select a blog or a static page in Dashboard > Settings > Reading as your Front Page. You must specifically apply that as a Display Rule for it to display. Display the Dispatch Header Elements on other pages Simply … Seguir leyendo

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

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