ViniloBlog
  • Noticias
  • Cultura Geek
  • Mundo Asia
  • Música
  • Tecnología
  • Videojuegos
No Result
View All Result
  • Noticias
  • Cultura Geek
  • Mundo Asia
  • Música
  • Tecnología
  • Videojuegos
No Result
View All Result
ViniloBlog
No Result
View All Result
Home Noticias Noticias Recientes

A guide to styling and making Dispatch your own

Ender Arrieta by Ender Arrieta
21/10/2018
in Noticias Recientes
0 0
0
0
SHARES
Share on FacebookShare on Twitter

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:

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

Ender Arrieta

Ender Arrieta

Director general y Editor de ViniloBlog • Soy un ingeniero de computación que escribe sobre Marvel, DC, cine, series de TV y música. Amante de los vinilos.

Next Post
De Software Libre, Richard Stallman, Hackers y algo más.

De Software Libre, Richard Stallman, Hackers y algo más.

  • Trending
  • Comments
  • Latest
Las 5 mejores plataformas para ver series y películas

Las 5 mejores plataformas para ver series y películas vía streaming

13/06/2022
Panini Rusia 2018

Panini Rusia 2018: Completa tu álbum de manera digital

04/04/2022
omori rpg terror psicológico

‘OMORI’: Un RPG de terror psicológico basado en las emociones

14/04/2021
Kdramas

Conoce los Kdramas de fantasía que te van a enamorar

23/02/2022
redactores

Ven y forma parte del equipo de redactores de ViniloBlog

55
John Petrucci

‘Terminal Velocity’: John Petrucci vuelve como solista tras 15 años desde su debut

19
medium

Medium: la mejor alternativa para tu marca personal como bloguero

7
Hollywood

Netflix estrena ‘Hollywood’: una nueva miniserie en manos de Ryan Murphy

6
Anime Box llega a España

Anime Box llega a España con una nueva forma de ver anime en 2023

21/03/2023
Las mejores películas de las Tortugas Ninjas, según IMDb

Las mejores películas de las Tortugas Ninjas, según IMDb

21/03/2023
Sebastian Stan será el líder de facto en Thunderbolts

Sebastian Stan será el líder de facto en Thunderbolts

21/03/2023
Shazam! Furia de los Dioses

Shazam! Furia de los Dioses llegará muy pronto en formato digital

21/03/2023

Recomendados

Anime Box llega a España

Anime Box llega a España con una nueva forma de ver anime en 2023

21/03/2023
Las mejores películas de las Tortugas Ninjas, según IMDb

Las mejores películas de las Tortugas Ninjas, según IMDb

21/03/2023
Sebastian Stan será el líder de facto en Thunderbolts

Sebastian Stan será el líder de facto en Thunderbolts

21/03/2023
Shazam! Furia de los Dioses

Shazam! Furia de los Dioses llegará muy pronto en formato digital

21/03/2023
ViniloBlog

En ViniloBlog somos un medio digital donde podrás encontrar lo mejor de la cultura pop, del mundo geek y muchísimo más.

¡Adictos a la Cultura Pop!

Síguenos

Tags

amazon prime video Android anime Apple batman BTS cine comics Dc Dc comics Disney disney plus estrenos hbo HBO Max HBO Max Latinoamérica K-pop marvel Marvel Comics Marvel Studios Microsoft Música Netflix Netflix España Netflix Latinoamérica PC Peliculas playstation PS4 PS5 Redes Sociales Rock Series sony spider-man spider-man no way home star wars Streaming tecnologia the beatles venezuela Videojuegos viniloblog Warner Bros Xbox One
  • ¿Qué es ViniloBlog?
  • Aviso Legal
  • Políticas de Privacidad
  • Políticas de Cookies

© 2023 ViniloBlog - Todos los derechos reservados.

No Result
View All Result
  • Noticias
  • Reseña
  • Comics
  • Mundo Asia
  • Videojuegos
  • Música
  • Tecnología

© 2023 ViniloBlog - Todos los derechos reservados.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
ViniloBlog
Gestionar el Consentimiento de las Cookies
viniloblog.com usa cookies de analítica anónimas, propias para su correcto funcionamiento y de publicidad. Nuestros socios (incluido Google) pueden almacenar, compartir y gestionar tus datos para ofrecer anuncios personalizados. Puedes aceptar o personalizar tu configuración.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}