How to Create a Child Theme in Moodle 3.0

How to Create a Child Theme in Moodle 3.0
November 16, 2016 Rajiv Sathian
In Moodle Solutions

On Moodle, the display of your content is decided by the theme you use. The theme decides the layout for various pages, such as the Homepage, the dashboard, the 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 linking.

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,  create a distinct online presence.

Creating your Own Moodle Theme

Well, creating a theme is not as complicated as it seems. But yes, do enter this territory if you have basic knowledge of CSS. 😀

You can create a custom Moodle theme by modifying the CSS of an existing theme.
  1. You need to start by logging onto your Moodle server, heading over to ‘/theme’ and creating a folder for your theme name under it
  2. The minimum files you require to create a child theme are ‘config.php‘ and ‘version.php
  3. Since this is a child theme, you need to install the parent theme and specify it in the config file. This can be done using the line:
    $THEME->parent = 'parent_theme';  // parent theme folder
    
  4. In the version file, you’ll have to specify the them version ($plugin->version), the required Moodle version ($plugin->requires) and the name of the theme ($plugin->component)
  5. To add your custom styling, you’ll have to create a ‘.css‘ file under ‘style‘ folder and add it to the config file. For example,
    $THEME->sheets = array('user_styles'); // name of child theme stylesheet

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:

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

Updating Theme Layouts

Now, to update your Moodle theme layouts, there’s some serious coding needed. If you’re not up to it, I’d suggest you contact a Moodle LMS developer.

If you’re up for it, here’s what you need to do. You need to create a folder named ‘layout‘ and add create template files for the ones you want to override, like ‘admin.php‘, ‘login.php‘, ‘frontpage.php‘, and so on.

edwiser-remui-banner-2

Adding a Custom Logo

To add your own logo, you have to create a ‘pix‘ folder and add your logo as ‘logo.gif‘. The size of the logo should be 100px.

Then, in ‘header.php‘ you’ll have to locate

<h1 class="headermain">

or in case of Edwiser RemUI under <header class=”main-header”>, and add the following immediately under it,

<img src="<?php echo $CFG->themewww .'/'. current_theme()?> /pix/logo.gif" alt="" />

Wrapping Up

A theme is an easy way to personalize your LMS website. When not happy with an existing theme, you can customize it by creating a child theme.

If you’re thinking of customizing Edwiser RemUI, a child theme is the way to go. Child themes help maintain your changes even if the parent theme is updated.

If you’ve got any questions or doubts, ask away!

Comments (0)

Leave a reply

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

*