moodle 2 theme masterclass

Facilitating Education www.pukunui.com / [email protected]: 1300 466 635 or +61 8 9328 4545

themes edition

themes edition

http://www.pukunui.com


mailto:[email protected]



themes edition

What is a Theme?Unit 1: Getting Started






themes edition

H E L L Omy name is

Julian Ridden






themes edition

H E L L Omy name is






themes edition

Theme History






themes edition

Perth - Sydney - Melbourne - Hong Kong - Beijing - Kuala Lumpur






themes edition

Unit: Setting the Scene

Why have Themes?






Why have Themes?

themes edition

many ask the wrong question

after somedeep thought....






Why have Themes?

❖ Meet brand requirements

❖ Match an existing site

❖ Present a more engaging design for your particular audience

❖ Establish a unique look and feel for your site. be a Stand out!

themes edition






themes edition

The room you’re in matters!






themes edition






themes edition

moodle

{ }All sites need to look the same






themes edition

What is your ’s purpose?






themes edition

Built as a Portal






themes edition

Built for Ease of use






themes edition

Built as a Website






❖ Blocks can go anywhere

❖ Many options set by developer who created the theme

❖ Easy to add dropdown menu’s

❖ No code needed to personalise site

Highly Customisable






themes edition

All sites need to look the same

moodle

{ }BUSTED






themes edition

Day One Agenda

❖ Getting Started

❖ What is a Theme?

❖ Tools we need

❖ Setting up Moodle locally

❖ Duplicating a theme

❖ Theme Construction

❖ How Themes are structured

❖ Working with CSS

❖ Building Layouts

❖ Advanced Themeing

❖ Custom Settings Screen

❖ Custom Renderers

Our workshop highlights






themes edition

❖ What is a moodle Theme?

❖ Moodle theme settings

❖ Tools we need

❖ Setting up Moodle locally

❖ Duplicating a theme

In this session we will cover

Getting Started






themes edition

moodle theme settingsUnit 2: Theme Design






themes edition

Theme Settings

❖ Theme list

❖ Theme designer mode

❖ Allow User / Course / Category Themes

❖ Allow users to hide blocks

❖ Allow users to use Dock

❖ Custom Menu Items

❖ Device Detection

Theme Selector

The theme selector allows you to apply a selected theme

at a site level.

Moodle Administration Settings

Setting theme ordersThere is a new setting you can put in your sites config.php

$CFG->themeorder = array('page', 'course', 'category', 'session', 'user', 'site');

Set how you want themes displayed

Best Practice TipsYou don’t have to drill down through the Administration to hunt down theme settings. Just type in ‘theme’ into the admin search field to see the available options.






themes edition

Tools we need to build themes

Unit 1: Getting Started






themes edition

❖ There is no Moodle ‘theme dev development’ tool

❖ Building in Dreamweaver is extremely difficult. I usually edit using a

text editing tool.

❖ Easiest to deploy a moodle on your machine and edit this directly.

See changes instantly as you make them

❖ When finished local build, then upload to your server

Build locally, deploy globally






themes edition

Build locally, deploy globally






themes edition

❖ Google Chrome with Developer Tools

CSS Interrogation Tools






themes edition






themes edition

HANDS ON DEMONSTRATION






themes edition

Text and CSS Editors






themes edition

Text and CSS Editors

Text Wranglerhttp://www.barebones.com

Sublime 2http://www.sublimetext.com/

Notepad ++http://notepad-plus-plus.org

Espressohttp://macrabbit.com

Simple CSShttp://www.hostm.com/css

MY FAV





http://www.barebones.com

http://www.barebones.com

http://www.sublimetext.com

http://www.sublimetext.com

http://notepad-plus-plus.org

http://notepad-plus-plus.org

http://www.hostm.com/css

http://www.hostm.com/css


themes edition

❖ Download the version for YOUR OS from

http://download.moodle.org

Run moodle on your computer






