Eure Digitale Heimat ist die erste Anlaufstelle, 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.
Möglichkeiten
Für jedes erstellte Design könnt ihr in der Administration unter "Designs" die Farben und Logos anpassen. Sofern das entsprechende Know-how vorhanden ist, könnt ihr auch fortgeschrittene Anpassungen per CSS durchführen.
Zusätzlich habt ihr dort auch die Möglichkeit weitere Designs über "Design hinzufügen" zu erstellen. So könnt ihr verschiedene Designs für unterschiedliche Zielgruppen, beispielsweise für Tochterunternehmen, konfigurieren.
Hinweis:
Bei jedem Haiilo ist ein Standard Design mitgegeben, welches jeder Nutzer angezeigt bekommt, wenn dieser sich noch nicht angemeldet hat. Dieses Design kann geändert aber nicht gelöscht werden.
Farben
Ein wesentliches Element, um eure Haiilo-Oberfläche "heimischer" zu gestalten, ist es die Farben anzupassen.
Ihr könnt über Hexadezimal-Werte exakt definieren, welche Farben in der Oberfläche verwendet werden sollen (z. B. #FF0000).
Hinweis:
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 z.B. folgende Farben 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".
Und für die Login Seite sind z.B. die folgenden Farben wichtig:
- Hintergrundfarbe: Die Hintergrundfarbe definiert die Hauptfarbe des Hintergrundes der Login Seite
- Verlaufsfarbe: Die Verlaufsfarbe definiert in welche andere Farbe die Hintergrundfarbe auf der Login Seite verlaufen soll
Logos
Im zweiten Bereich der Design-Einstellungen könnt ihr euer/e Logo/s hochladen.
Folgende Möglichkeiten gibt es bei Haiilo:
- Das Front-Logo wird auf dem Anmeldebildschirm angezeigt und sollte mind. 80px hoch sein
- 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 des Browser, links von der URL, sowie im Browser-Tab und bei den Lesezeichen angezeigt
- Das iOS Homescreen Icon taucht auf dem iPhone als Icon auf, wenn ihr die URL eurer digitalen Heimat auf dem Homescreen speichert und es sollte mind. 180x180px groß sein
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.
Hinweis:
Wenn in diesem Bereich Änderungen vorgenommen wurden und sich diese als fehlerhaft herausstellen, dann fällt diese Korrektur nicht unter unsere regulären Serviceleistungen. Sofern ihr Unterstützung für CSS-Anpassungen benötigt, empfehlen wir euch, erfahrene Berater in diesem Bereich hinzuzuziehen.
FAQ
Wie kann man in Haiilo CSS-Codes ausfindig machen?
Wir haben eine 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.
Bitte beachtet, dass nicht alles innerhalb von Haiilo durch Custom CSS angepasst werden kann. Wir behalten es uns vor bestimmte Bereiche für Custom CSS zu sperren.
Warum werden meine Emojis manchmal nicht korrekt angezeigt?
Haiilo selbst liefert keine Emoijs mit. Sie werden aus eurem Betriebssystem geladen, um die Softwareperformance nicht zusätzlich zu belasten. Werden eure Emoijs daher manchmal nicht korrekt angezeigt, liegt das am Betriebssystem.
Als Workaround besteht die Möglichkeit, Emojis lokal zu installieren und anzuzeigen. Chrome stellt Nutzern z.B. Add-ons zur Verfügung.
Hinweis:
Wir können für Browser Add-ons/Plugins keine Gewähr übernehmen, weil sich ihre Funktionsweise und deren Zusammenspiel mit Haiilo außerhalb unseres Einflussbereichs befinden. Wir bitten euch, dies bei der Installation der Add-ons zu bedenken.