Tema Graceful

:discourse2: Resumo Graceful - Um tema elegante para o Discourse
:eyeglasses: Pré-visualização Pré-visualizar no Discourse Theme Creator
:hammer_and_wrench: Link do Repositório https://github.com/discourse/graceful
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instale este tema

Recursos

Gostei muito do tema compartilhado lá em 2016 por @jsthon :heart_eyes:. Eles não estão mais ativos desde a postagem inicial, então atualizei, expandi e adicionei ao GitHub.

Configurações

Nome Descrição
imagem de fundo Insira a URL da imagem
fundo em mosaico
sem imagem de fundo Desative a imagem de fundo e as configurações de mosaico acima.

Este tema possui três configurações:

  • Um campo para adicionar sua própria imagem de fundo
  • Uma opção para criar mosaico com ela
  • E uma opção para remover ambas as opções acima

Se você desativar a opção de mosaico, a imagem será definida como background-size: cover, e seu navegador ajustará a imagem para cobrir proporcionalmente todo o fundo. Por exemplo:

Créditos

O crédito pelo padrão de fundo padrão incluído vai para Toptal Subtle Patterns.


:discourse2: Hospedado por nós? Temas estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

75 curtidas

Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.

What is it because google can’t see - it doesn’t load this page?

6 curtidas

Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.

3 curtidas

@awesomerobot

Very nice theme.

I’m trying to make Graceful much wider on desktop. Tried this:

#main-outlet {
  width: auto;
  max-width: 1210px; /* This makes the container as wide as the logo/header controls */ 
}

and this CSS made the overall container wider; and the suggested topics at the bottom span the page nicely but the overall width of the posts in the topics are too narrow (for my wide version).

Tried inspector, and a number of elements but not being a expert, could not get the width of the topics / posts to match the width of #main-outlet .

Do you mind to help me out?

Thanks

Also, tried this:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

But cannot the the posts width to match the container width:

1 curtida

topic-body has his own width setting.

Default:

.topic-body {
    width: calc(690px + (11px * 2));
}

Change only the 690px and keep the rest (it’s linked to the padding of the topic post)

6 curtidas

Thanks! Will give it a go later and post back the results.

I tried changing .topic-body yesterday, but I’ll try again based on your suggestion @Steven

1 curtida

Hi @Steven,

Added the following to the desktop CSS:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

.topic-body {
    width: calc(1020px + (11px * 2));
}

It worked partially, but there is some issue. Perhaps you know the CSS trick to fix it?

See Image:

1 curtida

I’m not on my computer but I know there is some margin-left to correct with the class timeline-container

1 curtida

Right, for the timeline there are a few margin-lefts that need to be overridden on .timeline-container (three breakpoints):

4 curtidas

Hi @awesomerobot

Kris,

The way we got the wide look we wanted was to be less graceful and hide the .timeline-container.

#main-outlet {
  width: auto;
  max-width: 70%; 
}

.topic-body {
    width: 100%;
}

.timeline-container .topic-timeline {
      display: none;
 }

Not very graceful but at least it’s working ‘ok’ with large blocks of code, it is easier to read on the big developers screen.

Would be nice to show the .timeline-container but I could not get it to work overriding the class as suggested, surely because of my not well-developed CSS skills:

Thank you for your help and for this nice theme.

1 curtida

Estou adorando esse tema até agora. Muito obrigado por compartilhá-lo conosco!

Notei que na visualização para dispositivos móveis as barras de cor das categorias desaparecem. Isso é intencional e há alguma maneira de restaurá-las?

Além disso, há como desativar o fundo quando uma categoria tem um fundo definido? Parece funcionar bem, mas ao rolar em posts longos, a tela fica instável e é possível ver o fundo definido pelo tema.

Obrigado!
Ray

1 curtida

Fui analisar o CSS para dispositivos móveis e vi que ele estava sendo excluído; ao comentar a parte “left-border”, as bordas coloridas voltaram:

