Cloning a theme
Moodle 2.0
This document describes how to clone a theme from an existing Moodle 2.0. theme. It assumes you have some understanding of how themes work within Moodle, as well as a basic understanding of HTML and CSS.
Getting started
The first thing to create is a copy of the theme folder, 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.
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).
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 theme_boxxie.php which will need to be re-named. 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 settings are.
- /lang/
- This directory contains all language sub-directories.
- /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 general pages.
- /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.
Re-naming some 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 this file you will see lots of language $strings (see below) which are used for any customised words or phrases used in this theme. 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 the contents of theme_foxxie.php.
/**
* 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
*/
$string['pluginname'] = 'Boxxie';
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
$string['choosereadme'] = '
Boxxie
<img src="boxxie/pix/screenshot.jpg" />Theme Discussion Forum:
<a href="http://moodle.org/mod/forum/view.php?id=46">http://moodle.org/mod/forum/view.php?id=46</a>
Theme Credits
<a href="https://docs.moodle.org/en/Theme_credits">https://docs.moodle.org/en/Theme_credits</a>
Theme Documentation:
<a href="https://docs.moodle.org/en/Themes">https://docs.moodle.org/en/Themes</a>
Report a bug:
<a href="http://tracker.moodle.org">http://tracker.moodle.org</a>
About
Boxxie is a fluid-width, three-column theme for Moodle 2.0.
Tweaks
This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\'ll still have the original files if you make a mess. More information on modifying themes can be found in the <a href="https://docs.moodle.org/en/Theme">MoodleDocs</a>.
Credits
This theme was coded and is maintained by Patrick Malley. He can be contacted by email at contact@newschoollearning.com.
License
This, and all other themes included in the Moodle core, are licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License</a>.
';
