theme gurus

Theme Guru’sGetting started with themes in moodle

Aim of this workshopWe 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 startedWhy use themes?

Build local, deploy globalTools you need

Don’t 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 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

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

http://chrispederick.com/work/web-developer

http://chrispederick.com/work/web-developer

http://www.apachefriends.org

http://www.apachefriends.org

Getting started - Don’t re-invent the wheel Themes are very time consuming to build from scratch

๏ Small Scale changes

๏ Create a new theme using standardsheets

๏ Large Scale changes

๏ Start with a theme that is similar to your need

๏ Just duplicate it’s folder and rename to use

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

Moodle theme setupadmin settings

the file structure

Moodle theme setup - Admin settingsTheme Settings

๏ Theme list

๏ Allow User Themes

๏ Allow Category Themes

๏ Allow users to hide blocks

๏ Allow blocks on module pages

๏ Hide activity type navigation

Theme Selector

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

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.

What theme goes where?

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

๏ PHP files

๏ config.php

๏ styles.php

๏ docstyles.php

๏ meta.php

๏ HTML files

๏ header.html

๏ footer.html

๏ readme.html

๏ CSS files

๏ syles_layout.css

๏ styles_fonts.css

๏ styles_color.css

๏ Other files

๏ favicon.ico

๏ screenshot.jpg

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

Creating a theme The PHP files

config.phpstyles.php

docstyles.phpmeta.php

Creating a theme - Config.phpThis 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 TipsDon’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.phpConfig.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:

$THEME->sheets = array('styles_layout','styles_color','styles_fonts');

Best Practice TipsWhile 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.


$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');


$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 TipsDon’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’.


$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->parentsheets = array('styles_layout','styles_color','styles_fonts');


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

$THEME->modsheets = true;

$THEME->blocksheets = true;

$THEME->langsheets = false;


$THEME->custompix

Definition: 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.

Demo Use:

$THEME->custompix = true;

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

Best Practice TipsInstead 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.


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

$THEME->layouttable = array('middle', 'left', 'right');

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

Creating a theme - meta.php

Definition: This file contains any meta data that you may need to put into your sites header.

More often than not this file is empty

Demo Use:



Best Practice TipsDon’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 - styles.php/docstyles.phpThese 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.htmlfooter.html

readme.html

Creating a theme - The HTML FilesHeader 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 footerCreating 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 footerWhat 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.

<!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="clearfix"> <h1 class="headermain"></h1>

<div id="header-description"><?php echo $COURSE->summary ?> </div> </div><?php } else if ($heading) { ?> <div id="header" class="clearfix"> <a href="<?php echo "$CFG->wwwroot" ?>"><h1 class="headermain"></h1></a> <div class="headermenu"><?php echo $menu ?></div>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




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; ?> *footer.html only

๏ <?php echo $homelink; ?> *footer.html only


๏ <?php echo $title ?>

Definition: This generates the title of the page.

Demo Use:

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


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

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

<img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/logo.gif">

Best Practice TipsTry and keep all images in a folder called ‘pix’.

Makes them easier to identify and replace as you move on.


๏ <?php echo $COURSE->summary ?>

Definition: This generates the summary of the page. This is either pulled from the course or frontpage summary fields

Demo Use:

<div id="header-description"><?php echo $COURSE->summary ?></div>


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

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:

<div class="breadcrumb"><?php print_navigation("$navigation"); ?></div>


๏ <?php echo $menu; ?>

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:

<div class="headermenu"><?php echo $menu ?></div>


๏ <?php echo $button; ?>

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:

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


๏ <?php echo $loggedinas; ?>

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:

<?php echo $loggedinas ?>


๏ <?php echo $homelink; ?>

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:

<?php echo $homelink ?>

Creating a theme - The header and footerUseful conditional tags

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

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

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


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

Definition: 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="clearfix"> <h1 class="headermain"></h1> <div id="header-description"><?php echo $COURSE->summary ?></div> </div><?php } else if ($heading) { ?> <div id="header" class="clearfix"> <a href="<?php echo "$CFG->wwwroot" ?>"><h1 class="headermain"></h1></a> <div class="headermenu"><?php echo $menu ?></div> </div><?php } ?>


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

Definition: 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 clearfix"> <div class="breadcrumb"><?php print_navigation("$navigation"); ?></div> <div class="navbutton"><?php echo $button; ?></div> </div><?php } else if ($heading) { ?> <hr /><?php } ?>


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

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:

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

Creating a theme The CSS files

styles_layout.cssstyles_fonts.cssstyles_color.cssstyles_moz.css

Creating a theme - The CSS FilesMoodle 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 TipsAlways 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 FilesThe 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.icoscreenshot.jpg

Creating a theme - Additional Filesfavicon.icoDon’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.jpgDisplay 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 Tips’N’Tricks

Using your own iconsParent themes

Using Labels

Tips’N’Tricks - Using your own IconsAn 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 set1. 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 theme-specific 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 startNuvola 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

http://www.icon-king.com/files/nuvola-1.0.tar.gz




Tips’N’Tricks - Using labelsHomepage 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 ThemesParent 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”.

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

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);}

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

ThankyouPresenter: Julian Ridden

Email: [email protected]

Twitter: moodleman

www: http://moodleman.net

http://www.moodleman.net

mailto:[email protected]








theme gurus

Education

parent theme

new theme

selected theme

theme selectorthere

theme gurus

typical theme themes

themesheetsexisting

theme design best practice