Customising Themes(Moodle v Blackboard) : Customising Themes (Moodle v Blackboard) Dr Stuart Young
School of Computing and IT
Unitec New Zealand
Dr Stuart Young : Dr Stuart Young Creating websites since 1995
PhD Marine Geochemistry
University of Edinburgh 1997-98
Online Learning Research Assistant
Unitec New Zealand 1999-2004
Lecturer in Internet and Web Development
All courses taught in class and online
Volunteer webmaster of the Green Party of Aotearoa New Zealand 1998-2005, www.greens.org.nz
Email: syoung@unitec.ac.nz
Background – Blackboard Tips : Background – Blackboard Tips I am forced to use Blackboard at my institution.
I conduct research and give workshops on tips for using Blackboard:
efficient and time-saving use
easy to use for students
attempt to work around the restrictions of Blackboard to follow the rules of good web design. http://hyperdisc.unitec.ac.nz/blackboard/
Apology – Moodle v Blackboard : Apology – Moodle v Blackboard When I offered to give a Moodle Moot talk, I planned to produce a Moodle version of my Blackboard talks.
However, the organisers wanted me to talk on customising Moodle themes.
So this presentation falls somewhere in-between
I will outline important web design rules that a course website should follow, but only those that require Moodle theme changes
I have not used Moodle for a real course
so unlike Blackboard I don’t really know what aspects of the Moodle web design cause problems for students.
Introduction: Course website usage statistics : Introduction: Course website usage statistics My previous research has shown
a correlation between student grades and number of page views of the course website
that my Blackboard courses @ Unitec are among the most successful at attracting student page views
Why are my course websites successful at attracting student page views? : Why are my course websites successful at attracting student page views? Strategies include:
encouraging student visits to the course website
minimising student errors while using the course website
increasing usability of the course website
providing a familiar consistent weekly structure
employing good pedagogical strategies
Encouraging student visits : Encouraging student visits Strategies include:
Lots of useful, up to date, quality content
Good quality graphic design
Providing a familiar weekly structure
Referring to the course website in a variety of media
Conducting assessments online
Good Web Design : Good Web Design A course website is a website.
It should follow the rules of good web design so that it is easy to use.
In effect we have to compete for student's attention with all the other websites in the world
Research from Christchurch:
many students chose not to attend the lecture because they intended to access the online version, but they never actually got around to accessing the online version.
Encourage student visits / reduce student errors : Encourage student visits / reduce student errors Providing a understandable structure, by chunking information:
Organise site how your students expect it
A classic information architecture principle is to organize the site according to the typical users' mental model of how a site should be organized.
This is usually accomplished by asking real users to sort cards into categorical piles (e.g. Bernard, 2000).
Encourage student visits / reduce student errors : Encourage student visits / reduce student errors Providing a understandable structure, by chunking information:
Weekly structure
very easy to follow and understand for normal semester courses, not so good for irregularly taught courses.
Topical structure
organise your subject area the same way a librarian would with major topics and sub-topics. Requires your students to actually know what content topic they are studying today!!!
Type of document
PowerPoints in one folder, practical exercises in another. Easy for students to find the file they want, but they may have to visit multiple folders for the same class.
Creating and modifying folders : Creating and modifying folders very easy to create new folders and sub-folders – possible to move resources or entire folders from one folder to another. Folders are integrated with the main course content.
not possible with the main course pages, but can create folders and sub-folders with the Files menu – possible to move resources or entire folders from one folder to another. Folders are separate from the main course content – have to create 'resources' links from the main content using the 'link to file' or 'display directory' tools.
Encourage student visits / reduce student errors : Encourage student visits / reduce student errors Reduce disorientation or 'lost in hypertext' problems:
Consistent structure and appearance (e.g. colour coding)
Different themes for each Moodle module is coming in 1.5
Same structure and nomenclature in a variety of media such as:
Course notes and handouts
Weekly emails
Course website 'menu' pages
Course website scheduled announcements
Encouraging student visits : Encouraging student visits Lots of useful, up to date, quality content
Very time consuming to assemble and check
I am NOT saying use Moodle as an authoring tool
Continue to use Word, HTML or PowerPoint for this
Assume they will print it
Add HTML content to help your student’s use and navigate the course materials written in those formats
Can copy relevant content from one course to another, e.g. glossary, external links
Encouraging student visits : Encouraging student visits Easy to read content
Users don’t read webpages – they quickly scan them (e.g. Morkes and Nielsen, 1997; Nielsen, 1997)
Text on a webpage should be:
Very succinct
Include only one key idea per paragraph
Use headings and sub-headings
Use highlighted keywords or phrases, and
Use bulleted lists when possible
Why you should still learn HTML : Why you should still learn HTML It is a good idea to learn some basic HTML so that you can:
Add HTML content to your pages when the HTML formatting tools are not available, and
Identify and fix problems with the code produced by the HTML formatting tools.
Extend or alter the HTML produced by Moodle.
Encouraging student visits : Encouraging student visits Good quality graphic design:
There is plenty of evidence that users of the web expect increasingly sophisticated website visual designs
e.g. Fogg et al 2002 (majority of people rated 'superficial' aspects) http://www.consumerwebwatch.org/dynamic/web-credibility-reports-evaluate-abstract.cfm
They will leave your site if it doesn't measure up to their expectations
I use consistently coloured backgrounds and borders and inline images to spice up my restrictive Blackboard design (see later)
Choosing Colour Schemes : Choosing Colour Schemes Always use consistent colours
each standard content item should always have the same colour scheme.
It may be good to utilise the same colours on different courses.
Avoid over-saturated colours, e.g.
Choose harmonious colours - that go together.
Choose a limited set of colours
your institution has decided on some colours for the overall Moodle interface - choose colours that fit in with these.
Moodle standard themes : Moodle standard themes Moodle 1.4. is bundled with a number of standard themes
These have fairly good choice of colours
They provide a base for your own themes
In addition, some developers make their own themes available for download
Moodle 1.4 themes : Moodle 1.4 themes Standard Standard logo
Moodle 1.4 themes : Moodle 1.4 themes Bright retro Cordoroy blue
Moodle 1.4 themes : Moodle 1.4 themes Cornflower Formal white
Moodle 1.4 themes : Moodle 1.4 themes Garden Metal
Moodle 1.4 themes : Moodle 1.4 themes Ocean blue Poweraid
Moodle 1.4 themes : Moodle 1.4 themes Standard blue Standard green
Moodle 1.4 themes : Moodle 1.4 themes Standard red Standard white
Other people’s Moodle themes : Other people’s Moodle themes Many other themes can be found in threads in the Moodle.org themes forum,
e.g. Juan Aburto provides some flashy modern themes
http://moodle.org/mod/forum/discuss.php?d=16500 Plomo Matias_Lautaro Nahuel_Green
Customising Moodle standard themes : Customising Moodle standard themes To develop your own theme, first make a copy of one of the standard themes and then make alterations
To do this it is necessary to understand the Moodle architecture, page layout and CSS structure
Architecture:
config.php: defines the theme colours used throughout the site
styles.php: the style sheet, containing CSS definitions for standard HTML elements as well as many Moodle elements.
header.html: Included at the top of each page. This is what you need to edit to add a logo at the top of pages, for example.
footer.html: Included at the bottom of each page.
Understanding Moodle page layout / CSS : Understanding Moodle page layout / CSS In a thread in the Moodle.org themes forum, David Scotson provides some themes to help understand the Moodle page layout.
http://moodle.org/mod/forum/discuss.php?d=12169 'Bleach' – no formatting – all white 'Colorbox' – no borders – only grey backgrounds 'Skeleton' – all table borders shown – no backgrounds
Understanding Moodle page layout / CSS : Understanding Moodle page layout / CSS More useful is the Firefox / Mozilla web developers toolbar – an 'extension' for the Firefox or Mozilla web browsers.
Outline tables Outline table cells Outline table cells and tables
Understanding Moodle page layout / CSS : Understanding Moodle page layout / CSS There is no documentation on what each CSS class does.
There are lots of people on the Moodle.org themes forum requesting help with editing themes, mainly because when they edit the CSS it doesn’t have the effect they hoped, e.g. http://moodle.org/mod/forum/discuss.php?d=9525 presumably these are because of the 'cascade' (i.e. another class overrides the one they edited) or because they were editing the wrong class.
Understanding Moodle page layout / CSS : Understanding Moodle page layout / CSS The Firefox / Mozilla web developers toolbar is a must-have for understanding the function of each CSS class.
Customising a Moodle theme : Customising a Moodle theme Probably you want to create a theme for your organisations identity (colours and logo)
First of all you need a style guide that details all the standard colours used within your organisation
If your organisation does not provide a style guide with colours, you can pick them from the screen using colour picker software.
Colorpic – www.iconico.com/colorpic/ : Colorpic – www.iconico.com/colorpic/ If an organisation does not provide a style guide with corporate colours, you can pick them from the screen using colour picker software.
Choosing a colour scheme : Choosing a colour scheme Always use consistent colours
each standard content item should always have the same colour scheme.
It may be good to utilise the same colours on different courses.
Avoid over-saturated colours, e.g.
Choose harmonious colours - that go together.
Choose a limited set of colours
your institution has decided on some colours for the overall Moodle interface - choose colours that fit in with these.
Choosing a colour scheme : Choosing a colour scheme If you are choosing your own colour scheme
Use colour choosing software to choose harmonious matching colours, e.g.
http://www.easyrgb.com/harmonies.php
http://kohaistyle.com/scripts/quickcolor/
http://www.webwhirlers.com/colors/wizard.asp
http://www.colorschemer.com/online.html
Ask a graphic designer or someone with an eye for colour to approve your choices
Style Guide example : Style Guide example Document all the standard colours you are going to use
You should consistently use a limited set of colours
Unitec theme – official website : Unitec theme – official website I will try and produce a Moodle theme the same as the official Unitec website.
Unitec theme – set up : Unitec theme – set up Made a copy of 'formal white' in the themes folder, called the new folder 'unitec'
Changed the Moodle default theme to be 'unitec'
Unitec theme – style guide : Unitec theme – style guide Documented Unitec colour scheme
logo and nav bar – #009900
logo and dark grey background colour – #666666
page background – #ffffff
text – #000000
grey text – #808080
links – #009900
light grey background (on ppt) – #efefef
Unitec theme – config.php : Unitec theme – config.php Edited the colours in config.php this had no effect on the homepage colours, other than the page background.
Presumably because this theme has colours defined in styles.php that override config.php
Unitec theme – block header bars : Unitec theme – block header bars Edited the colours in styles.php. Edited .sideblockmain, .sideblockheading, and .sideblocklinks. Now the block header and background colours are correct.
Unitec theme – font face : Unitec theme – font face Edited the fonts in styles.php. Edited body and td, th to make all fonts be Verdana.
Unitec theme – logo : Unitec theme – logo Changed the logo.jpg file to be the Unitec logo.
Background colour of heading is wrong, plus too much space.
Unitec theme – header : Unitec theme – header Edited styles.php, changed .headerhome to have white for the background colour. Also edited header.html to reduce the padding.
Looking good, but not enough corporate green
Unitec theme – link colour : Unitec theme – link colour Edited styles.php, changed a:link, a:visited and a:hover to use Unitec corporate green for the link colour.
Rather garish, but this is what they use for links on the Unitec website.
Unitec theme – other pages : Unitec theme – other pages The homepage is fine, what about the other pages? Note that these use 'logo_small.jpg'
The header for the sub- pages is wrong, and black text on a dark grey background is nearly unreadable.
Unitec theme – header : Unitec theme – header Edit styles.php, change .header to have white background colour.
The breadcrumb trail is still not correct. Unitec use small grey text on a white background
Unitec theme – navbar : Unitec theme – navbar Edit styles.php, changed .navbar to have white background colour and grey text.
The breadcrumb trail is still not completely correct. The links in the breadcrumb trail use the standard link colour
Unitec theme – navbar links : Unitec theme – navbar links Edit styles.php, add a new style definition, i.e. .navbar a – all the links within .navbar
.navbar {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size : 10px;
background-color: #FFFFFF;
color: #666666;
}
.navbar a {
color: #666666;
}
Unitec theme – font colour : Unitec theme – font colour Edit styles.php, changed .outlineheadingblock and .topicsoutlineside to make font colour white. Presumably also need to change .weeklyoutlineside
Unitec theme – many remaining changes : Unitec theme – many remaining changes There are many more pages that need to be checked and styles that need to be changed
e.g. forum pages .forumpostside, .forumpostheadertopic .forumpostheader,
e.g. calendar
Other theme options : Other theme options A common technique is gradient backgrounds
especially for header bars
formed from 1 pixel wide images
dark at end, light in middle - appears to come out of the page
light at ends, dark in middle - appears to be inset into the page
be very careful about making a gradient image, - they can easily look really bad
Unitec theme – gradient backgrounds : Unitec theme – gradient backgrounds Edit styles.php, changed .sideblockheading, .headingblock
.sideblockheading {
background-image: url(gr-bg2.gif);
}
.headingblock {
background-image: url(gr-bg2.gif);
}
Unitec theme – icon header “bullets” : Unitec theme – icon header 'bullets' Edit styles.php, changed .sideblockheading, .headingblock to add a tiny icon in each header bar
.sideblockheading, .headingblock {
color: #666666;
background-color: #FFFFFF;
background-image: url(logo_tiny.gif);
background-repeat: no-repeat;
background-position: 2px;
padding: 0.5em 2.0em;
}
Unitec theme – dates (using PHP) : Unitec theme – dates (using PHP) Edit header.html, added PHP code to write in the current date and time
andlt;p class='navbar'andgt; andlt;?php print date('D dS M, Y h:i a');?andgt; andlt;/pandgt;
Moodle theme summary : Moodle theme summary It really is essential to have a working knowledge of HTML and CSS
While anyone can open up styles.php and change a colour or font in a class, it really requires CSS to knowledge to get everything working correctly.
It really is essential to have an eye for colour, or to at least get help from a graphic designer
there are too many really ugly course websites out there
Start with a theme with similar colours to your choice
any parts you don’t get working correctly will hopefully not look too out of place
Encourage student visits / reduce student errors : Encourage student visits / reduce student errors Reduce disorientation or 'lost in hypertext' problems:
Same structure and nomenclature in a variety of media such as:
Course notes and handouts
Weekly emails
Course website 'menu' pages
Course website scheduled announcements
Standard (weekly) content could include : Standard (weekly) content could include Introduction
You can start each page of content with a brief introduction to that section's topics or activities.
Learning Outcomes
For a more formal approach you could start each page of content with that section's learning outcomes.
Course Readings
Links to further reading for your students on this topic, e.g. single articles. Useful Links
Links to reference websites on this topic.
Featured Tools
The best software products or web-based tools for this topic.
Featured Text Books
The best books for this topic.
Assessment Progress
Tell your students what their progress should be on their assignments by this week.
Example boxes : Example boxes Here are some of the coloured boxes I use in my Blackboard courses What colour would you make your standard content items?
Standard Content Boxes - Blackboard : Standard Content Boxes - Blackboard In Blackboard I am forced to use inline CSS styles in HTML code that I have to copy from page to page
And the display is annoying and restrictive
Standard Content Boxes - Moodle : Standard Content Boxes - Moodle In Moodle it is easy – simply create a new custom class and then refer to it. .assignments {
font-size: 11px;
border: #dd2222 1px solid;
padding: 0.5em;
background: #eebbbb;
}
.assignments a {
color: #000000;
text-decoration: underline;
}
andlt;p class='assignments'andgt;
Inline Images : Inline Images Many educators using Blackboard will only add a link to a file, in the same manner as adding a word document or PowerPoint file. This is a bad idea for most images:
the image opens up in the same window and overwrites the webpage - not possible to look at the image and the text describing it at the same time,
not inviting for the students - it is one more link they have to click.
Inline Images : Inline Images Blackboard and Moodle both allow you to upload images to display within the page – 'Inline images'.
The image is displayed to the student along with all the text and the rest of the page, just like a normal website. What images would you bother including?
Inline Images - Blackboard : Inline Images - Blackboard Blackboard’s inline image tool produces poor HTML that is very restrictive.
doesn’t validate
too much space
not possible to wrap the text around the image
needs a lot of editing to make the page look good.
andlt;pandgt;Here is the text describing this image.andlt;/pandgt; andlt;pandgt; andlt;A HREF='http://www.usablenet.com/' target='_new'andgt;andlt;DIV ALIGN='left'andgt;andlt;img alt='[ Lift Usability Checker ]' border='0' src='http://bb.unitec.ac.nz/courses/1/ISCG6240/content/_106135_1/embedded/lift.gif'andgt;andlt;/DIVandgt;andlt;/Aandgt;andlt;BRandgt; andlt;pandgt;
Inline Images - Moodle : Inline Images - Moodle Moodle’s inline image tool produces much better HTML that is much less restrictive.
much less editing of HTML code is necessary
Administrative Announcements : Administrative Announcements To minimise student errors.
My assignment due date reminder announcements also contain instructions on how to use the Blackboard tools (e.g. dropbox, forum)
These re-use the actual Blackboard images – no need to upload an 'inline image'
Inline Images : Inline Images Image's path is determined by right-clicking on the image:
Increase Usability : Increase Usability Cross-linking
use the possibilities of hyper-linking to allow students to quickly access resources
presumably lead to more usage of the course by your students
The Blackboard Course Link tool is limited and restrictive
can produce links manually using HTML, but ugly URLs and frames make it unpleasant.
Moodle has to be done manually
but URLs are simpler and no frames What content would you cross-link between?
Increasing the usability of the course website : Increasing the usability of the course website Blackboard announcements are the only content that is 'pushed' to students
(on the student's BB homepage)
And even then, clicking on the link doesn't take the student to the course!
Moodle has many possible blocks to inform students of website updates.
Increasing the usability of the course website : Increasing the usability of the course website Deep-linking
Make it easy for the student to visit
Flaws with this in Blackboard are that only one link is allowed and that it is very time-consuming to add them.
In Moodle, if anything in the admin system is restrictive, can easily hack the code.
Conclusion : Conclusion There is much less to change in Moodle to make it follow the rules of good web design
Moodle produces a much more usable site for the students
It is much easier to make any changes in Moodle using CSS
I wish I could use Moodle for my online courses at Unitec
Contacts : Contacts Stuart Young syoung@unitec.ac.nz
PDFs of my papers http://hyperdisc.unitec.ac.nz/research.htm