Theme Gurus

Getting started with themes in moodle

Aim of this workshop

We Will
Provide background on themes in moodle Demonstrate theme design best practice Show tools helpful to theme design

We Won'
This is NOT a technical workshop
No prior experience expected HTML and CSS not covered

Getting started
Why use themes? Build local, deploy global Tools you need Dont re-invent the wheel!

Getting started - Why use 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!

Getting started - Build locally, deploy globally

There is no Moodle theme
dev development tool

Building in Dreamweaver is
extremely difcult. 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 nished local build,

then upload to your server

Getting started - Tools you will be needing

Firefox web browser Firefox Web Developer plugin
http://chrispederick.com/work/web-developer

A Text editor
Textpad (Windows) Smutron (OSX) & CSSEdit (OSX)

Local Webserver Application

XAMPP (Win & OSX) http://www.apachefriends.org

Getting started - Dont re-invent the wheel

Themes are very time consuming to build from scratch

Best Practice Tips

When creating your own theme folder the name needs to be in lower case. If it is not then the Moodle smartpix will not function

Small Scale changes

Create a new theme using standardsheets

Large Scale changes

Start with a theme that is similar to your need Just duplicate its folder and rename to use

Moodle theme setup

admin settings the le structure

Moodle theme setup - Admin settings

Theme Settings
Theme list Allow User Themes Allow Category Themes Allow users to hide blocks Allow blocks on module pages Hide activity type navigation

Best Practice Tips

You dont have to drill down through the Administration to hunt down theme settings. Just type in theme into the admin search eld to see the available options.

Theme Selector
The theme selector allows you to apply a selected theme at a site level.

What theme goes where?

There is a new setting you can put in your sites cong.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 les
cong.php styles.php docstyles.php meta.php

CSS les
syles_layout.css styles_fonts.css styles_color.css

HTML les
header.html footer.html readme.html

Other les
favicon.ico screenshot.jpg

Creating a theme The PHP les

cong.php styles.php docstyles.php meta.php

Creating a theme - Cong.php

This le contains a few conguration variables that control how Moodle uses this theme. Tags Used:

Best Practice Tips

Dont create this from scratch. It needs to be exact, so copying an existing cong le is a good way of making sure you do not miss anything

$THEME->sheets $THEME->standardsheets $THEME->parent $THEME->parentsheets $THEME->modsheets $THEME->blocksheets $THEME->langsheets $THEME->custompix $THEME->layouttable

Creating a theme - Cong.php

Cong.php variables
$THEME->sheets
Denition: This variable is an array containing the names of all the stylesheet les you want included in this theme, and in what order Demo Use: $THEME->sheets = array('styles_layout','styles_color','styles_fonts');

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 - Cong.php

Cong.php variables
$THEME->standardsheets
Denition: This variable can be set to an array containing lenames from the *STANDARD* theme. If the array exists, it will be used to choose the les to include in the standard style sheet. When false, then no les are used. When true or NON-EXISTENT, then ALL standard les 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 - Cong.php

Cong.php variables
$THEME->parent
Denition: 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 modications to another theme without having to actually change the les. If this variable is empty or false then a parent theme is not used. Demo Use: $THEME->parent = 'wood';

Best Practice Tips

Dont reference standard as your parent theme. this wont kill your theme, but it is doubling up if parent has been set to true.

Creating a theme - Cong.php

Cong.php variables
$THEME->parentsheets
Denition: This variable can be set to an array containing lenames from a chosen *PARENT* theme. If the array exists, it will be used to choose the les to include in the standard style sheet. When false, then no les are used. When true or NON-EXISTENT, then ALL standard les 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->parentsheets = array('styles_layout','styles_color','styles_fonts');

Creating a theme - Cong.php

Cong.php variables
$THEME->modsheets, $THEME->blocksheets and $THEME->langsheets
Denition: When any of these are enabled, then this theme will search for les 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: $THEME->modsheets = true; $THEME->blocksheets = true; $THEME->langsheets = false;

