Getting Started With Themes in Moodle

8/2/2019 Getting Started With Themes in Moodle

http://slidepdf.com/reader/full/getting-started-with-themes-in-moodle 1/48

Theme Guru’sGetting 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 startedWhy 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 engagingdesign for your particularaudience

๏ Establish a unique look andfeel for your site. be a Standout!



Getting started - Build locally, deploy globally๏ There is no Moodle ‘themedev development’ tool

๏ Building in Dreamweaver isextremely difficult. I usuallyedit using a text editing tool.

๏ Easiest to deploy a moodle

on your machine and edit thisdirectly. See changes instantlyas 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://www.apachefriends.org/


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







Getting started - Don’t re-invent the wheelThemes 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 Tips

When creating your own themefolder the name needs to be in lowercase. If it is not then the Moodlesmartpix 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 asite level.

Best Practice Tips

You don’t have to drill down throughthe Administration to hunt downtheme settings. Just type in ‘theme’into the admin search field to see theavailable options.

What theme goes where?

There is a new setting you can put inyour 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.php

styles.phpdocstyles.php

meta.php



Creating a theme - Config.php This file contains a few configuration variables that controlhow 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. Itneeds to be exact, so copying anexisting config file is a good way of making sure you do not missanything



Creating a theme - Config.phpConfig.php variables

$THEME->sheets

Definition:

This variable is an array containing the names of all the stylesheet files you wantincluded 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 stylesheetsanything you like, or even just haveone, the listed example is considered‘best practice’ to make the themeeasier to edit if passed around thecommunity.




$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 tochoose 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 haveincluded before the current theme.

This can make it easy to make modifications to another theme without having toactually 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 yourparent theme. this won’t kill yourtheme, but it is doubling up if parenthas 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 usedto 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, blocksand/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 inMoodle’s pix folder replicated insideyour theme.

If any images are missing they willappear as broken on your theme.

Best Practice TipsInstead of using custompix use thenew SmartPix search built intoMoodle 1.8 and above.

This searches for images in yourtheme and if absent it then usesstandard 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 Notice This 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 Tips

Don’t create this from scratch. Itneeds to be exact, so copying anexisting config file is a good way of making sure you do not missanything



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.htmlreadme.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 andthe 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. Mosttoday 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 <?phpecho " $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 footerPHP 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 thistheme is going to be used in more than one install. It is best practice toalways 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 Tips

Try and keep all images in a foldercalled ‘pix’.

Makes them easier to identify andreplace 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 itdisplays 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 functionspecific 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 mainpage.

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) { ?>


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 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) { ?>


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>


<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, variousperformance details are displayed.

Demo Use:

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

} ?>



Creating a theme The CSS files

styles_layout.css

styles_fonts.cssstyles_color.css

styles_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 areconstructed by a PHP script called "styles.php" in eachtheme directory, and controlled by a file called "config.php"in the same place.

Moodle has a "standard" theme which is very plain andprovides a basic layout for other themes to build on. Each

theme may also have a "parent" theme, which will beincluded before the current theme.

Theme designers can define and add any CSS stylesheetsand name them any way as needed for this theme.

Best Practice Tips

Always refer to the ‘standard’ themeas a parent theme.

Separate your css in lyout, font andcolors 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.ico

screenshot.jpg



Creating a theme - Additional Filesfavicon.ico

Don’t feel that you need to always have the moodle icon listed in the browser bar orbookmarks.

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 themesUsing 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 allfiles from the moodle/pix directory plus a pix/mod directorycontaining 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 aspecific theme, you need to make a whole tree of icons inthe 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 inMoodle’s pix folder replicated insideyour theme.

If any images are missing they willappear as broken on your theme.

Get an icon head startNuvola is an additional icon setmade for modle and released underGPL 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 becomesnearly unlimited when you addlabels to the homepage.

You can click on the <>symbol and add html directlyinto the label. This is good forcode to generate forms.



Getting started - Parent ThemesParent themes are great forcreating ‘variations on atheme’

๏ Use parent theme’s toidentify areas of your site.

๏ Only build one theme, then

use sub-themes to createvariations.

๏ Updates to the parenttheme are immediatly appliedto all it’s “children”.



ThankyouPresenter: Julian Ridden

Email: [email protected]

Twitter: moodleman

www: http://moodleman.net

http://www.moodleman.net

http://www.moodleman.net/

http://www.moodleman.net/

mailto:[email protected]






Getting Started With Themes in Moodle

Documents

Transcript of Getting Started With Themes in Moodle