edwiser-lms

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

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.

Copy of How to 1 2 1

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 themeNote: Make sure your config.php file contains $THEME->hidefromselector = false; or else, your theme wont show up in theme selector.
  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*/
}


Copy of How to 1 2 1

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)”

  1. Avatar of Norbs

    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. Avatar of Michael Moriarty
    Michael Moriarty

    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?

    1. Avatar of Adarsh Singh

      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.

  3. Avatar of dev

    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.

    1. Avatar of Adarsh Singh

      Hi,

      Whenever you create any page, you must call a function main_content(); for it to work properly.

      Hope that helps. 🙂

    1. Avatar of Rajiv Sathian

      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.

  4. Avatar of Buck

    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?

    1. Avatar of Rajiv Sathian

      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.

Leave a Reply to Michael Moriarty Cancel Reply

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