.category-list-item {
//  border-left: none;
  border-top: 2px solid;
  .category-name {
    font-weight: normal;
  }
}

No entanto, sei que isso será sobrescrito sempre que o tema for atualizado. Qual é a melhor maneira de manter modificações nessas situações?

Tenho um componente de tema personalizado onde mantenho alterações de CSS personalizadas, incluindo esta parte no CSS para dispositivos móveis:

.category-list-item {
  border-left: 4px !important; 
}

…mas não mostra a cor específica da categoria, apenas uma barra branca. Como faço para que a cor correta da categoria seja exibida? Sei que tem algo a ver com variáveis de cor das categorias, mas não consigo encontrar referência a elas.

Sou iniciante quando se trata de CSS e coisas assim, então posso estar fazendo algo errado.

Obrigado,
Ray

2 curtidas

Tenho um problema com as cores do cabeçalho.

Mudei a cor de fundo do cabeçalho e o texto do cabeçalho, mas as configurações não estão sendo respeitadas.

Os ícones permanecem cinzas.

Esse é o comportamento padrão, pois a cor é uma variável de “baixo-médio” de #ffffff e não a cor pura.

Veja aqui como sobrescrever essa cor: How to Change Header Icon Color? - #2 by awesomerobot

3 curtidas

Só queria destacar o quão incrível esse tema se provou. Adoro absolutamente sua aparência limpa.

2 curtidas

Concordo! Um dos temas Discourse mais bonitos por aí.

Ray

1 curtida

Devo estar sendo lento, mas não consigo fazer o logo mudar de tamanho usando um componente de tema criado para ajustar o CSS. Consigo alterar a altura geral do cabeçalho, mas o logo permanece teimosamente do mesmo tamanho. Este CSS parece anular qualquer alteração que eu tente fazer:

.d-header #site-logo {
max-height: 35px !important;
}

De acordo com o Inspetor do Chrome, isso está vindo de: desktop-scss-graceful.scss

Alterar o tamanho do logo funciona bem com o tema padrão e, como disse, alterar a altura do cabeçalho funciona com o Graceful, apenas não o logo…

2 curtidas

Sim, o !important sobrescreve qualquer outro CSS sem um !important… Não me lembro por que ele está lá, mas devo verificar para removê-lo. Funciona se você incluir um !important no seu próprio CSS?

.d-header #site-logo {
max-height: 50px !important; // <-- sua altura personalizada aqui
}
3 curtidas

Obrigado pela resposta rápida! Eu realmente havia notado o !important e tentei adicioná-lo ao meu código, sem sucesso. O estranho é que, ao tentar agora, quando salvo essa alteração e a página atualiza, por um momento ela aparece no tamanho correto, mas depois encolhe novamente. E no Inspector, ela parece estar fazendo a coisa certa:

Pelo menos no sentido de que o 35px está desativado. Mas a ordem parece estranha, no mínimo. De qualquer forma, ainda não está funcionando. Estranho.

Estou colocando isso no CSS Comum, pelo que vale…

Atualização: encontrei! É isso:

.d-header #site-logo {
     height: 2.667em;
 }

no header.scss!

E se eu adicionar minha própria propriedade height: com !important, funciona!

OK, próxima pergunta, que acho ser específica deste tema. Estou usando-o como base para criar uma espécie de “blog” pessoal (na verdade, um jardim digital, mas esse é um termo meio obscuro). Como praticamente todos os posts serão escritos por mim, quero remover ou reduzir a proeminência de certos elementos visuais autorais, principalmente avatares, especialmente nas listas de tópicos na página inicial e nas categorias. O que quero ocultar, se possível, está destacado em vermelho:

Você provavelmente entende o porquê. :grinning_face_with_smiling_eyes:

Coisas que já tentei:

Também estou pesquisando e experimentando vários componentes para mostrar a primeira imagem de um tópico como uma miniatura. Se eu pudesse substituir esses avatares por pequenas miniaturas da primeira imagem do tópico, seria ótimo também. Mas escondê-los já é um bom começo.

Obrigado desde já!