Catalogue Technical

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

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 highlight

// Add star to course highlight field
.tool_catalogue_course_field.customfield.customfield_checkbox {
    &::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f005";
    }
}

Position course fields and values in the same line

// Display course fields inline with their values
.tool_catalogue_course_field > div {
    display: inline-block !important;
}

Moving the price label

// Move price label from top right corner in line with other course properties
.tool_catalogue_list .tool_catalogue_course .tool_catalogue_course_field[data-fieldname="customfield_price"] {
    position: relative;
    width: auto;
}

Adding icons to Labels

// Display 'Folder' icon prior to 'Category' field
.tool_catalogue_course .tool_catalogue_course_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_course .tool_catalogue_course_field[data-fieldname="customfield_learning_time"]::before {
        font-family: 'Font Awesome 6 Free';
        content: "\f017";
}

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

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

Displaying checkbox fields as badges

// The following CSS displays a custom course field 'recommended' of type Checkbox
// Note that this can be done in addition to the Feature Highlight option

.tool_catalogue_tiles,
.tool_catalogue_list {
    .tool_catalogue_course .tool_catalogue_course_field[data-fieldname="customfield_recommended"] {
        @extend .badge;
        @include badge-variant($primary);
    }
}
 
// Show badge in tiles view (and make background red)
.tool_catalogue_tiles .tool_catalogue_course {
    .tool_catalogue_course_field[data-fieldname="customfield_recommended"] {
        position: absolute;
        left: 10px;
        top: 10px;
        max-width: 50%;
        background-color: red;
        @at-root .tool_catalogue_course {
            position: relative;
        }
    }
}

// Show badge in list view (and make background red)
.tool_catalogue_list .tool_catalogue_course {
    .tool_catalogue_course_field[data-fieldname="customfield_recommended"] {
        position: absolute;
        left: 10px;
        top: 20px;
        max-width: 20%;
        background-color: red;
        @at-root .tool_catalogue_course {
            position: relative;
        }
    }
    @include media-breakpoint-down(sm) {
        .tool_catalogue_course_field[data-fieldname="customfield_recommended"] {
            max-width: 50%;
        }
    }
}

Capabilities

The following capabilities are available for handling the learning catalogue:

tool/catalogue:config: Configure learning catalogue

Documentation