Retomo la serie de tutoriales para el tema de una sola página emblema de ThemeIsle, que tenía un tanto abandonados. Hestia continúa recibiendo mejoras por parte de sus creadores, y sigue siendo una excelente opción entre los temas gratuitos para WordPress.

Otro que ha subido escalones en popularidad a un ritmo sostenido en el último año es Neve, que presenta un nuevo modelo de creación de webs tan en boga en la actualidad: un código súper optimizado y ligero, y un diseño mínimo de base que se complementa con una biblioteca de sitios listos para importar y editar con constructores de página. Está en mis planes crear una nueva categoría que albergará los tutoriales para Neve en un futuro muy cercano.

Pero volvamos a Hestia. Como antes mencionaba, ThemeIsle se ha encargado de mantener vigente el tema, introduciendo nuevas características y corrigiendo errores con bastante regularidad. En los últimos meses lanzó la versión 3.0, que incluye una reestructuración del código y la actualización a la versión 5 de Font Awesome, entre otras novedades.

Para reflejar muchos de esos cambios, actualicé el tutorial principal, el tutorial para agregar un vídeo de fondo en la sección de título grande, el punto de los créditos del pie de página en los mini tutoriales, y en breve publicaré un segundo volumen de mini tutoriales con más trucos para personalizar Hestia.

En esta oportunidad es el turno de esta completa guía de estilos, que cubrirá todos los cambios de colores, tamaños de fuente y espaciados dentro de las secciones de la página de inicio, mediante código CSS personalizado.

Estos códigos podrán ser añadidos fácilmente desde Apariencia > Personalizar > CSS adicional, y no es necesario crear un tema hijo. De todas maneras, si estamos usando un tema hijo, lo más conveniente es colocar los códigos en el archivo style.css correspondiente.

Aquí, a modo de introducción, mostraremos las propiedades de CSS que podemos usar para personalizar las secciones del tema.

Color de texto

Para acceder a una herramienta de generación de códigos de color HEX, está disponible un selector en esta búsqueda de nuestro amigo Google.

La propiedad de CSS para cambiar el color de texto es

color: #1990a4;

donde #1990a4 es el valor que corresponde al código de color HEX deseado.

Color de fondo

La propiedad de CSS para cambiar el color de fondo es

background-color: #c9f7ff;

donde #c9f7ff es el valor que corresponde al código de color HEX deseado.

Tamaño de fuente

La propiedad de CSS para cambiar el tamaño de fuente es

font-size: 20px;

donde 20px es el valor que corresponde al tamaño en píxeles deseado para el texto.

Relleno

Esto cambiará el espacio que se ve al comienzo y al final de cada sección.

Las propiedades de CSS para cambiar el relleno son

padding-top: 100px;
padding-bottom: 50px;

donde padding-top corresponde al relleno superior, padding-bottom al relleno inferior y los valores 100px o 50px corresponden al tamaño en píxeles del espaciado entre contenido y límites de la sección.

Para más información sobre CSS, pueden visitar este sitio (está en inglés, pero tiene disponible la herramienta de traducción automática).

En este tutorial enumeraremos todos los selectores de CSS que correspondan a las secciones y a los respectivos elementos que las componen.

Cuando un selector es común a más de una propiedad de CSS, no es necesario usarlo por separado. Por ejemplo:

.hestia-features {
    background-color: #c9f7ff;
    padding-top: 75px;
    padding-bottom: 55px;
}

La siguiente es la lista de selectores para apuntar a los elementos específicos de cada sección de Hestia:

Características

El selector .hestia-features sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-features {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-features {
    padding-top: 75px;
    padding-bottom: 55px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-features .hestia-title {
    color: #1990a4;
    font-size: 42px !important;
}

Subítulo de la sección:

.hestia-features .description {
    color: #1990a4;
    font-size: 16px !important;
}

Título de la característica:

.hestia-features .hestia-features-content .feature-box .info-title {
    color: #1990a4;
    font-size: 24px;
}

Contenido de la característica:

.hestia-features .hestia-features-content .feature-box p {
    color: #1990a4;
    font-size: 20px;
}

Equipo

El selector .hestia-team sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-team {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-team {
    padding-top: 65px;
    padding-bottom: 20px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-team .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-team .description {
    color: #1990a4;
    font-size: 16px !important;
}

Título del miembro:

.hestia-team .hestia-team-content .card-profile .card-title {
    color: #1990a4;
    font-size: 16px;
}

Subtítulo del miembro:

.hestia-team .hestia-team-content .card-profile .category {
    color: #1990a4;
    font-size: 10px;
}

Contenido del miembro:

.hestia-team .hestia-team-content .card-profile .card-description {
    color: #1990a4;
    font-size: 16px;
}

Testimonios

El selector .hestia-testimonials sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-testimonials {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-testimonials {
    padding-top: 65px;
    padding-bottom: 20px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-testimonials .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-testimonials .description {
    color: #1990a4;
    font-size: 16px !important;
}

Título del testimonio:

.hestia-testimonials .hestia-testimonials-content .card-title {
    color: #1990a4;
    font-size: 18px;
}

Subtítulo del testimonio:

.hestia-testimonials .hestia-testimonials-content .category {
    color: #1990a4;
    font-size: 12px;
}

Contenido del testimonio:

.hestia-testimonials .hestia-testimonials-content .card-description {
    color: #1990a4;
    font-size: 16px;
}

Tienda

El selector .hestia-shop sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-shop {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-shop {
    padding-top: 65px;
    padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-shop .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-shop .description {
    color: #1990a4;
    font-size: 16px !important;
}

Categoría del producto:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .category {
    color: #1990a4;
    font-size: 14px;
}

Título del producto:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-title {
    color: #1990a4;
    font-size: 20px;
}

Color de la descripción del producto:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .card-description {
    color: #1990a4;
}

Tamaño de fuente de la descripción del producto:

section.hestia-shop .card-description p {
    font-size: 11px;
}

Precio del producto:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .price h4 {
    color: #1990a4;
    font-size: 20px;
}

Color del icono del carrito:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats {
    color: #1990a4;
}

Tamaño de fuente del icono del carrito:

.hestia-shop .hestia-shop-content .shop-item .card-product .content .footer .stats i {
    font-size: 30px;
}

Precios (Hestia Pro)

El selector .hestia-pricing sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-pricing {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-pricing {
    padding-top: 100px;
    padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-pricing .hestia-pricing-title-area .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-pricing .hestia-pricing-title-area p.text-gray {
    color: #1990a4;
    font-size: 16px !important;
}

Color de fondo de tabla destacada:

.hestia-pricing .hestia-table-one .card-pricing.card-raised {
    background-color: #ffffff;
}

Título de la tabla destacada:

.hestia-pricing .hestia-table-one .card-pricing.card-raised .category {
    font-size: 12px;
    color: #999999;
}

Precio de la tabla destacada:

.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title {
     font-size: 60px;
     color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
     font-size: 26px;
     color: #777;
}

Contenido de la tabla destacada:

.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li {
    color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised ul li b {
    color: #3C4858;
}

Título de la tabla estándar:

.hestia-pricing .hestia-table-one .card-pricing.card-plain .category {
    font-size: 12px;
    color: #999999;
}

Precio de la tabla estándar:

.hestia-pricing .hestia-table-one .card-pricing.card-plain .card-title {
     font-size: 60px;
     color: #2d3359;
}
.hestia-pricing .hestia-table-one .card-pricing.card-raised .card-title small {
     font-size: 26px;
     color: #777;
}

Contenido de la tabla estándar:

.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li {
    color: #999999;
}
.hestia-pricing .hestia-table-one .card-pricing.card-plain ul li b {
    color: #3C4858;
}

Cinta

El selector .hestia-ribbon sirve para aplicar relleno. El color de superposición de fondo se modifica siguiendo los pasos de este tutorial.

Relleno de la sección:

.hestia-ribbon {
    padding-top: 100px;
    padding-botton: 100px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Texto:

.hestia-ribbon .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Suscríbete

El selector .hestia-subscribe sirve para aplicar relleno. El color de superposición de fondo se modifica siguiendo los pasos de este tutorial.

Relleno de la sección:

.hestia-subscribe {
    padding-top: 65px;
    padding-botto: 65px;
}

Título de la sección:

.hestia-subscribe .title {
    color: #1990a4 !important;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-subscribe .subscribe-description {
    color: #1990a4;
    font-size: 20px !important;
}

Blog

El selector .hestia-blogs sirve para aplicar color de fondo y relleno.

Color de fondo de la sección:

.hestia-blogs {
    background-color: #c9f7ff;
}

Relleno de la sección:

.hestia-blogs {
    padding-top: 65px;
    padding-bottom: 70px;
}

Para cambiar color de fuente y tamaño, usar los siguientes selectores:

Título de la sección:

.hestia-blogs .hestia-blogs-title-area .hestia-title {
    color: #1990a4;
    font-size: 40px;
}

Subtítulo de la sección:

.hestia-blogs .hestia-blogs-title-area .description {
    color: #1990a4;
    font-size: 20px;
}

Categoría de la entrada:

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .category {
    color: #1990a4;
    font-size: 10px;
}

Título de la entrada:

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-title a {
    color: #1990a4;
    font-size: 20px;
}

Extracto de la entrada:

.hestia-blogs .hestia-blog-content .hestia-blog-item .card-blog .card-description {
    color: #1990a4;
    font-size: 16px;
}

Contacto

Relleno de la sección:

.hestia-contact {
    padding-top: 50px;
    padding-bottom: 30px;
}

Título de la sección:

.hestia-contact .hestia-title {
    color: #1990a4;
    font-size: 40px !important;
}

Subtítulo de la sección:

.hestia-contact h5.description {
    color: #1990a4;
    font-size: 40px !important;
}

Título del formulario:

.hestia-contact .card-title {
    color: #000000 !important;
    font-size: 30px !important;
}

Páginas internas

Color de fondo y color de texto en páginas:

.page .main {
    background-color: #000;
    color: #fff;
}

Color de fondo y color de texto en entradas del blog:

.post .main {
    background-color: #000;
    color: #fff;
}

Este tutorial fue adaptado de la versión en inglés de la documentación oficial.