¿Cómo editar mi plantilla de WordPress con código CSS?

por / 2 meses ago / Diseño web / 3 Comments
¿Cómo editar mi plantilla de WordPress con código CSS?

Con este post quiero explicarte brevemente algunos conceptos básicos que debes saber de CSS si te dedicas al diseño web o al marketing online. Además, te enseñaré una extensión de Chrome para ayudarte con todo este tema ¡y de la cual te vas a enamorar!

¿Qué es el código CSS?

El código CSS junto con el código HTML son los dos códigos más importantes que conforman una web. Toda página web está construida en HTML y, junto con este código se utilizan otros para hacerle a la web diferentes “cambios”.

El código CSS se utiliza para aplicarle diferentes estilos al código HTML. Existen otros códigos, como por ejemplo, JavaScript que se utiliza para aplicarle diferentes normas y efectos al código HTML mediante condicionales: “Si hay esto, que ocurra esto”.

¿Cómo funciona el CSS?

Muy sencillo, tienes que “llamar” al elemento que quieras editarle el estilo. Para ello, debes saber cómo se llama ese elemento. Así, cuando escribas el código CSS indicas su nombre y le aplicas una propiedad.

La mejor manera de aplicarle una propiedad a un elemento es ponerle una clase o identificador para, como su nombre indica, identificarlo. Si lo que quieres es editar todos los elementos que sean iguales, por ejemplo, todos los párrafos, todos los títulos, todas las imágenes, etc. no hace falta que sepas cómo se llama, simplemente le aplicarías los atributos a p, h1, h2, etc.

Ahora bien, ¿cómo se escribe? Fácil, para llamar al identificador o clase debes utilizar almohadilla (#) o punto (.) respectivamente, a continuación, entre corchetes {} introduces todos los atributos que quieras aplicar, separadas por ; (¡muy importante no olvidarse del ;!).

En esta página web puedes ver toooodo lo que puedes hacer con código y puedes ponerlo en práctica, es una web muy didáctica. No obstante, no desesperes, a continuación te explico varios códigos básicos que debes saber.

¿Para qué tengo yo que saber código CSS y HTML si utilizo WordPress y ya viene todo hecho?

Porque muchas veces, aunque tu plantilla sea la mejor del mundo mundial, vas a tener que modificar ciertas cositas a tu manera, y las opciones de tu plantilla no te van a dar la opción que quieres. Y ahí llega en tu ayuda el código CSS.

Deberás saber cómo se llama la clase o identificador de lo que quieres editar, y a partir de ahí ya podrás editar lo que quieras. Para saber cómo se llama lo que quieres editar solo tienes que hacer clic derecho en el elemento que quieres editar y hacer clic en Inspeccionar. A continuación, en todo el código que te sale buscas la class o el id y copias lo que viene a continuación.

Pues bien, ahora te voy a enseñar diferentes códigos básicos que te van a servir de ayuda para editar estas pequeñas cosas que puedan surgirte.

Conceptos básicos que debes saber de CSS

Si estás editando el código CSS en tu plantilla de WordPress, en primer lugar debes saber que las características que añadas puede que ya estén definidas en tu plantilla. Por tanto, es importante que tras el atributo que definas añadas !important. De esta forma le estás dando más importancia a lo que tú definas que a lo que viene por defecto en la hoja de estilos de la plantilla.

  1. Cambiar aspectos del texto:
  • Font-family: Cambiar la fuente
  • Font-size: Cambiar el tamaño de la letra
  • Font-weight: Cambiar la anchura de la letra
  • Font-style: Cambiar el estilo de la letra (cursiva, subrayado…)
  • Text-transform: Cambiar a mayúsculas o minúsculas. Puedes usar el atributo “text-transform: none;” si quieres quitar lo que hay por defecto.
  • Text-decoration: Para añadir texto tachado o con una línea superior o inferior. Puedes escribir el atributo “text-decoration: none;” para quitar lo que el estilo de la letra que ya hay por defecto.
  • Line-height: Cambiar el interlineado
  • Letter-spacing: Cambiar la distancia entre las letras
  1. Cambiar aspectos de color:
  • Color: Cambiar el código de color de la clase o elemento
  • Background-color: Cambiar el color del fondo de la clase o elemento
  1. Ocultar elementos:

Esta es una de las opciones más útiles para editar tu plantilla de WordPress. A veces hay elementos o apartados que no queremos que aparezcan. Pues para ello puedes escribir el atributo “display: none;”.

  1. Editar la altura, anchura o márgenes de un elemento:
  • Height: Cambiar la altura
  • Width: Cambiar la anchura
  • Margin-left, margin-top, margin-right, margin-botton: Cambiar el margen (espacio que hay desde un elemento hasta los que tiene al lado) a la izquierda, superior, derecha o inferior, respectivamente.
  • Padding-left, padding-top, padding-right, padding-botton: Cambiar el padding (espacio que hay en un contenedor entre el contenido y los bordes del contenedor) a la izquierda, superior, derecha o inferior, respectivamente.

 

Uff, ¿y no hay otra forma más fácil de aprender todo esto?

¡Pero si esto ya es muy fácil! Pero sí que hay otra forma muy muy sencilla de hacer todo esto: ¡Con una extensión para Google Chrome! Ya sabes lo que a mi me gustan las extensiones de Chrome…

Ésta se llama StyleBot. Una vez instalada, es muy sencillo de usar. Al igual que hacíamos para saber la clase de un elemento, haz clic derecho en el elemento que quieres editar y esta vez dale a Stylebot > Style Element y ahí te saldrán varios aspectos que puedes modificar y ver a la vez cómo queda en tu web.

Stylebot

 

Todo esto no se está modificando realmente, solamente en tu navegador para que puedas hacer pruebas. Así que ahora nos queda, cuando ya estés conforme con las modificaciones, copiar el código que se te haya generado y pegarlo en la zona de Custom CSS de tu plantilla de WordPress, guardar cambios y listo, ya tendrás tus modificaciones hechas. ¿Puede ser más sencillo?

 

¿Qué te han parecido estos truquillos para mejorar el aspecto de tu web? Espero que se te haya quitado un poquito el miedo al código y te pongas a trastear con gusto, porque como todo en esta vida, se aprende practicando.

Leonor Cañuelo

Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com

  • ¡¡Diooos!! me acabo de quedar atónito,… pienso guardar esta gran guía para cuando necesite hacer retoques en mi plantilla 😉 Muchas gracias por tan buen aporte Leonor

    • ¡¡Muchas gracias a ti por tus buenas palabras Ismael!! Ya sabes, a comenzar sin miedo a toquetear el código css de tu web ¡Un abrazo!

      • Sí señor!!! a toquetear código, y si me lío, ya sé a quien contratar… jajajaja

Sígueme en Feedly

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies