Hay muchos plugins que hacen posible cambiar tu web a modo oscuro independientemente del tema que uses. Pero, si lo que deseamos es que la web esté hecha en modo oscuro de forma permanente, es fácil con el tema GeneratePress Premium.
Sin plugins adicionales, vamos hacer un Dark Theme muy vistoso y sencillo.
Antes de nada, quiero matizar que este post es para orientar a principiantes a cambiar el diseño sin necesitad de otros complementos.
1. Nos vamos a Apariencia – Temas y descargamos – Generatepress – Activamos y después instalamos el GP Premium para activar todas las características.
2. Al principio tendrás que diseñarlo a tu gusto, y me refiero a la página de inicio, las barras laterales, el pie de página… Una vez hayas realizado la estructura básica de tu web, comenzaremos a cambiar el estilo.
3. A continuación nos vamos a Personalizar – Colores:
CUERPO:
Color de fondo: #141414
Color de texto: #3a3a3a
Color de enlaces: #1e73be- Resto a convenir o por defecto.
CABECERA:
Fondo: #000000
Texto: #3a3a3a- Resto por defecto.
NAVEGACIÓN PRINCIPAL:
Fondo: rgba(0,0,0,0.85)
Texto: #ffffff
Fondo al pasar el puntero: rgba(63,63,63,0)
Texto al pasar el puntero: #61ce70- Resto a convenir
BOTONES:
Fondo: #1e72bd
Texto: #ffffff- Resto a convenir
CONTENIDO:
Fondo: #141414
Texto: #efefef
Título de Contenido: #e5e5e5
Texto de información meta de la entrada: #efefef
Enlaces de información meta de la entrada: #efefef
Enlaces de información meta de la entrada al posar el puntero: #61ce70 (pon el color que más te guste)- Resto dejar por defecto.
WIDGETS de la barra lateral:
Fondo: rgba(165,165,165,0)
Texto: #bcbcbc
Título de widget: #efefefPIE DE PÁGINA:
Fondo: #000000
Texto: #ffffff
Enlace: #ffffffBOTÓN SUBIR:
Fondo: #61ce70
Texto: #ffffff
Fondo hover: rgba(97,206,112,0.68)
Texto hover: #ffffffEl resto de las opciones las dejáis a vuestro criterio, entre las que también se incluyen los otros colores de los textos, formularios…
¿Y si quiero que alguna página en concreto sea de otro color?
En este caso, mediante el CSS adicional y el Inspector de Firefox o Chrome, localizaremos el id de la página e insertaríamos algo como esto:
#post-10360 .inside-article {background-color: #3a3a3a;}Al modificarse esa parte de la página o post, también deberéis de cambiar el color del texto para que contraste lo suficiente.
#post-10360 {color: #3a3a3a;}Con estos pasos ya tenemos la web en tono oscuro, pero podemos agregarle algunas cosillas más.
Efecto hover
Podemos crearle un efecto hover a las imágenes de las entradas de archivo (blog) cuando se pose el ratón con el CSS adicional.
Insertando este código:
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
transition: all .8s ease;
width:100%;
}
.post-image:hover img {
transform:scale(1.8);
}Podemos centrar los títulos de las entradas individuales:
.single-post .entry-header {
text-align: center;
}CABECERA
Desde el Personalizador, en DISEÑO se puede crear una cabecera más atractiva y funcional de la siguiente manera:
- Primero elegiremos el logo de la web desde identidad del sitio.
- Luego modificaremos estos parámetros:
Relleno del encabezado: Superior: 0 Inferior: 0, resto por defecto.
Cabecera para móviles: Activar. No te olvides del logo para móviles (puede ser el mismo u otro más compacto).
Navegación principal:
Método antiguo (para versiones inferiores de GP premium)
Ancho de navegación: completo
Ancho interior: contenido
Alineación: derecha
Ubicación: Bajo la cabecera.
Ubicación del logo de navegación: Fija + estática
Ancho del elemento de menú: 15 px
Altura del elemento de menú: 78 px
Altura del elemento de submenú: 20 px.
En Navigation Logo agregamos el logotipo que eliminamos anterioremente en Identidad del sitio. Es decir el que vamos a usar en nuestra web.
Método actual:
En el personalizador en Cabecera seleccionamos unir navegación y encabezado y luego configuramos la altura y ancho de los elementos del menú desde Diseño – Navegación principal.
Navegación secundaria: seleccionamos sin navegación.
Navegación fija (sticky):
Solo en escritorio
Transición: ninguna
Altura del elemento de menú: 78 px o la misma que nos ha quedado al unir el encabezado.
Podemos comprobarla con el inspector de elementos de firefox – botón derecho del ratón – inspeccionar; se nos abrirá una ventana inferior buscamos el icono de selección en la parte izquierda de esa misma ventana, lo usaremos para posarlo sobre la cabecera y clicaremos sobre ella, esto nos dará la información que buscamos a través de Disposición – Modelo de Caja (izquierda hacia abajo) indicándonos la anchura y altura del encabezado.
Navegación deslizante (Slideout Navigation): ambos (escritorio y móvil)
Altura del elemento de menú: 50 px
Con estas variaciones se os quedará una cabecera fija bastante más estable que la que ofrece el tema, y gracias a los colores que hemos personalizado, tendrá un efecto de transparencia al hacer scroll.
