Banner di Categoria

[Discourse]

	Riepilogo	Category Banners utilizza i dettagli esistenti delle categorie per creare banner per le tue pagine di categoria (per i tag consulta Discourse Tag Banners).
	Anteprima	Anteprima su Discourse Theme Creator
	Collegamento al Repository	https://github.com/discourse/discourse-category-banners
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché questo è un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, bug, ux e #funzionalità possono essere presentate nelle rispettive categorie qui su Meta, e contrassegnate con l’etichetta appropriata del componente del tema. Clicca su un collegamento qui sotto per iniziarne uno.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Category Banners utilizza i dettagli esistenti delle categorie per creare banner per le tue pagine di categoria. Utilizza il nome, la descrizione e il colore della categoria per generare un banner nella parte superiore delle pagine della categoria pertinente (per i tag consulta Discourse Tag Banners).

La descrizione della categoria è definita dal primo paragrafo del topic “Definizione della categoria per …” di ciascuna categoria. I colori di sfondo/testo del banner sono definiti dalle impostazioni del badge della tua categoria.

Per impostazione predefinita, questo verrà visualizzato su desktop e mobile su tutte le pagine di Categoria e Sottocategoria, ma non apparirà se non hai fornito una descrizione alla tua categoria.

Impostazioni

Questo componente include opzioni per sovrascrivere i valori predefiniti:

Nome	Descrizione
show description	Mostra la descrizione dal post “About This Category”
show mobile	Mostra i banner su mobile
show subcategory	Mostra i banner per le sottocategorie
hide if no description	Nascondi i banner se la descrizione della categoria non è impostata
show category logo	Mostra il logo della categoria
align text
exceptions	Il banner non verrà mostrato per questi NOMI di categoria
categories	Categorie per cui mostrare un banner
plugin outlet	Modifica la posizione del banner nella pagina
show category icon	Mostra l’icona o l’emoji della categoria dalle impostazioni della categoria *
override category icon color	Quando vengono utilizzate le icone delle categorie, abilitare questa opzione farà sì che l’icona corrisponda al colore del testo del banner

• Nota che questa impostazione ora si riferisce all’icona o emoji della categoria impostata nelle impostazioni della categoria, non al componente del tema Category Icons (che è deprecato a favore della funzionalità principale).

Note sulla personalizzazione

Se desideri personalizzarli con del CSS aggiuntivo, puoi indirizzare intestazioni di categoria specifiche utilizzando questa struttura (example-category è il nome della tua categoria):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Questo componente aggiunge anche la classe category-header al tag body come target CSS aggiuntivo.

Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

[simon]

@Vanecx

No banner in any of the categories. Is there anything that I might have done that doesn’t make it work?

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

[Vanecx]

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

[downey (Michael Downey)]

Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. /g/foo) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., Request Message Delete

It could go a long way for a consistent look and feel, and make groups feel more like a “first class” citizen among the UI. (IMHO)

[jord8on (Jordan)]

I love these category banners! Thank you for making this theme component!

I would love this banner to exist in the main home page of our forums where it shows:

• “Latest” Discussions or
• “Top” Discussions or
• “Categories” or
• “Following” (if you’re using the Follow Plugin )

Would there be an easy (ish) way to have there be a banner if someone selected each of these options, respective to what was selected?

[Rhidian (Rhidian Bramley)]

@awesomerobot , I hope you are okay with me sharing this here…

I’ve created a fork of this discourse-category-banners theme called

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

You can preview it here

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

It pretty much does the same thing but with some modifications:

• The category banner box is displayed in-line above the main heading instead of full width at the top. This allows for display a banner theme at the top, for example the discourse-versatile-banner.

• The category banner box is displayed in the same style as the native discourse subcategory boxes, which are a core component of discourse. These subcategory boxes are a display option in the discourse category settings Show subcategory list above topics in this category . This option displays the subcategory category name and description as a row or box above the topic list, using the category background colour as the left border.

• If the category is a subcategory, the category name is displayed as breadcrumb as follows - Parent category name: Subcategory name

Demo screen shot of theme banner box for the category, above the native subcategory boxes.

Screen shot of the subcategory, showing the breadcrumb reference to the parent category.

This is my first attempt at a theme modification. I hope this is helpful?

Update

I have refactored this adaption as a separate component - with many additional features including using the category logo image and background image in the header. This new component effectively replaces the standard Discourse category header, unlike the category banners, hence making it a new component. Please see:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Eccezioni: se non vuoi che una categoria abbia un banner, aggiungi qui il suo nome

Questo non funziona per noi. Ho provato sia lo slug della categoria che l’ID della categoria, ma il banner rimane ostinatamente lì. Funziona per qualcun altro?

[awesomerobot (Kris)]

L’ho appena provato e funziona per me: sta cercando la categoria name con distinzione tra maiuscole e minuscole. Ripensandoci, non è stato il modo migliore per implementarlo… Potrei probabilmente migliorarlo.

[nathank (Nathan Kershaw)]

Ah, quella sorta è fatta per me! E nel guida sopra hai scritto proprio ‘nome’ - non l’avevo letto.

Il campo ‘nome’ non è molto intuitivo, dato che in realtà non lo usiamo per altro. Ma viene visualizzato spesso. Rendere più esplicita questa impostazione nelle opzioni andrebbe benissimo, secondo me.

[AntiMetaman]

Invece di aggiungere eccezioni per le categorie che non mostreranno un determinato banner caricato, non possiamo semplicemente specificare quale categoria deve mostrare quale banner?

[awesomerobot (Kris)]

Dipende dal sito specifico e dal caso d’uso, ne sono certo. Il mio primo pensiero è che sia più probabile che un sito voglia implementarlo ovunque e che, se ci fossero eccezioni, sarebbero solo poche.

Se volessi implementare un banner per un numero limitato di categorie, potrebbe esserci un’opzione componente del tema migliore, progettata per essere meno generica e universale, come Versatile Banner o personalizzando una delle opzioni trovate in https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

Sarebbe fantastico poter caricare un’immagine per sostituire il testo.

[oca]

Grazie per questo componente davvero utile!

Sarebbe possibile aggiungere una piccola funzionalità?

• Aggiungere la classe restricted all’elemento <span.discourse-category-banners> o <div.category-title-header> quando la categoria non è pubblica, allo stesso modo in cui viene fatto per il badge della categoria.

Sarebbe utile per personalizzare il banner con CSS aggiuntivo, per mostrare all’utente che questa categoria è speciale.

Al momento è possibile farlo, ma è complicato selezionare con CSS l’icona del lucchetto ed eseguire alcune operazioni. Poiché CSS non ha il selettore per gli elementi genitore, non posso utilizzare la presenza dell’icona del lucchetto per verificare se il banner deve essere modificato.

Non so ancora come creare le PR, ma userei questa richiesta come ottima occasione per imparare, se foste interessati alla mia modifica.

[Drew-ART (Drew)]

È possibile farlo funzionare sulle pagine dei tag? Ho trovato il plugin tag-banners, ma non ha la possibilità di aggiungere testo o collegamenti.