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 COYO Mobile App in eurem eigenen Design anpassen möchtet, könnt ihr im Artikel zum White Labeling mehr erfahren.
Was könnt ihr anpassen?
Wo könnt ihr das Design anpassen?
Hinweis:
Hierfür benötigt ihr bestimmte Rechte (Zugriff auf die Administration + "Verwaltung der Designs").
Das Standard-Design
Bei der Erstinstalltion ist von COYO ein Design mitgegeben. Dieses Design kann geändert aber nicht gelöscht werden. Das Standard-Design ist das Design, das in eurer COYO Engage App angezeigt wird.
Wie könnt ihr Anpassungen vornehmen?
1. Farben
Ein wesentliches Element, um eure COYO-Oberfläche "heimischer" zu gestalten, ist das Farbschema der Navigationsleiste anzupassen. Verändert ihr die Farbwerte, ändert sich das Aussehen eurer Navigation.
In COYO 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 COYO. 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 COYO:
- 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.
Variablen
Folgende CSS-Variablen können, im benutzerdefinierten CSS, gesetzt werden, um Styles zu ändern:
- color-yellow
- color-white
- color-black
- color-blue
- color-green
- color-red
- color-orange
- color-gray
- color-gray-lighter
- color-gray-light
- color-gray-dark
- color-gray-darker
- color-form-error
- color-form-correct
- font-family-base
Häufige Fragen:
Wie kann man in COYO CSS-Codes ausfindig machen?
- Klickt per Rechtsklick auf eine beliebige Stelle in COYO
- 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.
