Y es que si ya has elegido tu tema, pero aún hay algunos elementos del diseño que no terminan de convencerte, aquí encontrarás cómo ajustar fácilmente el CSS con plugins, o si lo prefieres, añadiendo algún fragmento de código, también conocido como snippets.
Ya sea porque los colores CSS de tu plantilla no coinciden con los de tu marca.
El tamaño de la fuente es demasiado grande o pequeña.
O quieres eliminar o modificar una parte de tu web en concreto.
Lo que está claro es que para poder sacar el máximo partido a tu proyecto, es necesario que sepas cómo modificar el CSS de la plantilla de tu WordPress.
Antes de meternos en materia, vamos a ver información básica que necesitas saber antes de aprender cómo editar los archivos y el CSS de tu web en WordPress.
¿Qué es CSS?
CSS son las siglas de «Cascading Style Sheets» que traducido sería algo así como hojas de estilo en cascada.
Es decir, el lenguaje utilizado para dar forma y estilo a cualquier elemento o estructura en las páginas web creadas por HTML.
El lenguaje CSS es desarrollado por la comunidad internacional llamada World Wide Web Consortium (W3C).
Esta comunidad, unida para la creación y desarrollo de especificaciones del lenguaje CSS, se encarga de definir los estándares de CSS usados en todo el mundo.
La aparición de las hojas de estilo en cascada o CSS fue en el año 1996.
En resumen, el código CSS consiste en aplicar estilos visuales (colores, tipos de letra, tamaños etc) a los elementos HTML de una página web (párrafo, lista, pie de página …)
Para escribir código CSS, se suelen usar editores de código, por ejemplo:
- Notepad ++
- Sublime Text
- Coda
- Atom
- Dreamweaver
- Otros
Por suerte, contamos con varios WordPress plugins para añadir CSS y personalizar tu web y editar o modificar tu plantilla con el fin de cambiar el aspecto o incluso la estructura.
Por otro lado, debido precisamente a esas múltiples opciones de plugins de CSS para WordPress, es que a veces resulta difícil saber cuál es el mejor o el que más nos conviene.
Y es por eso que en esta ocasión, os traigo un recopilatorio de los mejores plugins de WordPress para editar y modificar el CSS de tu plantilla WordPress …y además ¡Gratis!
Cómo editar CSS para personalizar una plantilla de WordPress
En la mayoría de ocasiones, es casi imprescindible modificar una plantilla WordPress, sea o no premium para adaptarla a las necesidades de tu proyecto.
Las posibilidades que ofrece la personalización con CSS son casi ilimitadas
Pero por supuesto es necesario saber lo que se está haciendo.
Aunque no es algo especialmente difícil, no todos tenemos el tiempo necesario para aprender los pasos necesarios para aplicar esos cambios en CSS o añadir determinados fragmentos de códigos (snippets) en nuestra web.
Y es que en caso de que nos decidamos a editar el CSS del theme para WordPress que usemos por la via tradicional, es necesario crear un child theme para no perder todos los cambios que personalicemos cuando actualicemos a una nueva versión, descargar un editor de código y subir los cambios mediante FTP.
Eso por no hablar de la peligrosa alternativa que sería editar el archivo style.css directamente desde el panel de administración de WordPress, con el riesgo que supone el no poder deshacer cambios y no poder recuperar el código de los archivos originales.
Mejores plugins para modificar y editar CSS de tu web en WordPress en 2024
Para evitar todo esto, y poder editar nuestras plantillas de WordPress con facilidad, una de las mejores soluciones que no requieren de código, crear un child theme o el uso de protocolos FTP es instalar alguno de los siguientes plugins.
Para mí, estos son los mejores plugins para editar y modificar CSS de tu plantilla WordPress.
Quédate hasta el final para ver los mejores plugins de este listado, además de otras opciones para añadir animaciones en CSS y un curso rápido para aprender CSS.
¿Qué mas se puede pedir?
08. Editor Gutenberg
La nueva versión del editor de WordPress ha venido para quedarse, y lo cierto es que cada vez es más potente y su uso está más extendido.
Si aún no lo has probado, te invito a hacerlo cuanto antes ya que ha mejorado mucho desde esa primera versión que vio la luz de forma precipitada.
Además, cuenta con gran cantidad de plugins para extender y aumentar el número de bloques con el que poder maquetar y modificar el aspecto de tu página web.
Si te interesa saber más, te recomiendo descargar el manual WordPress pdf completo en el que se habla a fondo todo lo relacionado con esta nueva herramienta.
07. Modular Custom CSS
Modular Custom CSS tiene más de 1000 instalaciones activas y ofrece una experiencia algo diferente al resto de plugins.
Ya que las funciones de navegación disponibles en este plugin facilitan enormemente la tarea de modificar tu theme de WordPress.
La mayoría de los plugins para personalizar CSS permiten hacer cambios en el tema de WordPress activo.
En el caso de Modular Custom CSS, además, cuenta con la funcionalidad de permitir hacer modificaciones en una plantilla de WordPress que no esté activa o usándose en este momento.
Esta es sin duda la característica más destacable del plugin Modular Custom CSS que lo hace destacar frente al resto.
06. TJ Custom CSS
AVISO: Este plugin ya no está actualizado y no ha sido probado con las últimas versiones de WordPress.
TJ Custom CSS ha sido desarrollado por uno de los desarrolladores de temas de WordPress Theme Junkie y actualmente cuenta con más de 40.000 instalaciones activas.
Una vez activado TJ Custom CSS permite personalizar el CSS de tu plantilla de WordPress en vivo desde el apartado Apariencia del menú lateral de tu panel de administrador.
Por supuesto, también permite añadir fragmentos de código CSS o escribirlo a mano desde su editor incorporado.
Un aspecto positivo de este plugin es que es bastante ligero y no recarga tu web innecesariamente abusando de los recursos de tu servidor como otros plugins.
05. Customizer Custom CSS
Creado por el desarrollador Bijay Yadav, este plugin cuenta con más de 2000 instalaciones activas en estos momentos.
Te sugiero que no te dejes engañar por la primera impresión de este plugin ya que parece menos prometedora de lo que realmente es.
Tal y como indica la descripción de este plugin, Customizer Custom CSS permite sobreescribir fácilmente el CSS del tema de WordPress que estés usando y visualizar esas modificaciones antes de guardar los cambios.
Customizer Custom CSS no requiere configuraciones adicionales y es muy fácil de usar, por lo que no será necesario crear un child theme sólo para editar el CSS de tu web en WordPress.
La forma de uso no es muy diferente de otros plugins. Sólo tienes que ir a Apariencia > Personalizador y verás un nuevo elemento en el menú llamado Custom CSS, donde deberás añadir el código CSS que quieras modificar.
04. CSS Plus
El plugin CSS Plus ha sido creado por Paulo Calixto y cuenta con más de 10.000 instalaciones activas.
Este plugin cuenta con bastantes características diferenciadoras respecto al resto de opciones que existen en el repositorio oficial de plugins de WordPress.
La más destacada, para bien o para más posiblemente sea que CSS Plus comprime el código que añades para editar el CSS de tu plantilla WordPress, lo comprime, y lo incrusta en línea en el header o cabecera de cada página o post.
Esto tiene varias lecturas. Por una parte, es positivo porque permite personalizar de forma individual cada página o post con su propio código CSS.
Además, es un plugin ideal para añadir el CSS que permita visualizar la parte superior de la página tal y como requiere Google Page Speed Insights.
Por otro lado, esto tiene la parte negativa de que si añades demasiados estilos CSS en línea a tu header.php para modificar tu plantilla de WordPress, puedes correr el riego de conseguir el resultado contrario y ralentizarla en exceso.
Otras de las diferencias y ventajas de este plugin son:
- Soporte para Sass (.scss)
- Código generado ya comprimido
- Mismo estilo que Sublime Text
03. Advanced CSS Editor
El plugin Advanced CSS Editor cuenta ya con más de 10.000 instalaciones activas y ha sido creado por Hardeep Asrani, uno de los desarrolladores de la conocida firma de plantillas WordPress Tesla Themes.
Sin duda, tener a una de las casas más conocidas de la industria detrás de este plugin es sinónimo de calidad.
Una de las principales ventajas competitivas de Advanced CSS Editor respecto a otras opciones que sólo permiten añadir o editar el CSS de tu plantilla para WordPress de forma global, es que con este plugin, podrás personalizar el CSS de tu web de forma específica para móviles, tablets, portátiles y ordenadores de sobremesa.
Esto es sin duda una gran funcionalidad, lo único que debes tener en cuenta es que si aplicas algún cambio específico para móviles por ejemplo, a la hora de visualizar dichos cambios, debes reducir la ventana del navegador a la resolución adecuada para ver esos cambios en la vista previa y poder guardarlos después.
02. Simple Custom CSS
El primer paso para poder editar y añadir el css de la plantilla de tu web, es obviamente instalar y activar el plugin Simple Custom CSS o cualquier otro que elijas de la manera habitual.
Simple Custom CSS cuenta con más de 300.000 instalaciones activas, ha sido creado por John Regan y Danny Van Kooten y es perfectamente compatible con la última versión de WordPress.
Una vez activo, debes ir a la sección Apariencia en el menú lateral del panel de administración de tu web, y clicar en la nueva opción que ha aparecido llamada CSS personalizado.
Una vez dentro, verás lo simple y efectivo que resulta este plugin.
Como su propio nombre indica, es una solución bastante simple, ya que está libre de distracciones, pero a la vez muy potente y efectiva.
Cuenta con diferentes colores para facilitar la escritura de código y además cuenta con la funcionalidad de syntax highlight, que resalta los posibles errores a la hora de escribir el código para detectarlos y solucionarlos rápidamente.
Una vez añadido el código CSS necesario para editar la plantilla de tu theme a tu antojo, tan sólo tienes que darle al botón Actualizar el CSS personalizado e ir a tu sitio web para ver los cambios realizados.
Como hemos comentado al principio, la principal ventaja de este plugin no es sólo que te permita añadir código CSS para personalizar tu web, si no que este código no se perderá con las actualizaciones futuras de tu plantilla, es decir, Simple Custom CSS realiza la misma función que un child theme en este aspecto.
01. SiteOrigin CSS
SiteOrigin CSS es uno de los plugins más populares para editar el CSS de las plantillas en WordPress.
Cuenta con más de 200.000 instalaciones activas y ha sido creado (no te lo vas a creer) por SiteOrigin.
Sin duda, la principal ventaja del plugin SiteOrigin CSS son las 2 opciones que ofrece para modificar el CSS de la plantilla de tu WordPress.
Además de incluir el código CSS manualmente como con el resto de plugins, SiteOrigin CSS también permite modificar tu plantilla WordPress de forma visual, seleccionando cada elemento que deseas editar de una forma realmente sencilla y lo mejor de todo, sin necesidad de saber nada de CSS.
Para usar el método visual de este plugin, tan sólo es necesario hacer clic en el elemento del theme de WordPress que queramos modificar con CSS y a continuación, editar los atributos visuales disponibles como texto, diseño colores o tamaño.
En cuanto al método manual, al igual que con el resto de plugins que hemos visto, tan sólo hay que ir a la sección de apariencia en el menú lateral e incluir el código CSS necesario para personalizar nuestra web.
Otros plugins para personalizar tu plantilla de WordPress
Ya hemos visto los que para mí son los mejores plugins para personalizar tu web en WordPress mediante código CSS, pero por si no has tenido suficiente, aquí tienes otras opciones menos conocidas:
Simple CSS
La parte positiva de este plugin es que mediante metaboxes permite aplicar ciertos cambios únicamente a determinadas páginas o posts.
Visual CSS Style Editor
No os recomiendo este plugin a no ser que tengáis pensado ampliarlo a la versión premium, ya que es requerida para la mayoría de cambios importantes.
Custom CSS Pro
Este plugin creado por WaspThemes no tiene ninguna funcionalidad especial respecto a los plugins anteriormente citados, pero no por eso no es una opción a tener en cuenta.
Desventajas de los plugins para editar el CSS de los themes de WordPress
La única desventaja que presentan este tipo de plugins, es que es posible que no sea compatible con ciertos temas de WordPress.
Yo aún no he sido capaz de encontrar un sólo tema, del repositorio, premium o creado por mi que no sea compatible con estos plugins, pero según la documentación de la mayoría de ellos, puede darse el caso de que tengan ciertas incompatibilidades.
Por este motivo, si tras aplicar alguna personalización de CSS a tu web, no ves que los cambios se apliquen correctamente y tras asegurarte que el código añadido es correcto, simplemente tendrás que elegir algún otro plugin de este listado.
Animaciones y efectos CSS en WordPress
Estoy seguro que has visto animaciones o efectos CSS que te han llamado la atención en alguna de las principales páginas webs del momento.
Modificar el CSS de tu plantilla de WordPress está muy bien, pero ¿por qué no ir un paso más allá y añadir estas fantásticas animaciones?
Las animaciones de CSS dentro de una plantilla de WordPress permiten añadir movimiento a imágenes o elementos, o hacer que aparezcan repentinamente desde el lateral, hacer que el contenido cambie automáticamente cuando el usuario hace scroll etc.
Todo esto, añade interés al visitante, así como la posibilidad de destacar las partes más importantes de tu web.
Si te parece interesante, quédate conmigo ya que a continuación vamos a ver un fantástico plugin para añadir animaciones y efectos CSS a tu plantilla de WordPress sin tener conocimientos sobre este lenguaje.
Añadir animaciones CSS a WordPress con el plugin Animate It!
Antes de empezar a usar este plugin, obviamente es necesario instalarlo y activarlo como cualquier otro.
Lo encontrarás bajo el nombre de Animate It! en el repositorio oficial de WordPress, y como podrás ver, este plugin creado por eLEOPARD Design Studios, cuenta con más de 40.000 instalaciones activas.
Una vez activo, se puede usar directamente sin necesidad de hacer ninguna configuración directamente desde el panel de Ajustes en el menú de administrador.
Todo lo que tienes que hacer es simplemente crear una nueva entrada o página y en la sección visual del editor de WordPress, encontrarás una nueva herramienta en rojo etiquetada como Animate It!.
Una vez hagas clic en dicho botón, aparecerán las opciones del editor, donde añadir a tu WordPress las animaciones en CSS que desees.
Tipos de animación CSS para integrar con WordPress
El plugin Animate It! permite añadir 3 tipos diferentes de animaciones CSS a WordPress:
Entrada
El contenido animado permanecerá en esta página después de moverse.
Salir
El contenido animado saldrá o desaparecerá después de moverlo.
Otras opciones
En este último apartado, podrás personalizar completamente la animación CSS que quieres añadir a tu WordPress.
Estas son las opciones:
- Estilo de animación: Entrada o Salida
- Delay: Segundos que tardará en aparecer la animación.
- Duration: Segundos que durará la animación CSS.
- Opciones: Sección con 3 opciones diferentes para el momento en el que se cargará la animación.
Como ya habrás podido imaginar si has instalado el plugin, haciendo clic en el botón de animar al final de la tabla, verás la animación que acabas de crear.
Si estás satisfecho/a con el resultado, sólo tienes que hacer clic en insertar para añadir esa animación de CSS a tu plantilla WordPress.
Con el plugin Animate It! no sólo podrás animar texto si no que también admite imágenes, videos o cualquier cosa que te imagines.
Una vez tengas todo listo, puedes ver el resultado final dándole al botón de previsualizar o directamente publicar o actualizar los cambios si quieres añadirlo directamente a tu web.
Como ves, con este plugin, hacer animaciones de CSS con WordPress es realmente sencillo y no requiere de ningún conocimiento técnico.
Tutorial para editar CSS en WordPress
Como ya hemos visto, las hojas de estilo en cascada (Cascading Style Sheets) permiten modificar la presentación de un documento HTML sin alterar su estructura, facilitando la presentación y mejorando el diseño y aspecto de los elementos HTML.
Para terminar este artículo, os traigo un tutorial básico pero muy completo con las principales.
Cómo insertar CSS en HTML
Existen tres formas diferentes de aplicar estilos:
01. En línea: aplicando directamente el atributo style a cualquier elemento HTML:
<p style="font-family:Arial; font-size:14px; color:blue">texto</p>
02. Incrustados: Añadidos en la propia página o archivo HTML / PHP mediante la etiqueta <style> normalmente en la etiqueta <head>
<head>
<style type="text/css">
p {font-family: Arial; color: blue; font-size: 14px;}
</style>
</head>
03. Enlazados: en una hoja de estilos externa, que es un archivo de texto plano con extensión .css que afecta a todos los documentos que lo enlacen.
<head>
<link rel="stylesheet" type="text/css" href="archivo.css"/>
</head>
Salvo excepciones muy concretas (según el orden en el que se apliquen los estilos), las 3 opciones darán los mismos resultados en cuanto a la personalización de las plantillas de WordPress.
En cuanto a velocidad y optimización, la primera opción es la menos recomendada, la segunda es sólo para añadir pequeñas porciones de CSS, como por ejemplo los estilos responsables de modificar la parte visible de nuestro theme de WordPress sin hacer scroll, consiguiendo así una mayor velocidad de carga.
Por último, se enlaza externamente a los archivos .css que contienen la mayor parte de nuestro código CSS usado para modificar nuestra web.
Cambiar color en CSS
- Valor hexadecimal:
h1 {color: #FF0000;}
- Nombre en inglés:
p {color: red;}
- Valor RGB (Red Green Blue):
p {color: rgb(255, 0, 0);}
- Modelo RGBA (Red Green Blue Alpha):
p {color: rgba(255, 0, 0, .5);}
- Opacidad:
img {opacity: 0.4;}
Estilizar listas con CSS
- Tipo de lista:
ul li {list-style-type: square;}
- Imagen como marcador:
ul li {list-style-image: url('estrellaroja.gif');}
- Poner el marcador hacia dentro:
ul {list-style-position: inside;}
- Poner el marcador hacia afuera:
ul {list-style-position: outside;}
Cambiar el fondo con CSS
- Color de fondo:
body {background-color: red;}
- Imagen de fondo:
body {background-image: url('fondo.png');}
- Repetir imagen en horizontal:
background-repeat: repeat-x;
- Repetir imagen en vertical:
background-repeat: repeat-y;
- Imagen de fondo fija:
background-attachment: fixed;
- Imagen de fondo que se desplaza:
background-attachment: scroll;
Editar Tablas con CSS
- Aplicar bordes:
table {border: 1px solid black;}
- Definir anchos y altos:
table {width: 100%;} th {height: 50px;}
- Alinear el texto:
th {text-align: left;} td {height: 60px; vertical-align: bottom;}
- Espacio interior de la celdas:
td {padding: 20px;}
- Color:
table {border: 1px solid green; background-color: green; color:white;}
Estilos y alineación de textos en CSS
- Alineación a la izquierda:
p {text-align: left;}
- Alineación al centro:
p {text-align: center;}
- Alineación a la derecha:
p {text-align: right;}
- Texto justificado:
p {text-align: justify;}
- Quitar el subrayado de los enlaces:
a {text-decoration: none;}
- Con una línea encima:
p {text-decoration: overline;}
- Texto tachado:
p {text-decoration: line-through;}
- Texto subrayado:
p {text-decoration: underline;}
- Transformar a mayúsculas:
p {text-transform: uppercase;}
- Transformar a minúsculas:
p {text-transform: lowercase;}
- Primera en mayúscula:
p {text-transform: capitalize;}
- Versalitas:
p {font-variant: small-caps;}
- Indentar la primera línea del texto:
p {text-indent: 25px;}
- Texto de izquierda a derecha:
p {direction: ltr;}
- Texto de derecha a izquierda:
p {direction: rtl;}
- Tipos de letra:
h1 {font-family:“Times New Roman”,Geneva, Times, serif;}
- Ningún estilo:
p {font-style: normal;}
- Cursiva:
p {font-style: italic;}
- Negrita:
p {font-weight: bold;}
- Tamaño de letra:
h1 {font-size: 40px;} h1 {font-size: 2.5em;}
- Espacio entre palabras:
p {word-spacing: 30px;}
- Espacio entre letras:
p {letter-spacing: 2px;}
- Espacio entre líneas:
p {line-height: 24px;}
- Sombra:
p {text-shadow: 3px 3px 4px red;}
- Superíndice:
p {vertical-align: sup;}
- Subíndice:
p {vertical-align: sub;}
- Alinear arriba:
img {vertical-align: top;}
- Alinear en medio:
img {vertical-align: middle;}
- Alinear abajo:
img {vertical-align: bottom;}
Comentarios en CSS
/* Todo lo que esté dentro de estos símbolos será un comentario y no se visualizará en la web */
/* Es útil para desactivar ciertos estilos o hacer anotaciones sobre el código */
Prioridad al aplicar estilos
Para evitar errores de configuración, cuando se aplican varios estilos CSS diferentes sobre un mismo elemento, estos se sobreescriben según su prioridad.
Es por eso que el CSS recibe el nombre de hojas de estilo en cascada.
De menor a mayor, estos son los factores de los que dependerá qué estilos se aplican:
- Estilos por defecto del navegador
- Estilos en preferencias de usuario del navegador
- Estilos en hoja externa
- Estilos en el head de la página
- Estilos en línea
- Estilos en el código de la página con !Important
- Estilos en preferencias de usuario del navegador con !Important
Selectores CSS
- Selector de elementos de HTML (Ejemplo: <p>texto</p>):
-
p {text-align: right;}
- Selector de clases (<p class=»centrado»>texto</p>):
-
.centrado {text-align: center;}
- Selector de id (<p id=»centrado»>texto</p>):
-
#centrado {text-align: center;}
- En cualquiera de los casos, la estructura será la misma:
-
selector {propiedad:valor; propiedad:valor;}
Estos son la mayoría de los selectores existentes en CSS3:
Selector | Ejemplo | Aplica el estilo a… | CSS |
---|---|---|---|
.class | .intro | Todos los elementos que tengan el atributo class=»intro» | 1 |
#id | #firstname | El elemento que tenga asignado el atributo id=»firstname» | 1 |
elemento | p | Todos los elementos <p> | 1 |
elemento,elemento | div,p | Todos los elementos <div> y <p> | 1 |
elemento elemento | div p | Todos los elementos <p> que se encuentran dentro de los elementos <div> |
1 |
:link | a:link | Todos los enlaces no visitados | 1 |
:visited | a:visited | Todos los enlaces visitados | 1 |
:active | a:active | Los enlaces cuando se seleccionan | 1 |
:hover | a:hover | Cuando el puntero del ratón está encima del enlace | 1 |
:first-letter | p:first-letter | La primera letra de cada elemento <p> | 1 |
:first-line | p:first-line | La primera línea de cada elemento <p> | 1 |
* | * | Todos los elementos | 2 |
elemento>elemento | div>p | Todos los elementos <p> cuyo elemento contenedor (padre) sea el elemento <div> |
2 |
elemento+elemento | div+p | Todos los elementos <p> que se encuentran inmediatamentes después de elementos <div> |
2 |
[atributo] | [target] | Todos los elementos que tengan el atributo target | 2 |
[atributo=valor] | [target=_blank] | Todos los elementos con el atributo target=»_blank» | 2 |
[atributo~=valor] | [title~=flor] | Todos los elementos que contengan la palabra «flor» en el atributo title |
2 |
[atributo|=valor] | [lang|=es] | Todos los elementos con el atributo lang cuyo valor comience con «es» |
2 |
:focus | input:focus | El elemento input el cual tenga el foco | 2 |
:first-child | p:first-child | Cada elemento <p> que sea el primer hijo de su padre | 2 |
:before | p:before | Inserta contenido antes del contenido de cada elemento <p> | 2 |
:after | p:after | Inserta contenido después de cada elemento <p> | 2 |
:lang [lenguaje] | p:lang [es] | Cada elemento que tenga el atributo lang con el valor igual a «es» | 2 |
elemento1~elemento2 | p~ul | Cada elemento <ul> que esté precedido por el elemento <p> | 3 |
[atributo^=valor] | a[src^=»https»] | Cada elemento <a> donde el valor del atributo src comience con «https» |
3 |
[atributo$=valor] | a[src$=».pdf»] | Cada elemento <a> donde el valor del atributo src termine con «.pdf» |
3 |
[attribute*=value] | a[src*=».w3schools»] | Cada elemento <a> donde el atributo src contenga la subcadena «w3schools» |
3 |
:first-of-type | p:first-of-type | Cada elemento <p> que es el primer elemento <p> de su padre | 3 |
:last-of-type | p:last-of-type | Cada elemento <p> que es el último elemento <p> de su padre | 3 |
:only-of-type | p:only-of-type | Cada elemento <p> que es el único elemento <p> de su padre | 3 |
:only-child | p:only-child | Cada elemento <p> que es el único hijo de su padre | 3 |
:nth-child[n] | p:nth-child[2] | Cada elemento <p> que es el segundo hijo de su padre | 3 |
:nth-last-child[n] | p:nth-last-child[2] | Cada elemento <p> que es el segundo hijo de su padre contando desde el final |
3 |
:nth-of-type[n] | p:nth-of-type[2] | Cada elemento <p> que es el segundo elemento <p> de su padre |
3 |
:nth-last-of-type[n] | p:nth-last-of-type[2] | Cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el final |
3 |
:last-child | p:last-child | Cada elemento <p> que es el último hijo de su padre | 3 |
:root | :root | La raíz del documento | 3 |
:empty | p:empty | Cada elemento <p> que no es hijo (incluidos nodos de texto) |
3 |
:target | #news:target | El elemento #news activo actualmente (pulsado en una URL que contenga el nombre de ancla) | 3 |
:enabled | input:enabled | Cada elemento <input> activado | 3 |
:disabled | input:disabled | Cada elemento <input> desactivado | 3 |
:checked | input:checked | Cada elemento <input> chequeado | 3 |
:not[selector] | :not[p] | Cada que no es un elemento <p> | 3 |
::selection | ::selection | La porción de un elemento que ha sido seleccionado por el usuario |
– |
Código CSS para maquetar
- Ancho y alto: contenido width y height (en px o %):
p {width:90px; height:50px;}
- Máximo y/o mínimo:
p {min-width:100px;}
- Margen exterior (en px o %):
p {margin: 20px;}
- Espacio interior o Padding (en px o %):
p {padding: 10px;}
Tipos de borde CSS
Con el atributo border y sus diferentes valores, podemos modificar los bordes en CSS de los elementos de nuestra plantilla de WordPress.
- Línea sólida:
p {border-style: solid;}
- Línea discontinua:
p {border-style: dashed;;}
- Línea de puntos:
p {border-style: dotted;;}
- Línea doble:
p {border-style: double;;}
- Surco:
p {border-style: groove;;}
- Cresta:
p {border-style: ridge;;}
- Relieve hundido:
p {border-style: inset;;}
- Relieve saliente:
p {border-style: outset;;}
- Color del borde:
p {border-color: blue;}
- Ancho del borde:
p {border-width: 5px;}
- Bordes redondeados:
p {border-radius: 5px;}
Posicionar elementos con CSS
- Fijo:
.footer {position: fixed;}
- Relativo:
.c1 {position: relative; top: 20px;}
- Absoluto:
.c2 {position: absolute; top: 20px;}
- Superpuesto:
.c3 {position: absolute; z-index:2;}
Alineación de bloques en CSS
- Alinear a la izquierda:
img {float: left;}
- Alinear a la derecha:
img {float: right;}
- Romper la flotación
div {clear: both;}
Dar visibilidad u ocultar cosas con CSS
- Elemento invisible, sí ocupa espacio:
.escondido {visibility: hidden;}
- Elemento invisible, no ocupa espacio:
.nulo {display: none;}
- En línea
.linea {display: inline;}
- De bloque
.bloque {display:block;}
- Bloque que se agrupa en línea
.acumulable {display: inline-block;}
- Flexible, los elementos se adaptan al espacio
.contenedor {display: flex;}
Fondos CSS
- Sombra:
p {box-shadow: 5px 5px 5px red;;}
- Imagen como borde:
p {border-image:url(border.png) 30 30 round;;}
- Color de fondo:
p {background-color: red;}
Imagen de Fondo
.imagen {
background-image: url(fondo.jpg);</br /> background-repeat: no-repeat;</br /> background-origin: content-box;</br /> background-clip: content-box;</br /> background-size: auto;</br />}
Degradados CSS3
- Degradados lineales:
#d1 {background: linear-gradient(green, blue);}
- Hacia una dirección:
#d2 {background: linear-gradient(to left, green, blue);}
- Diagonales:
#d3 {background: linear-gradient(to top right, green, blue);}
- Diagonales con grados:
#d4 {background: linear-gradient(30deg, green, blue);}
- De más de dos colores:
#d5 {background: linear-gradient(red, green, blue);}
Si detectamos errores de compatilidad con algún navegador, debemos añadir su prefijo antes del valor que causa el conflicto:
- -webkit- para Chrome y Safari
- -o- para Opera
- -moz- para Firefox
Cambiar tamaño y tipo de letra en CSS
La declaración de una tipografía se termina con la familia genérica como la última de las opciones alternativas.
p {font-family:"Times New Roman",Georgia,serif;}
Las familias genéricas son:
- Serif (Times New Roman)
- Sans-serif (Arial)
- Cursive (Comic Sans)
- Fantasy (Impact)
- Monospace (Courier New)
La compatibilidad de la tipografías depende del navegador y del sistema operativo
WOFF (Web Open Font Format)
Es un formato para usarse en páginas web. Fue desarrollado por la Fundación Mozilla, Opera Software y Microsoft, y está en el proceso de normalización por el W3C y convertirse en un estándar.
EOT (Embedded OpenType)
Estas fuentes son una forma compacta de OpenType para su uso como fuentes incrustadas en las páginas web y a su vez protegen los derechos de autor. Podemos vincular una tipografía sin que el usuario la tenga instalada.
SVG (Scalable Vector Graphics)
Es una especificación para describir gráficos vectoriales bidimensionales, estático o animado y fue creado como alternativa de formato abierto a Flash. se emplea como formato tipográfico en la web para dispositivos iOS (iPad, iPhone y iPod).
TrueType
Es un formato estándar de tipos de letra escalables desarrollado inicialmente por Apple a finales de la década de los ochenta. Es compatible con Firefox 3.5+ , Safari 3.1+, Chrome 4+ y Opera 10+.
Lánzate a editar y modificar el CSS de la plantilla de WordPress de tu web
Con todo esto que hemos visto en este tutorial para cambiar los estilos CSS de tu theme de WordPress ya estás listo para personalizar el 90% de los aspectos de tu web.
Puede que algo muy concreto requiera de más investigación por tu parte, pero con la información que acabas de recibir, podrás solucionar los principales problemas de un usuario medio.
Cómo modificar el estilo CSS de una plantilla WordPress
Video de Sergio Kolomiychuk
Espero que este listado con los mejores plugins para editar y modificar tu plantilla de WordPress te sea de utilizad, si es así, me ayudaría mucho si pudieses compartir este artículo en tus redes sociales.
Si te ha gustado este artículo, te invito a compartirlo en redes sociales para que ayude a más gente.
Por último, puedes dejar tu email en el formulario que verás debajo para recibir gratis nuestra Guía Completa de Wordpress en PDF. También te informaremos de nuevos artículos, recursos y ofertas útiles para tu Wordpress.