Hestia es el nuevo Zerif Lite

Tema Hestia

Clic en la imagen para abrir el tutorial

Hestia es el tema gratuito de cabecera de ThemeIsle

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar
Más y mejor que Zerif Lite (importa el contenido automáticamente)

Continuamos con la colección de tutoriales para el tema Zerif Lite, de ThemeIsle, y en este número diecisiete vamos a retocar un poco el aspecto de las pestañas de la información de producto en WooCommerce.

El estilo predeterminado no tiene bordes y está centrado en la pantalla.

Zerif Lite - Pestañas de producto WooCommerce

Para darles una apariencia más parecida a “fichas”, con alineación a la izquierda, tendremos que modificar algunos estilos con CSS.

Ya que no necesitamos tocar nada de los archivos, podemos simplemente añadir el código en el recuadro CSS adicional del Personalizador. Si ya estamos trabajando con un tema hijo, lo añadiremos en la hoja de estilos custom.css. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Este es el código completo:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
 background: #fff;
 z-index: 2;
 border-bottom: 2px solid #FFF !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
 border: 1px solid #d3ced2 !important;
 background-color: #ebe9eb;
 display: inline-block;
 position: relative;
 z-index: 0;
 border-radius: 4px 4px 0 0;
 margin: 0 -5px;
 padding: 0 1em !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
 list-style: none;
 padding: 0 0 0 1em !important;
 margin: 0 0 0.618em;
 overflow: hidden;
 position: relative;
 text-align: left;
}

.tabs {
 border-bottom: 0px !important;
}

Con lo cual nuestras pestañas ahora se verán así:

Zerif Lite - Pestañas de producto WooCommerce con borde

Tutorial original en inglés: How to add borders to WooCommerce product page tabs in Zerif

Caribdis.Net

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 de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis.Net