🌅 Apresentando Horizon, nosso tema mais recente

Nos últimos meses, trabalhamos arduamente em nosso mais novo tema do Discourse, Horizon, e hoje estamos animados para compartilhar nosso trabalho com você e convidá-lo a experimentar o Horizon em sua comunidade.



Neste tópico, falaremos sobre o Horizon e o guiaremos pela instalação.

:sun: Tudo sobre o Horizon

O Horizon é um tema simples e bonito, projetado para proporcionar uma ótima experiência ao usuário para comunidades sem esforço extra por parte do administrador. O nome reflete nossa esperança de que este tema expresse uma visão mais ampla de quem pode usar o Discourse e como as comunidades do Discourse podem parecer.

Modo claro

Modo escuro

:woman_shrugging: Por que construímos o Horizon?

Construímos o Horizon para facilitar que qualquer pessoa inicie uma comunidade no Discourse e a compartilhe com orgulho com seus membros.

Ao conversar com administradores do Discourse, aprendemos que uma das partes mais importantes de iniciar uma comunidade é modificar sua aparência para garantir que seja um espaço acolhedor e agradável para os membros da comunidade. O Horizon torna possível ter uma comunidade com ótima aparência sem esforço ou personalização adicional.

:mirror: Para quem é o Horizon?

O Horizon foi projetado para comunidades que não têm a expertise ou os recursos para personalizar a aparência do Discourse.

Temos orgulho da flexibilidade e personalização do Discourse — e isso não vai mudar! Mas acreditamos que mais Discourse no mundo é algo bom, e que a melhor maneira de fazer isso é facilitando para comunidades com menos conhecimento técnico prosperarem com nosso produto.

:magic_wand: O que torna o Horizon especial?

Onde o Padrão é uma tela em branco, o Horizon tem opiniões. Ele valoriza espaço, simplicidade e estética de design moderno.

Para ver a diferença, use o alternador de tema na parte inferior da barra lateral aqui no Meta para mudar para o Horizon:

Aqui está algo do que você notará de diferente no Horizon:

  • Menor densidade de informações. O recurso mais notável do Horizon é o cartão de tópico, que é simplificado da visualização de tabela padrão para torná-lo mais acessível e simples. Certas informações, como detalhes extensos sobre participantes do tópico, tags e usuários atribuídos, não estão visíveis.
  • Texto maior e mais espaço. Além do cartão de tópico, trouxemos um maior grau de espaço para o Horizon, aumentando os tamanhos de fonte base na área de leitura e incorporando uma estrutura de largura total.
  • Construído para ser usado como está. Comunidades que desejam controle extensivo sobre a aparência do site ou têm requisitos de design muito específicos podem e devem continuar a trabalhar em nosso tema Padrão ou criar seu próprio tema para melhor atender às suas necessidades. Embora tenhamos testado o Horizon com os componentes de tema oficiais mais populares e encontrado apenas incompatibilidades menores, não recomendamos adicionar componentes não oficiais ou outro código personalizado ao Horizon.

:gear: Usando o Horizon

Você pode ativar o Horizon para seus membros em apenas algumas etapas:

  1. Vá para a área :wrench: Admin, vá para a seção Aparência e clique em Temas e componentes.
  2. Encontre o cartão do tema Horizon, clique no botão e selecione Definir como ativo para tornar o Horizon o novo tema padrão de sua comunidade. (Pode ser necessário atualizar sua tela para ver essa alteração.)

Opcionalmente, você pode ativar quaisquer novas paletas de cores, que são construídas especificamente para funcionar bem com o Horizon.

> :warning: Observação: você pode substituir as paletas usadas no Horizon, mas apenas as paletas nomeadas Clover, Horizon, Lily, Marigold, Royal e Violet aparecerão no seletor de cores na barra lateral.

Instruções sobre como configurar paletas de cores.
  1. Clique em Paletas de cores na barra lateral do administrador.
  2. Selecione a paleta de cores desejada (por exemplo, Horizon).
  3. Marque a configuração A paleta de cores pode ser selecionada pelos usuários e, em seguida, clique na marca de seleção para confirmar.
  4. Repita os passos 2-3 para quaisquer paletas que você queira usar.

Após a atualização, você verá um pincel na parte inferior da barra lateral. Você pode clicar nele para escolher sua paleta de cores específica para o Horizon (mostrado na captura de tela acima). Seus membros podem fazer o mesmo para escolher entre quaisquer paletas que você habilitou. Para definir a nova paleta padrão para o Horizon (ou seja, como o Horizon aparece antes que os membros façam alguma alteração e para visitantes anônimos):

  1. Vá para Temas e componentes na área de administração.
  2. Encontre o cartão Horizon e clique em Editar.
  3. Altere o campo Paleta de cores para o seu padrão desejado.

:crystal_ball: Próximos passos para o Horizon

