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.
Ten en cuenta que la llave de cierre se añade automáticamente, por lo que no tienes que escribirla.
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.
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.
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:
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.
