Clean theme: Difference between revisions
Helen Foster (talk | contribs) m (Reverted edits by Ibrahim62 (talk) to last revision by Mary Evans 2) |
|||
| Line 28: | Line 28: | ||
==Renaming Elements== | ==Renaming Elements== | ||
The problem when '''cloning''' a theme is that you need to rename all those instances where the old theme name occurs, in this case ''' | The problem when '''cloning''' a theme is that you need to rename all those instances where the old theme name occurs, in this case '''clean'''. So using the above list as a guide, search through and change all the instances of the theme name 'clean' to 'cleantheme'. This includes the filename of the lang/en/theme_clean.php. You need to change this to 'theme_cleantheme.php'. | ||
==Installing your theme== | ==Installing your theme== | ||
| Line 36: | Line 36: | ||
Once your theme is successfully installed you can select it and begin to modify it using the custom settings page found by navigating to Administration > Site Administration > Appearance > Themes >> and then click on (Cleantheme) or whatever you renamed your theme to, from the list of theme names that appear at this point in the side block. | Once your theme is successfully installed you can select it and begin to modify it using the custom settings page found by navigating to Administration > Site Administration > Appearance > Themes >> and then click on (Cleantheme) or whatever you renamed your theme to, from the list of theme names that appear at this point in the side block. | ||
==Include a renderer in a bootstrap based theme== | ==Include a renderer in a bootstrap based theme== | ||
If you need to override any renderers in your theme, then make sure you override the renderers by extending the parent theme renderers, which in this case is bootstrapbase. For example the class that you need to start your renderer with is as follows... | If you need to override any renderers in your theme, then make sure you override the renderers by extending the parent theme renderers, which in this case is bootstrapbase. For example the class that you need to start your renderer with is as follows... | ||
<code php> | <code php> | ||
class | class theme_yourtheme_core_renderer extends theme_bootstrapbase_core_renderer { | ||
} | } | ||
</code> | </code> | ||
...where '''' | ...where ''''yourtheme'''' requires you to change it to your theme name otherwise it will not work. | ||
(Please note: The normal recipe <tt>class theme_''' | (Please note: The normal recipe <tt>class theme_'''yourtheme'''_core_renderer extends core_renderer</tt> is wrong for themes whose parent theme uses renderers, because this method will ultimately conflict with the parent theme's renderers.) | ||
==See also== | ==See also== | ||
Revision as of 14:01, 10 February 2014
Moodle 2.5 This document describes how to copy and customise the Clean (bootstrapbase) 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.5, 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.3.x and 2.4.x, and 2.5.x it is important to understand that this tutorial is only valid for the Moodle 2.5+ Clean theme.
Getting started
From your Moodle theme directory right click on the clean theme and then copy and paste back into your Moodle theme directory. You should now have a folder called Copy of clean. If you right click this folder you are given the option to Rename it. So rename this folder to your choosen theme name, using only lower case letters, and if needed, underscores. For the purpose of this tutorial we will call the theme 'cleantheme'.
On opening 'cleantheme' you will find several files and sub-directories which have files within them.
These are:
- config.php
- Where all the theme configurations are made. (contains some elements that require renaming)
- lib.php
- Where all the functions for the themes settings are found. (contains some elements that require renaming)
- settings.php
- Where all the setting for this theme are created. (contains some elements that require renaming)
- version.php
- Where the version number and plugin componant information is kept. (contains some elements that require renaming)
- /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_clean.php
- This file contains all the language strings for your theme. (contains some elements that require renaming as well as the filename itself)
- /layout/
- This directory contains all the layout files for this theme.
- /layout/columns1.php
- Layout file for a one column layout (content only).
- /layout/columns2.php
- Layout file for a two column layout (side-pre and content).
- /layout/columns3.php
- Layout file for a three column layout (side-pre, content and side-post) and the front page.
- /layout/embedded.php
- Embedded layout file for embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
- /layout/maintenance.php
- Maintenance layout file which does not have any blocks, links, or API calls that would lead to database or cache interaction.
- /layout/secure.php
- Secure layout file for safebrowser and securewindow.
- /style/
- This directory contains all the CSS files for this theme.
- /style/custom.css
- This is where all the settings CSS is generated.
- /pix/
- This directory contains a screen shot of this theme as well as a favicon and any images used in the theme.
Renaming Elements
The problem when cloning a theme is that you need to rename all those instances where the old theme name occurs, in this case clean. So using the above list as a guide, search through and change all the instances of the theme name 'clean' to 'cleantheme'. This includes the filename of the lang/en/theme_clean.php. You need to change this to 'theme_cleantheme.php'.
Installing your theme
Once all the changes to the name have been made, you can safely install the theme. If you are already logged in just refreshing the browser should trigger your Moodle site to begin the install 'Plugins Check'. If not then navigate to Administration > Notifications.
Once your theme is successfully installed you can select it and begin to modify it using the custom settings page found by navigating to Administration > Site Administration > Appearance > Themes >> and then click on (Cleantheme) or whatever you renamed your theme to, from the list of theme names that appear at this point in the side block.
Include a renderer in a bootstrap based theme
If you need to override any renderers in your theme, then make sure you override the renderers by extending the parent theme renderers, which in this case is bootstrapbase. For example the class that you need to start your renderer with is as follows...
class theme_yourtheme_core_renderer extends theme_bootstrapbase_core_renderer {
}
...where 'yourtheme' requires you to change it to your theme name otherwise it will not work.
(Please note: The normal recipe class theme_yourtheme_core_renderer extends core_renderer is wrong for themes whose parent theme uses renderers, because this method will ultimately conflict with the parent theme's renderers.)
See also
- Moodle 2.5 and the Bootstrap based theme – Clean blog post by Gavin Henrick
- Building With Bootstrap blog post by Bas Brands
