advertisement

moodle themes

67 %
33 %
advertisement
Information about moodle themes
Education

Published on June 27, 2007

Author: WoodRock

Source: authorstream.com

advertisement

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

#ffffff presentations

Add a comment

Related presentations

Related pages

themeCaters - Delivers Amazing Moodle Themes

Welcome to themeCaters. Our themes give you the ability to easily customize, design and brand Moodle all while complying with modern web standards.
Read more

Moodle plugins directory: Category: Themes

Earth is a fluid-width 2 column theme based on Binarius, for Moodle 2.x. It is part of a series of ten 'Planet' themes intended to provide a choice of ...
Read more

Themes - MoodleDocs - docs.moodle.org

Themes provide a "skin" to completely change the look and feel of your site (or even an individual course). Theme settings; Standard themes including ...
Read more

Themes - Moodle

Themes provide a "skin" to completely change the look and feel of your site (or even an individual course). Theme settings; Standard themes including ...
Read more

Moodle Themes - themeCaters

ThemeCaters is owned and managed by Vidya Mantra, a certified Moodle Partner from USA and India, and not Moodle Pty Ltd.
Read more

Moodle downloads

Moodle is open source under the GPL licence. ... Browse our extensive Moodle plugins directory for extra activities, blocks, themes and more. On the move.
Read more

Moodle LMS Themes from ThemeForest

Get 6 Moodle lms themes. All from our global community of creatives.
Read more

Moodle Hosting Support Beratung Schulung Entwicklung Themes

Unsere Kunden erhalten Installation, Hosting, Support, Beratung, Schulungen, Workshops, Entwicklung, Erstellung von Inhalten & Themes für E-Learning.
Read more

Moodle - Open-source learning platform | Moodle.org

Moodle is a Learning Platform or course management system (CMS) - a free Open Source software package designed to help educators create effective online ...
Read more

Best Wordpress Themes - ThemeGurus

We showcase the best wordpress themes you can buy. Our list is updated daily with new themes added as they are released.
Read more