Englische Version
Basic customization of the top navigation
Adding an additional dropdown menu
- Click on the "+ Menu" button
- Enter a name (the name is displayed in the topnavigation)
- Add content to the menu
- Expand the menu
- Fill your content into the textfields
- Save your adjustments by pressing the button below
- Set your default confluence theme to the "custom topnavigation" theme
- The new menu and link are now visible in the global
|
|
|---|
| Info |
|---|
Click on the images to see them in full size |
Result:
Changing the color of the navbar
- The navbar has a defauld ID "#edCustomappheader"(IDs start with "#"). Add this id to the CSS.
- Add a background color atribute to the CSS. (#000 is the black color code in the example below)
- Add a "!important" exclamation to the attribute
- Save your CSS
Result:
Advanced customization of the top navigation (Custom Menu)
| Info |
|---|
The documentation below is only working when Custom Menu is selected |
Changing the colors of the menu content
- Add the classes to the "Top navigation" CSS. (Each element you add to your custom menu has a class. See the class list below.)
- Add a color atribute to the class. (It's important to add an !important to the CSS, because you have to overwrite the default Styling of confluence.)
- Save the changes
Result:
| Info |
|---|
Its important to know that each menu child element has its own CSS class. The classes are listed in the table below |
| Class | Type of element |
|---|---|
| customTopNavigationA | Menu Link |
| customTopNavigationLi | Container of Links (customTopNavigationA) |
| customTopNavigationUl | Menu list header (If you ad a menu to a menu) |
Creating custom menus
- Create a menu element
- Add child menu elements to the main menu element
- Add content to the child menu elements
- Add CSS (it's recommended to copy the sample CSS from here, we used that CSS in the example below)
- Save the changes (CSS and the menus)
Example configuration
Result:
Deutsche Version
Einfache Anpassung der Hauptnavigationsleiste
Hinzufügen eines weiteren dropdown Menüs
- Klicken sie auf den "+ Menü" Knopf
- Geben sie einen Namen ein (Der Name wird in der Hauptnavigationsleiste angezeigt)
- Fügen sie dem Menü Inhalt hinzu.
- Erweitern sie die Ansicht des Menüs
- Fügen sie ihren Inhalt in die Textfelder ein.
- Speichern sie ihre Anpassungen indem sie den darunter liegenden "Speichern" Knopf drücken.
- Setzen sie ihr Confluence design auf das "custom topnavigation" design.
- Das neue Menü und dessen Links sind jetzt global sichtbar.
|
|
|---|
| Info |
|---|
Drücken sie auf die Bilder um diese in voller Größe zu sehen. |
Ergebnis:
Ändern der Farbe der Hauptnavigationsleiste
- Die Navigationsleiste hat standardmäßig eine ID "#edCustomappheader"(IDs fangen mit "#" an). Fügen sie diese ID zum CSS hinzu.
- Fügen sie ein Hintergrundfarbe Attribut hinzu. (#000 ist der Farbcode für die Farbe Schwarz im unteren Beispiel)
- Fügen sie einen "!important" Ausruf zum Attribut hinzu.
- Speichern Sie Ihr CSS.
Ergebnis:
Erweiterte Anpassung der Navigationsleiste (Custom Menu)
| Info |
|---|
Die folgende Dokumentation funktioniert nur wenn Custom Menu ausgewählt ist |
Ändern der Farben der Elemente im Menü
- Fügen Sie die Klassen zum "Top Navigation" CSS hinzu. (Jedes Element hat seine eigene CSS Klasse. Mehr Informationen in der unteren Liste.)
- Fügen Sie das Farbattribut hinzu. (Es ist wichtig ein "!important" Ausruf hinzuzufügen, da die Standart Farben von Confluence überschrieben werden müssen.)
- Einstellungen speichern mit drücken auf Speichern
Ergebnis:
| Info |
|---|
Es ist wichtig zu wissen das jedes Element im Menü seine eigene zugewiesene CSS Klasse hat. Z.b. gehören alle Links zur Klasse "customTopNavigationA" und alle Untermenüs die Klasse "customTopNavigationUl". |
| Klasse | Art des Elements |
|---|---|
| customTopNavigationA | Einfacher Menü Link |
| customTopNavigationLi | Container welcher die Links enthält (customTopNavigationA) |
| customTopNavigationUl | Untermenü (Wenn Sie ein Menü in ein Menü einfügen) |
Erstellen von eigenen Untermenüs
- Erstellen Sie eine Menü Element
- Fügen Sie Untermenüs hinzu
- Fügen Sie den Untermenüs Inhalt hinzu
- Fügen Sie CSS hinzu (Wir empfehlen fürs Erste das Beispiel CSS zu kopieren, welches hier zur Verfügung steht (im unteren Beispiel wird dieses CSS verwendet)
- Speichern der Änderungen (CSS und Menüs)
Beispiel Konfiguration:
Ergebnis: