Cloning a theme

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

See Creating a theme based on boost for an up to date tutorial.

This document describes how to clone a theme from an existing Moodle 2 theme. It assumes you have some understanding of how themes work within Moodle, as well as a basic understanding of XHTML 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 2.3.x 2.4.x and soon to be announced Moodle 2.5.x it is important to know that this tutorial is valid for ONLY Moodle Boxxie theme, and as such does not take into account the various other elements you will find in other Moodle versions of themes like Afterburner, Formal White, Sky High, to name but a few. If you are looking to clone one of these themes then checkout my new tutorials. How to clone a Moodle 2.2 theme.

Getting started

Since this is a very easy introduction to creating a custom theme, the first thing to create is a copy of the version of the theme you want to clone. For the purpose of this tutorial, we will be cloning Boxxie, which is one of several Moodle core themes. There are other themes you can 'clone' which are a little harder to do, but once you are familiar with this easy one, you can tackle the harder ones later.

OK...let's get started. From your Moodle theme directory right click on boxxie and then copy and paste back into your Moodle theme directory. You should now have a folder called Copy of boxxie. If you right click this folder you are given the option to Rename it. So let's rename this folder to foxxie (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 foxxie directory you will find several directories, sub-directories and files within it. One of these sub-directories lang/en/ contain a file called theme_boxxie.php which will need to be re-named to theme_foxxie.php. But we shall address this later. For now just familiarise yourself with what you find in the foxxie directory.

These are:

config.php: Where all the theme configurations are made.
/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_boxxie.php: This file contains all the language strings for your theme.
/layout/: This directory contains all the layout files for this theme.
/layout/frontpage.php: Layout file for front page.
/layout/general.php: Layout file for all pages other than the front page.
/layout/embedded.php: Layout file for embedded pages.
/style/: This directory contains all the CSS files for this theme.
/style/core.css: Contains all the CSS rules for this theme.
/style/boilerplate.css: Contains all the reset CSS rules 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/tabs: This contains all the tab images for this theme.

Renaming Elements

The problem when cloning a theme is that you need to rename all those instances where the theme name, in this case boxxie, occurs. The first place to look is config.php, where you need to change the theme name.

$THEME->name = 'boxxie';

////////////////////////////////////////////////////
// Name of the theme. Most likely the name of
// the directory in which this file resides.
////////////////////////////////////////////////////

The next place to look, as mentioned above, is lang/en/theme_boxxie.php. This file, as well as needing to be renamed, also needs some of its content renaming too. So before we forget, let's right click on this file and rename it theme_foxxie.php before we open it.

Language Strings

When you open theme_foxxie.php the first thing you will see are the credits for the theme.

/**
 * Strings for component 'theme_boxxie', language 'en', branch 'MOODLE_20_STABLE'
 *
 * @package   moodlecore
 * @copyright 2010 Patrick Malley
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

Here you will need to change the reference from boxxie to foxxie, 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 used for any customised words or phrases used in a theme. And because this is in the foxxie/lang/en/ directory all the $strings are in English. But if you wanted to add some foreign words and phrases for whenever a user switched languages, you just need to create a new sub-directory in the foxxie/lang/ directory for the language files you need to add there, and then copy and paste this file to that new sub-directory. For example: foxxie/lang/it/theme_foxxie.php (where it is the code which represents the Italian language). We will explore the Language aspect of themes in another Moodle Doc. So let's just concentrate on the changes we need to make to rest of the contents of theme_foxxie.php.

$string['pluginname'] = 'Boxxie';
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';

In the $string section above, the only thing you need to change here is the pluginname from boxxie to foxxie.

In this next section, the choosereadme, which is written in XHTML and is the contents of the page that you will see when selecting Foxxie in the Theme Selector. However, you are advised to read what is actually written there and change it accordingly, renaming 'Boxxie' to 'Foxxie', and changing the contents of this part to suit yourself. You might not want to keep all that is written here. You could actually condense it, but that's up to you. Just as long as you give credit, where credit is due, to the original theme designer by stating something on similar lines to what I have written below.

$string['choosereadme'] = 'Foxxie is a customised Moodle theme
by Mary Evans based on the original Boxxie theme by Patrick Malley';

Now open version.php file and change $plugin->component

$plugin->component = 'theme_foxxie';

Recipe for the Impatient

For those who want a minimal set of instructions to semi-blindly blast through this:

1. Copy [moodleroot]/theme/boxxie to [moodleroot]/theme/foxxie

2. Rename [moodleroot]/theme/foxxie/lang/en/theme_boxxie.php to [moodleroot]/theme/foxxie/lang/en/theme_foxxie.php

3. In [moodleroot]/theme/foxxie/lang/en/theme_foxxie.php, replace any instances of "boxxie" with "foxxie", likewise for "Boxxie" and "Foxxie".

4. Edit [moodleroot]/theme/foxxie/config.php to replace instance(s) of "boxxie" with "foxxie".

5. Edit [moodleroot]/theme/foxxie/version.php to replace instance(s) of "boxxie" with "foxxie".

Appendix

Please Note: All theme names, directory names, and file names MUST be in lowercase.

Documentation