themes edition






themes edition

Setting up a local .Unit 1: Getting Started






themes edition

HANDS ON DEMONSTRATION






themes edition

Duplicating a themeUnit 1: Getting Started






themes edition

❖ Small Scale changes

❖ Create a new theme using standard sheets

❖ Large Scale changes

❖ Start with a theme that is similar to your need

❖ Just duplicate it’s folder and rename to use

Don’t re-invent the wheel Themes are very time consuming to build from scratch Best Practice Tips

When creating/editing themes be sure to enable the “Theme Developer Mode” in Admin settings. Otherwise the caching will drive you insane!






themes edition

Duplicating a moodle theme1. Duplicate the folder of the theme you wish to copy and rename

(for this example ‘sky_high’ is becoming ‘my theme’)

2. Rename the language file (/lang/en/theme_sky_high)

3. Open your renamed lang file in an editor and change the

‘pluginname’ to your new one

4. If the theme contains a lib.php, renderer.php or settings.php each

of these files will need to be opened and using “find and replace”

find all references to the old name and change to the new.

Important Note

The GPL license allows you to clone and change themes. However you must leave all credits to the original author intact in the files within it.






themes edition

❖ How themes are structured

❖ Configure your theme

❖ Working with CSS

❖ Building Page Layouts


Theme Construction






themes edition

Planning is important!






themes edition

How themesare structured

Unit 2: Theme Design






themes edition

Themes are always stored in the ‘themes’ folder in your moodle directory

Files in a “typical” theme

Directory File Description

config.php Contains all of the configuration and definitions for each theme

lib.php Contains speciality classes and functions that are used by theme

renderers.php Contains any custom renderers for the theme

settings.php Contains custom theme settings.

/javascript All specialty JavaScript files the theme requires should be located in here.

/lang Any special language files the theme requires should be located in here

/layout Contains the layout files for the theme

/pix Contains any images the theme makes use of either in CSS or in the layout files

/pix The favicon to display for this theme

/pix A screenshot of the theme to be displayed in on the theme selection screen

/style Default location for CSS files

*.css CSS files the theme requires






themes edition

Configure your themeUnit 2: Theme Design






themes edition

This file contains a few configuration variables that control

how Moodle uses this theme.

Theme Settings

❖ $THEME->name

❖ $THEME->parents

❖ $THEME->sheets

❖ $THEME->layouts

❖ $THEME->enable_dock

❖ $THEME->renderfactory

PHP Files | config.php

Want more controlThis is just a list of the core options used in most themes. Dozens more are available and can be viewed in the Moodle Docs:

http://docs.moodle.org/dev/Themes_2.0










themes edition

Definition

Very simply this tells Moodle the name of your theme, and if

you ever have several config.php files open this will help you

identify which one you are looking at

Demonstration

$THEME->name = 'excitement';


$THEME->name Best Practice Tips

While you can call your stylesheets anything you like, or even just have one, the listed example is considered ‘best practice’ to make the theme easier to edit if passed around the community.






themes edition

Definition

A theme can extend any number of themes. Rather than creating an entirely new theme

and copying all of the CSS, you can simply create a new theme, extend the theme you like

and just add the changes you want to your theme. Also worth noting is the purpose of the

base theme: it provides us with a basic layout and just enough CSS to make everything fall

into place.

Demonstration

$THEME->parents = array('canvas','base',);


$THEME->parents






themes edition

Definition

This variable allows the developer to define what stylesheets (css)

they wish to use in this theme. While it is entirely up to you as to

how you create and organise your CSS, please note that within the

themes provided in the standard install by Moodle there is a very

clear organisation of CSS. Moodle now has to main css files built

into all core themes.

Demonstration

$THEME->sheets = array('core','pagelayout',);


$THEME->sheetsname Lots of Changes

For those who are familiar with Moodle 1.9 theme's, this organisation will be a big change. In 1.9, CSS was organised by its nature (for example: colours, layout, other)






