Modificar el estilo del formulario de JetPack

Uno de los plugins totalmente imprescindibles para un blog en WordPress es JetPack.

JetPack es de hecho un pack de plugins, que dotan al blog de multitud de funcionalidades adicionales, que puedes activar o no según tus necesidades. Si no lo conoces, échale un vistazo.

Una de las funcionalidades que ofrece es la posibilidad que un lector de nuestro blog se suscriba, de forma que será avisado cuando se publique una nueva entrada.

De hecho puedes ver el widget de este plugin el menú derecho de este mismo blog. Y si quieres suscribirte, pues adelante! Jeje

Estilo propio

Un problema que nos podemos encontrar, es que este widget viene con su estilo visual ya predefinido. Y no se adapta al estilo que tiene nuestro tema. Por lo que gráficamente podemos ver que no acaban de cuadrar…

En el caso de este blog, el tema de WordPress que uso define los campos de texto con un padding bastante grande (de 16px por todos lados), lo que hace que los campos de texto sean muy altos.  En cambio, el campo de texto del correo electrónico de JetPack, es todo lo contrario:

Entonces de alguna forma tenemos que cambiar el estilo de ese campo para que sea igual que el resto del blog.

Modificar el estilo

Podríamos hacer dos cosas:

  1. Modificar el fichero CSS de Jetpack para poner a nuestro gusto el estilo del campo de texto
  2. Añadir un estilo adicional en el CSS de nuestro tema hijo.

Si hacemos lo primero, se perderán los cambios a la que actualicemos el plugin (algo que pasa como cada 15 días o 1 mes máximo).

Por lo tanto, lo mejor es hacer lo segundo: editar el fichero style.css de nuestro tema hijo, para hacer que ese campo de texto en concreto, siga el mismo estilo que el resto de campos del blog.

Editar el Style.css de nuestro tema

La forma sencilla y rápida es hacerlo desde la interfaz de administrador de nuestro blog.

Vamos a Apariencia > Editor.

Nos aseguramos que estamos editando el tema que nos interesa (tenemos que tenerlo seleccionado en el desplegable de arriba a la derecha). Y en la lista de archivos de la derecha, seleccionamos el fichero style.css.

Lo ideal es que todas las modificaciones que hagamos en ese archivo, estén juntas en un mismo lugar, para facilitar el localizarlas cuando nos haga falta.

Añadiremos la siguiente modificación:

El 16px es el ancho que tiene por defecto los componentes de texto en nuestro tema. Por eso pondremos ese valor.

Y el !important hay que ponerlo para asegurarnos que coge este valor a la hora de dibujar el campo de texto. Si no lo pusiéramos, usaría el valor definido en el fichero de estilo de Jetpack, porque tiene una mayor precedencia respecto al style.css de nuestro tema.

Y esto es todo, una vez guardados los cambios en el fichero, recargamos la página donde aparezca el campo de texto del correo electrónico del formulario de suscripción, y veremos que el aspecto visual es el mismo que el de cualquier otro campo de texto del blog.

Deja un comentario

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