Actualizado el 12/12/2016

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 Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)