Estamos apenas começando! Trabalhamos duro nesta primeira versão do tema, mas esperamos continuar investindo no Horizon e melhorando-o ao longo do tempo. Buscaremos ativamente feedback de sites que usam o Horizon para continuar aprimorando-o, e esperamos em breve torná-lo o tema padrão que vem com os sites do Discourse.

:folded_hands: Obrigado

Somos muito gratos a todos que apoiaram o Horizon (e a equipe do Discourse!) testando o Horizon aqui no Meta ou participando de nosso teste beta. Esse feedback foi inestimável para nos ajudar a encontrar bugs, fazer ajustes e aprimorar a experiência geral do Discourse neste tema. Muito obrigado pelo seu tempo, feedback e apoio!

41 curtidas

Isso parece incrível! Eu realmente quero tentar.

Mas não há rota para /admin/customize/themes/1/common/*/edit customização. Você pode adicioná-la? Estou usando isso para fornecer cabeçalhos especiais e outras personalizações independentemente do tema escolhido.

Obrigado!

1 curtida

Por que você não cria um novo componente de tema onde você faz alterações e o adiciona ao tema horizon?

1 curtida

Perdi ou o Horizon ainda não foi adicionado ao Crowdin para tradução? Devo criar um pull request com as traduções em vez disso?

1 curtida

O Horizon é construído principalmente para ser usado como está, portanto, personalizações diretas ou personalizações por meio de componentes não oficiais não são recomendadas. Dito isso, adoraria saber mais sobre o que você gostaria de mudar no Horizon para ver se ele poderia ser um bom candidato para incorporarmos mais diretamente ao tema.

Estou analisando isso, responderei em breve!

1 curtida

Na verdade, é apenas um cabeçalho para vincular o fórum a uma conta Fediverse.

Coloquei o código do componente do tema aqui:

1 curtida

Isso parece ótimo!! Suponho que o tema não será compatível com componentes personalizados que estamos usando atualmente? Ex.:

1 curtida

Continuando a discussão de Ajude-nos a testar o Horizon, nosso tema mais recente:

Isso não funcionou para mim no celular (iPhone 11 Pro Max). Acho que pode ser porque aumentei o tamanho da fonte nas configurações do meu celular.

Este tema é maravilhoso, obrigado pelo seu trabalho!

Gostaria de saber como manter o ‘forked horizons’ atualizado? Temos algumas modificações personalizadas para manter :slight_smile:

1 curtida

Criar componentes e adicioná-los ao tema para personalizar

4 curtidas

A longo prazo, nosso objetivo é que todos os nossos componentes oficiais funcionem bem no Horizon, para trabalhos personalizados como cliente, sinta-se à vontade para entrar em contato com @team para ver se podemos ajudá-lo (pode exigir algum trabalho personalizado pago)

2 curtidas

Quero criar uma opção selecionável pelo usuário para este tema para que eu possa adicionar o componente de tema que modificará este tema. Quero que os usuários possam selecionar o tema Horizon como está ou selecionar sua variação.

A variação deste tema será de largura total. Também estilizará o CSS das linhas de postagem individuais para elevar o conteúdo na hierarquia visual em relação a outros elementos na página, como a barra de rolagem, tópicos novos e não lidos na parte inferior, etc.

Horizon parece muito bom, mas ainda não resolve o problema da densidade de informações na página de tópicos. É visualmente avassalador para pessoas que vêm de outros softwares de fórum tradicionais.

Meus comentários podem não ser relacionáveis para usuários nativos do Discourse, mas estou trazendo uma visão externa. Tenho que fazer essas alterações pelo menos para minha comunidade.

1 curtida

Encontrei um pequeno bug aqui, na exibição de grupos, onde pode ocorrer um overflow:

Isso pode ser atenuado adicionando CSS:

.group-box-inner {
	overflow: auto;
}
2 curtidas

É intencional que haja tanto espaço entre a barra de navegação e o conteúdo?

2 curtidas

Não, eu não acho que isso seja esperado. Talvez um componente esteja interferindo nisso :thinking:?

Eu acho que é atm, minha suposição é que esta é uma captura de tela cortada de um navegador de tela cheia ultralargo

3 curtidas

Estou adorando totalmente este tema, mas parece que o componente Search Banner não está se dando muito bem com ele. O texto search_banner.subhead não está aparecendo, fazendo com que ele pareça desalinhado. Há também uma linha cinza fraca

Atualização:
Desabilitei o Search Banner e o bem-vindo+busca integrado parece melhor. No entanto, recebo este texto de cabeçalho secundário na captura de tela abaixo.

Além disso, o link de favoritos na página inicial diz que ainda não tenho favoritos, embora eu os tenha. Ele vincula a /bookmarks em vez de /u/johndoe/activity/bookmarks

É realmente widescreen. No entanto, a grande quantidade de espaço em branco vazio é distrativa. É possível ajustar isso?

Obrigado por nos informar sobre isso - pedi a alguém da equipe de design para dar uma olhada no problema.

4 curtidas

Relatei isso quase um mês atrás, mas…