Se você estiver escrevendo CSS personalizado, em vez de adicionar código que substitua um dos layouts pré-definidos, eu realmente recomendo que você escolha a opção de layout Nenhum nas configurações do tema e declare seus estilos do zero.
Por exemplo, você pode copiar a planilha de cartões padrão e declarar o contêiner featured-topics__topic-details como uma grade. Então você pode posicionar seus elementos exatamente como quiser, em vez de movê-los com declarações absolutas.
Por enquanto, estamos satisfeitos com o template e apenas alguns pequenos ajustes de CSS para testá-lo inicialmente. Assim que chegarmos à fase de otimização de CTR, provavelmente seguiremos seu conselho.
Não tenho certeza se este é o comportamento esperado ou se pode ser considerado um bug:
Quando três tópicos são definidos nas configurações, mas apenas dois são exibidos, um espaço em branco aparece onde o terceiro tópico deveria estar. Seria ideal se os cartões fossem redimensionados para preencher toda a largura nesses casos.
Se alguém estiver interessado em usar rolagem horizontal no celular, aqui está um pouco de CSS que “eu” criei (com a ajuda da IA). Ele também inclui alguns ajustes de scroll snap e tamanho que achei mais adequados ao nosso caso de uso.
PS: Eu também tentei criar algumas “navigation pills” sem adicionar HTML, mas isso definitivamente foi um exagero.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* Preenchimento lateral para visibilidade do card vizinho */
gap: 1rem; /* Espaçamento consistente entre os cards */
overscroll-behavior-x: contain; /* Evita interferência de overscroll */
scroll-behavior: smooth; /* Rolagem suave */
scrollbar-width: none; /* Oculta a barra de rolagem */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* Oculta a barra de rolagem em navegadores WebKit */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* Cards mais estreitos para visibilidade lateral */
min-width: 280px; /* Largura mínima para telas pequenas */
scroll-snap-align: center; /* Centraliza cada card ao rolar */
height: unset !important; /* Altura consistente */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
Recebi uma mensagem de erro dizendo que este componente precisa ser atualizado para compatibilidade com as próximas mudanças no núcleo do Discourse. Alguém sabe se uma atualização está planejada?
A única coisa que não consigo consertar (acho que estou provocando o Chat GPT há uma hora…) é a altura dos cards — alguma dica de como posso reduzi-la/removê-la?
Olá Manuel - existe alguma forma de fazer com que seu incrível Componente de Tema aqui ignore imagens (para que ele mostre apenas um trecho em vez disso)?
Tenho vários tópicos em destaque sem imagens (que quero destacar), mas eles ficam muito ruins ao lado daqueles que contêm imagens. Além disso, estou mais interessado no texto do que nas imagens.
O template do componente renderiza uma variedade de conteúdo disponível em um tópico. A aparência final é então ajustada com regras de estilo. Por exemplo, quando você seleciona “cards” como layout, os excertos do tópico são ocultados quando há uma imagem em destaque e mostrados sempre que não há nenhuma:
Se você sempre quiser mostrar o excerto e nunca mostrar uma imagem, você pode selecionar “none” para Layout e adicionar sua própria folha de estilo. Ou sobrescrever as regras no layout de cards que mostram a imagem e ocultam o excerto.