Tenho acompanhado o Discourse há anos, mas hesitei em mudar, pois não tenho familiaridade com codificação ou configurações de linha de comando. No entanto, os recursos interessantes e a natureza de código aberto finalmente me convenceram a migrar do XenForo, com a ajuda de um amigo com conhecimento em tecnologia.
Agora, estou ansioso para personalizar meu fórum! Como designer de UI/UX, tenho muitas ideias, mas não sei por onde começar. Com o XenForo, eu usava temas que se aproximavam da minha visão e fazia pequenos ajustes com CSS. As opções de tema integradas também me permitiam ajustar elementos específicos da interface, como fundos de posts ou bordas da barra lateral com GUI.
No Discourse, vejo uma opção de paleta de cores, mas existem controles integrados para estilização mais detalhada, ou preciso depender de código para tudo? Qualquer orientação seria muito apreciada! Dito isso, estou verdadeiramente impressionado com a funcionalidade do Discourse e animado para explorar seu potencial.
Além da paleta de cores, será CSS/SCSS, e mais se necessário (JS, HTML).
Você pode se interessar por isto:
Você pode criar temas e componentes. Componentes são como “subtemas” (eles podem conter estilos e recursos), e qualquer componente pode ser ativado para um ou vários temas.
Existe uma ferramenta de linha de comando que ajuda na criação de temas e componentes e sugiro que você dê uma olhada nela:
Há também uma página especial que lista a maioria dos elementos HTML do Discourse para que você possa ter uma visão geral de como eles se parecem e criar seus estilos de acordo.
A página deve ser ativada com a configuração do site Styleguide enabled.
Exemplo: https://unicyclist.com/styleguide/molecules/topic-list-item
Embora pareça um pouco assustador para mim, ainda me sinto positivo em relação a isso, obrigado por esta resposta incrível, acho que o guia de estilo será muito útil com certeza. Muito obrigado!
@manuel está expandindo as opções de não (ou menos) codificação para construção e personalização de temas. Eu começaria por aí (egoisticamente, adoraria acompanhar seu progresso nisso até que eu possa encontrar tempo para investigar por mim mesmo , então, se você fizer isso, por favor, forneça/poste feedback e relatórios ao longo do caminho!!!). Parece que ele está inovando algumas simplificações para nós nerds de UI/UX.
Não para tudo, mas para implementar qualquer design mais personalizado, acho que você precisará escrever código. Meus passos recomendados seriam:
Aprenda a usar o Theme CLI gem que @Canapin já mencionou. Este pode ser um primeiro passo assustador, mas se algo vai fazer você se apaixonar pela personalização do Discourse, é essa pequena joia! É como uma varinha mágica para designers Sem ela, você provavelmente sentirá atrito em cada etapa do caminho.
Pratique a implementação de estilos usando propriedades personalizadas de CSS.
Acho que os guias não estão atualizados a esse respeito. Há muito a ser feito para um sistema verdadeiramente consistente de tokens de design, mas o Discourse já percorreu um longo caminho! Descobrir onde e como as propriedades personalizadas são usadas o ajudará muito a entender as melhores práticas para a parte frontal do front-end do Discourse.
Você pode encontrar propriedades personalizadas usando o inspetor do seu navegador, ou olhar esta lista para uma primeira impressão: Documentando propriedades personalizadas. E você pode estilizar modelos recentes, como a barra lateral, quase inteiramente com propriedades personalizadas.
Como @denvergeeks sugeriu, você poderia dar uma olhada no modelo de tema Canvas. O que ele faz é adicionar um conjunto de propriedades personalizadas para estilização de layout que não estão disponíveis no núcleo.
, então, se você fizer isso, por favor, forneça/poste feedback e relatórios ao longo do caminho!!!). Parece que ele está inovando algumas simplificações para nós nerds de UI/UX.
Sem ela, você provavelmente sentirá atrito em cada etapa do caminho.