Great typography and bold imagery speak volumes about quintessential topics

Great typography and bold imagery speak volumes about quintessential topics

Heading Two H2

Heading Three H3

Heading Four H4

Heading Five H5

Heading Six H6

Font: Playfair

Color Plan

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

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

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

Magazine Grid - Home Page

Single Post

Creating new Header Elements

Display Rules

Front Page

Display the Dispatch Header Elements on other pages

Rule Conflicts

Copy an existing Header Element

A Category

More Articles

Dispatch Widget Classes

Adding your own classes

.widget.red-background {
    background-color: #ff0000;
}

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

WPSP Open Wrapper & WPSP Close Wrapper

Social Icons - Desktop

Social Icons - Tablet and Mobile

Social Icon Colors

Pagebuilders

Can I use a page builder with Dispatch?

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?

Logo and Site Identity

Page Layout - Container Margin

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

Navigation

Menu underline on hover

Secondary Navigation Location

I want to use the Customizer to control the navigation

Blog

Single Post - Sidebar and No Sidebar

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

Page Heros - Header Elements

Magazine Grid - Front Page

Single Post

Background Image Inset Shadow

Archives Header

• Align
• Standard
• Sidebar
• Header
• Simple
• Simple Sidebar

General ( and important ) information

Advanced Settings

Duplicating WP Show Posts List

List: Standard

Content Wrap (WPSP Only)

Featured Image

.generate-columns-container article .inside-article img,  .wp-show-posts-image img {
    height: 180px;
    width: 100%;
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

Meta above title

.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

Entry Title forced to 2 lines

.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}

List: Align

<div class="wpsp-align">shortcode_goes_here</div>

Lists: Sidebar

wpsp-card

List: Header

wpsp-grid wpsp-card

List: Simple

<div class="wpsp-card">shortcode goes here</dib>

List: Simple Sidebar