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 a menudo sucede con temas remotos (temas instalados desde una fuente externa) y los temas preinstalados (Horizon y Foundation). Aquí te explicamos cómo puedes agregar tus personalizaciones:
Entendiendo la limitación
Para los temas preinstalados, verás un banner que te dice:
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 en 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 migrar 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 pudieran beneficiar a otros, considera proponerlos a los creadores originales del tema. Esto requiere familiaridad con git y GitHub.
- Crear una copia (fork) del repositorio: Crea tu propia versión del repositorio de código del tema, agrega tus personalizaciones y utiliza tu versión copiada. Este método requiere conocimientos técnicos y significa que deberás mantener las actualizaciones tú mismo.
- Crear un componente personalizado: Este método te permite agregar 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.
Creando 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 parte superior derecha.
-
Selecciona “+ Crear nuevo”, ingresa un nombre para tu componente (por ejemplo, “Mi componente personalizado”), elige “Componente” como tipo y haz clic en “Crear”.
-
Encuentra el componente recién creado en la lista de componentes y haz clic en el botón “Editar”.
-
Agrega 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”.
-
Agrega 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 agregar 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.