# Collegamenti header personalizzati

**URL:** https://meta.discourse.org/t/custom-header-links/90588
**Category:** Theme component
**Tags:** official, custom-header-links
**Created:** [24 Giugno 2018, 10:22am UTC](https://meta.discourse.org/t/custom-header-links/90588 "2018-06-24T10:22:32Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [6 Aprile 2022, 12:19am UTC](https://meta.discourse.org/t/custom-header-links/90588/140 "2022-04-06T00:19:38Z")

</div>

Questo è generalmente vero, CSS non è un modo sicuro per nascondere nulla perché una persona esperta potrebbe guardare il codice sorgente della pagina per qualsiasi motivo… ma forniamo una vista senza JS ai crawler, quindi in quel caso il contenuto aggiunto dai temi di solito non viene comunque indicizzato.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [26 Aprile 2022, 9:46am UTC](https://meta.discourse.org/t/custom-header-links/90588/141 "2022-04-26T09:46:08Z")

</div>

L’anteprima non funziona

 ![_20220426_114543](https://global.discourse-cdn.com/meta/original/4X/4/1/1/4118ae68103b4a1700324c9d4918c73ca2e5d43d.jpeg)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [26 Aprile 2022, 2:50pm UTC](https://meta.discourse.org/t/custom-header-links/90588/142 "2022-04-26T14:50:31Z")

</div>

Ho aggiornato il link di anteprima, ora dovrebbe funzionare!

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [5 Maggio 2022, 3:15am UTC](https://meta.discourse.org/t/custom-header-links/90588/143 "2022-05-05T03:15:03Z")

</div>

È possibile utilizzare questo componente per chiamare uno script javascript con  
`javascript:script('function');`  
invece di un URL effettivo?

(Sembra quasi funzionare, ma sto riscontrando violazioni CSP.)

* * *

Modificato per aggiungere:  
Sono riuscito a farlo funzionare. Se qualcun altro dovesse mai chiedersi, ho usato `#` nell’interfaccia utente del componente al posto di un URL, quindi ho usato un event listener per chiamare la funzione javascript.

Altri probabilmente conoscono un modo migliore, e spero che condividano tale conoscenza se lo fanno!

---

<div class="post-metadata">

### Author: ![brentoshiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brentoshiro/32/212771_2.png) [@brentoshiro](https://meta.discourse.org/u/brentoshiro)
#### Post date: [23 Maggio 2022, 4:31pm UTC](https://meta.discourse.org/t/custom-header-links/90588/144 "2022-05-23T16:31:23Z")

</div>

Ciao, vorrei regolare lo stile e la dimensione del carattere dei link dell’intestazione. Qualcuno potrebbe indicarmi il CSS corretto che mi permette di farlo? Grazie!

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [27 Maggio 2022, 3:15pm UTC](https://meta.discourse.org/t/custom-header-links/90588/145 "2022-05-27T15:15:25Z")

</div>

Ciao @brentoshiro, le proprietà varieranno a seconda di ciò di cui hai bisogno per lo stile, ma il modo in cui selezioneresti i link sarebbe così:

**Per stilizzare tutti i link dell’intestazione:**

```scss

.custom-header-links .headerLink a {
    font-size: 1rem; // sostituisci con la dimensione del carattere di tua scelta
    color: #96b67b; // puoi anche usare variabili come var(--tertiary);
    font-style: italic; // opzioni: normal, italic, oblique
}

```

**Per stilizzare un link specifico**  
Puoi accedere al link utilizzando il titolo del link (separato da trattini e in minuscolo) in questo modo per “Privacy”:

```scss
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

```

o utilizzando l’attributo title e inserendo il titolo del link:

```scss
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

```

**Per aggiungere stili al passaggio del mouse, aggiungi semplicemente `:hover` dopo il tag `a`:**

```scss

.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
```

---

<div class="post-metadata">

### Author: ![Octopussy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/octopussy/32/261906_2.png) [@Octopussy](https://meta.discourse.org/u/Octopussy)
#### Post date: [29 Maggio 2022, 10:11am UTC](https://meta.discourse.org/t/custom-header-links/90588/146 "2022-05-29T10:11:29Z")

</div>

Ciao, sarebbe possibile centrare i link invece di allinearli solo a sinistra/destra?

---

<div class="post-metadata">

### Author: ![bigfudge](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bigfudge](https://meta.discourse.org/u/bigfudge)
#### Post date: [23 Giugno 2022, 9:30am UTC](https://meta.discourse.org/t/custom-header-links/90588/147 "2022-06-23T09:30:59Z")

</div>

Questo è davvero fantastico. Mi chiedo quanto lavoro aggiuntivo sarebbe necessario per consentire diverse liste di link nell’intestazione per gruppo? Abbiamo personale e studenti sul nostro sito e ci piacerebbe poter fornire link primari diversi nell’intestazione per ciascun gruppo.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [24 Giugno 2022, 8:54am UTC](https://meta.discourse.org/t/custom-header-links/90588/148 "2022-06-24T08:54:11Z")

</div>

Potresti ottenerlo facendo in modo che ogni gruppo abbia un Tema diverso, con ogni tema che utilizza la propria copia di questo Componente Tema.

Ciò funzionerebbe bene se uno dei tuoi due gruppi fosse piuttosto statico (o almeno più piccolo) - il tuo gruppo di staff sembra ideale per questo. O almeno se avessi solo un gruppo dinamico.

Quindi rendi i collegamenti degli studenti il Tema predefinito del sito, e poi fai in modo che i tuoi membri dello staff abbiano i collegamenti dello staff manualmente (o tramite l’interfaccia utente o tramite la Console Rails).

---

<div class="post-metadata">

### Author: ![Kartoon](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@Kartoon](https://meta.discourse.org/u/Kartoon)
#### Post date: [10 Luglio 2022, 10:02am UTC](https://meta.discourse.org/t/custom-header-links/90588/149 "2022-07-10T10:02:07Z")

</div>

> [@Johani](#):
>
> Discourse aggiunge una classe CSS al tag `<HTML>` quando l’utente non è connesso. Quella classe è
> 
> `anon`
> 
> Quindi, puoi usarla per nascondere determinati link agli utenti che non sono connessi. Diciamo che ho un link con il testo
> 
> `Assistenza Clienti`
> 
> e non voglio che venga mostrato agli utenti che non sono connessi.
> 
> Aggiungerei quindi questo CSS
> 
> ```plaintext
> .anon {
> .customer-support-custom-header-links {
> display: none;
> }
> }
> 
> ```
> 
> nella scheda `common > CSS` del mio tema principale.
> 
> Questo nasconderà quel particolare link agli utenti che non sono connessi.

Stavo giusto per chiedere questo, dato che finalmente ho notato che appaiono nella schermata di accesso.

Nel mio caso, uno dei link cambia ogni mese (mentre il nome dell’intestazione rimane lo stesso). È possibile nascondere l’intestazione con un codice senza dover modificare il codice per nascondere il link? Ad esempio, usando il tuo esempio avrei

Assistenza Clienti  
2022-assistenza-clienti/26903 è il mio link, poi assistenza-clienti-luglio, ecc.

Quindi, come puoi vedere, nascondere assistenza-clienti-giugno funzionerebbe bene, ma deve essere aggiornato mensilmente invece di nascondere “FAQ” (e non posso nemmeno aggiungere il /26903 dall’argomento al codice CSS, quindi non posso nascondere questo link specifico, anche se potrei aggirare questo problema pubblicando la pagina?). Se non c’è un altro modo per farlo, non è un grosso problema, non è alcuno sforzo, è più che altro che sono sicuro che me ne dimenticherò.

---

<div class="post-metadata">

### Author: ![Honeyxilia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/honeyxilia/32/523830_2.png) [@Honeyxilia](https://meta.discourse.org/u/Honeyxilia)
#### Post date: [23 Settembre 2022, 7:43am UTC](https://meta.discourse.org/t/custom-header-links/90588/152 "2022-09-23T07:43:00Z")

</div>

Ciao, ero curioso di sapere se fosse possibile ottenere traduzioni per il testo? Magari includendo le chiavi di traduzione, se il componente le include 🙂

---

<div class="post-metadata">

### Author: ![ncaming215](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ncaming215/32/205701_2.png) [@ncaming215](https://meta.discourse.org/u/ncaming215)
#### Post date: [15 Novembre 2022, 7:25pm UTC](https://meta.discourse.org/t/custom-header-links/90588/153 "2022-11-15T19:25:15Z")

</div>

** ~~\*\*C’è un motivo per cui _per impostazione predefinita_ non viene mostrato agli utenti non registrati? \*\*~~ **

Ignora, per qualche motivo quando applico un componente al tema, non appare. Devo invece aggiungere il componente al tema.

---

<div class="post-metadata">

### Author: ![hellekin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hellekin/32/51636_2.png) [@hellekin](https://meta.discourse.org/u/hellekin)
#### Post date: [28 Luglio 2023, 9:10am UTC](https://meta.discourse.org/t/custom-header-links/90588/170 "2023-07-28T09:10:12Z")

</div>

## Utilizzo delle icone UTF-8

Nota che puoi usare le icone UTF-8 come ancoraggi di link.

In questo caso, potresti voler provare questo CSS per abbinare altre icone a discesa dell’intestazione:

```css
.custom-header-links .headerLink {
    margin-top: -1px;
}
.custom-header-links .headerLink a {
    padding: 3px 10px;
    color: var(--primary-low-mid);
    font-size: var(--font-up-5);
    font-weight: bold;
}
.custom-header-links .headerLink:hover {
    background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
    color: var(--primary-medium);
}

```

Fa qualcosa di simile a questo:

![image](https://global.discourse-cdn.com/meta/original/4X/2/f/d/2fd53513347d3cf5d15ca9617fd355d3aa8f6ae1.png)

![image](https://global.discourse-cdn.com/meta/original/4X/7/a/1/7a114b836f64e604ce412af5d96cdb5a348cbfa6.png)

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [6 Settembre 2023, 12:49pm UTC](https://meta.discourse.org/t/custom-header-links/90588/174 "2023-09-06T12:49:36Z")

</div>

Ho appena installato questo componente e aggiunto alcuni collegamenti, ma non sono stati visualizzati.

Ho scoperto che l’inserimento di una lingua impedisce la visualizzazione dei collegamenti sul mio sito. Originariamente avevo aggiunto ‘blank’ per completezza anche se non era necessario. Non sono stati visualizzati nemmeno quando ho cambiato blank in ‘en’. La rimozione completa del valore ha risolto il problema nel mio caso. Non ho idea del perché, ma ho pensato di menzionarlo nel caso in cui qualcun altro abbia un problema simile.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6 Settembre 2023, 12:59pm UTC](https://meta.discourse.org/t/custom-header-links/90588/175 "2023-09-06T12:59:54Z")

</div>

Sono incappato anch’io in questo problema l’altro giorno:

> [@Cannot get the Custom Header Links to display?](https://meta.discourse.org/t/cannot-get-the-custom-header-links-to-display/277643/10?u=jammydodger):
>
> I think you’ve found the winner. trophy slight_smile When I remove the locale from the example ones they show up. +1 It must be because I’m not on en. That is a little confusing. slight_smile

Vedrò se riusciamo forse a cambiare gli esempi predefiniti per renderli più intuitivi.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7 Settembre 2023, 1:48pm UTC](https://meta.discourse.org/t/custom-header-links/90588/178 "2023-09-07T13:48:32Z")

</div>

Ho rimosso la locale dalle impostazioni predefinite qui: [UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub](https://github.com/discourse/discourse-custom-header-links/pull/38)

Quindi le impostazioni predefinite dovrebbero ora apparire indipendentemente dalla locale impostata sul sito. Grazie @packman e @JammyDodger!

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [14 Ottobre 2023, 6:39am UTC](https://meta.discourse.org/t/custom-header-links/90588/181 "2023-10-14T06:39:11Z")

</div>

I miei link sono scomparsi dopo l’ultimo aggiornamento (PC, ubuntu, brave)  
Potresti controllare questo?

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [14 Ottobre 2023, 6:58am UTC](https://meta.discourse.org/t/custom-header-links/90588/182 "2023-10-14T06:58:47Z")

</div>

@cmdntd – vedi l’[argomento spinoff](https://meta.discourse.org/t/links-not-appearing-since-the-last-theme-component-update/282144). Probabilmente hai un aggiornamento di Discourse disponibile in Admin | Upgrade che risolverà questo problema.

---

<div class="post-metadata">

### Author: ![fyodorovich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fyodorovich/32/199772_2.png) [@fyodorovich](https://meta.discourse.org/u/fyodorovich)
#### Post date: [13 Febbraio 2024, 6:22pm UTC](https://meta.discourse.org/t/custom-header-links/90588/183 "2024-02-13T18:22:32Z")

</div>

Recentemente il mio link personalizzato è stato sostituito dai tre link predefiniti. Nell’anteprima funziona.

Questo è un sito ospitato, mi è appena venuto in mente che qualcosa potrebbe essere cambiato nel tema, in modo che non venga riconosciuto dai link personalizzati dell’intestazione. Controllerò e ti farò sapere.

---

<div class="post-metadata">

### Author: ![fyodorovich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fyodorovich/32/199772_2.png) [@fyodorovich](https://meta.discourse.org/u/fyodorovich)
#### Post date: [13 Febbraio 2024, 6:27pm UTC](https://meta.discourse.org/t/custom-header-links/90588/184 "2024-02-13T18:27:19Z")

</div>

Quack! Ho visualizzato l’anteprima del plugin in diversi temi e hanno funzionato tutti. Ho effettuato il logout e ha funzionato. Ho cambiato browser e ha funzionato. C’è un forte odore di gatto di Schrödinger qui.

[Pagina precedente](https://meta.discourse.org/t/custom-header-links/90588.md?page=1)

[Pagina seguente](https://meta.discourse.org/t/custom-header-links/90588.md?page=3)