themes edition

The ‘pagelout.css’ file

This contains the CSS required to give the layouts their look and

feel. It doesn't contain any rules that affect the content generated

by Moodle

The ‘core.css’ file

This contains all manner of general (usually simple) rules that don't relate to a specific section

of Moodle but to Moodle as a whole.


$THEME->sheetsname

...continued

Lots of Changes







themes edition

Definition

As the name may suggest, ‘layouts‘ determine how a page is structured or ‘laid out’. There

is one for every general type of page. Most developers don’t create custom layouts as they,

like CSS, extend from the base and they instead use CSS for their changes.

Demonstration

mydashboard' => array('file' => 'standard.php','regions' => array('side-pre', 'side-

post'),'defaultregion' => 'side-post','options' => array('langmenu'=>true),);


$THEME->layouts






themes edition

For each layout you can set:

file - This is the name of the layout file we want to use, it should always be located in the above themes

layout directory.

regions - This is an array of block regions that the theme has. Each entry in here can be used to put

blocks in.

defaultregion - If a layout has regions it should have a default region, this is where blocks get put when

first added.

options - These are special settings, anything that gets put into the options array is available later on when

we are writing our layout file.


$THEME->layouts

...continued






themes edition

Definition

This really is as simple as it looks. This allows the developer to state if this theme will utilise

Moodle’s new Dock function or not.

Demonstration

$THEME->enable_dock = true;


$THEME->enable_dock






themes edition

Definition

The final setting is to include a JavaScript file. Much like

stylesheets, you only need to provide the files name.

Moodle will assume it is in your themes JavaScript directory

and be a .js file.

Demonstration

$THEME->javascripts = array('jquery');


$THEME->javascripts Important Note

Javascript files need to be stored in a directory in your theme folder called /javascript






themes edition

The ‘pagelout.css’ file

This contains the CSS required to give the layouts their look and

feel. It doesn't contain any rules that affect the content generated

by Moodle

The ‘core.css’ file

This contains all manner of general (usually simple) rules that don't relate to a specific section

of Moodle but to Moodle as a whole.


$THEME->sheetsname

...continued

Lots of Changes







themes edition

Definition

This variable tells Moodle that for this theme we want to use the

theme_overridden_renderer_factory, a special class tells Moodle

to look for renderers first within the theme and then in all of the other default locations.

Renderers will allow developers to override how moodle renders its predefined functions

allowing for truly unlimited design possibilities.

Demonstration

$THEME->rendererfactory = 'theme_overridden_renderer_factory';


$THEME->renderfactory Additional InfoFor more information on this function please visit - http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer






themes edition

Working with CSSUnit 2: Theme Design






themes edition

You will often find yourself wishing to utilise images in your CSS.

Never put a full or relative path as these will break depending on

which page is pulling in the css. Instead we use a custom Moodle

tag.

Images are stored in a folder called “pix” in your theme directory

Demonstration

background: url([[pix:theme|mbar]]) repeat-y;

CSS Files | Images

Additional InfoImportant Note

When referencing an image you do not add the filetype. Moodle is smart enough to figure that part out itself

[[pix:theme|yuiarrows]]





themes edition

You will often find yourself wishing to utilise images in your CSS.

Never put a full or relative path as these will break depending on

which page is pulling in the css. Instead we use a custom Moodle

tag.

Images are stored in a folder called “pix” in your theme directory

Demonstration

background: url([[pix:theme|mbar]]) repeat-y;

CSS Files | Overriding Moodle Images

Additional InfoImportant Note

When referencing an image you do not add the filetype. Moodle is smart enough to figure that part out itself





themes edition

Building page layoutsUnit 2: Theme Design






themes edition

There are many custom Layouts available to developers who wish

to take advantage of them.

All themes are required to define the layouts they wish

to be responsible for as well as create; however, many

layout files are required by those layouts.

The Layout Files

