Convertir tu GeneratePress en Dark Mode

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 AparienciaTemas 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: #efefef

PIE DE PÁGINA:

Fondo: #000000

Texto: #ffffff

Enlace: #ffffff

BOTÓN SUBIR:

Fondo: #61ce70

Texto: #ffffff

Fondo hover: rgba(97,206,112,0.68)

Texto hover: #ffffff

El 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 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 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:

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

Navegación principal:

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.

Navegación secundaria: seleccionamos sin navegación.

Navegación fija (sticky):

Solo en escritorio
Transición: ninguna
Altura del elemento de menú: 78 px.

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.

F. Soler

F. Soler

Wordpress, Ciencia y Tecnología

Share on facebook
Share on twitter
Share on reddit
Share on whatsapp
Share on telegram
guest
0 Comments
Inline Feedbacks
View all comments

Este sitio web utiliza cookies para mejorar su experiencia.