Tema Mint

||||\n-|-|-|\n:discourse2: | Resumo | Mint - Um tema moderno com um toque de hortelã. :slight_smile: \n| :eyeglasses: | Pré-visualização | Pré-visualização no Discourse Theme Creator\n:hammer_and_wrench: | Link do Repositório | \u003chttps://github.com/discourse/discourse-mint-theme\u003e\n:open_book: |Novo nos Temas do Discourse? | Guia para iniciantes sobre como usar temas do Discourse\n\n[wrap=theme-install-button repoUrl="https://github.com/discourse/discourse-mint-theme\" repoName="Mint Theme"]\nInstalar este tema\n[/wrap]\n\n[quote]\n\n:discourse2: Como este é um tema #oficial mantido pela equipe do Discourse, problemas de #suporte, relatórios de #bugs, sugestões de UX e solicitações de conselhos de Dev podem ser feitos nas respectivas categorias aqui no Meta, e marcados com a tag de tema apropriada. Clique em um link abaixo para iniciar um. :+1: \n\n\u003ckbd\u003e [:question:\u0026nbsp;Suporte](https://meta.discourse.org/new-topic?category_id=6\u0026tags=mint-theme "Perguntar sobre suporte na configuração e uso do Tema Mint") \u003c/kbd\u003e \u003ckbd\u003e [:bug:\u0026nbsp;Bug](https://meta.discourse.org/new-topic?category_id=1\u0026tags=mint-theme "Um relatório de bug significa que algo está quebrado, impedindo o uso normal/típico do tema") \u003c/kbd\u003e \u003ckbd\u003e [:eyes:\u0026nbsp;UX](https://meta.discourse.org/new-topic?category_id=9\u0026tags=mint-theme "Discussão sobre a interface do usuário do Tema Mint, e como os recursos são apresentados (incluindo idioma e elementos da interface)") \u003c/kbd\u003e \u003ckbd\u003e [:artist:\u0026nbsp;Dev](https://meta.discourse.org/new-topic?category_id=7\u0026tags=mint-theme "Conselhos sobre como personalizar este tema para o seu site")\u003c/kbd\u003e\n\n[/quote]\n\n### Recursos\n\nUm tema moderno com um toque de hortelã. :slight_smile: \n\n:herb: :ice_cube: \n\nPágina Inicial (categorias)\n\nScreenshot 2021-09-06 at 19.48.04\n\nScreenshot 2021-09-06 at 19.48.43\n\nMais Recentes\n\nScreenshot 2021-09-07 at 17.08.01\n\nTópico\n\nScreenshot 2021-09-07 at 17.22.56\n\n\nBusca Avançada\n\nScreenshot 2021-09-07 at 17.22.11\n\nEste tema inclui o seguinte componente:\n\n- Categorias em Destaque do Discourse\n\n### Dicas\n\n### Configurações do Discourse\n\nAs seguintes alterações de configuração são necessárias para que este tema seja renderizado corretamente:\n\n- menu superior precisa ser definido como category, latest, new, unread, top\n- estilo da página de categoria da área de trabalho precisa ser definido como Caixas com Subcategorias\n\n### Banner de Boas-vindas\n\nVá para a página Admin \u003e Banner de boas-vindas (/admin/config/welcome-banner).\n\n- no menu suspenso Habilitado em temas… selecione Mint Theme\n- no menu suspenso Visibilidade da página selecione Somente página inicial\n- no menu suspenso Localização selecione Abaixo do cabeçalho do site\n- Imagem de fundo pode ser definida conforme sua necessidade\n\n[^update]: A partir de 4 de outubro de 2022 e este commit, o tema em si irá automaticamente definir e ordenar os componentes do tema nas saídas corretas.\n\n### Categorias em Destaque do Discourse\n\nNas opções para o componente de tema Categorias em Destaque, as seguintes alterações são necessárias para que este tema seja renderizado corretamente:\n\n- selecione feed one category e feed two category conforme sua necessidade\n- preencha feed one title e feed two title conforme sua necessidade\n- o valor recomendado para max list length é 3.\n\n\u003cbr\u003e\n\n\u003e:discourse2: Hospedado por nós? Temas estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

