Come potrei ottenere qualcosa del genere?
Quando aggiungo immagini alla mia categoria, vengono tutte ridotte e sembrano brutte.
Esiste un plugin personalizzato o qualcosa del genere?
Dai un’occhiata a Category Banners. Si tratta di un componente del tema che puoi installare sul tuo sito per aggiungere un banner alle tue categorie. La sezione “Stile CSS aggiuntivo” in fondo al topic fornisce dettagli su come impostare un’immagine di sfondo per il banner.
A giudicare dall’aspetto, sembra che quello sia un banner per la categoria; mi serve uno che mostri la sezione, per spiegarmi meglio…
è questo che voglio
Questo richiederĂ un lavoro personalizzato. Consulta la guida ai temi se vuoi farlo da solo, oppure crea un argomento nella categoria Marketplace se vuoi assumere qualcuno per farlo per te.
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.