Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Creating a theme based on boost: Difference between revisions

From MoodleDocs
Line 85: Line 85:


(Image file not shown).
(Image file not shown).
Themes require a lib.php file. This file contains callbacks used by various API's in Moodle. Initially this file can be empty, but as we add features to our theme we will need to add some functions here.
'lib.php'


== Theme inheritance ==
== Theme inheritance ==

Revision as of 02:45, 28 November 2016

Moodle 3.2


This is a tutorial for how to create a new theme in Moodle 3.2.

Moodle 3.2 includes a new core theme named "Boost" which is a great starting point for themers wanting to build a modern Moodle theme utilising all the latest features available to themes in Moodle.

Getting started

What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

Choosing a name

Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.

Lets call our new example theme "photo" as we will add some settings to allow "photos" in various places in Moodle.

Starting files

As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.

Following this guide we can start creating our theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

/theme/photo/

Now we need to add some standard plugin files to our theme. First is version.php

/theme/photo/version.php

<?php // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly. defined('MOODLE_INTERNAL') || die();

// This is the version of the plugin. $plugin->version = '2016102100';

// This is the version of Moodle this plugin requires. $plugin->requires = '2016070700';

// This is the component name of the plugin - it always starts with 'theme_' // for themes and should be the same as the name of the folder. $plugin->component = 'theme_photo';

// This is a list of plugins, this plugin depends on (and their versions). $plugin->dependencies = [

   'theme_boost' => '2016102100'                                                                                                   

];

We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.

/theme/photo/lang/en/theme_photo.php

<?php // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly. defined('MOODLE_INTERNAL') || die();

// A description shown in the admin theme selector. $string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.'; // The name of our plugin. $string['pluginname'] = 'Photo'; // We need to include a lang string for each block region. $string['region-side-pre'] = 'Right';

Theme specific files

Theme plugins have a few more standard files they need to define.

Themes require a favicon file to show in the address bar. See [Favicon].

pix/favicon.ico

(Image file not shown).

Themes also require an example screenshot to be displayed in the theme selector.

pix/screenshot.jpg

(Image file not shown).

Themes require a lib.php file. This file contains callbacks used by various API's in Moodle. Initially this file can be empty, but as we add features to our theme we will need to add some functions here.

'lib.php'

Theme inheritance

Unlike other plugin types in Moodle - themes can use inheritance to reuse the styles and features of another theme - and make additional changes on top. It is a good idea when building a theme, to inherit from one of the core themes in Moodle. Moodle HQ maintains these themes and they receive constant updates for bug fixes and new features so inheriting from one of these themes allows your theme to receive the same fixes. Boost in Moodle 3.2 has been designed as a great theme to build new themes on because:

  • It uses the latest features available to themes including SCSS compiler, automated vendor prefixing, Bootstrap 4 CSS framework, mustache templates.
  • It uses minimal styling on top of the CSS framework so there is less CSS to override if you want to change the look of something.
  • It has support for presets which use SCSS variables to make big changes to the appearance of the theme.
  • It provides new modern ways to navigate in Moodle.

To inherit from a theme you must list the parent theme in your themes configuration file.