Styling
Page and Post Heroes
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
Method: Block Element – Page Hero
Background Image: Dynamic Featured Background Image on Container Block
Content: Headline Blocks displaying dynamic Post Title, Post Author, Post Data and Category Terms
Display Rules: All Posts
Creating new Block Elements
Creating a new Block Element is as easy as creating a new post. This article explains how to:
Display Rules
Display Rules are used to determine where a Block 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.
Copy an existing Block Element
So you think these Block 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.
Styling
A guide to styling and making Dispatch your own
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:
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:
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:
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:
Page Heros – Header Elements
The Hero Headers are built using the Elements module. Volumes Hero Headers are covered here:
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 a Block Element Page Hero to dynamically add the Featured Image Background, Post Title and Post Meta ( Author , Date and Category Terms ). All styling is applied to the GenerateBlocks Container and Headline Blocks.
Archives Header
This simple header places the archive title above the secondary navigation.
Styling
Hooks – Custom Theme Elements
Dispatch uses a few Hook Elements and Block Elements to create some Custom Elements in the site.
All of them provide dynamic output and should not require any changes to their content.
For more info on the Hook Element read here:
Hooks Element Overview
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.
Post Navigation Block
For more information see this document:
-
Technology3 months ago
Finding Love Online: A Look at realdatesnow.meine
-
Game7 months ago
Fotyomaç: The Thrilling Two-Player Strategy Game from Turkey
-
Technology3 months ago
realdatesnow mein: Perfect Platform for Your Relationship Goals
-
Health & Fitness9 months ago
Colestein Veglin Age: Safe And Effective
-
Health & Fitness4 months ago
A Closer Look: The Duration of Using Clindanol 300mg Capsule
-
Health & Fitness9 months ago
Want to know truth about the book Love Your Teeth reviews
-
Fashion & Lifestyle3 months ago
branden condy case: Tragic Shooting Incident in Kansas City
-
Education9 months ago
U1lib: A novel tool for librarians to use in their research