El cambio de colores en Dispatch se realiza principalmente a través del Personalizador de temas. Ciertos elementos, como Page Heros, se controlan dentro del elemento de encabezado y se tratan en ese artículo. Hay algunos colores que están controlados por CSS. Las reglas para ellos se encuentran en el Personalizador > CSS adicional:
Navegacion primaria
Borde fino sobre la navegación del escritorio
.main-navigation .inside-navigation {
border-top: 0.5px solid #d4d7d8;
}
Elemento de menú subrayado al pasar el mouse
.main-navigation ul li:after {
background-color: #000;
}
Búsqueda de navegación
.navigation-search.nav-search-active {
background-color: rgba(255,255,255,0.95);
top: 100%;
}
Botones
Todos los colores se controlan a través del personalizador. Sin embargo, el borde del botón hereda el color de la fuente. Esto está establecido por este 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;
}
Mostrar publicaciones de WP – Estilo de tarjeta
Título de la entrada, resumen y color del metatexto
.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;
}
Gradiente de superposición
Para mejorar el contraste del texto, se aplica una superposición de degradado sutil a la envoltura del contenido de las tarjetas.
.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;
}
Navegación de publicación de imagen destacada personalizada Siguiente/Anterior
.post-nav {
padding: 6px 12px;
border-radius: 3px;
font-size: 0.7em;
text-transform: uppercase;
background-color: #ff1956;
color: #fff !important;
}
