Просмотр кода страницы Development:Themes 2.0 how to clone a Moodle 2.0 theme

{{Template:Themes}}{{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.

==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.
<code php>
$THEME->name = 'boxxie';

////////////////////////////////////////////////////
// Name of the theme. Most likely the name of
// the directory in which this file resides.
////////////////////////////////////////////////////
</code>
 
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. 
<code 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
 */
</code>
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'''.

<code php>
$string['pluginname'] = 'Boxxie';
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
</code>

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.

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

And basically that's it as far as this theme is concerned. However there are some themes which contain far more files and directories, like renderers, lib and settings PHP as well as Javascript, jQuery and other customisable elements of a Moodle theme.

==See also==
* [[Development:Themes 2.0 creating your first theme]] - A quick step by step guide to creating your first theme.
* [[Development:Themes 2.0 overriding a renderer]] - A tutorial on creating a custom renderer and changing the HTML Moodle produces.
* [[Development:Themes 2.0 How to use images within your theme]] - Explains how to use and override images within your theme.
* [[Development:Themes 2.0 adding a settings page]] - Looks at how to add a setting page making your theme easily customisable.
* [[Development:Themes 2.0 extending the custom menu]] - Customising the custom menu.
* [[Development:Themes 2.0 how to make the dock horizontal]] - Modifying the dock to make it horizontal.
* [[Development:Styling and customising the dock]] - How to style and customise the dock.
* [[Development:Themes 2.0 adding upgrade code]]
* [[Development:Theme changes in 2.0]]
* [[Development:Using jQuery with Moodle 2.0]]
* [http://www.youtube.com/watch?v=OvaU54uh-qA New themes in Moodle 2.0 video]


[[Category:Themes]]