|
|
| (8 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| {{Template:Themes}}{{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. | | {{obsolete}} |
|
| |
|
| ==Getting started==
| | This page text has been deleted because it contained inaccurate or out of date information. To see the previous text for this page, check the history. |
| | |
| | |
| 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).
| |
| | |
| 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
| |
| <code php>
| |
| $THEME->name = 'afterburner';
| |
| </code>
| |
| 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.
| |
| <code php>
| |
| /**
| |
| * 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
| |
| */
| |
| </code>
| |
| 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.
| |
| | |
| <code php>
| |
| $string['configtitle'] = 'Afterburner Custom Settings';
| |
| $string['pluginname'] = 'Afterburner';
| |
| $string['region-side-post'] = 'Right';
| |
| $string['region-side-pre'] = 'Left';
| |
| ...
| |
| ...
| |
| </code>
| |
| | |
| 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.
| |
| | |
| <code php>
| |
| $string['choosereadme'] = 'My theme is a customised Moodle theme
| |
| based on the Moodle 2.2 Afterburner theme by Mary Evans.';
| |
| </code>
| |
| | |
| 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...
| |
| | |
| <code php>
| |
| /**
| |
| * 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)
| |
| </code>
| |
| 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...
| |
| | |
| <code php>
| |
| $THEME->parents = array('afterburner', 'base');
| |
| </code>
| |
| | |
| 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...
| |
| | |
| <code php>
| |
| $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'
| |
| );
| |
| </code>
| |
| | |
| but leave afterburner_settings.css which you could just rename to settings.css.
| |
| | |
| <code php>
| |
| $THEME->sheets = array('settings');
| |
| </code>
| |
| | |
| 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, [http://moodle.org/mod/forum/view.php?id=46] where you will find lots of help with your new theme project.
| |
