Theme Gurus

Theme Guru’s 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 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 difﬁcult. 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 - Don’t re-invent the wheel Themes are very time consuming to build from scratch Best Practice Tips ๏ Small Scale changes When creating your own theme folder the name needs to be in lower ๏ Create a new theme using standardsheets case. If it is not then the Moodle smartpix will not function ๏ Large Scale changes ๏ Start with a theme that is similar to your need ๏ Just duplicate it’s folder and rename to use

Moodle theme setup admin settings the ﬁle structure

Moodle theme setup - Admin settings Theme Settings Best Practice Tips ๏ Theme list ๏ Allow User Themes You don’t have to drill down through the Administration to hunt down ๏ Allow Category Themes theme settings. Just type in ‘theme’ into the admin search ﬁeld to see the ๏ Allow users to hide blocks available options. ๏ Allow blocks on module pages ๏ Hide activity type navigation What theme goes where? Theme Selector There is a new setting you can put in The theme selector allows you to apply a selected theme at a your sites conﬁg.php site level. $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 ๏ CSS files ๏ config.php ๏ syles_layout.css ๏ styles.php ๏ styles_fonts.css ๏ docstyles.php ๏ styles_color.css ๏ meta.php ๏ Other files ๏ HTML files ๏ favicon.ico ๏ header.html ๏ screenshot.jpg ๏ footer.html ๏ readme.html

Creating a theme The PHP ﬁles conﬁg.php styles.php docstyles.php meta.php

Creating a theme - Config.php This file contains a few configuration variables that control Best Practice Tips how Moodle uses this theme. Tags Used: Don’t create this from scratch. It needs to be exact, so copying an ๏ $THEME->sheets existing config file is a good way of ๏ $THEME->standardsheets making sure you do not miss anything ๏ $THEME->parent ๏ $THEME->parentsheets ๏ $THEME->modsheets ๏ $THEME->blocksheets ๏ $THEME->langsheets ๏ $THEME->custompix ๏ $THEME->layouttable

Creating a theme - Config.php Config.php variables Best Practice Tips $THEME->sheets While you can call your stylesheets Definition: anything you like, or even just have This variable is an array containing the names of all the stylesheet files you want one, the listed example is considered included in this theme, and in what order ‘best practice’ to make the theme easier to edit if passed around the Demo Use: community. $THEME->sheets = array('styles_layout','styles_color','styles_fonts');

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 Best Practice Tips $THEME->parent Don’t reference ‘standard’ as your Definition: parent theme. this won’t kill your This variable can be set to the name of a parent theme which you want to have theme, but it is doubling up if parent included before the current theme. has been set to ‘true’. 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';

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

Creating a theme - Config.php Config.php variables $THEME->modsheets, $THEME->blocksheets and $THEME->langsheets Definition: When any of these are enabled, then this theme will search for files named quot;styles.phpquot; 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 - Config.php Config.php variables !!WARNING!! $THEME->custompix If this is enabled you will need to make sure you have every image in Definition: Moodle’s pix folder replicated inside If true, then this theme must have a quot;pixquot; subdirectory that contains copies of all your theme. files from the moodle/pix directory, plus a quot;pix/modquot; directory containing all the If any images are missing they will icons for all the activity modules. appear as broken on your theme. Demo Use: Best Practice Tips $THEME->custompix = true; 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 Version Notice $THEME->layouttable This is a new tag that will only operate in versions 1.8 and above. 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');

