A veces, es posible que desees personalizar un tema de Discourse pero descubras que no hay una sección de “Código personalizado” con un botón de “Editar código” disponible. Esto sucede a menudo con los temas remotos (temas instalados desde una fuente externa) y los temas preinstalados (Horizon y Foundation). A continuación, te mostramos cómo puedes añadir tus personalizaciones:
Entendiendo la limitación
Para los temas preinstalados, verás un banner que te indica:
Este tema está preinstalado y no se puede eliminar ni personalizar
Para los temas remotos, normalmente verás un mensaje como:
Si deseas editar este tema, debes enviar un cambio a su repositorio
¿Alojado por Discourse? Entonces podrías ver: “La edición de temas remotos está deshabilitada en Discourse. Por favor, contáctanos si necesitas ayuda para hacer la transición de temas remotos personalizados a un tema local.”
¿Alojado por Discourse? Entonces podrías ver: “La edición de temas remotos está deshabilitada en Discourse. Por favor, Opciones de personalización
- Enviar cambios al repositorio principal: Si tus cambios pueden beneficiar a otros, considera proponerlos a los creadores originales del tema. Esto requiere familiaridad con git y GitHub.
- Crear una copia (bifurcación o fork) del repositorio: Crea tu propia versión del repositorio de código del tema, añade tus personalizaciones y utiliza tu versión copiada. Este método requiere conocimientos técnicos y significa que tendrás que mantener las actualizaciones tú mismo.
- Crear un componente personalizado: Este método te permite añadir personalizaciones sin modificar el tema original. Es el enfoque recomendado para la mayoría de los administradores y será el foco de esta guía.
Creación de un componente personalizado
Sigue estos pasos para crear un componente personalizado para las personalizaciones de tu tema:
-
Ve al panel de administración de tu sitio y navega a
/admin/config/customize/components -
Haz clic en el botón “Instalar” en la esquina superior derecha
-
Selecciona “+ Crear nuevo”, introduce un nombre para tu componente (ej. “Mi componente personalizado”), elige “Componente” como tipo y haz clic en “Crear”
-
Eres redirigido automáticamente al nuevo componente que creaste.
-
Añade el componente al(los) tema(s) que deseas personalizar
No olvides guardar haciendo clic en la marca de verificación verde -
Haz clic en “Editar código”
-
Añade tus personalizaciones en las secciones apropiadas (CSS,
<head>, etc.)
-
Haz clic en “Guardar” para aplicar tus cambios
Notas importantes
- Tus personalizaciones se aplicarán sobre el tema existente.
- Si el tema base se actualiza, tu componente personalizado seguirá aplicando sus cambios, lo que a veces puede generar resultados inesperados.
- Siempre prueba tus personalizaciones a fondo después de las actualizaciones del tema.
Siguiendo estos pasos, puedes añadir CSS personalizado, HTML u otras modificaciones a tu tema de Discourse sin editar directamente los archivos del tema remoto. Este método es adecuado para la mayoría de los administradores que buscan realizar pequeñas personalizaciones en la apariencia o funcionalidad de su sitio.