Você criou um novo componente de tema e o adicionou a este tema, o tema Air?
Você viu minhas modificações acima. Você está tentando substituir partes das configurações do tema ou, como na minha postagem acima, adicionar modificações/correções?
Obrigado, Dan! Consegui descobrir como adicionar um novo componente e, em seguida, adicionar CSS personalizado lá.
1 curtida
Se você quiser substituir uma configuração. Use "!important"
Por exemplo
.some-selector {
padding-top: 2.5em !important;
{
Ainda estou aprendendo. O Discourse é bem diversificado.
2 curtidas
Obrigado pelo ótimo tema. Tudo funciona. Mas tenho a pergunta de como posso mudar a imagem de fundo?
Obrigado pela ajuda.
2 curtidas
Crie um componente de tema e adicione-o com sua imagem de fundo
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
3 curtidas
Olá pessoal,
Existe alguma forma de adicionar alguns links externos no cabeçalho, perto do logo?
Obrigado!
Existe este aqui
E
Também existe um que adiciona uma barra com menus suspensos abaixo do cabeçalho do site
2 curtidas
Olá,
Muito obrigado por reservar um tempo para responder.
Eu estava usando este, mas não fiquei totalmente satisfeito: Custom Top Navigation Links
Sua segunda sugestão é exatamente o que eu preciso, estou muito feliz com o resultado.
Muito obrigado pela sua ajuda!
1 curtida
Olá a todos,
Desculpem esta mensagem dupla, mas existe uma forma de mostrar as subcategorias tanto no desktop como no telemóvel e, ao mesmo tempo, exibir os títulos completos das categorias no telemóvel quando estes são um pouco longos?
A minha configuração é CATEGORY BOXES WITH SUBCATEGORIES, mas sem usar Modern Category + Group Boxes.
O resultado é ótimo no desktop e no telemóvel quando uso a versão desktop. Mas com a versão mobile não se consegue ler o final de alguns títulos de categoria.
Muito obrigado pela vossa ajuda!
Você pode postar um ss?
Claro, por favor, encontre em anexo 2 capturas de tela do meu iPhone, uma versão mobile e uma versão desktop.
1 curtida
Vejo subcategorias aparecendo em ambos. Você gostaria de ter a descrição da categoria em ambos? Ou espelhar o desktop sem descrição?
Desculpe se não fui claro.
Gostaria de ver os títulos completos das categorias.
Por exemplo, na versão desktop, você tem «Discussions Générales sur la mode», mas na versão mobile, você tem apenas «Discussions Générales».
1 curtida
Não tenho certeza do código CSS de imediato. Mas você deve conseguir fazer com que o título da categoria quebre a linha como na primeira imagem que você postou.
Talvez tente inspecionar o elemento no desktop para ver se consegue identificar o CSS usado para quebrar o nome da categoria em 2 linhas.
Tentei alguns CSS com ChatGPT e Claude, por exemplo:
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* Ajuste este valor conforme necessário */
}
}
Mas não está funcionando.
Existe alguma maneira de forçar a visualização desktop no celular? Seria perfeito ter a descrição e as subcategorias.
Obrigado!
Você já tentou ver como fica a visualização de desktop em um celular? Não é muito bom em alguns celulares.
Obrigado pela sua resposta.
Acabei de tentar em 2 iPhones e foi assim.
Que é exatamente o que eu estou procurando.
Idealmente, eu gostaria que meus usuários tivessem essa visualização diretamente, sem mexer nas configurações.
Desative seu componente personalizado. Crie um novo componente de teste em CSS móvel, tente isto
.category-box-heading h3 {
//* Talvez você precise descomentar as 2 linhas abaixo.
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
Tenho certeza de que você não precisará de nenhuma outra modificação de CSS.
Acabei de testar. Não está funcionando com meu trecho também.
Versão mais recente do código eficaz:
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
2 curtidas