Available Standard LayoutsAvailable Standard LayoutsAvailable Standard Layouts

general popup course

base frametop incourse

standard maintenance print

coursecategory login mypublic

frontpage mydashboard admin

Useful Information

If the theme is overriding another theme then it is a case of deciding which layouts this new theme should override.

If the theme is a completely fresh start then you will need to define a layout for each of the different possibilities.





themes edition

A layout file is a file that contains the core HTML

structure for a layout including the header, footer,

content and block regions.

It is not all HTML, there are bits of HTML and content that

Moodle needs to put into the page, within each layout

file this will be done by a couple of simple PHP calls to

get bits and pieces including content.

The Layout Files

<?php echo $OUTPUT->doctype() ?><html <?php echo $OUTPUT->htmlattributes() ?>><head> <title><?php echo $PAGE->title ?></title> <?php echo $OUTPUT->standard_head_html() ?></head><body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses) ?>"><?php echo $OUTPUT->standard_top_of_body_html() ?><table id="page"> <tr> <td colspan="3"> <h1 class="headermain"><?php echo $PAGE->heading ?></h1> <div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?></div> </td> </tr> <tr> <td> <?php echo $OUTPUT->blocks_for_region('side-pre') ?> </td> <td> <?php echo core_renderer::MAIN_CONTENT_TOKEN ?> </td> <td> <?php echo $OUTPUT->blocks_for_region('side-post') ?> </td> </tr> <tr> <td colspan="3"> <p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p> <?php echo $OUTPUT->login_info(); echo $OUTPUT->home_link(); echo $OUTPUT->standard_footer_html(); ?> </td> </tr></table><?php echo $OUTPUT->standard_end_of_body_html() ?></body></html>






themes edition

This file contains a few php tags that control how Moodle outputs elements of this theme.

IMPORTANT PHP Tags

❖ echo $CFG->wwwroot

❖ echo $OUTPUT->pix_url('', '')

❖ echo print_string('', '')

The Layout Files | PHP Tags






themes edition

Definition

This is used whenever you wish your theme to link to a file within Moodle. It will dynamically

generate the full Moodle url pulled from the site’s config.php file

Demonstration

<a class="logo" href="<?php echo $CFG->wwwroot; ?>" title="Home"></a>


echo $CFG->wwwroot






themes edition

Definition

This tag is used when wishing to load an image from your theme

via html in the theme. The first variable is the filename (without

type) and path within the theme’s pix directory. The second variable tells moodle that it is based

within this theme.

Demonstration

<?php echo $OUTPUT->pix_url('favicon', 'theme')?>


echo $OUTPUT->pix_url('', '') Best Practice TipWhere possible it is always best to display images via css. This is better for performance as Moodle will cache these






themes edition

Definition

This is used to display custom language strings for your thee to

display. Especially important should you wish your theme to be

multilingual

Demonstration

<?php print_string('findcourse', 'theme_moodlemoot'); ?>


echo $OUTPUT->pix_url('favicon', 'theme') Best Practice TipAll text displayed in a theme should be stored as a language string.






themes edition


Common PHP Tags

❖ <?php echo $OUTPUT->doctype() ?>

❖ <html <?php echo $OUTPUT->htmlattributes() ?>>

❖ <?php echo $PAGE->title ?>

❖ <?php echo $OUTPUT->standard_head_html() ?>

❖ <?php p($PAGE->bodyid); ?> and <?php p($PAGE->bodyclasses); ?>

❖ <?php echo $PAGE->heading; ?>

❖ <?php echo $OUTPUT->login_info(); ?>

❖ <?php echo $PAGE->headingmenu; ?>







themes edition


Common PHP Tags

❖ <?php echo $OUTPUT->blocks_for_region('side-pre') ?> and <?php echo $OUTPUT-

>blocks_for_region('side-post') ?>

❖ echo $OUTPUT->main_content()

❖ echo $OUTPUT->login_info();

