Change the colors of course catalog cards

The default colors of course catalog cards can be changed to align a course catalog with your organization's brand.

This article describes how to change the colors of course catalog cards in SharePoint and Microsoft Teams using cascading style sheets (CSS). We will also show you how to restore the default color settings.

 

 

In this article

• Prerequisites
• Change the color of cards in SharePoint
• Change the color of cards in Teams
• Restore the default color settings

 

Prerequisites

Required role: course catalog admin.

This method customizes the color of course catalog cards only. It won't change the colors of course and training plan pages.

To apply custom colors to course catalog cards, you must first create a CSS script with the relevant custom colors and then copy the script.

Below is an example of a script for a custom color theme for course catalog cards. If you are familiar with CSS, you can apply your preferred colors to this script and use it. There are 6 customizable columns. A static and hover color for each column can be customized by changing the HTML color code.

Alternatively, you can contact the Zensai Customer Success team, who can provide you with a CSS script that applies the colors of your choice to course catalog cards.

 

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

 

Change the color of cards in SharePoint

To apply the customizations to cards on the course catalog page in SharePoint:

1. On the course catalog home page, select the Web part settings icon. The Course catalog settings panel opens.

 

 

2. On the Course catalog settings panel, expand the Catalog content editor block and select Edit next to the Description field. The Description panel opens.

 

 

3. On the Description panel, select the Source code icon.

4. Insert (paste) the CSS script that you copied earlier and select Save.

The Description field of the panel stays empty.

 

 

5. Select OK to close the Description panel. 

6. Select Save on the Course catalog settings panel to apply the changes.

The color of the course catalog cards now reflects the changes you've made.

 

 

Change the color of cards in Teams

To apply the customizations to cards in a course catalog in Microsoft Teams:

Go to the Catalog tab of the Learn365 app in Microsoft Teams and follow the same steps that are described in the previous section. The changes are applied after saving.

 

 

Restore the default color settings

1. On the course catalog home page, select the Web part settings icon. The Course catalog settings panel opens.

 

 

2. On the Course catalog settings panel, expand the Catalog content editor block and select Edit next to the Description field. The Description panel opens.

3. On the Description panel, select the Source code icon.

4. Delete the CSS script and select Save.

The Description field of the panel stays empty.

5. Select OK to close the Description panel. 

6. Select Save on the Course catalog settings panel to apply the changes.

After you have saved the changes, the default colors of the cards are restored.

The default colors of the course catalog cards are now restored.