Moodle provides a flexible skinning mechanism to brand your site according to existing guidelines. As mentioned in the introduction, we will only cover the theme settings that can be accessed from the Moodle administration menu. For details on how to create Moodle themes, refer to the Designing Moodle Themes, Susan Smith Nash, Packt Publishing video by Packt Publishing, or contact your Moodle Partner who will be able to offer you professional theme design services. There are also some good pointers that you can find at https://docs.moodle.org/dev/Themes, which assume that you have a good understanding of HTML and CSS.
There are three types of Moodle themes that are supported by Moodle. They are as follows:
Themes, standard or custom, can be selected by going to Appearance | Themes | Theme Selector:
You can select up to four themes for your site that support different device types, which are as follows:
If you use a responsive theme, which is highly recommended, there is usually no need to select a theme for legacy, mobiles, and tablets.
The Clear theme caches button at the top of the screen is relevant if changes have been made to the themes and updates have not been propagated yet.
To understand most theme settings, we require a little bit of background. Like roles, themes are assigned in different contexts, namely, Site (system), User, Course, and Category. However, two additional areas, that is, Session and Page, are supported by Moodle. These so-called theme types are explained in the following list:
http://.../course/view.php?id=5
with http://.../course/view.php?id=5&theme=packttheme
.The following table shows theme priority: where it is displayed and where the setting is changed. To change the precedence order, modify the $CFG->themeorder
parameter in config.php
. The default is set to array('page', 'course', 'category', 'session', 'user', 'site');
:
Type |
Overrides |
Displays |
Setting location |
---|---|---|---|
Site |
None |
This displays all the pages, except the course and category, if set. |
Theme selector |
User |
Site |
This displays all the pages, except course and category, if set. |
User profile |
Course |
Site/user/category/session |
Course |
Course settings |
Category |
Site/user/session |
This displays all the courses in the category, except the course, if set. |
Category editing |
Session |
Site/user |
This displays all the pages, except the course and category, if set. |
|
Page |
All |
This depends on code |
In code |
There is some trade-off when allowing theme types other than the site theme: while allowing User, Course, Category, and other such themes, additional processing is required that will add overhead to your system and place an increased demand on your server. However, not allowing these themes limits the level of customization that can be carried out in your site (uniformity versus personalization).
Armed with all the information to this point, the theme settings (go to Appearance | Themes | Theme settings) are almost self-explanatory:
Now that we have the skill set to work with themes, it is time to customize the existing themes.
As an administrator, you are unlikely to be involved in the creation of a full-blown custom theme as this task requires strong designing skills and a deep knowledge of CSS and HTML. However, you will be able to make basic modifications to existing themes.
Moodle uses Cascading Style Sheets (CSS) to describe the presentation of each element that is displayed. CSS is used to define different aspects of the HTML and XHTML presentation, including colors, fonts, layouts, and so on.
To learn more about theme basics, go to https://docs.moodle.org/dev/Themes_overview, where you will find a very well-documented and detailed help section. You might also want to install a number of useful tools when customizing themes such as the popular Firebug.
At the heart of CSS are so-called styles; Moodle uses consistently plain English for the naming of styles. For the forum elements that are displayed in the following screenshot, a few sample styles have been labeled:
You can see that each element of Moodle is represented by a style. In total, there are well over 2,000 (!) styles in Moodle, which give a designer a high degree of freedom.
Moodle themes can be customized through their respective settings by going to Appearance | Themes | <Theme name>. Different themes provide different settings. Here is a screenshot of the different types of parameters in the More theme:
Typical theme settings include the following elements:
font-size
has been increased to 16px
. These settings are useful for learners who are visually impaired:The Clean and More themes that ship with Moodle let you customize your site to a certain degree via the Moodle frontend without needing to edit CSS files in the server. For example, the site that has been used to take screenshots for this book has been themed using the More theme.
A popular theme that you will find in the themes section on https://moodle.org/ is called Essential. Once installed (refer to Chapter 8, Moodle Plugins), it provides a wide range of customization options, ranging from custom menus, front page slide shows, and marketing spots to social networking icons and links to mobile apps. Here is a sample customization of the Essential theme:
18.191.68.18