❖ echo $OUTPUT->home_link();

❖ echo $OUTPUT->standard_footer_html();

❖ echo $SITE->summary


...continued






themes edition

Definition

This occurs at the VERY top of the page, it must be the first bit of output and is responsible

for adding the (X)HTML document type definition to the page. This of course is determined

by the settings of the site and is one of the things that the theme designer has no control

over.

Demonstration

<?php echo $OUTPUT->doctype() ?>


<?php echo $OUTPUT->doctype() ?>






themes edition

Definition

This must be placed in the opening html tag and will generate the HTML attributes that

should be applied to it. This again is determined by several settings within the actual HTML

install.

Demonstration

<html <?php echo $OUTPUT->htmlattributes() ?>>


<?php echo $OUTPUT->htmlattributes() ?>






themes edition

Definition

This generates the title of the page.

Demonstration

<title> <?php echo $PAGE->title ?> </title>


<?php echo $PAGE->title ?>






themes edition

Definition

This generates the description of either the site on the forntpage or the course description

on a course page. This variant will also strip out HTML tags from the description to ensure it

does not break code surrounding it.

Demonstration

<meta name="description" content="<?php p(strip_tags(format_text($SITE->summary,

FORMAT_HTML))) ?>" />


<?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?>






themes edition

Definition

This very important call gets us the standard head HTML that needs to be within the HEAD

tag of the page. This is where CSS and JavaScript requirements for the top of the page will

be output as well as any special script or style tags.

Demonstration

<html <?php echo $OUTPUT->htmlattributes() ?>>


<?php echo $OUTPUT->standard_head_html() ?>






themes edition

Definition

These two calls should be placed within your <body> tag and will ask Moodle to generate

the desired ID and classes that should be applied to it.

Demonstration

<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>">


<?php p($PAGE->bodyid); ?>

<?php p($PAGE->bodyclasses); ?>






themes edition

Definition

This generates the heading (or title if you prefer) of the page.

Demonstration

<h1 class="headermain"><?php echo $PAGE->heading; ?></h1>


<?php echo $PAGE->heading; ?>






themes edition

Definition

This generates the standard dropdown header menu

Demonstration

<div class="headermenu">

<?php echo $PAGE->headingmenu ?>

</div>


<?php echo $PAGE->headingmenu; ?>






themes edition

Definition

If your theme wished to use the new custom dropdown menu function added in Moodle 2

then this call tells moodle where to place it.

Demonstration

<?php if ($hascustommenu) { ?>

<div id="custommenu"><?php echo $custommenu; ?></div>

<?php } ?>


<?php echo $PAGE->custommenu; ?>






themes edition

Definition

This generates the breadcrumb navigation

Demonstration

<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>


<?php echo $OUTPUT->navbar(); ?>






themes edition

Definition

This generates the “Turn editing on” button

Demonstration

<div class="navbutton"> <?php echo $PAGE->button; ?></div>


<?php echo $PAGE->button; ?>






themes edition

Definition

This tells moodle where to place the blocks. Pre and Post are two Moodle defined locations

(referred to as areas). Pre is typically the left column and post the right.

Demonstration

<div class="region-content">

<?php echo $OUTPUT->blocks_for_region('side-pre') ?>

</div>


<?php echo $OUTPUT->blocks_for_region('side-pre') ?>

<?php echo $OUTPUT->blocks_for_region('side-post') ?>






themes edition

Definition

This is one of the most important calls within the file, it tells Moodle where to generate the

actual content of the page

Demonstration

<div class="region-content">

<?php echo $OUTPUT->main_content() ?>

</div>


<?php echo $OUTPUT->main_content() ?>






themes edition

Definition

This generates the link that ether allows the user to log in, or tells them that they are logged

in and provides a link to their profile screen

Demonstration

<?php echo $OUTPUT->login_info(); ?>


echo $OUTPUT->login_info();






themes edition

Definition

This generates a link pointing back to your own Moodle’s homepage (otherwise known as

frontpage)

Demonstration

<?php echo $OUTPUT->home_link(); ?>


echo $OUTPUT->home_link();






themes edition

Definition

This generates a link pointing to the relevant help page on docs.moodle.org

Demonstration

<p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>


echo page_doc_link(get_string('moodledocslink'))






themes edition

Definition

This generates the standard footer HTML which like the

standard head HTML contains all of the script and style tags

required by the page and requested to go in the footer

Demonstration

<?php echo $OUTPUT->standard_footer_html(); ?>


echo $OUTPUT->standard_footer_html(); Nice to know

Within Moodle 2.0 most of the JavaScript for the page will be included in the footer. This greatly helps reduce the loading time of the page






themes edition

Definition

This generates the standard footer HTML which like the standard

head HTML contains all of the script and style tags required by the

page and requested to go in the footer

Demonstration

<?php echo strip_tags(format_text($SITE->summary, FORMAT_HTML)) ?>

The Layout Files | Little Known Tags

<?php echo $SITE->summary ?> Best Practice TipIt is often best when using this tag to strip out additional HTML that may have been added by the user

<?php echo strip_tags(format_text($SITE->summary, FORMAT_HTML)) ?>






themes edition

Definition

This conditional detects if there are breadcrumbs to show. If not, it can then display

something else of your choosing.

Demonstration

<?php if ($hasnavbar) { ?>

<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>

<?php } ?>

The Layout Files | Useful Conditionals

<?php if ($hasnavbar) { ?>






themes edition

Definition

This conditional detects if the user is yet logged in and allows for content to be displayed

accordingly.

Demonstration

if (isloggedin()) { echo ''.$OUTPUT->user_picture($USER, array('size'=>55)).''; echo $OUTPUT->login_info();}else {?>

The Layout Files | Useful Conditionals

if (isloggedin()){






themes edition

One of the best new features of Moodle 2 is the ability to move beyond “standard”

limitations. For instance, in the past blocks could only be placed in the left and right columns.

Now blocks can be placed in any location that the developer wishes to utilise

Steps required to setup custom block locations

❖ Specify new location names in theme config

❖ Add new names in lang file

❖ Define new variable at top of layout file

❖ Insert new region where-ever you like in your layout.

The Layout Files | Creating Custom block locations






themes edition

❖ Advanced Theme Design

❖ Custom Settings Screen

❖ Custom Renderers

❖ Plating up a perfect dish

❖ The HTML and Main Menu Blocks

❖ Clever use of Labels

Day Two AgendaOur cooking highlights






themes edition

❖ Create a settings screen

❖ Creating custom theme renderes


Advanced theme design






themes edition

Create a custom settings screen

Unit 3: Advanced Theme Design






themes edition

This is an optional component of theme development. When

used in conjunction with lib.php it allows the developer to create

a custom Settings page in Moodle administration to allow users

to override preset variables such as colors, widths, etc.

Implementation

To implement settings we will first need to

❖ create a settings screen

❖ create a supporting library function

❖ implement the settings via css and layout changes

PHP Files | Settings

Additional InfoFor more information on this function please visit - http://docs.moodle.org/dev/Themes_2.0_adding_a_settings_page




http://docs.moodle.org/dev/Themes_2.0_adding_a_settings_page









themes edition

When we are creating a settings screen we are effectively creating an online form which

admins can use to change elements that we have specified. The form consists of various

fields defined by the developer. To specify a new field we use following 6 elements.

Theme Settings

❖ $name

❖ $title

❖ $description

❖ $default

❖ $setting

❖ $settings

PHP Files | settings.php





themes edition

Definition

What is the name of this particular setting. This will be how it is stored in Moodle’s DB

Demonstration

$name = 'theme_mydemotheme/sitename';

PHP Files | settings.php | Form elements

$name






themes edition

Definition

This is the title that is shown to the user. It should be short but obvious. Instead of typing in

the title here directly we will instead pull it from our lang file.

Demonstration

$title = get_string('sitename','theme_mydemotheme');


$title






themes edition

Definition

As the name suggests, this is a more detailed description of what this theme setting will

accomplish. Instructions can also be given here. Instead of typing in the title here directly we

will instead pull it from our lang file.

Demonstration

$description = get_string('sitenamedesc', 'theme_mydemotheme');


$description






themes edition

Definition

Does this particular field have a default value. If so you can define it here.

Demonstration

$default = 'Welcome to my site';


$default






themes edition

Definition

Does this particular field have a default value. If so you can define it here.

Demonstration

$setting = new admin_setting_configtext($name, $title, $description, $default);


$default






themes edition

Definition

This defines the entire input by combining the previous elements and specifying one of a

variety of form input types based on the need.

Demonstration

$setting = new admin_setting_configcolourpicker($name, $title, $description, $default,

$previewconfig);


$setting

Text Field admin_setting_configtextText Box admin_setting_configtextarea

HTML Editor admin_setting_confightmleditorRadio Button admin_setting_configselectColor Picker admin_setting_configcolourpicker






themes edition

Definition

Don’t forget this as it is the most important element. This is essentially a close that tells

moodle that this form element is complete and can now be added to the form


$settings->add($setting);






themes edition

<?php

defined('MOODLE_INTERNAL') || die;

if ($ADMIN->fulltree) {

// Footer text or link$name = 'theme_rocket/footnote';$title = get_string('footnote','theme_mydemotheme');$description = get_string('footnotedesc', 'theme_mydemotheme');$default = '';$setting = new admin_setting_confightmleditor($name, $title, $description, $default);$settings->add($setting);

// Custom CSS file$name = 'theme_mydemotheme/customcss';$title = get_string('customcss','theme_mydemotheme');$description = get_string('customcssdesc', 'theme_mydemotheme');$setting = new admin_setting_configtextarea($name, $title, $description, '');$settings->add($setting);

}

PHP Files | settings.php | Sample Completed form






themes edition

The lib.php file is a location where any custom function needed by the theme is stored.

Again, what can be done here is limited by the imagination of the developer. But there is one

function that most developers will need to define. This is the process_css function.

The process_css function takes settings we created that were going to be rendered into our

css files. This will allow us to define them as variables that Moodle will recognise

PHP Files | lib.php






themes edition

function rocket_process_css($css, $theme) { // Set the theme background and highlites if (!empty($theme->settings->themecolor)) { $themecolor = $theme->settings->themecolor; } else { $themecolor = null; } $css = rocket_set_themecolor($css, $themecolor); return $css;}

function rocket_set_themecolor($css, $themecolor) { $tag = '[[setting:themecolor]]'; $replacement = $themecolor; if (is_null($replacement)) { $replacement = '#5faff2'; } $css = str_replace($tag, $replacement, $css); return $css;}

PHP Files | lib.php






themes edition

Creating custom theme renderers

Unit 3: Advanced Theme Design






themes edition

Additional InfoFor more information on this function please visit - http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer

Definition

This file contains override renderers used by theme. As this leads

into advanced theme development we will not be going in-depth

into lib.php in this presentation.

Demonstration

Look at advanced themes on moodle.org such as ‘Moodlebook’ and ‘Rocket’ to see

examples of themes starting to use the renderers.php file.

PHP Files | renderers.php





themes edition

Definition

This file contains speciality classes and functions that are used by theme. As this leads into

advanced theme developement we will not be going indepth into lib.php in this presentation.

Demonstration

function mytheme_set_customcss($css, $customcss) { $tag = '[[setting:customcss]]'; $replacement = $customcss; if (is_null($replacement)) { $replacement = ''; } $css = str_replace($tag, $replacement, $css); return $css;}

PHP Files | lib.php


