A única maneira de fazer isso seria desabilitar o componente que personalizou a página da categoria. Você precisará ir para https://discourse.jordanvidrine.com/admin/customize/themes, clicar em Components e encontrar Modern Category + Group Boxes. Uma vez nessa página, role até o final e clique em Disable.
Ok. Mas o tema não pode ser personalizado ![]()
Mais uma pergunta, preciso mostrar o número de visualizações na lista de tópicos, por favor, diga-me como fazer isso, muito obrigado.
Olá Jordan, obrigado pela sua resposta! Eu realmente agradeço!
Ei @jordan.vidrine, obrigado pelo ótimo tema! Gostaria de saber se há uma maneira de mostrar categorias e os mais recentes na página inicial? Nos avise.
Meu tema é discourse.fotografos.online - Pelo amor de Deus, POR QUE O TOPO está branco? Onde está meu cabeçalho!??
alguém me ajude! É uma instalação nova! o que faço para adicionar uma imagem lá em vez de azul sólido?
@jordan.vidrine É possível adicionar uma coluna de Visualizações? Se sim, onde posso acessar essa opção? Obrigado.
Obrigado pela resposta e por enviar estas informações. Eu só queria saber como aplicar isso ao tema!
- Vá para
admin/customize/themes - Clique em componentes
- Clique em Instalar
- Clique em criar novo e dê um nome a ele
- Clique no novo componente na lista de componentes
- Clique em
Editar Html/css - Adicione o código vinculado acima ao arquivo css comum.
- Adicione este novo componente ao tema atualmente em uso
Obrigado. Agradeço muito a sua ajuda.
Não consegui fazer o HTML/CSS funcionar com o tema atual. No entanto, consigo ver a seção “Views” ao visualizar o novo componente. O tema também mostra o novo componente como adicionado.
Aqui está um vídeo curto: https://share.cleanshot.com/ekutkT
Por favor, me avise se você vir algo que estou fazendo de errado na configuração quando tiver tempo.
Obrigado por toda a sua ajuda.
Você pode passar pelo seguinte e adicionar o CSS lá:
Como adicionar a coluna “Visualizações” na lista de tópicos.
Não sou desenvolvedor nem programador. Passei algumas horas brincando com o código CSS usando o recurso Inspecionar Elemento no Google Chrome. Consegui fazer a coluna de visualizações ser exibida corretamente e também redimensionei todas as colunas de acordo com minhas preferências. Sinta-se à vontade para ajustar a largura no código CSS abaixo. Também adicionei comentários no código para que você possa identificar facilmente qual código é para qual coluna. Para cada coluna, existem 2 áreas (Cabeçalho e linha). Essas larguras precisam corresponder.
Espero que isso ajude a todos vocês: @daming @bksubhuti @eddy2
Instruções
1. Crie um novo componente.
2. Copie este CSS
Use este CSS atualizado abaixo em vez do código fornecido por @jordan.vidrine acima.
Opção A) Adicione a coluna Visualizações apenas para Desktop (Recomendado)
- Adicione o código CSS na aba Desktop.
Opção B) Adicione a coluna Visualizações para Desktop e Mobile.
- Adicione o código CSS na aba Comum.
Opção C) Adicione a coluna Visualizações apenas para Mobile.
- Adicione o código CSS na aba Mobile.
Observação: Se você escolheu a Opção B ou C…
No mobile, as 3 colunas (Respostas, Visualizações, Atividade) ocupam muito espaço e ficam apertadas. Se precisar disso para mobile, sugiro remover uma das 3 colunas. Você pode fazer isso adicionando Display: none a ambas as áreas (Cabeçalho, Linhas) no código CSS abaixo para a coluna que deseja ocultar.
/* [Tópico] */
/* Cabeçalho do Tópico */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
width: 66%;
}
/* Linha do Tópico */
.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
width: 66%;
}
/* [Respostas] */
/* Cabeçalho de Respostas */
.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
width: 7%;
order: 2;
}
/* Linhas de Respostas */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
width: 7%;
order: 2;
}
/* [Visualizações] */
/* Cabeçalho de Visualizações */
.full-width .contents .topic-list .topic-list-header .topic-list-data.views {
display: block;
width: 7%;
order: 3;
}
/* Linhas de Visualizações */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
width: 7%;
order: 3;
display: flex;
justify-content: center;
align-items: center;
}
/* [Atividade] */
/* Cabeçalho de Atividade */
.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
display: block;
width: 7%;
order: 4;
}
/* Linhas de Atividade */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
width: 7%;
order: 4;
}
@jordan.vidrine Se você tiver alguma revisão para o CSS que escrevi, por favor me avise. Eu não sei exatamente o que estou fazendo… mas funciona, lol.
Aqui estão minhas alterações de CSS para melhorar a visualização em dispositivos móveis.
Eu amo este tema, mas notei alguns pequenos detalhes estranhos, então também adicionei o seguinte CSS para torná-lo um pouco mais agradável na minha perspectiva. Espero que isso ajude outras pessoas com as mesmas preferências.
Aqui está o Original (Não editado)
Observe o seguinte na imagem acima:
- O número 1 que representa as Respostas está muito à esquerda.
- A bolha do tópico está ligeiramente sobrepondo o fundo azul.
- Não há preenchimento entre todo o conteúdo e o fundo azul.
- O fundo azul não fica bom na página da categoria. Eu o amo na página inicial.
Aqui está o código CSS que adicionei na aba Mobile.
/* Adiciona algum preenchimento à área de Categoria, Subcategoria, Tags, pesquisa, mais recente, novo tópico e notificações */
.list-controls {
padding: 5px;
}
/* Adiciona algum preenchimento à área de Tópicos */
div#list-area {
padding: 6px;
}
/* Alinha o número de Respostas mais para a direita */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
Atualizado (Após adicionar o CSS)
Se você também prefere remover o fundo azul, aqui está o código para removê-lo apenas das páginas de categoria.
/* Remove o fundo azul apenas para a categoria */
html .category .background-container {
background: #fff;
clip-path: none;
}
Aqui está como fica com todas as alterações.
Sinalização de Problema no Celular
No celular, há um menu suspenso de Categoria. Ao clicar e selecionar “Mais recentes”, “Não lidas” ou “Principais”, você não pode mais selecionar Categorias no menu suspenso.
1. Antes
2. Quando o menu suspenso é clicado
3. Depois de clicar
4. Menu suspenso (Categorias ausentes)
Neste ponto, um usuário não consegue selecionar o menu suspenso e escolher Categorias novamente.
Algum conselho sobre como corrigir este problema?
Obrigado
@UnitedFreedom
![]()
Muito obrigado por postar estas instruções úteis para aqueles que desejam que a coluna de visualização fique visível.
Você tem um link para o seu site? Estou tentando isso no meu localmente e não consigo reproduzir.
Obrigado por este tema completo e polido.
Estou tendo um problema com o componente de tópicos em destaque que não está mostrando os cards. Gostaria também de ter a opção de mostrar apenas tópicos em destaque dentro de categorias específicas. O que, em teoria, deveria funcionar ou mesmo em variantes com base no oficial.
Veja a imagem abaixo
Posso, se necessário, enviar uma mensagem direta com um link para você dar uma olhada. Ambos os tópicos de teste têm imagens em destaque; embora usem a tag personalizada pi-featured. Executando test-passed
Por favor, envie um link, darei uma olhada ![]()








