How to Create a Child Theme in Moodle 3.0 (and all versions above)

How to Create a Child Theme in Moodle 3.0 (and all versions above)
February 27, 2018 Rajiv Sathian

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.


RemUI


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.

  1. 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.
  2. 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.
  3. 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).

    How to make a Moodle child theme

  4. 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.

    How to make a Moodle child theme

  5. 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.

    How to make a Moodle child theme

  6. Now install your theme, by upgrading the database. Change the theme to your currently installed theme from ‘Theme Selector Option’.
  7. To add your custom styling, you’ll have to create a ‘.css’ file under ‘style’ folder and add it to the config file.

How to make a Moodle child theme


  
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*/
}


Comments (2)

  1. Norbs 1 year ago

    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.

  2. Michael Moriarty 1 year ago

    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?

Leave a reply

Your email address will not be published. Required fields are marked *

*