Creating a theme - Cong.php

Cong.php variables
$THEME->custompix
Denition: If true, then this theme must have a "pix" subdirectory that contains copies of all les from the moodle/pix directory, plus a "pix/mod" directory containing all the icons for all the activity modules. Demo Use: $THEME->custompix = true;

!!WARNING!!
If this is enabled you will need to make sure you have every image in Moodles pix folder replicated inside your theme. If any images are missing they will appear as broken on your theme.

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 - Cong.php

Cong.php variables
$THEME->layouttable
Denition: 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: $THEME->layouttable = array('middle', 'left', 'right');

Version Notice
This is a new tag that will only operate in versions 1.8 and above.

Creating a theme - meta.php

Denition: This le contains any meta data that you may need to put into your sites header. More often than not this le is empty

Best Practice Tips

Dont create this from scratch. It needs to be exact, so copying an existing cong le is a good way of making sure you do not miss anything

Demo Use: <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="<?php echo $CFG->httpswwwroot ?>/theme/funky/styles_ie6.css" /> <![endif]-->

Creating a theme - styles.php/docstyles.php

These are two les used by moodle, pulling data from your cong le to generate your theme as based on your settings. There is nothing you need to do with these les.

Creating a theme The HTML les

header.html footer.html readme.html

Creating a theme - The HTML Files

