Change the colors of course catalog cards

The default colors of LMS365 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 LMS365 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

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 LMS365 Customer Success team, who can provide you with a CSS script that applies the colors of your choice to course catalog cards. 

 

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

 

Web_part_settings_icon.png

 

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.

Edit_option_of_the_Description_field_in_the_Course_Catalog_web_part_settings.png

3. On the Description panel, select the View HTML icon.

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

The Description field of the panel stays empty.

 

Insert_css_to_customize_color_of_cards.png

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 LMS365 app in Microsoft Teams and follow the same steps that are described in the previous section. The changes are applied after saving.

 

Web_part_settings_icon.png

 

Restore the default color settings

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

 

Web_part_settings_icon.png

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.

 

Edit_option_of_the_Description_field_in_the_Course_Catalog_web_part_settings.png

3. On the Description panel, select the View HTML icon.

4. Delete the CSS script and select Update.

The Description field of the panel stays empty.

 

Insert_css_to_customize_color_of_cards.png

 

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.

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

Comments

Article is closed for comments.