Como eu conseguiria algo assim?
Quando adiciono imagens à minha Categoria, elas ficam todas diminuídas e feias.
Existe algum plugin personalizado ou algo assim?
Dê uma olhada em Category Banners. Trata-se de um componente de tema que você pode instalar no seu site para adicionar um banner às suas categorias. A seção “Estilização CSS adicional” no final do tópico fornece detalhes sobre como definir uma imagem de fundo para o banner.
Pelo que parece, isso é um banner para a categoria. Preciso de um que mostre a seção, para me explicar melhor…
É isso que eu quero.
Isso exigirá algum trabalho personalizado. Dê uma olhada no guia de temas se quiser fazer isso você mesmo ou crie um tópico na categoria Marketplace se quiser contratar alguém para fazer isso por você.
Isso é o que eles usam, mas não consigo fazer funcionar.
discourse-misc-html-css (2).zip (2,5 KB)
Existem muitos links e itens para editar, tanto na aba CSS quanto na aba Head. Você fez isso?
Isso é o CSS personalizado que o FiveM usa hoje, e é isso que recebi da equipe de administração, mas não tenho ideia de como fazê-lo funcionar.
discourse-misc-html-css (2).zip (2,5 KB)
Então, tenho trabalhado nisso há um tempo e consegui fazê-lo funcionar, mais ou menos.
Pic
E, na verdade, está funcionando muito bem.
Mas, no topo, por algum motivo, ele duplica algumas categorias.
Como posso corrigir isso e evitar que as categorias sejam duplicadas?
Aqui está minha configuração:
discourse-misc-html-css.zip (2.5 KB)
Então, agora pelo menos eu consegui resolver isso para mim.
Primeiro, baixe este arquivo:
discourse-misc-html-css (2).zip (2.5 KB)
Se você não tiver certeza de como adicionar esse arquivo ao seu site, consulte primeiro este guia:
Agora, vá até a seção Misc/HTML+CSS e, em seguida, em CSS, você precisará ajustar algumas configurações.
Primeiro, copie esta linha:
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Depois, altere o nome que você deseja para o seu banner. No meu exemplo, vou usar “test1”:
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Com isso, você terminou a parte do CSS.
Agora, vá até a seção .
Role para baixo até encontrar:
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
E localize a seção chamada:
<div class="category-thing fivem">
Copie o seguinte:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
E altere para as suas configurações. No meu exemplo, usei “test1”:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Em seguida, role até:
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
E encontre:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Altere para as suas configurações. No meu exemplo, vou mudar de “fivem” para “test1”:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Role um pouco mais para baixo e encontre a seção com o seguinte código:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Aqui, você deve adicionar a flag da categoria que criamos acima. O motivo é evitar categorias duplicadas, como o problema que eu tive aqui:
No meu exemplo, vou adicionar “test1”:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Role para baixo e encontre a seção chamada:
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Aqui, você deve substituir “fivem” pelo nome que desejar. No meu exemplo, vou adicionar “test1”:
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
Com isso, você terminou.
Agora, o que você precisa fazer é alterar o Slug da sua Categoria. Aqui está o meu exemplo:
Com isso, essa categoria ficará sob o banner “test1”.
Todas as outras categorias ficarão sob o banner “core CFX.RE” neste exemplo.
A propósito, aqui estão as configurações que estou usando no meu site atualmente:
discourse-misc-html-css.zip (2.5 KB)
Se quiser conferir, aqui está o link:
https://forum.tgacommunity.com/
Além disso, você pode marcar este tópico como resolvido?
Espero que isso tenha ajudado vocês. Se alguém tiver dúvidas, é só perguntar aqui ou por mensagem privada.
Olá a todos. O @manuel criou um componente de tema que expande este código e facilita o uso por pessoas em seus próprios fóruns.
Mas ambos os métodos funcionam e cabe a você como deseja fazer. E ambos os métodos dão o mesmo resultado.