Header and Footer .html les These contain your logo, the login, the jumpto menu, the breadcrumb navigation, the moodle logo etc. Within these les 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 les 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 les As the name suggests, these are both html les 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 specic php code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <html<?php echo $direction ?>> <head> <?php echo $meta ?> <meta name="keywords" content="moodle, <?php echo $title ?> " /> <title><?php echo $title ?></title> <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/ favicon.ico" /> <?php include("$CFG->javascript"); ?> </head> <body <?php echo " $bodytags"; if ($focus) { echo " onload=\"setfocus()\""; } ?>> <center> <div id="page"> <div class="wrapper"> <div id="page-top"></div> <div id="page-middle"> <?php if ($home) { ?> <div id="header-home" class="clearx"> <h1 class="headermain"></h1> <div id="header-description"><?php echo $COURSE->summary ?> </div> </div> <?php } else if ($heading) { ?> <div id="header" class="clearx"> <a href="<?php echo "$CFG->wwwroot" ?>"><h1 class="headermain"></h1></a> <div class="headermenu"><?php echo $menu ?></div>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $title ?> <?php echo $CFG->themewww .'/'. current_theme() ?> <?php echo $COURSE->summary ?> <?php print_navigation("$navigation"); ?> <?php echo $button; ?> <?php echo $menu; ?> <?php echo $loggedinas; ?> <?php echo $homelink; ?>
*footer.html only *footer.html only

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $title ?>

Denition: This generates the title of the page. Demo Use: <title><?php echo $title ?></title>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $CFG->themewww .'/'. current_theme() ?>

Denition: 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 URLs may change. Demo Use: <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/logo.gif">

Best Practice Tips

Try and keep all images in a folder called pix. Makes them easier to identify and replace as you move on.

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $COURSE->summary ?>

Denition: This generates the summary of the page. This is either pulled from the course or frontpage summary elds Demo Use: <div id="header-description"><?php echo $COURSE->summary ?></div>

Creating a theme - The header and footer

PHP Tags you need to know

<?php print_navigation("$navigation"); ?>

Denition: 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: <div class="breadcrumb"><?php print_navigation("$navigation"); ?></div>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $menu; ?>

Denition: 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: <div class="headermenu"><?php echo $menu ?></div>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $button; ?>

Denition: This generates the editing buttons that moodle uses. These include the turn editing on button as well as function specic buttons like Update this forum and others. Additional Notes: Should typically be surrounded with a navbutton div class tag. Demo Use: <div class="navbutton"><?php echo $button; ?></div>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $loggedinas; ?>

Denition: 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: <?php echo $loggedinas ?>

Creating a theme - The header and footer

PHP Tags you need to know

<?php echo $homelink; ?>

Denition: This generates a ink back to the sites homepage. Very useful for those wanting a quick jump back to the sites main page. Additional Notes: This tag only works when placed in footer.html. Demo Use: <?php echo $homelink ?>

Creating a theme - The header and footer

Useful conditional tags

<?php if ($home) { ?> <?php } else if ($heading) { ?> <?php } ?> <?php if ($navigation) { ?> <?php } else if ($heading) { ?> <?php } ?> <?php if (!empty($performanceinfo)) { echo $performanceinfo; } ?>

Creating a theme - The header and footer

Useful conditional tags

<?php if ($home) { ?> <?php } else if ($heading) { ?> <?php } ?>

Denition: This is a very useful conditional. It allows for certain content to just be displayed on the homepage. Demo Use:
<?php if ($home) { ?> <div id="header-home" class="clearx"> <h1 class="headermain"></h1> <div id="header-description"><?php echo $COURSE->summary ?></div> </div> <?php } else if ($heading) { ?> <div id="header" class="clearx"> <a href="<?php echo "$CFG->wwwroot" ?>"><h1 class="headermain"></h1></a> <div class="headermenu"><?php echo $menu ?></div> </div> <?php } ?>

Creating a theme - The header and footer

Useful conditional tags

<?php if ($navigation) { ?> <?php } else if ($heading) { ?> <?php } ?>

Denition: This conditional detects if there are breadcrumbs to show. If not, it can then display something else of your choosing Demo Use:
<?php if ($navigation) { ?> <div class="navbar clearx"> <div class="breadcrumb"><?php print_navigation("$navigation"); ?></div> <div class="navbutton"><?php echo $button; ?></div> </div> <?php } else if ($heading) { ?> <hr /> <?php } ?>

Creating a theme - The header and footer

Useful conditional tags

<?php if (!empty($performanceinfo)) { echo $performanceinfo; } ?>

Denition: This conditional detects if performance info has been set to be displayed by the sites admin settings. If so, various performance details are displayed. Demo Use:

<?php if (!empty($performanceinfo)) { echo $performanceinfo; } ?>

Creating a theme The CSS les

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 le called "cong.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 dene 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 Dont 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 TipsNTricks

Using your own icons Parent themes Using Labels

TipsNTricks - 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 les 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/cong.php

!!WARNING!!
If this is enabled you will need to make sure you have every image in Moodles pix folder replicated inside your theme. If any images are missing they will appear as broken on your theme.

2. Copy the pix directory to the theme folder

Get an icon head start

Nuvola is an additional icon set made for modle and released under GPL license.

That is, in order to use an alternate icon set associated to a specic 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 themespecic pictures included:

Download it from here:

http://www.moodlezengarden.com/index.php? 2006/09/06/6-nuvola-iconset-16

TipsNTricks - 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
a:link, a:visited, a:hover { color: #ff9900; } .navbar { border-color:#666666; background: url(pix/bg/nav_header_bg.png) repeat-x; } .sideblock .header { background: url(pix/bg/block_header_bg.png); }

body { color: #ffffff; background: url(pix/bg/bg_red.jpg) 50% 0 no-repeat; background-color: #67161c; }

Use parent themes to

identify areas of your site.

input { background: #eebaba; } .article_seperator { background-color: #6c3434; } #header-description { position: absolute; top: 40px; text-align: left; width: 400; right: 120px; font-size: 1.3em; line-height: 135%; } .breadcrumb ul li .sep { color: #dddddd; } a#corner { background: url(pix/moodle_donate.png) top right no-repeat !important; }

Only build one theme, then

use sub-themes to create variations.

Updates to the parent

theme are immediatly applied to all its children.

Thankyou
Presenter: Julian Ridden Email: julian@moodleman.net Twitter: moodleman www: http://moodleman.net

http://www.moodleman.net