Gostei muito do tema compartilhado lá em 2016 por @jsthon. Eles não estão mais ativos desde a postagem inicial, então atualizei, expandi e adicionei ao GitHub.
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:
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?
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.
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:
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:
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.
…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.
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…
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?
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:
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:
Usar as ferramentas de desenvolvedor do Chrome para encontrar as classes/IDs e tentar ocultá-las (nota para mim mesmo: não ocultar ember-view )
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.