How woud i achieve something like that?
https://gyazo.com/973b2e2525e43beeb9000b67bbae803e
When i add pictures to my Category they are all shrunk and ugly.
is there a custom plugin or something?
Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.
From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…
https://forum.fivem.net/categories
thats what i want
This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.
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.