He seguido Discourse durante años, pero dudé en cambiarme ya que no estoy familiarizado con la codificación o las configuraciones de línea de comandos. Sin embargo, las características emocionantes y la naturaleza de código abierto finalmente me convencieron de migrar desde XenForo, con la ayuda de un amigo experto en tecnología.
¡Ahora, estoy ansioso por personalizar mi foro! Como diseñador de UI/UX, tengo muchas ideas, pero no estoy seguro por dónde empezar. Con XenForo, usé temas que se parecían mucho a mi visión e hice pequeños ajustes con CSS. Las opciones de tema integradas también me permitieron ajustar elementos específicos de la interfaz de usuario, como los fondos de las publicaciones o los bordes de la barra lateral con una GUI.
En Discourse, veo una opción de paleta de colores, pero ¿hay algún control integrado para un estilo más detallado, o necesito depender del código para todo? ¡Cualquier orientación sería muy apreciada! Dicho esto, estoy realmente impresionado con la funcionalidad de Discourse y emocionado de explorar su potencial.
Además de la paleta de colores, será CSS/SCSS, y más si es necesario (JS, HTML).
Puede que te interese esto:
Puedes crear temas y componentes. Los componentes son como “subtemas” (pueden contener estilos y características), y cualquier componente puede habilitarse para uno o varios temas.
Hay una herramienta de línea de comandos que ayuda a crear temas y componentes, y te sugiero que le eches un vistazo:
También hay una página especial que enumera la mayoría de los elementos HTML de Discourse para que puedas tener una visión general de cómo se ven y crear tus estilos en consecuencia.
La página debe habilitarse con la configuración del sitio Styleguide enabled.
Aunque me parece un poco desalentador, sigo sintiéndome positivo al respecto, gracias por esta increíble respuesta, creo que la guía de estilo será muy útil sin duda. ¡Muchísimas gracias!
@manuel está ampliando las opciones de no (o menos) codificación para la creación y personalización de temas. Yo empezaría por ahí (egoístamente, me encantaría seguir tu progreso con eso hasta que pueda dedicarle tiempo yo mismo , ¡así que si lo haces, por favor proporciona/publica comentarios e informes a lo largo del camino!). Parece que está innovando algunas simplificaciones para nosotros, los nerds de UI/UX.
No para todo, pero para implementar cualquier diseño más personalizado, creo que necesitarás escribir código. Mis pasos recomendados serían:
Aprende a usar la Theme CLI gem que @Canapin ya mencionó. Este puede ser un primer paso desalentador, pero si algo te hará enamorarte de la personalización de Discourse, ¡es esa pequeña joya! Es como una varita mágica para diseñadores Sin ella, probablemente sentirás fricción en cada paso del camino.
Practica la implementación de estilos usando propiedades personalizadas de CSS.
Creo que las guías no están actualizadas a este respecto. Queda mucho por hacer para un sistema verdaderamente consistente de tokens de diseño, ¡pero Discourse ya ha avanzado mucho! Descubrir dónde y cómo se utilizan las propiedades personalizadas te ayudará mucho a comprender las mejores prácticas para la parte frontal del front-end de Discourse.
Puedes encontrar propiedades personalizadas usando el inspector de tu navegador, o mirar esta lista para una primera impresión: Documenting custom properties. Y puedes estilizar plantillas recientes, como la barra lateral, casi por completo con propiedades personalizadas.
Como sugirió @denvergeeks, podrías echar un vistazo a la plantilla del tema Canvas. Lo que hace es agregar un conjunto de propiedades personalizadas para el estilo del diseño que no están disponibles en el núcleo.
, ¡así que si lo haces, por favor proporciona/publica comentarios e informes a lo largo del camino!). Parece que está innovando algunas simplificaciones para nosotros, los nerds de UI/UX.
Sin ella, probablemente sentirás fricción en cada paso del camino.