Personalizza l'intestazione con link, icone o menu

[Discourse]

Questa guida è pensata per gli utenti che desiderano abbellire l’intestazione (header) del proprio sito aggiungendo collegamenti, icone o menu. Che si utilizzino componenti del tema semplici o si opti per personalizzazioni più elaborate, questo manuale fornisce istruzioni chiare e dettagliate per aiutarti a effettuare le modifiche desiderate, indipendentemente dal tuo livello di competenza tecnica.

Livello utente richiesto: Amministratore

Il modo semplice (Componenti del tema)

Ogni componente del tema è diverso, quindi leggi gli argomenti relativi ai vari componenti prima di scegliere quello più adatto al tuo sito.

1. Custom Header Links crea un menu all’interno dell’intestazione, accanto alla lente d’ingrandimento
   

   

2. Custom Header Links (icons) crea icone cliccabili accanto alla lente d’ingrandimento
   

   

3. Brand Header crea un menu sopra l’intestazione
   

   

4. Header Submenus crea un menu sopra l’intestazione con sottomenu
   

   

Ciascun componente può essere ulteriormente personalizzato su un foglio di stile separato in modo che le tue modifiche non vengano sovrascritte quando i componenti vengono aggiornati. Tutto ciò che ti serve è un po’ di CSS e potrai stilizzare l’intestazione come preferisci.

Il vantaggio di queste soluzioni è che tutti questi componenti sono gestiti, mantenuti e aggiornati dal team di Discourse e funzionano già per il mobile.

Il modo difficile

Crea le tue personalizzazioni.

Per fare ciò, dovrai leggere almeno la guida Beginner's guide to using Discourse Themes e la guida Developing Discourse Themes & Theme Components.

Una volta che avrai familiarizzato con i temi di Discourse, potrai iniziare a costruire il tuo.

Provalo

Seleziona la scheda common e quindi aggiungi il tuo HTML personalizzato nella scheda Before Header. Le schede desktop e mobile sono anch’esse disponibili sotto l’interruttore “Mostra avanzate” se hai bisogno di personalizzazioni specifiche per piattaforma, ma si consiglia di iniziare con common.

Come esempio, puoi iniziare ad aggiungere la parte HTML del tuo menu nella scheda Before Header

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com">Home</a>
     <a href="http://example.com/about/">About</a>
     <a href="http://example.com/news/">News</a>
     <a href="http://example.com/products/">Products</a>
     <a href="http://blog.example.com/blog">Blog</a>
     <a href="http://forums.example.com/">Forums</a> 
   </span>
 </div>

Questo creerà il tuo menu di base:

Ora puoi aggiungere il CSS appropriato per dare stile all’intestazione.

Aggiungi il tuo CSS nella scheda CSS, ad esempio

//Allinea il menu al logo del sito
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //Puoi spostare il menu a sinistra, al centro o a destra
    text-align: center; 
}

E inizia a personalizzare il tuo menu:

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //e così via
}

Suggerimenti e trucchi

Mostra il tuo menu solo ai visitatori (o solo agli utenti connessi)

Puoi mostrare il menu solo ai visitatori non registrati e nasconderlo agli utenti connessi.
Aggiungi semplicemente questo display: none; all’interno del tuo CSS

#top-navbar {
    [...]
    display: none;
}

e aggiungi una nuova regola:

.anon #top-navbar {
    display: block;
}

Puoi fare il contrario invertendo le regole della proprietà display:

#top-navbar {
    [...]
    display: block;
}

.anon #top-navbar {
    display: none;
}

In questo modo solo gli utenti già connessi vedranno il menu

Mostra il tuo menu solo ai membri di un gruppo

Questo funzionerà solo per i gruppi primari!

body:not(.primary-group-GROUP-NAME) #top-navbar {
  display: none;
}

Cambia GROUP-NAME con il nome del gruppo che potrà vedere il menu.

Apri i link in una scheda esterna

Nel tuo codice Html aggiungi la proprietà

target="_blank"

Per esempio:

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com" target="_blank">Home</a>
     [...]
   </span>
 </div>

Ricorda che i link interni sono consentiti (anche usando percorsi relativi) e che anche questi possono essere aperti in schede esterne.

 <div>
   <span id="top-navbar-links">
     [...]
     <a href="/c/site-feedback" target="_blank">Forums</a> 
   </span>
 </div>

---

Argomenti correlati:

• Add a custom header with a dropdown menu