Design anpassen – COYO Campus

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?

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.

Tipp:
Hierfür benötigt ihr bestimmte Rechte (Zugriff auf die Administration + "Verwaltung der Designs").

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.

Wir haben ein neues Design angelegt und diesem eine rote Farbskala mit blauen Akzenten zugewiesen:

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.

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. Somit ist die Kontrolle und nachträgliche Anpassung jeglicher Änderungen grundsätzlich eine zusätzliche Beratungsleistung. Sofern ihr Unterstützung für CSS-Anpassungen benötigt, empfehlen wir euch, erfahrene Berater in diesem Bereich hinzuzuziehen.

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?

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

Warum Hexadezimal-Werte?

Jede Website wird durch Licht auf einem Bildschirm dargestellt. Das bedeutet, dass jede Farbe durch ein Zusammenwirken von Rot-, Grün- und Blaulicht erzeugt wird. Durch die Verwendung dieser Farbwerte geben wir präzise an, wie diese kombiniert und dargestellt werden sollen.