On Moodle™, the display of your content is decided by the theme you use. The theme decides the layout for various pages, such as homepage, dashboard, blog page and so on. It also decides the styling, such as the colors, the font type, font size that will be used across your Moodle LMS.
So essentially a theme is the “skin” of your website.
Now, Moodle contains a basic theme with built in color schemes. And if that doesn’t suit your fancy, you can always browse through available free and premium themes, to pick a theme according to your liking.
But let’s face it. Large university websites, established corporate learning management systems, rarely pick an existing theme. They prefer building their own theme. The advantage of having a custom theme, is to create unique layouts, improve branding and create a distinct online presence.
Creating your Own Moodle™ Theme
Moodle LMS is pretty complex system therefore, creating a new theme for the whole Moodle site is not an easy task. But we don’t need to create a whole new theme to change the view of our moodle website.
An easier and simple solution is to create a “child theme” of an existing theme which is installed on Moodle site. In the child theme we just modify the details which we want to change and then let parent theme do the rest.
In this example we will create a child theme and then change the style of the moodle view by modifying the CSS.
- You need to start by logging onto your Moodle server, heading over to ‘theme’ folder and creating a folder for your theme name under it. The name of the folder should be the same as the name of the child theme.
- The minimum files/folders you require to create a child theme are: config.php, version.php and lang/en/theme_{{ name_of_child_theme }}.php. For eg. theme_test.php.
- In the version file, you’ll have to specify the theme version ($plugin->version), the required Moodle version ($plugin->requires) and the name of the theme ($plugin->component).
- The config.php file specifies the configuration of the theme. Since this is a child theme, you need to specify the parent theme’s name in the config file.
Note: Make sure your config.php file contains $THEME->hidefromselector = false; or else, your theme wont show up in theme selector.
- In Moodle LMS, all the strings used in the theme are generally stored in one file which is named as theme_{{name_of_theme}.php. The default location of this file is {{your_theme_directory}}/lang/en.
- Now install your theme, by upgrading the database. Change the theme to your currently installed theme from ‘Theme Selector Option’.
- To add your custom styling, you’ll have to create a ‘.css’ file under ‘style’ folder and add it to the config file.
Styling your Moodle Theme
Your Moodle theme can be styled as per your preference by overriding certain styles from the parent theme. For example, if you want to set the color of text headings, you could add the following to the stylesheet.
h1, h2, h3, h4, h5, h6 {
color: #333; /*your color here*/
}
To change the link color
Here’s what you can add:
a {
color: #333; /*your color here*/
}
Join Us on Facebook
Check out our group on Facebook, ‘Moodle Tips & Tricks’ – the name says it all. We’d love it if you impart some of your Moodle wisdom and contribute to the treasure trove of tips and tricks!
21 thoughts on “How to Create a Child Theme in Moodle™ 3.0 (and all versions above)”
Simple, but common sense.
What makes No sense is, in the theme “adaptable” the personal, uploaded during theme installation, the logo is no one near to it.
It is stored in: path_to_your_moodleinstall/pluginfile.php/1/theme_adaptable/logo/1486223313/you-logo-image
As is the same with anything else. This makes customisation – the traditional way, speak using CSS – almost impossible. All you can do is use the built-in theme editor (which is nice but very limited and for people used to CSS, a pain in the neck).
Pity.
Hi have followed instructions here but can’t seem to get my remui 3.2 child theme to display in the theme selector… Any ideas?
I’m also followed the tutorial but i can’t select the child theme
Hi Bruno!
The Child theme can be selected via Theme selector, if installed correctly. Are you able to do that?
In case you aren’t, do let us know. We’ll get back to you on mail. 🙂
Regards.
Hi,
How can I achieve if I want to overwrite any code in any files other than css?
Hi there,
Thanks for sharing this post,
is very helpful article.
Thank you!
Glad to know the article was useful for you.
Regards,
Adarsh
This is wonderful, Thank you
Thank you! Glad you liked it 🙂
Hi, when I create a child theme extending to remUI, do I need to include other files such as layout, templates and etc? Because if I don’t include them (and change every single line which uses remUI base directory to my child base directory), the theme gives me an error like this: page layout file [dirroot]/theme/my_theme/layout/ does not contain the main content placeholder, please include “main_content() ?>” in theme layout file.
Hi,
Whenever you create any page, you must call a function main_content(); for it to work properly.
Hope that helps. 🙂
Thanks for all the research paper it was very informative.!!
Happy to help.
If you got any other challenges related to Moodle then feel free to add them in comments we could publish similar articles in the future.
Thanks for sharing useful Information. I appreciate your Content.
Very relevant content!
The Klass Theme has a slider that slides too fast for me. It is hardwired to rotate to the next slide every 2 seconds. To slow it down I edited the .php file.
theme/klass/layout/includes/slideshow.php
The data-interval is 1000 per 1 second of delay. The default is 2 seconds and I wanted 5 seconds so I changed mine to 5000 as you see above.
In your instructions to making a child theme you only reference the CSS changes. How would I go about making a child theme with changes to the PHP file as you see above?
Hi Buck,
You won’t be able to make changes in the PHP and include them as part of the child theme.
Primarily a child theme is for making design improvements and tweaks.
I hope this helps you.
thanks for the last information
Thank you for your suggestion Preeti, we will try to explain in a more specific way on our future articles.
Nice and helpful post for me. Thanks
Thanks for sharing this post,
is very helpful article.