Intestazione del marchio

:discourse2: Riepilogo Brand Header aggiunge un’intestazione superiore extra per il branding con il tuo logo, link di navigazione e icone social sia per le visualizzazioni mobile che desktop. Il logo del brand può essere un’immagine o del testo.
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator
:hammer_and_wrench: Link al Repository https://github.com/discourse/discourse-brand-header
:open_book: Nuovo su Discourse Themes? Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Funzionalità

Anteprima desktop:

Anteprima mobile:

Impostazioni

Nome Descrizione
nome del brand
URL del sito web
URL del logo mobile
link Link testuali da visualizzare nell’intestazione
icone Link icona da visualizzare nell’intestazione
icone font awesome personalizzate Elenco delle icone FontAwesome 6 utilizzate in questo componente del tema
mostra barra su mobile
plugin outlet

Utilizzo delle icone Font Awesome 6

Per consentire alle icone Font Awesome 6 di essere visualizzate correttamente in questo componente del tema, devi aggiungerle in 3 posizioni in Discourse:

  1. L’impostazione del sito sottoinsieme di icone svg
  2. L’impostazione icone font awesome personalizzate nel componente
  3. L’impostazione icone nel componente

Inoltre, per alcune icone Font Awesome 6, dovrai specificare un prefisso fa o fab con il nome dell’icona (ad esempio: “fab-bluesky”), poiché alcune icone fanno parte di un sottoinsieme specifico di icone. Consulta Stiamo aggiornando le nostre icone a Font Awesome 6! per ulteriori dettagli su questo utilizzo.

Una volta aggiunte le icone in tutti e tre i punti, dovresti vederle visualizzate correttamente nel componente del tema Brand Header.

:discourse2: Ospitati da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business e Enterprise.

87 Mi Piace
Is there a setting to add Facebook, twitter , Instagram profile links?
Beginner's guide to using Discourse Themes
Reuse Discourse Hamburger Functionality
Introducing Font Awesome 5 and SVG icons
WordPress in a Discourse iFrame?
How to use brand header html in my WordPress site
Can I add a icon and link back to my homesite at the top bar
Login with federated social networks
Customise home login page
How to put a backlink to our company website above the top-menu in discourse?
How to finely scroll out custom header?
How to create additional header?
🌅 Introducing Horizon, our newest theme
Customize Your Site Branding
How to embed Discourse in Wordpress?
Need to create good-looking front page with Discourse login option
How I can add a custom header
Horizon interaction with Brand Header
Customizing your site with existing theme components
Quick access to bookmarks and messages on user menu
How to add a directory of people/businesses to my theme?
Air Theme
How to create custom theme component?
Custom website header with forum
How do the Links and Icons settings work?
Adding header in theme messes up topic progress bar (when docked)
Structuring a multilingual community
Brand Header breaks chat reply box on mobile (iOS)
Help needed with theming and logo
Insert Link to External Website
Are these possible only with a custom theme?
Horizon Theme
Dropdown links in existing Header
How do I move an image/banner to the VERY top of the page?
Combining Brand Header and Header Submenus Plugins
How to add top menu bar like try.discourse.org
Brand header theme component breaks page layout on static and no_ember pages
Brand header theme component breaks page layout on static and no_ember pages
TypeError: Discourse._registerPluginCode is not a function
DiscoTOC & Brand Header - using together
Structuring a multilingual community
Display name of forum
How to make your side have a side-bar and external links
TavoWEB theme for Discourse
Why does the logo navigate to Discourse home not main site home
Customize the header with links, icons, or menus

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

Screenshot%20at%20Oct%2026%2010-13-03

5 Mi Piace

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

1 Mi Piace

I’m curious, is there some sort of code I can use/edit to move the links to this side of the header?

Ideally with the fa-icons left in place (on the far right). I’d just like to see what it looks like.

Hey there, would you be open to adding an option to display the bar below the header instead of above?

1 Mi Piace

Sure, I will accept it if you can submit it in a PR.

4 Mi Piace

Any hints as to what needs to be changed for that? I never worked with Discourse before.

1 Mi Piace

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

You should mount the widget in “below-site-header” connector instead of “above-site-header”. It will require few more tweaks too.

6 Mi Piace

Thanks, I got it to work! Will probably PR when I have a bit more time.

4 Mi Piace

I merged your other PR which will add an optional target parameter to links.

https://github.com/discourse/discourse-brand-header/pull/4

8 Mi Piace

This is now done in the commit below

4 Mi Piace

I love this change, but on several sites where I use it personally, and on a hosted site I’m a moderator of (the NaNoWriMo forums) we’ve been seeing some issues. Unlike the regular hamburger menu, if you try to swipe it away it bounces back onto the screen.

I’ve personally seen this on a fully updated Moto (g7) Power on Android 9 and on a fully updated iPhone 8.

There has also been at least one report of the menu opening on touches near the icon and not just on it, but I’ve personally been unable to reproduce that particular behavior.

2 Mi Piace

Thanks! Turns out I did not have time to make a proper PR, do you think you’ll be able to add the below/above site header setting?

1 Mi Piace

Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.

1 Mi Piace

I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasn’t working as the menu still filled most of the screen.

I’ve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.

Would it be possible to make it more intuitive, either by:

  • Auto-closing the menu when you click on a menu link on mobile devices?
  • Including a ‘Close Menu’ button on mobile devices?
1 Mi Piace

I’ve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.

1 Mi Piace

Ciao!

Stiamo sperimentando layout diversi tra due versioni dello stesso forum (discourse 3.2.0.beta4-dev e discourse 3.3.0.beta1-dev).

Ecco un esempio senza CSS personalizzato, solo il componente grezzo.

Il layout HTML di Discourse è cambiato tra le 2 versioni?

Inoltre, il comportamento “slide-in” è rotto nella v3.3.

2 Mi Piace

Ho lo stesso problema su Discourse 3.2.2. Il comportamento di scorrimento è interrotto.

Mi chiedo, vedendo le date dei post qui sopra, se il componente del tema brand-header sia ancora supportato?

Sulla base dei 2 post precedenti, è rotto da almeno 5 mesi e nessuno ha risposto. Presumo che questo componente del tema sia morto a meno che qualcuno non dica il contrario.