Vídeo en inglés
(dispone de subtítulos en español generados automáticamente)
Cambiar el CSS
Puede parecer intimidante, pero en realidad es muy fácil. Para cambiar el diseño de algún elemento, solo tienes que buscar la clase de ese elemento y escribir la regla correspondiente en Opciones del tema (Personalizar) -> CSS adicional.
Cómo encontrar una clase
Para encontrar la clase de un elemento concreto, primero tienes que abrir las Herramientas de desarrollador en tu navegador. Solo tienes que buscar en Google cómo abrirlas en función de tu navegador. En las Herramientas de desarrollador, selecciona el elemento y busca qué clase tiene.
Cómo escribir CSS
El CSS se escribe con esta sintaxis: .class{propiedad:valor;}. Lo único que Google o ChatGPT no pueden decirte es el nombre de la clase. Eso lo tienes que averiguar tú mismo. El resto siempre lo puedes buscar.
Cambiar las propiedades de las páginas o de portfolios individuales
Si deseas cambiar algo en todas las páginas o en portfolios individuales, por ejemplo, debes buscar la clase del elemento HTML body. Por ejemplo, todas los portfolios individuales tienen una clase «single-portfolio». Por lo tanto, si deseas cambiar el color de fondo, escribiría: .single-portfolio{background-color:black;}
Regla importante
Si tu regla no se aplica, es posible que haya otra regla en el código CSS a la que el navegador da preferencia. Para anularla, debes añadir «!important» después del valor, por ejemplo: .single-portfolio{background-color:black!important;}
Transcripción del vídeo
¡Hola! Hoy me gustaría hablaros sobre el CSS personalizado.
Básicamente, el CSS personalizado os permite utilizar el lenguaje de programación que define el aspecto de vuestro sitio web. Podéis utilizarlo para pequeños cambios, como actualizar el diseño, ocultar elementos, cambiar colores o modificar fondos. Aunque técnicamente el CSS es programación, no os preocupéis, será muy fácil, lo prometo. Además, tendrás mucho más control sobre tu sitio web.
Por desgracia, no puedo añadir todas las opciones de diseño posibles a las opciones del tema Minimalio. Por eso quiero mostrarte cómo escribir CSS muy sencillo. El funcionamiento es el siguiente: todos los elementos de tu sitio web tienen algo llamado «clase». Una clase es básicamente un nombre en el código que puedes utilizar para aplicar estilos específicos.
Por ejemplo, aquí tenemos una clase llamada «.header-brand» para el logotipo principal. Escribiendo un poco de código CSS, puedes seleccionar esta clase y cambiar su diseño, por ejemplo, estableciendo su color en rojo. No puedes simplemente buscar en Google «¿Cuál es la clase de mi logotipo en mi sitio web?», porque ni Google ni ChatGPT lo sabrán. Sin embargo, sí puedes buscar o preguntar cómo cambiar elementos de diseño, como el color o el fondo, utilizando CSS. Solo tienes que buscar «¿Cómo cambio algo con CSS?» y probablemente obtendrás la respuesta correcta. El verdadero reto es encontrar la clase correcta para el elemento que deseas cambiar. Eso es lo que te mostraré a continuación.
En primer lugar, ve a la página que deseas modificar y abre las Herramientas de desarrollador. Todos los navegadores tienen estas herramientas. Yo utilizo Chrome, pero puedes utilizar cualquier navegador, solo que las herramientas se encuentran en menús diferentes. En Chrome, ve a «Ver» → «Desarrollador» → «Herramientas de desarrollador» o «Inspeccionar elementos». Una vez abiertas las Herramientas de desarrollador, puedes pasar el cursor por encima de los elementos de la página para ver el código correspondiente. Cuando seleccionas un elemento, verás su código HTML, incluido el nombre de la clase. Por ejemplo, el elemento del logotipo podría tener una clase como «.header-brand», que luego puedes usar en tu CSS.
Para añadir tu CSS personalizado, ve a la sección «CSS adicional» de tu tema, que suele encontrarse en las opciones del tema o en el personalizador. Pega allí tu código. Recuerda que los selectores de clase comienzan con un punto (por ejemplo, «.header-brand»), seguido de llaves que contienen tus propiedades CSS.
Si deseas ocultar un elemento, tienes dos opciones. Puedes utilizar «display: none;», que elimina completamente el elemento del diseño, lo que provoca que la página se desplace. También puedes utilizar «visibility: hidden;», que mantiene el elemento en su lugar, pero lo hace invisible.
¿Qué pasa si quieres cambiar el fondo de una página específica? Tienes que encontrar la clase de esa página. Ve a la página, abre las Herramientas de desarrollador y busca la etiqueta «body». Contendrá una clase específica única para esa página. A continuación, puedes utilizar esta clase en tu CSS para aplicar estilos solo a esa página. Por ejemplo, podrías cambiar el color de fondo a gris utilizando un código de color hexadecimal. El cambio solo se aplicará a esa página específica, ya que estás seleccionando su clase única. Si deseas cambiar el fondo de todas las páginas individuales del portafolio, no es necesario modificarlas individualmente. Solo tienes que buscar una clase compartida, como «.single-portfolio», y aplicar tus estilos a esa clase. Esto cambiará el diseño de todas las páginas del portafolio simultáneamente.
Al aplicar estilos a todos los elementos de una página, puedes utilizar el selector universal («*»). Sin embargo, ten cuidado con esto, ya que afectará a todo. Si algunos elementos no cambian, puede que sea porque ya hay estilos más específicos aplicados. Puedes anular esto añadiendo «!important» a tu regla CSS, lo que le indica al navegador que dé prioridad a este estilo.
¿Qué pasa si el elemento al que quieres dirigirte no tiene una clase? Si utilizas un creador de páginas como Gutenberg, puedes añadir tu propia clase personalizada. En la configuración del bloque, en la sección «Avanzado», puedes asignar un nombre de clase personalizado. A continuación, puedes darle estilo con tu CSS personalizado.
Por último, comprueba siempre que los cambios se ven bien tanto en el ordenador como en el móvil. Las herramientas para desarrolladores tienen una función que te permite previsualizar cómo se verá tu sitio en dispositivos móviles.
