Themes 2.2 how to clone a Moodle 2.2 theme

Moodle 2.2 This document describes how to clone Afterburner theme so that you can build on this to create a theme of your own. It assumes you have some understanding of how themes work within Moodle 2.2, as well as a basic understanding of HTML and CSS. Also, because of the rapid development within Moodle, resulting in a number of versions available namely 2.0.x, 2.1.x, 2.2.x and soon to be announced Moodle 2.3.x it is important to understand that this tutorial is only valid for Moodle 2.2 themes.

Getting started

From your Moodle theme directory right click on afterburner and then copy and paste back into your Moodle theme directory. You should now have a folder called Copy of afterburner. If you right click this folder you are given the option to Rename it. So rename this folder to mytheme (or to whatever name you want to call your cloned theme). It is important to use only lower case letters and underscores.

If you open the mytheme directory you will find several directories, sub-directories and files within it.

These are:

config.php: Where all the theme configurations are made.
lib.php: Where all the functions for the themes settings are found.
renderers.php: Where all the renderers for this theme are found.
settings.php: Where all the setting for this theme are created.
version.php: Where the version number and plugin componant information is kept.
/lang/: This directory contains all language sub-directories for other languages if and when you want to add them.
/lang/en/: This sub-directory contains your language files, in this case English.
/lang/en/theme_afterburner.php: This file contains all the language strings for your theme.
/layout/: This directory contains all the layout files for this theme.
/layout/default.php: Layout file for front page.
/layout/embedded.php: Layout file for embedded pages.
/style/: This directory contains all the CSS files for this theme.
/pix/: This directory contains a screen shot of this theme as well as a favicon and any images used in the theme.
/pix_core/
/pix_plugins/

Renaming Elements

The problem when cloning a theme is that you need to rename all those instances where the old theme name occures, in this case afterburner. The first place to look is config.php, where you you need to define the name of your theme. So change $THEME->name = 'afterburner'; to the name of your new theme.

You will need to change the name of lang/en/theme_afterburner.php. This file, as well as needing to be renamed, also needs some of its content renaming too. So before you forget, right click on this file and rename it to the name of your new theme before you open it.

Language Strings

When you open theme_mytheme.php the first thing you will see are the credits for the theme. /**

* Strings for component 'theme_afterburner', language 'en'
*
* @package   theme_afterburner
* @copyright 2011
* @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

Here you will need to change the reference from afterburner to mytheme, you can leave the rest of this as it is.

The next things you will find in this file are what are known as the language strings. These are all the customised words or phrases used in this theme.

$string['configtitle'] = 'Afterburner Custom Settings'; $string['pluginname'] = 'Afterburner'; $string['region-side-post'] = 'Right'; $string['region-side-pre'] = 'Left'; ... ...

In the $string section above, you will need to change ALL instances of the old theme name Afterburner to your new theme name. In this next section alone you will find seven instances of the name Afterburner to rename.

The only section you may want to change completely is the choosereadme. You could write something like this instead.

$string['choosereadme'] = 'My theme is a customised Moodle theme based on the Moodle 2.2 Afterburner theme by Mary Evans.';

When you have finished all the changes in this file save it and close it.

Custom Settings

Now that you have had a chance to search for and change all the instances in the language file, you will be more familiar for what you are looking for when you begin the mamoth task of going through the files associated with the Custom Settings for the Afterburner theme. There are three files to check through. These are...

settings.php
renderers.php
lib.php

But do be sure to rename ALL the instances in these three files, as there are quite a number of them.

Version

The last file to change is version.php, here you will find the following...

/**

* Theme version info
*
* @package    theme
* @subpackage afterburner
* @copyright  2011 Mary Evans
* @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

defined('MOODLE_INTERNAL') || die;

$plugin->version = 2011082400; // The current module version (Date: YYYYMMDDXX) $plugin->requires = 2011081700; // Requires this Moodle version $plugin->component = 'theme_afterburner'; // Full name of the plugin (used for diagnostics) Just as long as you change the instance of afterburner to your new theme's name you will be almost ready to try out this theme in your Moodle 2.2. installation.

CSS Stylesheets

If you want this theme to use the same CSS rules from the Afterburner theme, then you need to make one more change to your new theme's config.php file.

First you will need to ADD afterburner to the parent theme array like this...

$THEME->parents = array('afterburner', 'base');

Next you can delete all these style sheets from this list bar one file...that is afterburner_settings.css. This is important as your theme will need to rely on this stylesheet for your custom settings. So delete this list...

$THEME->sheets = array(

   'afterburner_layout',   /** Must come first: Page layout **/
   'afterburner_styles',   /** Must come second: default styles **/
   'afterburner_menu',
   'afterburner_blocks',
   'afterburner_mod',
   'afterburner_calendar',
   'afterburner_dock',
   'afterburner_settings',
   'rtl'

);

but leave afterburner_settings.css which you could just rename to settings.css.

$THEME->sheets = array('settings');

You will then be able to delete all the stylesheets from your new theme's style directory leaving just editor.css and afterburner_settings.css which you will also need to rename to settings.css.

So whenever you need to change the CSS for your new theme, you can do this in your theme's settings page, by going to Site Administration > Appearance > Themes > and choose your new theme from those names listed.

Cut to the chase

Patience is a virtue! :)

If you have only just got here and not read the above Tutorial then you have missed the best part. If on the other hand you have finished this tutorial, then please let me have some feedback.

If after reading this you run into problems, and need more help, then do please ask in the Themes Forum, [1] where you will find lots of help with your new theme project.

--Mary Evans 2 06:03, 7 April 2012 (WST)

Documentation