66 curtidas

tema muito legal :slight_smile:

Até posso testá-lo com azul royal (minha cor favorita) no meu site de testes.

Obrigado :smiley:

5 curtidas

@meghna criando temas incríveis. Ficou ótimo. Vou implantar e testar.

5 curtidas

Tema lindo! Obrigado por criar isso :slight_smile:

Estava me perguntando se há uma maneira de eu remover o quadrado e o círculo no fundo. Agradeço qualquer coisa que possa me apontar na direção certa :pray:

3 curtidas

Remova

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}

do desktop.scss e você estará pronto para seguir :slight_smile:

6 curtidas

Muito obrigado, Tomasz, aprecio isso :smiley:

2 curtidas

Este tema é incrível. Obrigado por criá-lo! Sou novo no cenário do Discourse. Sei como fazer o upload deste tema, mas não tenho certeza de como alterar certas coisas. O que quero mudar são as cores dos blocos no fundo (o círculo e o quadrado). Além disso, gostaria de mudar a cor de fundo. Devo baixar o arquivo do tema, editá-lo e, em seguida, criar o meu próprio tema? Ou existe uma maneira mais fácil?

2 curtidas

Obrigado! :slight_smile:

Sim. Para alterar as cores, você precisa fazer um fork do tema e atualizar o código da cor conforme sua necessidade. Veja como fazer:

Em variables.scss, altere o código da cor conforme sua preferência:


$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

Para alterar a cor de fundo, atualize a cor secondary em about.json (observe que isso também alterará a cor do texto de alguns botões):

"secondary": "F6FBFC"

Adoro este tema — ele se encaixa perfeitamente na identidade visual do nosso projeto! No entanto, se eu ativar o modo escuro, o tema fica desconfigurado. Isso é esperado? Existe alguma maneira de impedir que os usuários ativem o modo escuro?

1 curtida

Também seria ótimo poder editar o CSS pelo front-end, como com os temas padrão.

Existem duas pequenas questões com o editor. :slightly_smiling_face: O botão de engrenagem tem um fundo sempre ativo e a forma do primeiro botão ao passar o mouse não corresponde à curvatura da moldura:

1 curtida

Corrigidos ambos os problemas via:

2 curtidas

Eu realmente gosto do seu tema e o instalei.
O fundo do meu banner de pesquisa não tem cantos arredondados e não ocupa toda a largura.
Como posso mudar isso para o seu layout?

Pode haver a possibilidade de outro tema ou componente estar interferindo na estilização do tema mint. Você pode tentar desativar outros temas/componentes que você possa ter instalado?

é uma instalação limpa com o tema padrão inativo e apenas estes componentes:

  • discourse-search-banner
  • Showcased Categories

Isso é estranho. Você pode me enviar o URL da sua instância do Discourse por mensagem privada e eu posso dar uma olhada?

1 curtida

O problema do banner foi corrigido via:

Também houve um problema no plugin de categorias em destaque que Patrick chamou minha atenção. Corrigi isso também.

3 curtidas

Olá, eu brinquei com o modo escuro em um dispositivo com um tema Mint agradável. Fiz algumas alterações para suportar o modo escuro. Apenas para testes.

discourse-mint.zip (5,1 KB) Pode conter erros, é claro :slight_smile: Por esse motivo, não criarei um PR de github.

Fiz algumas modificações para blocos de código, formatação no estilo gitlab, página ampla, etc… Não testei em dispositivos móveis.

1 curtida

Obrigado pelos esforços, Ivan! Revisei seu trabalho e há algumas alterações personalizadas que não precisam estar no núcleo. Vou analisar as alterações específicas do modo escuro e as farei no núcleo após mais testes.

1 curtida

De nada, Meghna! Acho que seria suficiente aplicar o valor revert a alguns elementos com branco.

1 curtida