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.
Questo è ciò che usano, ma non riesco a farlo funzionare
discourse-misc-html-css (2).zip (2,5 KB)
Ci sono molti link e elementi da modificare sia nella scheda CSS che nella scheda Head, l’hai fatto?
Quello è il CSS personalizzato che FiveM utilizza oggi e quello che mi ha inviato il team di amministrazione, ma non ho idea di come farlo funzionare.
discourse-misc-html-css (2).zip (2.5 KB)
Quindi lavoro su questo da un po’ di tempo e sono riuscito a farlo funzionare più o meno
Immagine
E funziona benissimo, a dirla tutta
Ma in alto, per qualche motivo, duplica alcune delle categorie
Come posso risolvere? E come faccio a evitare che le categorie vengano duplicate?
Ecco la mia configurazione
discourse-misc-html-css.zip|allegato (2,5 KB)
Quindi ora l’ho sistemato almeno per me
Per prima cosa, scarica questo file
discourse-misc-html-css (2).zip (2.5 KB)
Se non sei sicuro di come aggiungere questo file al tuo sito, consulta prima questa guida
Quindi, in Misc/HTML+CSS Common e poi in CSS, devi modificare alcune impostazioni
Per prima cosa, copia questa riga
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Poi modifica il nome che vuoi dare al tuo banner.
Nel mio esempio, userò test1
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
A questo punto hai finito nella sezione CSS
Poi vai alla sezione
Scorri fino a
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
E trova la sezione chiamata
<div class="category-thing fivem">
Quindi copia
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
E modificala con le tue impostazioni. Nel mio esempio ho usato test1.
Quindi farò lo stesso qui
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Poi scorri fino a
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
E trova
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
E modificalo con le tue impostazioni. Nel mio esempio cambierò fivem in test1.
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Poi scorri ulteriormente e trova la sezione con questo codice
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Qui devi aggiungere l’indicatore della categoria che abbiamo creato poco sopra. Lo fai per evitare di avere categorie duplicate, come il problema che ho avuto io qui
Quindi nel mio esempio aggiungerò 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);
});
Poi scorri e trova la sezione chiamata
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Qui devi sostituire fivem con quello che vuoi. Nel mio esempio aggiungerò test1.
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
A questo punto hai finito
Ora quello che devi fare è modificare lo slug della tua categoria. Ecco il mio esempio
Quindi quella categoria apparirĂ sotto il banner test1
Tutte le altre categorie appariranno sotto il banner CFX.RE core in questo esempio
Qui tra l’altro ci sono le mie impostazioni che sto usando attualmente sul mio sito
discourse-misc-html-css.zip (2.5 KB)
Se vuoi vederlo, ecco il link
https://forum.tgacommunity.com/
Inoltre, puoi segnare questo argomento come risolto?
Spero che questo vi sia stato d’aiuto. Se qualcuno ha domande, chiedete pure qui o in privato.
Ciao a tutti. @manuel ha creato un componente tematico che espande questo codice e rende piĂą facile per le persone utilizzarlo sul proprio forum.
Ma entrambi i metodi funzionano ed è a te decidere come vuoi farlo. Ed entrambi i metodi danno lo stesso risultato.