Moodle Theme Maker for Moodle: New course list layout styles for your Moodle site’s frontpage

moodle-theme-maker-course-list-layout-styles-banner

In the latest Maker theme we’ve added more options for you to configure the layout of your Moodle course list on your site’s frontpage. In this tutorial we’ll show you the available options so you can make a more informed decision in choosing the best option for your Moodle site.

To configure the options you need to go to the theme settings page and select the “Course settings” tab: Site administration > Appearance > Themes > Maker Settings

Style 1 – Default

By default the course list will be shown as a list of blocks. This style works best if you make sure the course summary is truncated to max 200 characters and your course image size is 440px x 280px, or 880px x 560px if you are going to use the image as the course header image as well.

Output:

moodle-theme-maker-course-list-layout-style-default-output

Configurations:

moodle-theme-maker-course-list-layout-style-default-config

Style 2 – Cards

This style shows your list of courses as cards with equal heights. This style works best with a truncated course summary (you can set the truncation length based on your needs). If you are going to use this style, it’s recommended to have at least 3 available courses on your site, otherwise the layout will look a bit odd.

Output:

moodle-theme-maker-course-list-layout-style-cards-output

Configurations:

moodle-theme-maker-course-list-layout-style-cards-config

Style 3 – Masonry

This style shows your list of courses as cards with their auto heights. It places the cards in optimal position based on available vertical space. You don’t need to truncate the course summary when using this style as the course items with various heights will automatically stack to each other and fit into the available space.

One thing to note is that this layout orders your course items from top to bottom then left to right.

Again, if you are going to use this style, it’s recommended to have at least 3 available courses on your site, otherwise the layout will look a bit odd.

Output:

moodle-theme-maker-course-list-layout-style-masonry-output

Configurations:

moodle-theme-maker-course-list-layout-style-masonry-config