Esta guía explica cómo realizar cambios en CSS en tu sitio de Discourse, incluyendo una introducción a CSS, dónde agregar CSS en Discourse y cómo encontrar los selectores correctos usando herramientas de inspección del navegador.
Nivel de usuario requerido: Administrador
Resumen
Esta guía cubre:
- Una breve introducción a CSS y conceptos clave
- Cómo agregar CSS a tu sitio de Discourse usando componentes de temas
- Uso de herramientas de inspección del navegador para encontrar los selectores CSS correctos
Entendiendo los conceptos básicos de CSS
CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets). Aquí hay tres conceptos clave para entender:
- Estructura: Una regla CSS consta de un selector, una propiedad y un valor.
p {
color: red;
}
- Selector:
p(apunta a todas las etiquetaspde HTML) - Propiedad:
color - Valor:
red
- Cascada: La última regla aplicada tiene precedencia. Por ejemplo:
p {
color: red;
}
p {
color: green;
}
Los párrafos serán verdes porque es la última regla aplicada.
- Especificidad: Las reglas más específicas anulan a las menos específicas. Por ejemplo:
div p {
color: green;
}
p {
color: red;
}
Los párrafos dentro de divs seguirán siendo verdes porque div p es más específico que p.
Agregando CSS a tu sitio de Discourse
Para agregar CSS a tu sitio de Discourse:
-
Ve a
Apariencia > Temas y componentesdesde la barra lateral o sigue esta URL para tu sitio:https://yoursite.com/admin/customize/components
-
Haz clic en Instalar y
Crear nuevo respectivamente.
-
Nombra tu componente de tema y haz clic en Crear
-
Elige a qué temas aplicar el componente
-
Haz clic en Editar código
-
Agrega tu CSS a la pestaña CSS
-
Haz clic en “Guardar” para aplicar tus cambios.
Si tienes varios temas seleccionables por el usuario, asegúrate de agregar tus componentes de tema a todos los temas relevantes.
Encontrando los selectores CSS correctos
Usa las herramientas de inspección del navegador para encontrar los selectores CSS correctos:
-
Haz clic derecho en el elemento que deseas modificar.
-
Selecciona “Inspeccionar” en el menú contextual.
-
En el panel de herramientas de desarrollador, localiza los selectores de elementos.
-
Haz clic en los selectores correspondientes y agrega tu regla CSS.
-
Copia la regla, pégala en la sección CSS de tu componente de tema y elimina otras reglas.
Para selectores más específicos, puede que necesites copiar el selector utilizado en los estilos existentes de Discourse y modificarlo en tu componente de tema.
Aquí tienes un video que demuestra los pasos anteriores:
Si tus cambios no se aplican, verifica que:
- El componente de tema esté habilitado en tus temas.
- Tu regla CSS sea lo suficientemente específica para anular los estilos existentes.
