Best Practice Tips You 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.
What theme goes where? Theme Selector
The theme selector allows you to apply a selected theme at a site level.
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
Moodle theme setup - Files in a typical theme Themes are always stored in the ‘themes’ folder in your moodle directory ๏
PHP files
๏
๏
config.php
๏
syles_layout.css
๏
styles.php
๏
styles_fonts.css
๏
docstyles.php
๏
styles_color.css
๏
meta.php ๏
๏
CSS files
HTML files ๏
header.html
๏
footer.html
๏
readme.html
Other files ๏
favicon.ico
๏
screenshot.jpg
Creating a theme The PHP files config.php styles.php docstyles.php meta.php
Creating a theme - Config.php This file contains a few configuration variables that control how Moodle uses this theme. Tags Used: ๏
$THEME->sheets
๏
$THEME->standardsheets
๏
$THEME->parent
๏
$THEME->parentsheets
๏
$THEME->modsheets
๏
$THEME->blocksheets
๏
$THEME->langsheets
๏
$THEME->custompix
๏
$THEME->layouttable
Best Practice Tips Don’t create this from scratch. It needs to be exact, so copying an existing config file is a good way of making sure you do not miss anything
Creating a theme - Config.php Config.php variables
$THEME->sheets Definition:
This variable is an array containing the names of all the stylesheet files you want included in this theme, and in what order Demo Use:
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.
Creating a theme - Config.php Config.php variables
$THEME->standardsheets Definition:
This variable can be set to an array containing filenames from the *STANDARD* theme. If the array exists, it will be used to choose the files to include in the standard style sheet. When false, then no files are used. When ‘true’ or NON-EXISTENT, then ALL standard files are used. This parameter can be used, for example, to prevent having to override too many classes. Note that the trailing .css should not be included Demo Use:
$THEME->standardsheets = ‘true’; this would also generate the same result $THEME->standardsheets = array('styles_layout','styles_fonts','styles_color');
Creating a theme - Config.php Config.php variables
$THEME->parent Definition:
This variable can be set to the name of a parent theme which you want to have included before the current theme. This can make it easy to make modifications to another theme without having to actually change the files. If this variable is empty or ‘false’ then a parent theme is not used. Demo Use:
$THEME->parent = 'wood';
Best Practice Tips Don’t reference ‘standard’ as your parent theme. this won’t kill your theme, but it is doubling up if parent has been set to ‘true’.
Creating a theme - Config.php Config.php variables
$THEME->parentsheets Definition:
This variable can be set to an array containing filenames from a chosen *PARENT* theme. If the array exists, it will be used to choose the files to include in the standard style sheet. When ‘false’, then no files are used. When ‘true’ or NON-EXISTENT, then ALL standard files are used. This parameter can be used, for example, to prevent having to override too many classes. Note that the trailing .css should not be included Demo Use:
$THEME->modsheets, $THEME->blocksheets and $THEME->langsheets Definition:
When any of these are enabled, then this theme will search for files named "styles.php" inside all Activity modules, blocks and/or language folders and include them. This allows modules to provide some basic layouts needed by these tools so that they work out of the box. It is HIGHLY recommended to leave this enabled. Demo Use:
If true, then this theme must have a "pix" subdirectory that contains copies of all files from the moodle/pix directory, plus a "pix/mod" directory containing all the icons for all the activity modules.
!!WARNING!! If this is enabled you will need to make sure you have every image in Moodle’s pix folder replicated inside your theme. If any images are missing they will appear as broken on your theme.
Demo Use:
$THEME->custompix = true;
Best Practice Tips Instead of using custompix use the new SmartPix search built into Moodle 1.8 and above. This searches for images in your theme and if absent it then uses standard moodle images.
Creating a theme - Config.php Config.php variables
$THEME->layouttable Definition:
This new variable gives the designer the ability to change the order of how columns are displayed. Typically blocks are displayed in left and right columns with content in the middle. The layouttable tag allows block columns to be re-ordered in any combination. Demo Use:
Version Notice This is a new tag that will only operate in versions 1.8 and above.
Creating a theme - meta.php Definition:
Best Practice Tips
This file contains any meta data that you may need to put into your sites header. More often than not this file is empty
Don’t create this from scratch. It needs to be exact, so copying an existing config file is a good way of making sure you do not miss anything
Demo Use:
Creating a theme - styles.php/docstyles.php These are two files used by moodle, pulling data from your config file to generate your theme as based on your settings.
There is nothing you need to do with these files.
Creating a theme The HTML files header.html footer.html readme.html
Creating a theme - The HTML Files Header and Footer .html files
These contain your logo, the login, the ‘jumpto’ menu, the breadcrumb navigation, the moodle logo etc. Within these files you can give Moodle your individual look at the top and the bottom of all pages Readme.html
This contains details entered by the author of the theme. It can contain anything you like. Typically it includes the authors name, license type and contact details.
Creating a theme - The header and footer Creating the container
The header.html and footer.html files essentially create a container within which your moodle site resides.
Header
Footer
Creating a theme - The header and footer What goes in the header and footer.html files
As the name suggests, these are both html files and therefore contain raw html. Designers can use any HTML they like. Most today use CSS rather than html design elements. However, this HTML is also augmented with specific php code.
Creating a theme - The header and footer PHP Tags you need to know ๏
๏
themewww .'/'. current_theme() ?>
๏
summary ?>
๏
๏
๏
๏
๏
*footer.html only *footer.html only
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This generates the title of the page. Demo Use:
<?php echo $title ?>
Creating a theme - The header and footer PHP Tags you need to know ๏
Best Practice Tips
themewww .'/'. current_theme() ?> Definition:
Try and keep all images in a folder called ‘pix’.
This generates an absolute path to your theme. This must be used if this theme is going to be used in more than one install. It is best practice to always be used to save you issues in the future when URL’s may change. Demo Use:
Makes them easier to identify and replace as you move on.
Creating a theme - The header and footer PHP Tags you need to know ๏
summary ?> Definition:
This generates the summary of the page. This is either pulled from the course or frontpage summary fields Demo Use:
summary ?>
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This generates breadcumb navigation that goes across the top of the screen. Additional Notes:
Should typically be surrounded with a “breadcrumb” div class tag. Demo Use:
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This changes based on login status. If not logged in it will display “you are not logged in” text. If the user is logged in it displays the “Jump to” menu Additional Notes:
Should typically be surrounded with a “ headermenu” div class tag. Demo Use:
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This generates the editing buttons that moodle uses. These include the “turn editing on” button as well as function specific buttons like ‘Update this forum’ and others. Additional Notes:
Should typically be surrounded with a “navbutton” div class tag. Demo Use:
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This generates the text either prompting for the user to log in or showing that they are logged in. Additional Notes:
This tag only works when placed in footer.html. Demo Use:
Creating a theme - The header and footer PHP Tags you need to know ๏
Definition:
This generates a ink back to the sites homepage. Very useful for those wanting a quick jump back to the site’s main page. Additional Notes:
This tag only works when placed in footer.html. Demo Use:
Creating a theme - The header and footer Useful conditional tags ๏
๏
๏
Creating a theme - The header and footer Useful conditional tags ๏
Definition:
This is a very useful conditional. It allows for certain content to just be displayed on the homepage. Demo Use:
Creating a theme - The header and footer Useful conditional tags ๏
Definition:
This conditional detects if there are breadcrumbs to show. If not, it can then display something else of your choosing Demo Use:
Creating a theme - The header and footer Useful conditional tags ๏
Definition:
This conditional detects if performance info has been set to be displayed by the site’s admin settings. If so, various performance details are displayed. Demo Use:
Creating a theme The CSS files styles_layout.css styles_fonts.css styles_color.css styles_moz.css
Creating a theme - The CSS Files Moodle and CSS
Moodle themes use style sheets to describe the Moodle "look" by controlling the layout, fonts and colors. These are constructed by a PHP script called "styles.php" in each theme directory, and controlled by a file called "config.php" in the same place. Moodle has a "standard" theme which is very plain and provides a basic layout for other themes to build on. Each theme may also have a "parent" theme, which will be included before the current theme. Theme designers can define and add any CSS stylesheets and name them any way as needed for this theme.
Best Practice Tips Always refer to the ‘standard’ theme as a parent theme. Separate your css in lyout, font and colors to make it easier to edit
Creating a theme - The CSS Files The Confusion of the Cascading Style Sheet (CSS)
Take advantage of the cascading style sheets. Only change what you need to!
Creating a theme Additional Files favicon.ico screenshot.jpg
Creating a theme - Additional Files favicon.ico
Don’t feel that you need to always have the moodle icon listed in the browser bar or bookmarks. Store your own favicon in your theme and it will be used instead.
screenshot.jpg
Display a screenshot of how the theme will look in the moodle admin ‘Theme Selector’ If no screenshot is there, moodle will try and render the page as best it can as a preview.
Creating a theme Ti s’N’Tricks Using your own icons Parent themes Using Labels
Tips’N’Tricks - Using your own Icons An alternate icon set may be used with any Moodle theme. An icon set consists of a pix directory containing copies of all files from the moodle/pix directory plus a pix/mod directory containing all activity module icons. To use the alternate icon set 1. Amend $THEME->custompix = false; to $THEME->custompix = true; in theme/yourtheme/config.php
2. Copy the pix directory to the theme folder
That is, in order to use an alternate icon set associated to a specific theme, you need to make a whole tree of icons in the pix subdirectory of the theme. Your pix folder will look like the example below, probably with some more themespecific pictures included:
!!WARNING!! If this is enabled you will need to make sure you have every image in Moodle’s pix folder replicated inside your theme. If any images are missing they will appear as broken on your theme.
Get an icon head start Nuvola is an additional icon set made for modle and released under GPL license.
Download it from here: http://www.moodlezengarden.com/index.php? 2006/09/06/6-nuvola-iconset-16
Tips’N’Tricks - Using labels Homepage design becomes nearly unlimited when you add labels to the homepage. You can click on the <> symbol and add html directly into the label. This is good for code to generate forms.
Getting started - Parent Themes Parent themes are great for creating ‘variations on a theme’ Use parent theme’s to identify areas of your site. ๏
Only build one theme, then use sub-themes to create variations. ๏
Updates to the parent theme are immediatly applied to all it’s “children”. ๏
 ?>/pix/logo.gif){kind=logo}