Your system is now fully operational with users, courses, and roles in place. It is now time to change its look and feel. Out goes the Moodle default theme and in comes a site that is in line with the corporate branding of your organization!
After providing a general overview of Moodle's look and feel elements, we will cover the following subjects:
- Front page customization: This includes front page settings, block arrangements, front page roles, backup, restore, and questions. You will also learn how to support personalization through the Dashboard feature, make blocks sticky, and how to streamline the navigation on your site.
- Moodle themes: This includes theme selection, theme types, and theme settings. We will also cover the support for mobile devices, that is, cell phones and tablets.
- Editor configuration: This includes the configuration of the Atto HTML editor.
- Accessibility: Here, we will cover support for Moodle users with different types of accessibility problems, such as visual impairment and motor difficulties.
Moodle can be fully customized in terms of layout, branding, and device support. It has to be stressed that certain aspects of changing the look and feel require advanced design skills. While you, as an administrator, will be able to make some adjustments, it will be necessary to get a professional frontend designer involved, especially when it comes to styling.
The two relevant components for customization are the Moodle front page and Moodle themes. Before we cover both areas, let's try to understand which part is responsible for which element of the look and feel of your site.
In the upcoming screenshot, have a look at the front page of the Moodle site after we have logged in as the administrator. It is not obvious which parts are driven by the Moodle theme and which ones by front page settings. The following table, which looks at the page's elements from the top to the bottom when the core Clean or More theme has been applied, sheds some light on this:
|
Element |
Setting |
Theme |
Other |
|---|---|---|---|
|
Site title |
X | ||
|
Pull-down menu |
X | ||
|
Username, profile picture, and personal menu |
X |
X | |
|
Logo |
X | ||
|
Language dropdown |
X |
X | |
|
Dockable sidebar |
X |
X | |
|
The Navigation and Administration blocks (position) |
X | ||
|
The Available courses block (position) |
X | ||
|
The Available courses block (content) |
X | ||
|
The Course categories and Calendar blocks (position) |
X | ||
|
The All courses link in the Course categories block |
X | ||
|
Icons, font colors, headers, borders, and so on of all blocks |
X | ||
|
Show icons to collapse blocks |
X | ||
|
Show icons to dock blocks |
X |
X | |
|
Footer text |
X | ||
|
Copyright statement |
X | ||
|
Number of columns |
X |
While this list is by no means complete, it hopefully gives you an idea that the look and feel of your site is driven by a number of different elements. It should also give you an idea about the types of elements that can be modified.
In short, the settings (mostly front page settings as well as a few related parameters) dictate what content users will see before and after they log on. The theme is responsible for the design scheme or branding, that is, the header and footer as well as the colors, fonts, icons, and so on, used throughout the site.