Personnalisez l'en-tête avec des liens, des icônes ou des menus

[Discourse]

Ce guide est conçu pour les utilisateurs qui souhaitent embellir l’en-tête de leur site en y ajoutant des liens, des icônes ou des menus. Que vous utilisiez de simples composants de thème ou que vous optiez pour des personnalisations plus complexes, ce manuel fournit des instructions claires, étape par étape, pour vous aider à effectuer les modifications souhaitées, quel que soit votre niveau de connaissance technique.

Niveau d’utilisateur requis : Administrateur

La manière facile (Composants de thème)

Chaque composant de thème est différent, alors lisez les sujets relatifs aux divers composants avant de choisir celui qui convient le mieux à votre site.

1. Custom Header Links crée un menu à l’intérieur de l’en-tête, à côté de la loupe
   

   

2. Custom Header Links (icons) crée des icônes cliquables à côté de la loupe
   

   

3. Brand Header crée un menu au-dessus de l’en-tête
   

   

4. Header Submenus crée un menu au-dessus de l’en-tête avec des sous-menus
   

   

Chaque composant peut être personnalisé davantage sur une feuille de style séparée afin que vos modifications ne soient pas écrasées lors de la mise à jour des composants. Tout ce que vous devez savoir, c’est un peu de CSS et vous pouvez styliser votre en-tête comme vous le souhaitez.

L’avantage de ces solutions est que tous ces composants sont gérés, maintenus et mis à jour par l’équipe Discourse et qu’ils fonctionnent déjà pour le mobile.

La manière difficile

Construisez vos propres personnalisations.

Pour ce faire, vous devrez lire au moins le Beginner's guide to using Discourse Themes et le Developing Discourse Themes & Theme Components.

Une fois que vous serez familiarisé avec les thèmes Discourse, vous pourrez commencer à construire le vôtre.

Essayez

Sélectionnez l’onglet common, puis ajoutez votre HTML personnalisé dans l’onglet Before Header. Les onglets desktop et mobile sont également disponibles sous le basculement « Afficher les options avancées » si vous avez besoin de personnalisations spécifiques à la plateforme, mais common est recommandé comme point de départ.

À titre d’exemple, vous pouvez commencer par ajouter la partie HTML de votre menu dans l’onglet 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>

Ceci créera votre menu de base :

Maintenant, vous pouvez ajouter le CSS approprié pour styliser l’en-tête.

Ajoutez votre CSS dans l’onglet CSS, par exemple

//Aligner le menu au logo du site
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //Vous pouvez déplacer le menu à gauche, au centre ou à droite
    text-align: center; 
}

Et commencez à personnaliser votre menu :

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //et ainsi de suite
}

Conseils et astuces

Afficher votre menu uniquement aux visiteurs (ou uniquement aux utilisateurs connectés)

Vous pouvez afficher le menu uniquement aux visiteurs non enregistrés et le masquer à vos utilisateurs connectés.
Ajoutez simplement ce display: none; dans votre CSS

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

et ajoutez une nouvelle règle :

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

Vous pouvez faire le contraire en inversant les règles de la propriété display :

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

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

De cette façon, seuls les utilisateurs déjà connectés verront le menu.

Afficher votre menu uniquement aux membres d’un groupe

Cela ne fonctionnera que pour les groupes primaires !

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

Changez GROUP-NAME par le nom du groupe qui pourra voir le menu.

Ouvrir les liens dans un onglet externe

Dans votre code Html, ajoutez la propriété

target="_blank"

Par exemple :

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

N’oubliez pas que les liens internes sont autorisés (même en utilisant des chemins relatifs) et qu’ils peuvent également être ouverts dans des onglets externes.

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

---

Sujets connexes :

• Add a custom header with a dropdown menu