Cómo agregar CSS en Oxygen

Publicado el 17 de julio de 2020
Actualizado el 25 de julio de 2020

Oxygen Builder permite añadir propiedades CSS en WordPress fácilmente y vamos a ver cual es la forma más eficiente de hacerlo.

Hay varias formas de añadir CSS personalizado en Oxygen. Y aunque todas hacen lo mismo, su propósito y el ámbito en el que se carga es un poco diferente en cada caso.

Agregar propiedades CSS a un elemento determinado

Al editar un elemento en Oxygen, puedes agregar algunas propiedades CSS adicionales. Para ello, selecciona el elemento y ve a Custom CSS.

Agregar CSS en Oxygen Builder

Ten en cuenta que la llave de cierre se añade automáticamente, por lo que no tienes que escribirla.

Agregar CSS en Oxygen Builder

El contenido se almacenará en un nuevo archivo CSS ubicado en \ wp-content \ uploads \ oxygen \ css y su nombre será del tipo: [postname] - [postid] .css

Este archivo se cargará SOLO en esta página.

Agregar propiedades CSS en un elemento de bloque de código

Otra forma de añadir CSS personalizado en Oxygen es hacerlo a través de un bloque de código.

Agregar CSS en Oxygen Builder
Agregar CSS en Oxygen Builder

La posición del bloque de código no importa si lo usas SOLO para el CSS, porque dicho CSS se agregará en un elemento <style> en el pie de página.

Una vez más, estos estilos CSS se aplicarán solo en esta página.

Este método me parece más conveniente, ya que es más rápido y fácil de acceder.

Agregar propiedades CSS en una hoja de estilo

También puedes crear algunas hojas de estilo, en el menú Manage / Stylesheets.

Agregar CSS en Oxygen Builder
Agregar CSS en Oxygen Builder

El contenido se almacenará en el  archivo universal.css , ubicado en \ wp-content \ uploads \ oxygen \ css

NUNCA edites este archivo manualmente. Es el archivo predeterminado que Oxygen usa para todos los estilos.

La gran diferencia con otros métodos es que este archivo se carga en cada página de tu sitio.

Entonces, si tienes que diseñar tu logotipo, encabezados o clases que se apliquen en todo el sitio, es mejor hacerlo en una hoja de estilo.

Añadir propiedades CSS en el Personalizador de WordPress

Por supuesto, también es posible usar el Personalizador de WordPress para agregar tu CSS personalizado. Ve a Apariencia / Personalizar y añade tu CSS en la pestaña CSS adicional:

Agregar CSS en Oxygen Builder

El contenido se agregará en un elemento <style> justo antes del cierre </head> y se aplicará en todo el sitio, por lo que se agregará en cada página.

Qué método es el más adecuado

Si se trata de propiedades CSS que se aplicarán a toda la web, entonces debes añadirlos a la hoja de estilos de Oxygen.

En el caso de dar estilos a un elemento determinado, lo mejor y más eficiente es hacerlo en la sección Custom CSS de dicho elemento o en un bloque de código de la sección o plantilla.

Por ejemplo, si quieres que el fondo de tu sitio web sea de color blanco, pero la Home tenga un fondo gris.

  • Crea una hoja de estilos (o usa una existente) y añade:
    body {background-color: white}
    Ahora todas tus páginas tendrán un fondo blanco porque la hoja de estilos se carga en cada una de ellas.
  • Edita tu página de inicio, añade un bloque de código y en el panel CSS, agrega:
    body {background-color: gray}
    Tu página de inicio ahora tendrá un fondo gris porque el CSS en el Bloque de código solo se aplica a esta página.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram