A basic boilerplate child theme, inherits Moodle's "Clean" standard theme.
bootstrapbase
|_ clean
|_<my_theme>
This is a very similar approach to cloning a theme however it leaves the "clean" theme code untouched and inherits from it as a child theme. This makes it easier to keep up with upgrades of both bootstrapbase
and clean
- Moodle Docs: https://docs.moodle.org/dev/Cloning_a_theme
Beta! Work in progress...
- Clean Theme: https://docs.moodle.org/dev/Clean_theme
- Moodle >= 2.5
- clean theme >= 2015100100
This basic walkthrough aims to users with some php experience but who are new to Moodle.
First you have to decide on a short name for your new Moodle Theme., i.e. mytheme
- clone or download this repository in to the Moodle theme folder
/<root_moodle/docs_moodle/theme
- Rename the newly created folder to your shortname (i.e.
/<root_moodle/docs_moodle/theme/mytheme
)
Some neccessary adjustments in the the config.php
:
- set
$THEME->name
to your sexact short name (i.e$THEME->name = 'mytheme';
) $THEME->sheets = array('custom','cleanchild')
$THEME->sheets
defines the stylesheets loaded by your theme. The second entry refers to an empty css filestyle/cleanchild.css'
wich you can use for your custom styles. Alternatively rename both the css file and the array entry. Add any stylesheet you want by locating them into thestyle
folder and appending them to the array. (rule: filename without extension) Leave theclean
entry as the first element in this array to ensure a proper queuing of the loaded css files.$THEME->javascript = array()
: Include javascript files wich are to be loaded into the html ''. For instance you want to include jQuery. See above for rules$THEME->javascripts_footer = array('cleanchild');
: Footer Javascripts. An empty script is already loaded. See above for rules. Theconfig.php
offers a lot more options who are not covered here.
Moodle Docs: https://docs.moodle.org/dev/Theme_config_file
- open
version.php
- set
$plugin->component
to 'theme_', (i.e. $plugin->component = 'theme_mytheme');
Moodle Docs: https://docs.moodle.org/dev/version.php
- browse to the
lang/en
folder. Rename thetheme_cleanchild.php
totheme_<my-short-name>.php
(i.e.theme_mytheme.php
) - open the file and edit
$string['pluginname']
and$string['choosereadme']
. You can use markup in the latter.
Moodle Docs: https://docs.moodle.org/dev/String_API#Adding_language_file_to_plugin
- Login into Moodle with your Site administrator account
- Browse to Site Adminstration > Notifications: your theme should be listed there as to be installed
- Install:)
Example include
<?php
// common header for layout files
require_once(dirname(__FILE__).'/inc/common-header.php');
?>
Example custom file, however you should rather use the config.php
for loading scripts and styles
<link rel="stylesheet" href="<?php echo $CFG->wwwroot;?>/theme/cleanchild/my-extra.css" type="text/css" media="screen" />
Example logo
<img src="<?php echo $OUTPUT->pix_url('logo', 'theme'); ?>" />
Is frontpage or login page:
<?php
if ($PAGE->pagelayout == 'frontpage' || $PAGE->pagelayout == 'login') {
return true;
}
?>
Add custom body class (layout file name)
<body <?php echo $OUTPUT->body_attributes(array('layout-'.basename(__FILE__, '.php'))); ?>>
- Style guide: https://docs.moodle.org/dev/JavaScript_guidelines
- Wrtiting JS modules: https://docs.moodle.org/dev/Javascript_Modules
- GNU GPL v3 or later, inherited from Clean/Moodle