Ändern Sie die Farben der Learn365-Kurskatalog-Karten

Die Standardfarben der Kurskatalog-Karten können geändert werden, um den Kurskatalog an die Marke Ihrer Organisation anzupassen.

In diesem Artikel wird beschrieben, wie Sie die Farben von Kurskatalog-Karten in SharePoint und Microsoft Teams mithilfe von Cascading Style Sheets (CSS) ändern. Wir zeigen Ihnen außerdem, wie Sie die Standardfarbeinstellungen wiederherstellen können.

In diesem Artikel

• Voraussetzungen
• Farbe der Karten in SharePoint ändern
• Farbe der Karten in Teams ändern
• Standardfarbeinstellungen wiederherstellen

Voraussetzungen

Erforderliche Rolle: Kurskatalog-Administrator.

Mit dieser Methode wird nur die Farbe der Kurskatalog-Karten angepasst. Die Farben der Kurs- und Schulungsplan-Seiten werden dadurch nicht geändert.

Um benutzerdefinierte Farben auf Kurskatalog-Karten anzuwenden, müssen Sie zuerst ein CSS-Skript mit den entsprechenden benutzerdefinierten Farben erstellen und dann das Skript kopieren.

Unten finden Sie ein Beispiel für ein Skript für ein benutzerdefiniertes Farbdesign für Kurskatalog-Karten. Wenn Sie sich mit CSS auskennen, können Sie Ihre bevorzugten Farben in dieses Skript einfügen und es verwenden. Es gibt 6 anpassbare Spalten. Für jede Spalte kann eine statische und eine Hover-Farbe angepasst werden, indem der HTML-Farbcode geändert wird.

Alternativ können Sie das Zensai Customer Success Team kontaktieren, das Ihnen ein CSS-Skript zur Verfügung stellt, das die von Ihnen gewünschten Farben für Kurskatalog-Karten anwendet.

<p style="display: none;">Some description</p>
<style>
/* #Column 1 */
.ef-callout-storage .ms-Callout .ef--color-orange.ms-Callout-beak, .ef-callout .ef--color-orange.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange.ef-box-color {
    background-color: #D83B01!important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange.ef-box-color {
    background-color: #FF632B!important;
}

/* #Column 2 */
.ef-callout-storage .ms-Callout .ef--color-orange-light.ms-Callout-beak, .ef-callout .ef--color-orange-light.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange-light.ef-box-color {
    background-color: #EA4300!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange-light.ef-box-color {
    background-color: #FD814F!Important;
}

/* #Column 3 */
.ef-callout-storage .ms-Callout .ef--color-red-dark.ms-Callout-beak, .ef-callout .ef--color-red-dark.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red-dark.ef-box-color {
    background-color: #A80000!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red-dark.ef-box-color {
    background-color: #E05D5D!Important;
}

/* #Column 4 */
.ef-callout-storage .ms-Callout .ef--color-red.ms-Callout-beak, .ef-callout .ef--color-red.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red.ef-box-color {
    background-color: #E81123!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red.ef-box-color {
    background-color: #F5636F!Important;
}

/* #Column 5 */
.ef-callout-storage .ms-Callout .ef--color-green.ms-Callout-beak, .ef-callout .ef--color-green.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-green.ef-box-color {
    background-color: #107C10!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-green.ef-box-color {
    background-color: #6DD46D!Important;
}

/* #Column 6 */
.ef-callout-storage .ms-Callout .ef--color-teal-dark.ms-Callout-beak, .ef-callout .ef--color-teal-dark.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-teal-dark.ef-box-color {
    background-color: #004B50!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-teal-dark.ef-box-color {
    background-color: #42C3CC!Important;
}
</style>

Farbe der Karten in SharePoint ändern

So wenden Sie die Anpassungen auf Karten auf der Kurskatalogseite in SharePoint an:

1. Wählen Sie auf der Startseite des Kurskatalogs das Symbol Webparteinstellungen aus. Der Bereich Kurskatalogeinstellungen wird geöffnet.
 

2. Erweitern Sie im Bereich Kurskatalogeinstellungen panel, den Abschnitt Catalog content editor und wählen Sie Edit neben dem Feld Description aus. Der Bereich Description wird geöffnet.

3. Wählen Sie im Bereich Description das Symbol Source code aus.

4. Fügen Sie (fügen Sie) das CSS-Skript ein, das Sie zuvor kopiert haben, und wählen Sie Speichern aus.
 

Das Feld Description im Bereich bleibt leer.

5. Wählen Sie OK aus, um den Bereich Description zu schließen. 

6. Wählen Sie im Bereich Kurskatalogeinstellungen Speichern aus, um die Änderungen zu übernehmen.

Die Farbe der Kurskatalogkarten spiegelt jetzt die von Ihnen vorgenommenen Änderungen wider.
 

Farbe von Karten in Teams ändern

So wenden Sie die Anpassungen auf Karten in einem Kurskatalog in Microsoft Teams an:

Wechseln Sie in Microsoft Teams zur Registerkarte Catalog der Learn365-App und führen Sie dieselben Schritte aus, die im vorherigen Abschnitt beschrieben sind. Die Änderungen werden nach dem Speichern angewendet.

Standardfarbeneinstellungen wiederherstellen

1. Wählen Sie auf der Startseite des Kurskatalogs das Symbol Webpart-Einstellungen aus. Der Bereich Kurskatalogeinstellungen wird geöffnet.
 

2. Erweitern Sie auf dem Course catalog settings Panel, den Block Catalog content editor und wählen Sie Edit neben dem Feld Description aus. Der Bereich Beschreibung wird geöffnet.

3. Wählen Sie im Bereich Beschreibung das Symbol Quellcode aus.

4. Löschen Sie das CSS-Skript und wählen Sie Speichern aus.
 

Das Feld Beschreibung des Bereichs bleibt leer.

5. Wählen Sie OK aus, um den Bereich Beschreibung zu schließen. 

6. Wählen Sie im Bereich Kurskatalogeinstellungen Speichern aus, um die Änderungen zu übernehmen.

Nachdem Sie die Änderungen gespeichert haben, werden die Standardfarben der Karten wiederhergestellt.

Die Standardfarben der Kurskatalogkarten sind nun wiederhergestellt.