¡Zelle Lite (ex Zerif) ya no se actualiza! Ahora están...

Tema Hestia Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Tema Hestia Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

En este quinto tutorial vamos a aprender a manejar la opacidad de la imagen de fondo para la sección de título grande en el tema gratuito Zerif Lite.

Zerif Lite - Opacidad

Puede que no nos guste el efecto de opacidad y queramos que la imagen tenga su contraste original. Para eso tendremos que añadir el siguiente código a la hoja de estilos (el archivo custom.css) del tema hijo; las instrucciones para crear un tema hijo se encuentran en esta entrada anterior:

.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, 0);
}

Tener en cuenta que este código también suprime el efecto de opacidad en la sección Contáctenos.

Zerif Lite - Opacidad - Sección "Contáctenos"

Para conservarlo, simplemente eliminar el selector .contact-us.

Si no desea eliminar la opacidad, pero sí atenuarla un poco, puede ajustarla cambiando el valor de la última cifra, a algo así:

.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, .3);
}

Y si desea aplicar una opacidad de distinto color, cambie los valores RGB. Por ejemplo, para un color que coincida con el rojo de los botones, quedaría algo así:

.header, .header-content-wrap, .contact-us {
    background: rgba(233, 102, 86, .3);
}

Zerif Lite - Opacidad - Rojo

Una herramienta muy útil para cuando trabajamos con colores, es la que nos ofrece el sitio HEX to RGB Converter: Aquí podemos insertar los valores hexadecimales correspondientes para un color y convertirlos a valores RGB.

¿Qué pasa si nada más queremos aplicar estilos a Zerif Lite, pero sin cambiar nada en los archivos? En este caso, el tema hijo no es necesario, ya que a partir de la versión 4.7 WordPress incluye la opción CSS adicional en el Personalizador, que nos da la posibilidad de pegar los códigos necesarios en el recuadro correspondiente y ver los cambios en el momento. La opción se encuentra al final:

Tutorial original en inglés: How to remove background opacity in Zerif

Caribdis.Net

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una Vizsla loca.
Caribdis.Net

Últimas entradas por Caribdis.Net (ver todas)