Elenco Categorie con Banner

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:

You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:

Screenshot from 2021-08-21 15-41-36

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example you could color-code your categories:

Or add background images:

:warning: This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.

:+1: Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?

27 Mi Piace

Thank Nolo Very cool! Your component has improved our community

1 Mi Piace

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.

If you actually don’t want a background color, you should state none or transparent.

If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in

3 Mi Piace

Nolo, thanks, that helped!

2 Mi Piace

Ciao, mi piace vedere cosa sei riuscito a creare. Ma è permesso darmi credito anche a me e non solo sfruttarmi e usare parte del mio lavoro…

Felice che ti piaccia il componente! Non sono sicuro del perché mi accusi di aver rubato il tuo lavoro, però…?

Realizzare questo componente è stato ispirato da questo argomento:

Avevo indirizzato l’OP alla tua soluzione, ma poi mi sono interessato a come risolvere questo problema senza codificare i template e decostruendo i valori da un elenco di impostazioni all’interno di scss. Quindi il codice del componente riguarda essenzialmente questa soluzione:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

Ma in ogni caso: se ritieni che abbia usato parte del tuo lavoro e mi sia dimenticato di dare credito, fammelo sapere e aggiornerò il primo post :ok_hand:

1 Mi Piace

Sì, per favore, mi piacerebbe ricevere almeno una qualche forma di credito. Ma dipende da te. Per il resto, sembra buono e consiglierò questo componente del tema nel mio post poiché rende le cose più facili per i nuovi utenti.

2 Mi Piace

@ Nolo
Esiste un modo in TC, o con CSS nel tema, per allineare a sinistra il testo dell’intestazione, proprio come nel tuo secondo esempio).

Inoltre, esiste un modo (se non si utilizza un’immagine banner) per ridimensionare l’intestazione allo spessore di una riga di testo.
E se sì, è possibile ridimensionare il testo in modo che non sia così grande?

2 Mi Piace

Certamente, puoi stilizzare i banner usando queste classi:

Se vuoi sovrascrivere le dichiarazioni esistenti sulla classe generale, dovrai usare la proprietà !important. Ad esempio, per gli stili che hai menzionato:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

Questo perché gli stili sono effettivamente dichiarati sui banner specifici. Immagino che potrei migliorarlo nel componente, ma per ora dovresti sovrascrivere con important.

3 Mi Piace

Grazie mille per questo componente!! Sto sviluppando un forum politico e poter applicare questo tipo di separazione è fondamentale.
Sebbene sia già un enorme miglioramento per il mio forum, farebbe una grande differenza se le intestazioni potessero essere referenziate tramite URL, perché ciò consentirebbe di creare pulsanti in cima al forum dai quali l’utente potrebbe navigare facilmente nella stessa pagina. Sarebbe una funzionalità estremamente agile se il forum (si spera) diventasse molto più grande. È attualmente possibile?

1 Mi Piace

Grazie per il suggerimento @lisandro_iaffar. Sebbene questo componente fornisca solo una soluzione leggera che non modifica i modelli HTML. Se si desidera fare riferimento alle sezioni, è necessario utilizzare un approccio come quello offerto da GitHub - discourse/discourse-minimal-category-boxes.

2 Mi Piace

Grazie per la tua risposta e per aver fornito indicazioni :slight_smile:
E grazie ancora per questo componente, ha migliorato così tanto il layout del mio forum :smiley:

2 Mi Piace

Sono entusiasta di provarlo poiché ho creato troppe categorie e poterle organizzare in gruppi sarà di grande aiuto.

Lo saprò quando ci proverò, questo potrebbe anche essere un modo per lasciare le categorie vecchie e meno utilizzate fuori dalla pagina principale, giusto? Sarebbero comunque disponibili tramite la nuova barra laterale.

1 Mi Piace

Sì, certo :+1: In realtà faccio quasi sempre selezioni di categorie su diversi elementi della pagina (barra laterale, intestazione, navbar, pagina categoria, ..) È come la struttura del sito di un sito web. È importante che sia ben organizzato, ma non è necessario che determini la tua presentazione dell’interfaccia utente.

Ciao @manuel vorrei sapere se questo fantastico componente funziona ancora dopo gli aggiornamenti del discorso, l’ho installato e non funziona per me, grazie in anticipo

come si aggiungono immagini di sfondo?

Ciao, benvenuto :wave:

Puoi aggiungere CSS nei tuoi temi o in un componente tema separato:

Ad esempio, supponendo che tu voglia aggiungere un’immagine alla categoria ID 4, faresti qualcosa del genere:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

Questo è solo un esempio. Per maggiori informazioni, puoi consultare le proprietà CSS background.

Link utili anche :+1: :

2 Mi Piace

Un post è stato diviso in un nuovo argomento: Aggiungi informazioni extra alla casella di categoria