Den Header mit Links, Symbolen oder Menüs anpassen

[Discourse]

Dieser Leitfaden richtet sich an Benutzer, die den Header ihrer Website durch Hinzufügen von Links, Symbolen oder Menüs verschönern möchten. Unabhängig davon, ob Sie einfache Themekomponenten oder aufwendigere Anpassungen verwenden, bietet dieses Handbuch klare Schritt-für-Schritt-Anleitungen, die Ihnen helfen, die gewünschten Änderungen vorzunehmen, unabhängig von Ihrem technischen Know-how.

Erforderliche Benutzerebene: Administrator

Der einfache Weg (Themenkomponenten)

Jede Themenkomponente ist anders. Lesen Sie daher die Themen zu den verschiedenen Komponenten durch, bevor Sie diejenige auswählen, die am besten zu Ihrer Website passt.

1. Custom Header Links erstellt ein Menü im Header, neben der Lupe
   

   

2. Custom Header Links (icons) erstellt anklickbare Symbole neben der Lupe
   

   

3. Brand Header erstellt ein Menü über dem Header
   

   

4. Header Submenus erstellt ein Menü über dem Header mit Untermenüs
   

   

Jede Komponente kann in einem separaten Stylesheet weiter angepasst werden, sodass Ihre Änderungen bei Updates der Komponenten nicht überschrieben werden. Sie benötigen lediglich ein wenig CSS, um Ihren Header nach Ihren Wünschen zu gestalten.

Der Vorteil dieser Lösungen ist, dass alle diese Komponenten vom Discourse-Team verwaltet, gewartet und aktualisiert werden und bereits für Mobilgeräte funktionieren.

Der schwierige Weg

Erstellen Sie Ihre eigenen Anpassungen.

Dazu müssen Sie mindestens den Beginner's guide to using Discourse Themes und den Developing Discourse Themes & Theme Components lesen.

Sobald Sie mit den Discourse-Themes vertraut sind, können Sie mit der Erstellung Ihres eigenen Themes beginnen.

Probieren Sie es aus

Wählen Sie die Registerkarte common und fügen Sie dann Ihren benutzerdefinierten HTML-Code in die Registerkarte Before Header ein. Die Registerkarten desktop und mobile sind auch unter der Umschaltfläche „Erweiterte Ansicht“ verfügbar, falls Sie plattformspezifische Anpassungen benötigen, aber common wird als Ausgangspunkt empfohlen.

Als Beispiel können Sie damit beginnen, den HTML-Teil Ihres Menüs in der Registerkarte Before Header hinzuzufügen

 <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>

Dadurch wird Ihr Basis-Menü erstellt:

Nun können Sie das entsprechende CSS hinzufügen, um den Header zu gestalten.

Fügen Sie Ihr CSS in die Registerkarte CSS ein, z. B.

//Richten Sie das Menü am Website-Logo aus
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //Sie können das Menü nach links, in die Mitte oder nach rechts verschieben
    text-align: center; 
}

Und beginnen Sie mit der Anpassung Ihres Menüs:

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //und so weiter
}

Tipps und Tricks

Zeigen Sie Ihr Menü nur Besuchern (oder nur eingeloggten Benutzern) an

Sie können das Menü nur nicht registrierten Besuchern anzeigen und es für eingeloggte Benutzer ausblenden.
Fügen Sie einfach dieses display: none; in Ihr CSS ein

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

und fügen Sie eine neue Regel hinzu:

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

Sie können das Gegenteil tun, indem Sie die Regeln für die display-Eigenschaft umkehren:

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

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

Auf diese Weise sehen nur bereits eingeloggte Benutzer das Menü

Zeigen Sie Ihr Menü nur Mitgliedern einer Gruppe an

Dies funktioniert nur für primäre Gruppen!

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

Ändern Sie GRUPPENNAME in den Namen der Gruppe, die das Menü sehen darf.

Öffnen Sie Links in einem externen Tab

Fügen Sie in Ihrem HTML-Code die Eigenschaft hinzu

target="_blank"

Zum Beispiel:

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

Denken Sie daran, dass interne Links erlaubt sind (auch bei relativen Pfaden) und dass sie auch in externen Tabs geöffnet werden können.

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

---

Verwandte Themen:

• Add a custom header with a dropdown menu