Creating a theme - meta.php Best Practice Tips Definition: This file contains any meta data that you may need to put into your sites header. Don’t create this from scratch. It More often than not this file is empty 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 ﬁ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 files <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtdquot;> <html<?php echo $direction ?>> As the name suggests, these are both html files <head> <?php echo $meta ?> <meta name=quot;keywordsquot; content=quot;moodle, <?php echo $title ?> quot; /> and therefore contain raw html. <title><?php echo $title ?></title> <link rel=quot;shortcut iconquot; href=quot;<?php echo $CFG->themewww .'/'. current_theme() ?>/ favicon.icoquot; /> <?php include(quot;$CFG->javascriptquot;); ?> Designers can use any HTML they like. Most </head> <body <?php today use CSS rather than html design elements. echo quot; $bodytagsquot;; if ($focus) { echo quot; onload=quot;setfocus()quot;quot;; } However, this HTML is also augmented with ?>> <center> specific php code. <div id=quot;pagequot;> <div class=quot;wrapperquot;> <div id=quot;page-topquot;></div> <div id=quot;page-middlequot;> <?php if ($home) { ?> <div id=quot;header-homequot; class=quot;clearfixquot;> <h1 class=quot;headermainquot;></h1> <div id=quot;header-descriptionquot;><?php echo $COURSE->summary ?> </div> </div> <?php } else if ($heading) { ?> <div id=quot;headerquot; class=quot;clearfixquot;> <a href=quot;<?php echo quot;$CFG->wwwrootquot; ?>quot;><h1 class=quot;headermainquot;></h1></a> <div class=quot;headermenuquot;><?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(quot;$navigationquot;); ?> ๏ <?php echo $button; ?> ๏ <?php echo $menu; ?> ๏ <?php echo $loggedinas; ?> *footer.html only ๏ <?php echo $homelink; ?> *footer.html only

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php echo $title ?> Deﬁnition: 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 Best Practice Tips ๏ <?php echo $CFG->themewww .'/'. current_theme() ?> Try and keep all images in a folder called ‘pix’. Deﬁnition: This generates an absolute path to your theme. This must be used if this Makes them easier to identify and theme is going to be used in more than one install. It is best practice to replace as you move on. always be used to save you issues in the future when URL’s may change. Demo Use: <img src=quot;<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/logo.gifquot;>

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php echo $COURSE->summary ?> Deﬁnition: This generates the summary of the page. This is either pulled from the course or frontpage summary ﬁelds Demo Use: <div id=quot;header-descriptionquot;><?php echo $COURSE->summary ?></div>

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php print_navigation(quot;$navigationquot;); ?> Deﬁnition: 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=quot;breadcrumbquot;><?php print_navigation(quot;$navigationquot;); ?></div>

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php echo $menu; ?> Deﬁnition: 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=quot;headermenuquot;><?php echo $menu ?></div>

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php echo $button; ?> Deﬁnition: This generates the editing buttons that moodle uses. These include the “turn editing on” button as well as function speciﬁc buttons like ‘Update this forum’ and others. Additional Notes: Should typically be surrounded with a “navbutton” div class tag. Demo Use: <div class=quot;navbuttonquot;><?php echo $button; ?></div>

Creating a theme - The header and footer PHP Tags you need to know ๏ <?php echo $loggedinas; ?> Deﬁnition: 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; ?> Deﬁnition: 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 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 } ?> 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=quot;header-homequot; class=quot;clearfixquot;> <h1 class=quot;headermainquot;></h1> <div id=quot;header-descriptionquot;><?php echo $COURSE->summary ?></div> </div> <?php } else if ($heading) { ?> <div id=quot;headerquot; class=quot;clearfixquot;> <a href=quot;<?php echo quot;$CFG->wwwrootquot; ?>quot;><h1 class=quot;headermainquot;></h1></a> <div class=quot;headermenuquot;><?php echo $menu ?></div> </div> <?php } ?>

Creating a theme - The header and footer Useful conditional tags ๏ <?php if ($navigation) { ?> <?php } else if ($heading) { ?> <?php } ?> Deﬁnition: 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=quot;navbar clearﬁxquot;> <div class=quot;breadcrumbquot;><?php print_navigation(quot;$navigationquot;); ?></div> <div class=quot;navbuttonquot;><?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; } ?> Deﬁnition: 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 ﬁles styles_layout.css styles_fonts.css styles_color.css styles_moz.css

Creating a theme - The CSS Files Moodle and CSS Best Practice Tips Moodle themes use style sheets to describe the Moodle quot;lookquot; by controlling the layout, fonts and colors. These are Always refer to the ‘standard’ theme constructed by a PHP script called quot;styles.phpquot; in each as a parent theme. theme directory, and controlled by a file called quot;config.phpquot; Separate your css in lyout, font and in the same place. colors to make it easier to edit Moodle has a quot;standardquot; theme which is very plain and provides a basic layout for other themes to build on. Each theme may also have a quot;parentquot; 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.

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 Tips’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. !!WARNING!! An icon set consists of a pix directory containing copies of all If this is enabled you will need to files from the moodle/pix directory plus a pix/mod directory make sure you have every image in containing all activity module icons. Moodle’s pix folder replicated inside your theme. To use the alternate icon set If any images are missing they will 1. Amend $THEME->custompix = false; to appear as broken on your theme. $THEME->custompix = true; in theme/yourtheme/config.php Get an icon head start 2. Copy the pix directory to the theme folder Nuvola is an additional icon set That is, in order to use an alternate icon set associated to a made for modle and released under specific theme, you need to make a whole tree of icons in GPL license. the pix subdirectory of the theme. Your pix folder will look like the example below, probably with some more theme- specific pictures included: 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.

body { color: #ffffff; background: url(pix/bg/bg_red.jpg) 50% 0 no-repeat; background-color: #67161c; Getting started - Parent Themes } a:link, a:visited, a:hover { color: #ff9900; Parent themes are great for} .navbar { creating ‘variations on a border-color:#666666; background: url(pix/bg/nav_header_bg.png) repeat-x; theme’ } .sideblock .header { background: url(pix/bg/block_header_bg.png); } ๏ Use parent theme’s to input { identify areas of your site. background: #eebaba; } .article_seperator { background-color: #6c3434; } ๏ Only build one theme, then #header-description { position: absolute; use sub-themes to create top: 40px; text-align: left; width: 400; variations. right: 120px; font-size: 1.3em; line-height: 135%; } .breadcrumb ul li .sep { ๏ Updates to the parent color: #dddddd; } theme are immediatly applied a#corner { background: url(pix/moodle_donate.png) top right no-repeat !important; to all it’s “children”. }

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

http://localhost	53
http://imoot.org	26
http://ingenieriacomputacion.mmendiola.net	24
http://www.slideshare.net	23
http://www.labportaleva.info	9
http://moodle.cdnis.edu.hk	9
http://www.tesa.or.th	5
http://www.linkedin.com	4
http://moodleresources.wikispaces.com	3
http://www.netlearningmoodle.com	2
http://kdalalata.blogspot.com	2
http://community.challengertafe.wa.edu.au	2

Theme Gurus

by Julian Ridden on Apr 16, 2009

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 162

Statistics

Theme Gurus Presentation Transcript