Eure Digitale Heimat ist die erste Anlaufstelle am Morgen, um alle wichtigen Informationen zu erhalten und sich mit Kollegen auszutauschen. Daher ist es wichtig, das Design eurer Digitalen Heimat gemäß eures Corporate Designs (CD) anzupassen und auf eure Bedürfnisse abzustimmen. Das hilft euren Nutzern sich direkt heimisch zu fühlen. Wir zeigen euch, was, wo und wie ihr das Design anpassen könnt.
Und wenn ihr neben eurer Desktop Umgebung auch die Haiilo App in eurem eigenen Design anpassen möchtet, könnt ihr im Artikel zum White Labeling mehr erfahren.
Was könnt ihr anpassen?
Mit unserem Multi-Brand-Design könnt ihr verschiedene Designs für unterschiedliche Zielgruppen konfigurieren. So könnt ihr, beispielsweise für Tochterunternehmen, ein eigenes Design erstellen und ausspielen.
Für jedes Design könnt ihr Farben und Logos anpassen. Sofern das entsprechende Know-how vorhanden ist, könnt ihr auch fortgeschrittene Anpassungen per CSS einbinden.
Wo könnt ihr das Design anpassen?
Das Layout könnt ihr in der Administration unter dem Punkt "Designs" anpassen. Dort habt ihr auch die Möglichkeit neue Designs hinzuzufügen.
Hinweis:
Bei jedem Haiilo ist ein Standard Design mitgegeben, welches jeder Benutzer angezeigt bekommt, wenn dieser sich noch nicht angemeldet hat. Dieses Design kann geändert aber nicht gelöscht werden.
Wie könnt ihr Anpassungen vornehmen?
1. Farben
Ein wesentliches Element, um eure Haiilo-Oberfläche "heimischer" zu gestalten, ist das Farbschema der Navigationsleiste anzupassen. Verändert ihr die Farbwerte, ändert sich das Aussehen eurer Navigation.
In Haiilo könnt ihr über Hexadezimal-Werte exakt definieren, welche Farben in der Oberfläche verwendet werden sollen (z. B. #FF0000). Aktuell ist es nicht vorgesehen, auch die Sub-Navigationsleiste für Startseiten hierüber zu steuern. Ihr habt allerdings die Möglichkeit - mit entsprechendem Know-how - eure Änderungswünsche per CSS umzusetzen (siehe 3. CSS).
Tipp:
Für viele Browser gibt es ein "Farbauswahl-Plugin" (Color Picker). Chrome bietet zum Beispiel mit "ColorZilla" ein solches Add-On an, mit dem ihr per Pipette jeden Farbwert (z. B. von eurer Webseite) ermitteln könnt. Diese Farbwerte (Hexadezimal) könnt ihr direkt für eure digitale Heimat nutzen!
Für die Navigationsleiste sind folgende Farbwerte wichtig:
- Hauptfarbe:
Die Hauptfarbe definiert auch die Schriftfarbe in der Sub-Navigationsleiste für Startseiten. - Unterer Rand der Navigation:
Der Bereich ist ein Farbakzent unterhalb der Hauptnavigation. Hier bietet sich eine kontrastreiche Farbe an, um eine deutliche Abgrenzung zur Hauptnavigation zu bilden. - Hintergrund der Navigation:
Hier legt ihr die Hauptfarbe des Balkens fest. Wenn ihr hier eine helle Farbe verwendet, dann solltet ihr eine dunklere Schriftart wählen. - Textfarbe der Navigation:
Dieser Teil legt fest, in welcher Farbe die Schrift und die Icons der Navigationsleiste dargestellt werden sollen. Wir empfehlen, eine Farbe zu wählen, die sich möglichst vom Hintergrund der Navigationsleiste abgrenzt (z. B. weißer Hintergrund mit schwarzer Schrift oder dunkelblauer Hintergrund mit weißer Schrift). - Navigation aktiv:
Hier könnt ihr einstellen, welche Farbe der Teil der Navigationsleiste erhalten soll, der aktiv ausgewählt wird bzw. wo sich ein Nutzer gerade befindet. Falls ihr dieses Verhalten nicht wünscht, wählt einfach den gleich Farbwert, wie für den "Hintergrund der Navigation".
Beispiel:
Hier seht ihr die Standardwerte von Haiilo. Die Teile, die für die Navigation relevant sind, haben wir markiert.
=
2. Logos
Im zweiten Bereich der Design-Einstellungen könnt ihr euer Logo hochladen. Folgende Möglichkeiten gibt es bei Haiilo:
- Das "Front-Logo" wird auf dem Anmeldebildschirm angezeigt und kann nicht breiter sein als das Format der Anmeldemaske.
- Das "Logo in der Navigation" ist immer oben links in der Navigation zu finden und sollte mind. 100 Pixel hoch sein.
- Das "Favicon" wird typischerweise in der Adresszeile der Webbrowser, links von der URL, sowie im Browser-Tab und bei den Lesezeichen angezeigt. Das Format ist 1:1.
- Das "iOS Homescreen Icon" findet ihr auf dem iPhone der Nutzer. Dort taucht es in der Favoritenliste oder als Homescreen-Link auf, wenn ihr die URL eurer digitalen Heimat speichert. Das Format sollte 180*180 px groß sein.
3. CSS
Im dritten Bereich der Design-Einstellungen könnt ihr CSS-Anpassungen vornehmen. Via CSS könnt ihr beispielsweise die Schriftart ändern, zusätzliche Hintergrundfarben (oder -Bilder) einstellen und noch vieles mehr.
Jegliche Anpassungen sollten mit Bedacht gewählt werden, da diese Auswirkungen bei Updates haben können. Für diesen Teil der Desgin-Anpassungen empfehlen wir fundierte CSS-Kenntnisse.
Wie kann man in Haiilo CSS-Codes ausfindig machen?
Wir haben eine kleine Anleitung für euch geschrieben, mit der ihr CSS-Codes herausfinden könnt. Hierfür empfehlen wir die Verwendung des Browsers "Chrome".
- Klickt per Rechtsklick auf eine beliebige Stelle in Haiilo
- Das Kontextmenü öffnet sich: Wählt den Menüeintrag "Untersuchen".
- Sobald ihr im Modus "Untersuchen" seid, öffnet sich eine weitere Zeile oder Spalte (je nach Ansichtseinstellung des Browsers).
- Im Reiter "Elements" seht ihr einen HTML-Code und einen CSS-Code.
- Um ausfindig zu machen, wie ein bestimmtes Element angesprochen werden kann, wählt ihr das Maussymbol aus und fahrt mit der Maus über das Element, welches ihr ansprechen möchtet.
- Führt nun einen einfachen Mausklick aus. In unserem Beispiel ist die Größe des Logos in der Navigation von Interesse.
- Im Reiter "Styles" seht ihr den hinterlegten CSS-Code dieses Elements, sowie den Namen der Klasse, die angesprochen werden muss.
- Diese Klasse könnt ihr jetzt verwenden, um das gewünschte Element anzupassen.
Hinweis:
Bitte beachtet, dass die Verwendung von Adblockern, bei webbasierten Anwendungen, zu einem Fehlverhalten führen kann.