Cómo personalizar el widget de suscripciones de Jetpack

Si tienes un blog o página en WordPress seguramente muchas veces te has preguntado cómo puedo personalizar los colores (estilo) del widget de suscripciones que me da Jetpack. Hoy tengo la respuesta.

Los colores de mi blog (Blanco y Negro) no estaban ayudando mucho al widget de suscriptores de Jetpack, con los estilos de mi theme estaba pasando desapercibido este widget; así que tuve que bucear en Internet para dar con el código exacto para cambiar el color.

Antes de pasar al código, me gustaría recomendarte la página Color Hunt para encontrar paletas de colores acordes a tu estilo y no romper la cohesión del diseño de tu blog.

Ahora sí, para empezar :

1. Tener instalado y activado en nuestro WordPress el plugin Jetpack

2.Debemos tener el widget activo en la barra lateral de nuestro blog para poder visualizar los cambios

3. Ir a a la personalización del theme que tengamos activo y buscar la personalización de CSS (estilos). Clic sobre las imágenes para agrandar.

 

4. Una vez que estemos en la personalización de CSS  pegaremos el siguiente código:

.widget-title {
font-size: 15px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}

#blog_subscription-2{
background:#f4f4f4;
text-transform: uppercase;
padding:15px;
color:black;
text-align:center;
padding-top:30px;
padding-bottom:30px
}


#subscribe-email input {
background-color: #fff;
width: 85%;
height: 40px;

font-size: 15px;
color: #000;
float: center;
border: 1px solid #0000;
}

#subscribe-submit input {
background: #ffb6b9;
text-transform: uppercase;
width: 85%;
padding: 0;
border: 1px solid #ffb6b9;
height: 40px;
}

 

Para poder hacer buen uso de estar código, te voy a explicar las opciones que podemos cambiar en él:

Las siguientes líneas son para cambiar el color de fondo del bloque, justo donde dice “background” cambias el color en número hexadecimal que prefieras. Recuerda que en Color Hunt encuentras los números hexadecimales de todos los colores.

#blog_subscription-2{
background:#f4f4f4;

Para cambiar el color del botón de suscripción iremos a:

#subscribe-submit input {
background: #cfcbf1;

Y de igual forma cambiaras el número de color hexadecimal por el que tú consideres. En esta misma parte encontraras también el atributo Border:

border: 1px solid #cfcbf1;

Que también es personalizable en cuanto a color, solo requieres tu número hexadecimal.

Si tienes alguna duda en cuanto al código puedes consultar esta página para aprender más o bien el codex de WordPress.

No olvides compartir este post, puede ser de ayuda para alguien más.

 

Milenial amante de la fotografía, los viajes y del amor · LCC · Colaboro donando fotografías en Pixabay y Unsplash.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

subir