How to change the colors of course catalog cards

The default colors of LMS365 course catalog cards and their fold-out menu can be changed to align a course catalog with the brand of your organization.

 

Group_9__30_.png

 

This article describes the steps of how to change the colors of the course catalog cards of LMS365 in Microsoft SharePoint and Teams using Cascading Style Sheets (CSS). We will also show how to restore the default color settings.

Required role: Catalog administrator.

NOTE

This method will not change the colors of course and training plan pages.

 

Changing the colors of the cards of a course catalog

To apply custom colors to the cards of a course catalog and their fold-out menu, first create a CSS script with the custom colors of your choice and copy it.

Below is an example of a script for a custom color theme for course catalog cards and their fold-out menu. If you are familiar with CSS, you can apply the colors of your choice to this script and use it. Otherwise, you can contact the LMS365 Customer Success team to get a CSS script that will apply the colors of your choice to the course catalog cards. 

 

<class="cm-line"><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: #2CAFE5!important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange.ef-box-color {
    background-color: #2CAFE5!important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange.ef-box-color, .ef-callout .ef--color-orange.ef-card-header,
.ef-callout-course-card .ef--color-orange.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-orange.ms-Callout-beak {
  background-color: #2CAFE5!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: #006CB7!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange-light.ef-box-color {
    background-color: #006CB7!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange-light.ef-box-color, .ef-callout .ef--color-orange-light.ef-card-header,
.ef-callout-course-card .ef--color-orange-light.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-orange-light.ms-Callout-beak {
  background-color: #006CB7!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: #004A80!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red-dark.ef-box-color {
    background-color: #004A80!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red-dark.ef-box-color, .ef-callout .ef--color-red-dark.ef-card-header,
.ef-callout-course-card .ef--color-red-dark.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-red-dark.ms-Callout-beak {
  background-color: #004A80!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: #2CAFE5!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red.ef-box-color {
    background-color: #2CAFE5!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red.ef-box-color, .ef-callout .ef--color-red.ef-card-header,
.ef-callout-course-card .ef--color-red.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-red.ms-Callout-beak {
  background-color: #2CAFE5!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: #006CB7!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-green.ef-box-color {
    background-color: #006CB7!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-green.ef-box-color, .ef-callout .ef--color-green.ef-card-header,
.ef-callout-course-card .ef--color-green.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-green.ms-Callout-beak {
  background-color: #006CB7!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: #004A80!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-teal-dark.ef-box-color {
    background-color: #004A80!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-teal-dark.ef-box-color, .ef-callout .ef--color-teal-dark.ef-card-header,
.ef-callout-course-card .ef--color-teal-dark.ef-card-header, .ef-callout-storage .ms-Callout .ef--color-teal-dark.ms-Callout-beak {
  background-color: #004A80!Important}
</style>

 

To apply the customizations to a course catalog page in SharePoint:

1) Select the Web part settings icon.

Group_9__31_.png

2) From the Web part settings panel, under the Course Catalog Settings, select Edit next to the Description field.

Group_9__32_.png

3) Select the View HTML icon, insert the copied CSS script and select Update.

2022-02-23_13_35_28-Course_Catalog.png

4) Select Ok on the Description panel and then Save on the Web part settings panel to apply the changes.

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

image_32__6_.png

 

To apply the customizations to a course catalog in Microsoft Teams, go to the Catalog tab of the LMS365 app in Microsoft Teams and follow the steps listed above. The changes will be applied after saving.

Group_9__33_.png


To restore the default color settings of course catalog cards, simply follow the steps above and delete the inserted CSS script in the View HTML window. After you have saved the changes, the default colors will be restored.



Was this article helpful?
2 out of 2 found this helpful

Comments

Article is closed for comments.