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:
- Fixed width themes: These are themes where the width of the canvas is fixed, for example, to 1,024 points. The advantage of this is the simplicity of development but the downsides are a high degree of inflexibility. Fixed width themes can only be justified if all your users use exactly the same screen resolution and no mobile devices have to be supported.
- Fluid themes: Fluid or dynamic width themes use up a certain percentage of a user's screen estate. This can be limited by minimum and maximum widths, for example, a theme uses up 100% of the screen width but not more than 1,600 pixels. More flexible than fixed width themes, but there is a requirement to have a dedicated theme for different types of devices.
- Responsive themes: Responsive themes adapt to the device, its screen resolution, and the screen orientation automatically. Not only this, they also change due to the content that is displayed, navigation that is used, and the orientation of the screen elements. Responsive Moodle themes are based on Bootstrap 3.
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:
- Default: This is the theme that is normally used unless any of the other types are detected. Device detection has to be enabled in the theme settings.
- Legacy: If you have users in your system who are stuck in the previous millennium, that is, still using Internet Explorer 6, this theme will be used instead of the default one. Moodle does not ship with a theme that supports legacy browsers, but you can install one from https://moodle.org/plugins/ called Standard (legacy).
- Mobile: This theme is used when a smartphone is detected.
- Tablet: This theme is used when a tablet is detected.
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:
- Site theme: If no other theme is selected, this theme is applied throughout the site. This is the default when you first install Moodle.
- User theme: If enabled, users are allowed to select their personal theme as part of their profile.
- Course theme: If enabled, each editing teacher can specify a course theme in the course settings (Force theme parameter in course settings).
- Category theme: This theme can be set for each course category (this is the Force theme parameter in the category settings).
- Session theme: If you need to apply a theme temporarily (that is, until you log out), you can add the theme parameter to the URL of a course. For example, on our site, we would replace
http://.../course/view.php?id=5withhttp://.../course/view.php?id=5&theme=packttheme. - Page theme: Page themes are set in code and have only been added for completeness.
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: This is the default font size that's used in a theme.
- Color picker: This refers to the selection of foreground and background colors, link colors, or the header color. The color picker offers a preview, which is quite helpful.
- Image: A URL can be specified to replace the one shown in the header or background.
- Column width: You can choose the width of the center column in terms of pixels. Other (usually fixed width) themes let you specify the width of the left-hand side and right-hand side column, separately.
- Languages menu: This is a checkbox that indicates whether the languages menu is shown.
- Footnote: The footnote text can be fully customized through the standard Moodle editor, that is, images or the HTML code can be also added.
- Custom CSS: This text box, which has been added to all the themes that ship with the core Moodle, lets you change any style in the theme. In the following example, the background of the body has been changed to black with yellow text. Additionally,
font-sizehas been increased to16px. 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:
