Moodle Bootstrap Theme Masterclass 2014

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

themes edition

themes edition


This is the cool subheading!

What is a Title?

H E L L Omy name is

Julian Ridden

themes edition



What is a Title?

H E L L Omy name is

themes edition


My Theme History

themes edition


My Theme History

themes edition


themes edition


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

themes edition


Day One Agenda

❖ Getting Started

❖ What is a Theme?

❖ What is Bootstrap?

❖ Tools we need

❖ Setting up Moodle locally

!

❖ Lesson One

❖ Cloning a theme

❖ Lesson Two

❖ Styling a theme with CSS

❖ Lesson Three

❖ Editing a Layout File

❖ Lesson Four

❖ Creating a Layout File

❖ Lesson Five

❖ Creating Custom Regions

Our workshop highlights

themes edition


themes edition

❖ Lesson Six

❖ Loading jQuery

❖ Lesson Seven

❖ Custom Fonts

❖ Lesson Eight

❖ Overriding Renderers

❖ Lesson Nine

❖ Custom Theme Settings

!

❖ Plating up a perfect dish

❖ The HTML and Main Menu Blocks

❖ Clever use of Labels


Day Two Agenda


themes edition

❖ What is a moodle Theme?

❖ What is Bootstrap?

❖ Moodle theme settings

❖ Tools we need

❖ Setting up Moodle locally

In this session we will cover

Getting Started


What is a Theme?

themes edition


Why have Themes?

many ask the wrong question

after some deep thought....

themes edition


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


The room you’re in matters!

themes edition


What is a Title?

themes edition


What is a Title?

themes edition


themes edition


What is a Title?

themes edition


What is a Title?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

themes edition


❖ 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


What is a Title?All sites need to

look the same

moodle

{ }BUSTED

themes edition


What is a Theme?

themes edition

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

This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit!http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

What is Bootstrap?

themes edition



themes edition



Created by Twitter

themes edition



What is a Bootstrap?

Framework

HTML5 CSS3 Javascript

themes edition



One Source

themes edition



Adaptive Design


Responsive Design V

themes edition



Both allow websites to be viewed in mobile devices and various screen

sizes, ultimately providing users with a better mobile user experience

AWD or RWD

themes edition



Adaptive Web Design

http://centerofgravity.ca/Demo of Adaptive

a series of pre-defined layouts for fixed browser widths

themes edition

http://centerofgravity.ca/



Responsive Web Design

http://www.includewine.com/Demo of Responsive

the layout fluidly changes and responds to fit any screen or

device size

themes edition

http://centerofgravity.ca/



Built on the Grid

a layout of 12 columns that adapt content based on

the screen resolution of the user

themes edition



Bootstrap Provides

themes edition



Helper Classes

themes edition



So what about

themes edition



Bootstrap history

Developers involved in the Moodle 2.4 theme

•Bas Brands: Freelance Developer.

•David Scotson: Developer at Glasgow university.

•Stuart Lamour: Developer at Sussex university.

idea first dreamt up by users at a UK/Ireland MoodleMoot

themes edition



Integrated into core in

2.5Current uses Bootstrap v2.3.2

themes edition



themes edition



themes edition


HANDS ON SESSION

themes edition

http://moodle.pukunui.com/


themes edition

moodle theme settingsUnit 1: Getting Started


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 orders There 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 globallyhttp://localhost/moodle


themes edition

❖ Google Chrome or Safari with Developer Tools

❖ Firefox with Firebug

CSS Interrogation Tools


themes edition


themes edition

HANDS ON DEMONSTRATION


themes edition

Text and CSS Editors


themes edition

Espresso http://macrabbit.com

Text Wrangler http://www.barebones.com

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

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

Simple CSS http://www.hostm.com/css

MY FAV

Text and CSS Editors


themes edition

Setting up a local .Unit 1: Getting Started


themes edition

❖ Download the version for YOUR OS from

http://download.moodle.org

on your computer



What is a Title?

themes edition


themes edition

HANDS ON DEMONSTRATION


themes edition

Planning IS Important


themes edition

How themes are 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.

/jquery Stores any jQuery elements used in the the theme

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

/layout Contains the layout files for the theme

/fonts Stores any web fonts being used by the theme

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

/pix_core Theme icons that override core moodle iconography

/pix_plugins Theme icons that override moodle plugin iconography

/style Default location for CSS files

*.css CSS files the theme requires


themes edition

Cloning a theme

Lesson One


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 ‘clean’ is becoming ‘my theme’)

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

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

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->doctype

❖ $THEME->javascripts

❖ $THEME->javascripts_footer

❖ $THEME->sheets

❖ $THEME->layouts

❖ $THEME->enable_dock

❖ $THEME->renderfactory

PHP Files | config.php


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

Important Note

Theme names must be one word and all lower case.


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.

Bootstrap themes pull from the bootstrapbase parent.

!Demonstration

$THEME->parents = array('bootstrapbase');


$THEME->parents


themes edition

Definition

A Vital setting for bootstrap themes as it will add the HTML5 doctype to the

body tag when moodle pages are rendered

!Demonstration

$THEME->doctype = 'html5';


$THEME->doctype


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.

!Demonstration

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


$THEME->sheetsname

themes edition


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


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


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 = false;


$THEME->enable_dock

Important Note

Docks will only work in Bootstrap themes rom Moodle 2.7 and above


themes edition

Definition

The 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.

These are loaded in the page header of moodle.

!Demonstration

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


$THEME->javascripts

Important Note

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


themes edition

Definition

This executes in the same way as $theme->javascripts except that the

javascript will be loaded in the page footer rather than header

!Demonstration

$THEME->javascripts_footer = array('mycustom');


$THEME->javascripts_footer


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

There are even more settings that we can use in the config. While we won’t cover them

in this workshop, they include.

!Theme Settings

❖ $THEME->supportscssoptimisation

❖ $THEME->editor_sheets

❖ $THEME->parents_exclude_sheets

❖ $THEME->plugins_exclude_sheets

❖ $THEME->csspostprocess

❖ $THEME->javascripts_footer

❖ $THEME->hidefromselector

❖ $THEME->yuicssmodules

❖ $THEME->blockrtlmanipulations


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

Styling with CSS

Lesson Two


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

[[pix:theme|yuiarrows]]Additional Info

Important Note

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


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

Editing a layout

Lesson Three


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

Creating a layout

Lesson Four


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 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

Building page layoutsUnit 2: Theme Design


themes edition

The Layout Files | PHP Tags

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('', '')


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


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 Tip Where possible it is always best to display images via css. This is better for performance as Moodle will cache these

themes edition


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_mytheme'); ?>


echo print_string('', '')


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

!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


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

this theme.

!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 Tip It 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


themes edition

Custom regions

Lesson Five


themes edition

❖ Lesson Six

❖ Loading jQuery

❖ Lesson Seven

❖ Custom Fonts

❖ Lesson Eight

❖ Overriding Renderers

❖ Lesson Nine

❖ Custom Theme Settings

!

❖ Plating up a perfect dish

❖ The HTML and Main Menu Blocks

❖ Clever use of Labels


Day Two Agenda


themes edition

Loading jQuery

Lesson Six


themes edition

Using Custom fonts

Lesson Seven


themes edition

Overriding renderers

Lesson Eight


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 ‘Essential’ and ‘Elegance’ to

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

PHP Files | renderers.php

themes edition


themes edition

Custom theme settings

Lesson Nine


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

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_configtext

Text Box admin_setting_configtextarea

HTML Editor admin_setting_confightmleditor

Radio Button admin_setting_configselect

Color 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_mytheme/footnote'; $title = get_string('footnote','theme_mytheme'); $description = get_string('footnotedesc', 'theme_mytheme'); $default = ''; $setting = new admin_setting_confightmleditor($name, $title, $description, $default); $settings->add($setting); !// Custom CSS file $name = 'theme_mytheme/customcss'; $title = get_string('customcss','theme_mytheme'); $description = get_string('customcssdesc', 'theme_mytheme'); $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 mytheme_process_css($css, $theme) { // Set the theme background and highlites if (!empty($theme->settings->themecolor)) { $themecolor = $theme->settings->themecolor; } else { $themecolor = null; } $css = mytheme_set_themecolor($css, $themecolor); return $css; } !function mytheme_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