Cabecera transparente en Monochrome Pro

Vamos a ver como convertir la cabecera original a una cabecera transparente en Monochrome Pro. Lo haremos con un bloque de CSS.

Ya hablé la semana pasada de Monochrome Pro y de como crear una imagen por defecto para los artículos. Y en ese mismo artículo dije que Monochrome Pro es un theme de lo más personalizable.

Capturas

Tanto en la página de inicio como en las entradas o artículos, el theme tiene grandes imágenes de cabecera. Son las mismas imágenes destacadas de los artículos.

Es en estas páginas donde dejaremos la cabecera transparente con esas imágenes de fondo.

Aquí una captura de la versión de escritorio.

Cabecera transparente en Monochrome Pro
Cabecera transparente en Monochrome Pro

Y aquí una captura de la versión móvil.

Cabecera transparente en Monochrome Pro Móvil
Cabecera transparente en Monochrome Pro Móvil

No sólo dejaremos la cabecera transparente, sino que transformaremos un poco el menú de la versión móvil de Monochrome Pro. Lo haremos a pantalla completa. De otra manera, queda transarente como la cabecera y se pierde toda legibilidad.

Menú pantalla completa en Monochrome Pro
Menú pantalla completa en Monochrome Pro

Un poco de CSS

Simplemente, pega este fragmento de código al final del style.css de Monochrome Pro.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Concluión

En ocasiones ni siquiera es necesario hacer una modificación del código PHP para obtener buenos resultados. De ahí que yo le de bastante peso al CSS en el desarrollo de una web.

Para cualquier duda, puedes dejar un comentario. Encantado responderé a todas las dudas. Feliz Día! 🙂

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?