Catalogue Technical

This feature is part of Moodle Workplace™, which is available through Moodle Certified Partners and Service Providers only.

This page is intended for Administrators

Styling the Learning Catalogue via CSS

The learning catalogue has been designed in line with the remainder of Moodle Workplace's look & feel. If you wish to modify its layout or styling, the following CSS snippets (added as Custom CSS to the tenant or your main theme) might come in helpful.

Adding a symbol to course and program badges

// Add a star to the number featured badge
.tool_catalogue-item .item-badges .item-badge-featured::before {
    font-family: 'Font Awesome 6 Free';
    content: "\f005";
}

// Add right arrow to the badge showing the number of courses in a program
.tool_catalogue-item .item-badges .item-badge-custom::before {
    font-family: 'Font Awesome 6 Free';
    content: "\f07b";
}

The .item-badge-featured class selector is for the featured badge, while the .item-badge-custom selector is for 'x courses'.

Moving the price label

// Move price label from top right corner in line with other course properties
.tool_catalogue-list .tool_catalogue-item .tool_catalogue-item-field[data-isprice="true"] {
    position: static;
    width: auto;
}

Adding icons to Labels

// Display 'Folder' icon prior to 'Category' field
.tool_catalogue-item .tool_catalogue-item-field[data-fieldname="category"]::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f07b";
}

// Display 'Clock' icon prior to custom 'Estimated learning time' field
.tool_catalogue-item .tool_catalogue-item-field[data-fieldname="customfield_3_learning_time"]::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f017";
}

// Display 'Open folder' icon prior to custom 'Level' field
.tool_catalogue-item .tool_catalogue-item-field[data-fieldname="customfield_3_level"]::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f07c";
}

// Display 'Calendar' icon prior to 'Start date' field
.tool_catalogue-item .tool_catalogue-item-field[data-fieldname="startdate"]::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f073";
}

Note: The numeric value in the custom fields data-fieldname represents the custom field category ID (here 3); moving the field to a different category will therefore break the style.

Capabilities

The following capabilities are available for handling the learning catalogue:

• tool/catalogue:config: Configure learning catalogue