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:

1. Appearance > Elements > New Layout
2. Disable Content Title
3. Set Page Builder Container to Contained or Full Width
4. 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 can change the Site Branding or add a logo via the Customizer > Site Identity

Page Layout – Container Margin

Dispatch uses the Customizer > Layout > Container > Separate Containers option.
To maintain horizontal alignment the left and right padding has been removed on the desktop.

The following CSS adds left and right margin to offset the padding.

@media (min-width: 769px) {
    body {
        margin: 0 30px;
    }
}

Navigation

Dispatch uses the Primary Navigation for the main menu and Secondary Navigation displays post categories.The majority of their layout and styling is controlled by the Customizer. With these exceptions:

Menu underline on hover

The animated underline is set using this CSS. Changing the color of the bar is covered here:

How to change the Custom Colors

Secondary Navigation Location

The Secondary Nav is placed using a Hook Element as opposed to the Customizer, which is set to No Navigation. This is so the secondary navigation is dynamically placed. You will notice it doesn’t appear on the posts. It also appears below the Header Element on the front page.

More information be found on that here:

Hooks – Custom Theme Elements

I want to use the Customizer to control the navigation

Simply delete ( or Quick Edit > Set to Draft and Save ) the Magazine Grid header element to revert to the normal customizer controls.

Blog

The majority of the Blog settings are controlled within the Customizer > Layout > Blog. Of course it wouldn’t be a Flint Skin site if some custom customization wasn’t done. These comprise of re-ordering the post meta layout and fixing the height of the featured image.

To maintain a consistent style the Blog posts have been styled to match the WP Show Posts Plugin. You can read more here:

https://gpsites.co/dispatch/wp-show-posts/

Single Post – Sidebar and No Sidebar

The default setting ( in the Customizer ) for the single post includes the right hand sidebar. If the sidebar is removed, like it is on this post, then the content container is narrowed for easier reading.

Single posts container without sidebar are resized by this CSS:

body.no-sidebar .site-content {
    max-width: 720px; /* Adjust the size to suit */
    margin-left: auto;
    margin-right: auto;
}

Options to remove the Sidebar on a post by post basis can be done using either the disable elements module or the layout module:

Layout Metabox Overview

Layout Element Overview

Page Heros – Header Elements

The Hero Headers are built using the Elements module. Volumes Hero Headers are covered here:

Page and Post Heroes

Magazine Grid – Front Page

A custom WP Show Posts Grid displaying 5 posts.
More details on creating your own list for this grid and the ones used in content are covered here …… WWWW ……

The Header Element contains just the WP Show Posts Shortcode. And requires these two Element Classes: wpsp-grid wpsp-card

Single Post

The single post uses template tags for dynamically displaying the Post Title, Category, Date and Author. The Post Title is set as the H1 and it uses the featured image for its background.

Background Image Inset Shadow

To improve readability an inset shadow is cast on to the background image. This uses the Element Classes field. To add the shadow to a new page header just add the overlay class in that field. Likewise you can remove it from this Header Element to disable the shadow.

Archives Header

This simple header places the archive title above the secondary navigation.

For more info on the Hooke Element read here:

Hooks Element Overview

Custom Post Navigation

Adding a custom featured image post navigation at the foot of all posts.
Please note: that the Post Navigation is disabled in the Customizer as it is not required.

Secondary Navigation

This hook calls the Secondary Navigation and displays below the header / header element. It also uses Display Rules so it is excluded from All Posts.
Please note: the Secondary Navigation Location in the Customizer is set to No Navigation.

WPSP Open Wrapper & WPSP Close Wrapper

These two hooks create a Div wrap around the Enter Header, Summary and Entry Footer of the WP Show Posts. This is used to create the custom styling you see here.

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 edit the Header Element and add additional Display Rules.

Rule Conflicts

When creating multiple Elements, it is possible to create ones where the Display Rules conflict. For example:

First Element Display Rule = All Posts
Second Element Display Rule = A specific Post

In this instance the First Element wins and that specific post looks like the rest of them. Its a case of the first element that was registered wins. To get round this you must use the Exclude option in the First Element so it doesn’t apply to the specific post.

Copy an existing Header Element

So you think these Header Elements are awesome. But you want to add your own versions to some other posts, and there is not duplicate feature. Well just add one of the Duplicate Post plugins found on wordpress.org and your in business.

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

volume button