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:
Sou o único com esse problema usando este tema? Quando faço o teste no Google PageSpeed, ele atinge 99%, mas a página não carrega, o que torna os resultados enganosos.
Por que isso acontece? O Google não consegue ver a página porque ela não carrega?
Hmm, sim, estou vendo o mesmo problema… parece que algo no tema está interferindo na versão do Discourse que servimos ao Google. Vou investigar. Parece que pode ser o mesmo problema que está afetando a visualização para impressão relatada acima.
Estou tentando deixar o Graceful bem mais largo no desktop. Tentei isso:
#main-outlet {
width: auto;
max-width: 1210px; /* Isso faz com que o container fique tão largo quanto o logotipo/cabeçalho */
}
Esse CSS tornou o container geral mais largo; e os tópicos sugeridos na parte inferior se estendem bem pela página, mas a largura geral das postagens nos tópicos está muito estreita (para minha versão larga).
Tentei usar o inspeção de elementos em vários componentes, mas como não sou especialista, não consegui fazer a largura dos tópicos/postagens corresponder à largura do #main-outlet.
Você se importaria de me ajudar?
Obrigado
Também tentei isso:
#main-outlet {
width: auto;
max-width: 80%;
}
Mas não consegui fazer a largura das postagens corresponder à largura do container:
Não é muito elegante, mas pelo menos está funcionando “ok” com grandes blocos de código; é mais fácil de ler na tela grande dos desenvolvedores.
Seria legal mostrar o .timeline-container, mas não consegui fazê-lo funcionar sobrescrevendo a classe como sugerido, certamente devido às minhas habilidades CSS ainda pouco desenvolvidas:
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.
. Eles não estão mais ativos desde a postagem inicial, então atualizei, expandi e adicionei ao GitHub.
Hospedado por nós? Temas estão disponíveis para uso em nossos planos Standard, Business e Enterprise.
)