• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A look at moodle 2 themes
 

A look at moodle 2 themes

on

  • 14,108 views

This paper takes a look at the default themes that come with Moodle 2 and at a selection of themes which have been contributed to the community.

This paper takes a look at the default themes that come with Moodle 2 and at a selection of themes which have been contributed to the community.

http://www.somerandomthoughts.com

Statistics

Views

Total Views
14,108
Views on SlideShare
14,061
Embed Views
47

Actions

Likes
10
Downloads
540
Comments
3

3 Embeds 47

http://www.scoop.it 37
http://tlcmoodle.imgsoftware.com 9
http://aulacec.virtualepn.edu.ec 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A look at moodle 2 themes A look at moodle 2 themes Document Transcript

    • White Paper 11/4/2011 Moodle 2 Themes A look at the default themes that come with Moodle 2 and at a selection of themes which have been contributed to the community. By Gavin Henrick www.somerandomthoughts.comPlease feel free to copy, share and reference this e-book. All we ask is that you acknowledge Gavin Henrick asthe source and link to http://www.somerandomthoughts.com when citing the publication.This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.Permissions beyond the scope of this license may be available at http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Moodle 2 ThemesA look at the default themes that come with Moodle 2 and at a selection of themes whichhave been contributed to the community.Themes in Moodle are a combination of PHP, JavaScript, HTML, CSS and images files. When you set out todeploy Moodle you will either need to  use an existing available theme  tweak or customise an existing theme  build or source a new theme from scratch (from http://moodle.com/themes/ for example)When using a theme in Moodle 2, you can select it to work either across the whole site or at different levelsthroughout the site namely:  Site-wide (One theme is used everywhere)  Category level (each category can optionally specify a different theme to the default)  Course level (each course can optionally specify a different theme to the default)  User level (each user can optionally specify a different theme to the default)This paper evolved from the reviews and Moodle 2 theme review page:http://www.somerandomthoughts.com/blog/moodle-2-themes/.During my reading recently I also came across a number of other presentations and documents aboutthemes, they are referred to in the appendix 2.Many thanks to all who helped review the content of the paper - your time is appreciated and thanks also tothose who submitted examples for use in Appendix 3 and 4.For any queries or corrections for paper please contact me gavin@somerandomthoughts.comTHIS WHITE PAPER IS FOR INFORMATIONAL PURPOSES ONLY AND MAY CONTAINTYPOGRAPHICAL ERRORS AND TECHNICAL INACCURACIES. THE CONTENT IS PROVIDED AS IS,WITHOUT EXPRESS OR IMPLIED WARRANTIES OF ANY KIND.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 1
    • Moodle 2 Themes 04/11/20111. Why read this?................................................................................................................ 32. Themes in Moodle 2 ...................................................................................................... 43. Customising themes ...................................................................................................... 94. Theme gallery ................................................................................................................135. About the Author ........................................................................................................ 496. Creative Commons Copyright .....................................................................................50Appendix 1 - Community Contributed Themes .................................................................... 51Appendix 2 - Further Reading ................................................................................................ 52Appendix 3 - Moodle 2 site Examples .................................................................................... 53Appendix 4 - Moodle 1.9 site Examples .................................................................................582 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011 1. Why read this?If are you planning to move from Moodle 1.9 to Moodle 2 you will need to redevelop your theme. Thisdocument aims to provide some guidance on what’s out there already and some of the issues to thinkabout.Or if you are just looking at moving to Moodle 2 and thinking about what you are going to do for yourtheme, then this document should provide some assistance in understanding what community contributedthemes are available in addition to the standard themes that come with Moodle 2.This paper looks at the basic features of themes in general and what aspects to consider when customizingor selecting a new theme. The paper also looks at what features the specific themes have in layout and theextra customisation options available through the admin settings.Appendix 3 and 4 provide some sample sites from the community for Moodle 2 and Moodle 1.9 respectively.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 3
    • Moodle 2 Themes 04/11/2011 2. Themes in Moodle 2For Moodle 2 the theme system was completely redesigned. There are a number of areas which makethemes in Moodle 2 very different to how they were in Moodle 1.9. This section deals with some generaltheme aspects of Moodle 2 specifically:  Layout and positioning  Functionality overrides  Device detection  Customisation of the menu  Overall theme settingsLayout and positioningMoodle 2 doesn’t need to look like Moodle. What do I mean by this? Well any design is now possible.Where traditionally Moodle themes followed some set layouts with a header/footer and 3 columns (2columns of blocks on either side of a main content column), this is not the case with Moodle 2, and the newdesign is layout based. You could have 1, 2, 3 or more columns if you want to. The traditional designlimitations are now all but removed.Blocks can now be placed in the header, footer, or at the top / bottom of the content area in addition to thenormal columns. So the whole page can look very different if you put the work in. As blocks can provide arange of functionality, from content display, to specific features like login boxes and RSS feed displays, ifyou think creatively, you can really change the makeup of the Moodle page. All options are on the tablenow.For more information on layouts, check out the Moodle Docs -http://docs.moodle.org/dev/Themes_2.0#LayoutsCustomising the menuOne of the new aspects of themes in Moodle 2 is the ability to manage a dropdown menu from the adminsettings.By adding in rows of the name and URL that you want the option to go to, you can configure the custommenu easily. You can also create menus can indenting the option using “-“.So for example this sample has Moodle Community as the first option and below it Moodle Support: Moodle community|http://Moodle.org -Moodle free support|http://Moodle.org/supportThe section to add these in is found at the bottom of the page under:Settings -> Site administration -> Appearance -> Themes -> Theme settings4 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 5
    • Moodle 2 Themes 04/11/2011Rendering over-rideIn addition to the new layout files, it is possible with programming to override the renderers which producethe smaller parts of Moodle, so you can change how they display as well.This means it is much easier to change the output of parts of the features, like blocks, activities and so on.This is a huge change. For more information be sure to check out the Moodle docs pagehttp://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer! One of the areas which you may want to have an override would be the custom menu. You may want toextend it so that it includes a “my courses” dropdown as well as the normal options from the settings box.You could also decide to add a categories drop down as well using overrides too. Both of these wouldrequire development.Device detectionMoodle 2 now has device detection for themes. What does this mean? Well, it means that you can have amain theme set for your Moodle 2 site which will load when people access from a web browser on theirdesktop, notebook or laptop, however you can have a different one load when they access it from a mobile,and a different one load when they access it from a tablet.This means you can if you wish, customise the look/feel and structure and layout for each different device.A good example of this is the MyMobile theme which is highlighted later on which provides an optimisedexperience for smart phones and tablets. It is written using a mobile specific interface (jqueryformobile).However, as you can add device definitions, you can also create a theme for different browsers if you needto. This would enable you to create a version of your theme optimised for a specific browser like IE6 forexample.The screen for selecting which themes you are using for which device is found in the Settings block:Settings -> Site administration -> Appearance -> Themes -> Theme selector6 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Theme SettingsThe following are the settings which you may or may not want to alter but need to be aware of:Setting Default CommentTheme list EMPTY You should probably fill this in when you finalise your themes if you want to let course teachers or even all users select their own theme from a selection of themes. Here you specify the only themes you want available to choose from.Theme designer mode** No If you are designing themes or developing code then you probably want to turn this mode on so that you are not served cached versions.Allow user themes No If you want to allow a user to change to select a theme for accessibility them this is needed, if not, set no.Allow course themes No If you want to allow a teacher to set a specific theme for a course (perhaps in a department, or special© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 7
    • Moodle 2 Themes 04/11/2011 course) this is needed, if not, leave at no.Allows category themes No If you want to allow each faculty or department have a unique theme then this is needed, if not, leave at no.Allow theme changes in the No If enabled, the theme can be changed by addingURL theme={themename} to any Moodle URL.Allow users to hide blocks Yes If you want to allow users to hide/show block contents throughout the site, you leave this enabled. However if you want to force the contents showing, then set this as No.Allows blocks to use the dock Yes This is primarily controlled by the theme as it must support the docking concept. If it does, you can still turn it off here if you wish.Custom Menu Items Empty Add in the menu URLs that are required. (as explained earlier)Enable device detection Yes If you want to allow different themes for different devices leave this enabled.Device detection regular Empty Advanced option for further device detection.expressions** One important thing to note is that the Theme Designer mode is not designed for use on productionservers as it has a significant impact. This should only be used when developing a theme, which ideallyshould be done on a hosted test server or a local test server on your desktop/laptop (using xampp forexample).8 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011 3. Customising themesWhen thinking about getting a theme made, or setting about customising a theme, there are a number ofareas you probably want to consider.LayoutAlthough most themes release have the same column outline, it is not the case for all themes and as alreadyoutlined in Moodle 2 the layout can be pretty much anything. That said, most themes released so far stillfollow the layout concepts from Moodle 1.9, but this is changing.Leaving aside whether you add block spaces in the header or footer, let’s look at the standard layouts peopleuse.Some themes have all the block columns on left, some on right, or some have the normal of one blockcolumn on either side. Now of course you can choose to use or not use blocks, however the inherent designhas a lot to do with what decisions you can make.The options are:Option Description ImpactBlocks, Content, Blocks This is the most typical layout of a In a standard screensize this restricts the Moodle theme, and provides content area to about 60% of the width if options for blocks on both sides of blocks are used on both sides; however it the course content area. provides a lot of space for blocks.Content, Blocks, Blocks This is variation of the main type, In a standard screensize this restricts the where both columns are on the content area to about 60% of the width if right side of the content column. blocks are used on both sides; however it provides a lot of space for blocks. rdBlocks, Blocks, Content This is the 3 variation of the main In a standard screensize this restricts the type, where both columns are on content area to about 60% of the width if the left side of the content blocks are used on both sides; however it column. provides a lot of space for blocks.Content, Blocks This only has one block column to This gives a lot more space to the the right hand side of the content. content area and has limited space for blocks.Blocks, Content This only has one block column to This gives a lot more space to the the left hand side of the content. content area and has limited space for blocks.Of course these are all changed if you have docking on, as some blocks can now hide off to the side of thescreen.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 9
    • Moodle 2 Themes 04/11/2011My personal preference is the Content, Blocks format with the navigation and settings blocks docked (so offto the left)As below:DockingNew in Moodle 2 is the ability to dock a block to the side of the page, thus creating more real-estate on thepage for the content and the activities. This feature has a global setting which can be turned on and off,however it is also an aspect of the theme. Not all themes support this docking feature, so if you want todock you will need to take this into account.MyHome (MyMoodle)The new MyMoodle (MyHome) can be focused on and customised more so that it can have extraplacements locations (more columns for example) for blocks to turn it into a strong dashboard. Some extrablocks may need coding to take advantage of this, but this needs taking into account from theme and sitedesign phase.10  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011NavigationThe new navigation block in Moodle provides context aware site-wide navigation options for the user. Itcan also provide some in-course navigation to resource and activities. However, you may wish to considerone of the specialist in-course navigation blocks called Course Menu Block, or Course Content. So adecision on how you want to work will need to be considered, namely - is the Navigation block going to beused for site-wide and in-course navigation or will a specialist block be used for in-course meaning youneed to change the settings for the navigation block.Front PageAlthough this is not necessarily part of a theme install, it should be something that is considered in the sitedesign of which the theme is an integral part of.With the front page settings you can have blocks on the front page, and lists of courses and categoriesautomatically generated, and a news feed too, however one has to ask if you want some, any or all of theseon your front page.There is one approach which can provide you a lot of visual control to the front page. With all blocks gone,no news, no category list and no course list you have a big empty space. If you then enable topics for thisyou can then control the front page through a HTML editor, and build a nice graphical /content front page.Then you can build a graphical or flash panel which shows the different departments, and clicks through tocategory course lists, or have a table grid of images sort of a dashboard, which go to MyHome, StudentSupport course and so on. The point is you have a lot of control and can think about this page withoutconstraints if you so wish.You can see a nice selection of front page examples in Appendix 3 (Moodle 2) and Appendix 4 (Moodle 1.9).The front page settings are detailed below:Setting Default Reason for changeFull site name Fullname This will show on some pages of the Moodle install.Short name for the site Shortname This will show in some pages of Moodle.Front page description Summary This is not shown unless the block is enabled.Front Page Dropdowns Set all to None to enable full control of front page as a webpage.Front page items when Dropdowns Set all to None to enable full control of front pagelogged in as a webpage.Maximum category depth UnlimitedInclude a topic section YesNews items to show 3Comments displayed per 15pageCourses per page 20Default frontpage role Authenticated Don’t alter. user on frontpage© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 11 
    • Moodle 2 Themes 04/11/2011BlocksYou may wish to change the block look, and some of the things to consider are:  Coloured head of block or not  Curves around block or not  Lines around block or notThe style that you overall want to achieve must have a solution for blocks that is workable.Width – Fixed or FluidThe Moodle theme can be either a set width or dynamic/fluid width so it reacts to the width of thewindow/screen.Each of the options have their benefits and weaknesses. A fixed width theme can squeeze contentsomewhat, but sometimes fluid themes can end up with acres of white space around content. Docking alsotakes space, so this needs to be considered here too.Another point to consider when using fixed width is content scroll bars. When you add content that iswider than the space available Moodle adds its own scroll bars. This can make it a big cumbersome to dealwith (for example a huge gradebook with horizontal and vertical scrollbars).. Equally this can happen withcontent in HTML blocks, which then have scroll bars too. So you need to be sure your content fits when inconfined areas.AccessibilityHow are you going to address accessibility with the Moodle theme? There are a number of approaches thatyou can consider:  Build your whole theme completely accessible  Provide widgets in the theme which can control font, font size and colours  Provide an alternate theme or themes for different font/layouts or high contrast  Provide education around the accessibility options available in modern web browsersYou may of course choose to do multiple of these, however it is something to consider when looking andthinking about customizing a theme.Login BoxWhere should login box / link on main site? Do you want it to be a prominent feature on the front page orperhaps in a block? Maybe you want it just to prompt for login when the user tries to access content whichneeds authentication? Or perhaps you will force login for all people accessing the site. This decision hasimpact on the site design, especially the front page.12  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011 4. Theme galleryDefault themesThere are a good number of themes that are distributed with Moodle 2. Not only do these provide somegood examples of how Moodle 2 may look, but they mostly offer simple customisation options throughsettings in the theme itself.For a good comparison, each of the following settings have been adopted for the comparisons  pages have a theme screenshot taken on my standard Moodle feature course  no blocks are docked  A standard set of custom menus are added inThis screenshot is then followed by a table of data related to that theme.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 13 
    • Moodle 2 Themes 04/11/2011Afterburner Name Afterburner Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Mary Evans Width Fluid Setting Options14  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Anomaly Name Anomaly Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Moodle HQ Width Fluid Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 15 
    • Moodle 2 Themes 04/11/2011Arialist Name Arialist Layout Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options Change Logo Change Tagline Link Colour Column Width Custom CSS16  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Binarius Name Binarius Layout Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 17 
    • Moodle 2 Themes 04/11/2011Boxxie Name Boxxie Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking No Maintainer Patrick Malley Width Fluid Setting Options18  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Brick Name Brick Layout Content, Block Status Default theme Device Standard Author John Stabinger Docking Yes Maintainer John Stabinger Width Fluid Setting Options Logo Link colour Linkhover colour Header main colour Block title link colour Heading colour© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 19 
    • Moodle 2 Themes 04/11/2011Formal White Name Formal White Layout Block, Content, Block Status Default theme Device Standard Author MediaTouch 2000. Docking Yes Maintainer MediaTouch 2000. Width Fluid Setting Options Default Font size 1.9 look Page text or Logo in Logo header Header background Blocks content Right column Blocks column width colour background colour background colour Footnote HTML Custom CSS20  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011FormFactor Name FormFactor Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking No Maintainer Patrick Malley. Width Fluid Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 21 
    • Moodle 2 Themes 04/11/2011Fusion Name Fusion Layout Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options Link colour Tagline Footertext Custom CSS22  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Leatherbound Name Leatherbound Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 23 
    • Moodle 2 Themes 04/11/2011Magazine Name Magazine Layout Block, Content, Block Status Default theme Device Standard Author John Stabinger Docking Yes Maintainer John Stabinger Width Fluid Setting Options Background graphic Logo graphic Link colour Linkhover colour Maincolour Maincolour accent Headingcolour Block colour forumback24  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Nimble Name Nimble Layout Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options Tagline Footerline Headerbackground Link colour colour Menu hover colour© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 25 
    • Moodle 2 Themes 04/11/2011Nonzero Name Nonzero Layout Content, Block, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options Left col width Right col width Custom CSS26  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Overlay Name Overlay Layout Content, Block, Block Status Default theme Device Standard Author John Stabinger Docking Yes Maintainer John Stabinger Width Fluid Setting Options Link Colour Header Colour Footertext Custom CSS© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 27 
    • Moodle 2 Themes 04/11/2011Serenity Name Serenity Layout Block, Content, Block Status Default theme Device Standard Author Patrick Malley Docking Yes Maintainer Patrick Malley Width Fluid Setting Options28  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011SkyHigh Name SkyHigh Layout Content, Block, Block Status Default theme Device Standard Author Julian Ridden Docking Yes Maintainer John Stabinger Width Fluid Setting Options Logo Col Width Footnote Custom CSS© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 29 
    • Moodle 2 Themes 04/11/2011Splash Name Splash Layout Block, Content, Block Status Default theme Device Standard Author Caroline Kennedy Docking Yes Maintainer Caroline Kennedy Width Fluid Setting Options Logo Tagline Hide Tagline Toggle Footnote Custom CSS30  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Standard Name Standard Layout Block, Content, Block Status Default theme Device Standard Author Moodle HQ Docking Yes Maintainer Moodle HQ Width Fluid Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 31 
    • Moodle 2 Themes 04/11/2011Community contributed themesThere are an increasing number of themes available that have been created by the community which havebeen released for download. Over 15 of these are now available from the new plugins database which isfound at: http://Moodle.org/plugins/For a good comparison, each of the following pages have a theme screenshot taken on my standard Moodlefeature course, with no blocks docked followed by a table of data related to that theme. The details onmaintainer are as named in the database.The URLs to the download pages are included in Appendix 1.32  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Aardvark 2.1 Name Aardvark 2.1 Layout Block, Content, Block Status Theme Plugin Device Standard Author Shaun Daubney, Mary Evans Docking No Maintainer Shaun Daubney, Mary Evans Width Fixed Setting Options Background Image Logo Menu Hover Colour Email URL Footnote Special Feature Includes a special expandable area in header for logged in users called Profile Bar (grey area in screenshot), can be toggled on/off.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 33 
    • Moodle 2 Themes 04/11/2011Aardvark 2.1 - PostIt Name Aardvark 2.1 - PostIt Layout Block, Content, Block Status Theme Plugin Device Standard Author Shaun Daubney, Mary Evans Docking No Maintainer Shaun Daubney, Mary Evans Width Fixed Setting Options Background Image Logo Menu Hover Colour Email URL Footnote Profile bar background Special Feature Includes a special expandable area in header for logged in users called Profile Bar (grey area in screenshot), can be toggled on/off.34  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011All Content Name AllContent Layout Content, Block Status Theme Plugin Device Standard Author NewSchool Learning. Docking Yes Maintainer NewSchool Learning. Width Fluid Setting Options Logo Link Colour Link Hover Colour© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 35 
    • Moodle 2 Themes 04/11/2011Darkb Name Darkb Layout Block, Content, Block Status Theme Plugin Device Standard Author John ST Docking Yes Maintainer John ST Width Fluid Setting Options Logo Link Maincolour36  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Decaf Name Decaf Layout Block, Content, Block Status Theme Plugin Device Standard Author Lei Zhang Docking Yes Maintainer Lei Zhang Width Fluid Setting Options Background Colour Footnote Custom CSS Hide Settings Block Hide Navigation Block Show user picture Add custom menu to Awesome bar Special Feature For all users it shifts the setting blocks to top of the page, creating the so called "Moodle awesome bar".© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 37 
    • Moodle 2 Themes 04/11/2011Discuss Name Discuss Layout Block, Content, Block Status Theme Plugin Device Standard Author Danny Wahl Docking Yes Maintainer Danny Wahl Width Fluid Setting Options38  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Education Book Name Education Book Layout Block, Content, Block Status Theme Plugin Device Standard Author 99Template.com Docking No Maintainer 99Template.com Width Fluid Setting Options Logo Site Link Colour Header Background Top Menu Background Colour Colour Block header Block content Footer background Footer note Background colour background colour colour© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 39 
    • Moodle 2 Themes 04/11/2011Flexi ii Name Flexi II Layout Block, Content, Block Status Theme Plugin Device Standard Author Richard Oelmann Docking No Maintainer Richard Oelmann Width Fluid Setting Options Custom CSS Footnote 27 Dock settings 17 Block settings 6 Menu Bar Settings 26 General Page settings 6 Breadcrumb bar 12 Header section Settings settings 6 Dropdown settings 6 menu hover settings Special Feature This theme has exposed a huge amount of settings through the admin page to allow a significant amount of customisation once it is installed. However you need to have your Hex colours already worked out.40  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Krystle2 Name Krystle 2 Layout Block, Content, Block Status Theme Plugin Device Standard Author Richard Oelmann Docking Yes Maintainer Richard Oelmann Width Fluid Setting Options Hide Settings Block Hide Navigation Block Special Feature This theme has the “Awesome Bar” which moves the settings and navigation blocks to drop down menus at the top of the page.© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 41 
    • Moodle 2 Themes 04/11/2011Lagomorph Name Lagomorph Layout Block, Content, Block Status Theme Plugin Device Standard, tablet, Mobile Author Richard Oelmann Docking No Maintainer Richard Oelmann Width Fluid Setting Options URL for settings file URL for menu text file Choose Menu Layout Page Image Background colour 1 Background colour 2 Off-black colour Off-white colour Special Feature Designed for dynamic column display of 3, 2 or 1 column depending on screensize. There are no dropdowns and some new block locations are defined above the content area.42  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Mandarin Name Mandarin Layout Content, Block Status Theme Plugin Device Standard rd Author 3 Wave Media Docking No Maintainer 3rd Wave Media Width Fixed Setting Options© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 43 
    • Moodle 2 Themes 04/11/2011MultiStyled Name MultiStyled Layout Block, Content, Block Status Theme Plugin Device Standard Author Richard Oelmann Docking No Maintainer Richard Oelmann Width Fluid Setting Options Site-wide layout Page body width Site logo Headings background colour Sidebar Background Main Content Main Text Colour Heading Text Colour Colour background Custom CSS44  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011MyMobile Name MyMobile Layout Custom Status Default theme Device Mobile, Tablet, All Author John ST Docking No Maintainer John ST Width Fluid Setting Options Mobile Theme color Mobile Intro Text Show site topic Show full images on switcher site index and course pages Special Feature This theme provides a ui-enhanced mobile-ready version of your Moodle 2. This theme is customised and optimised for smart phones using jquerymobile ( http://jquerymobile.com ). It has been tested most on IOS, 3GS, iPhone 4, iPad and IOS 4+ is recommended. It has also been tested on Android 2.1+. It works with the latest browsers as well (Chrome 10+, Safari, FF 4+ and IE9)© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 45 
    • Moodle 2 Themes 04/11/2011Newsie Name Newsie Layout Content, Block Status Theme Plugin Device Standard Author JohnST Docking Yes Maintainer JohnST Width Fluid Setting Options Logo Link Colour Link Hover Colour46  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Simplespace Name Simplespace Layout Block, Content, Block Status Theme Plugin Device Standard Author johnSt Docking Yes Maintainer johnSt Width Fluid Setting Options Background image Logo image Link colour Linkhover colour Maincolour Maincolour accent Heading colour Block colour Forumback Forum colour Special Feature© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 47 
    • Moodle 2 Themes 04/11/2011Zebra Name Zebra Layout Block, Content, Block Status Theme Plugin Device Standard Author Danny Wahl + others Docking Yes Maintainer Danny Wahl Width Fluid Setting Options Logo Logo height Logo Alt Text Background image Background colour First colour Second colour Third colour Fourth colour Fifth colour Sixth Colour Seventh colour Colour Scheme Menu Colour Scheme One Col max width Two Col min Width Two col max width Three Col min width Three Col max width Enable page zoom Custom CSS Hide footer logo Special Feature Offers 1, 2, 3 column layouts, with dynamic colour dark/light settings.48  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011 5. About the AuthorGavin Henrick is a solutions consultant based in Dublin, Ireland who works with assisting organisations toimplement a range of open source learning technologies including Moodle and Mahara. He facilitatesproject consultancy and training workshops on e-learning project rollouts and upgrade strategies.Gavin has worked with technology in business, learning and development for over 10 years. He has beenworking with Moodle, Mahara, DSpace and other open-source applications for the last 4 years.Gavin currently focuses on supporting organisations with e-learning projects including Moodle 2 rolloutsand upgrade strategies through project consultancy and training workshops.Gavin recently co-authored the book for Moodle 2.0 for Business Beginners Guide with Jason Cole andJeanne Cole. This was published by Packt Publishing in May 2011.Gavin blogs at (http://www.somerandomthoughts.com) where he regularly provides information onMoodle including reviews of community created plugins and themes.He is a regular speaker at a number of Moodlemoots and conferences on the use of Moodle focusing onpractical examples of usage.For more information:Email – gavin@somerandomthoughts.comBlog – http://www.somerandomthoughts.comTwitter – http://www.twitter.com/ghenrickLinkedIn - http://www.linkedin.com/in/gavinhenrickSlideshare – http://www.slideshare.net/ghenrickBook - http://www.Moodleforbusinessbook.com/© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 49 
    • Moodle 2 Themes 04/11/2011 6. Creative Commons CopyrightPlease feel free to copy, share and reference this e-book. All we ask is that you acknowledge Gavin Henrickas the source and link to http://www.somerandomthoughts.com when citing the publication. This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.Permissions beyond the scope of this license may be available at http://www.somerandomthoughts.comTo view a copy of this license, visit http://creativecommons.org/licenses/by-nd/3.0/50  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Appendix 1 - Community Contributed ThemesAardvark 2.1 http://moodle.org/plugins/view.php?plugin=theme_aardvarkAardvark 2.1 - Postit http://moodle.org/plugins/view.php?plugin=theme_aardvark_postitAllContent http://moodle.org/plugins/view.php?plugin=theme_allcDarkb http://moodle.org/plugins/view.php?plugin=theme_darkbDecaf http://moodle.org/plugins/view.php?plugin=theme_decafDiscuss https://github.com/downloads/thedannywahl/Discuss_4_Moodle_2/discuss-v0.1.zipEducation Book http://moodle.org/plugins/view.php?plugin=theme_educationbookFlexi_ii http://moodle.org/plugins/view.php?plugin=theme_flexi_iiKrystle2 http://moodle.org/plugins/view.php?plugin=theme_krystle2Lagomorph http://moodle.org/plugins/view.php?plugin=theme_lagomorphMandarin http://moodle.org/plugins/view.php?plugin=theme_mandarinMultiStyled http://moodle.org/plugins/view.php?plugin=theme_multistyledMyMobile http://moodle.org/plugins/view.php?plugin=theme_mymobileNewsie http://moodle.org/plugins/view.php?plugin=theme_newsieSimplespace http://moodle.org/plugins/view.php?plugin=theme_simplespaceZebra http://moodle.org/plugins/view.php?plugin=theme_zebra© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 51 
    • Moodle 2 Themes 04/11/2011Appendix 2 - Further ReadingSome other useful Linkshttp://moodle.com/themes/http://docs.moodle.org/20/en/Site_appearancehttp://docs.moodle.org/20/en/Installing_a_new_themeBlog entrieshttp://stawebteam.wordpress.com/2011/04/08/developing-a-new-theme-for-moodle-2-0/http://blogs.sussex.ac.uk/elearningteam/2011/01/24/things-we-love-about-moodle2-pt2-experimenting-with-themes/Through checking the referring URLs to my blog, I recently came across some other interestingpresentations embedded from Slideshare which are also of interest:Original Blog: http://cem.factorsim.info/ (Spanish)http://www.slideshare.net/tumbukta/101012-mootes2010http://www.slideshare.net/pvdhyden/moodle-20-themeshttp://www.slideshare.net/moodleman/theme-gurus-moodle-2-edition52  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Appendix 3 - Moodle 2 site ExamplesFigure 1 – Moodle Community site http://Moodle.orgFigure 2 –iMoot Conference http://2011.imoot.org© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 53 
    • Moodle 2 Themes 04/11/2011Figure 3 – South Devon College http://moodle.southdevon.ac.ukFigure 4 - Developed by www.synergy-learning.com54  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Figure 5 – Developed by http://www.remote-learner.co.uk for clientFigure 6 -Leeds City College http://moodle.leedscitycollege.ac.uk/© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 55 
    • Moodle 2 Themes 04/11/2011Figure 7 - Developed by BrightAlley http://www.brightalley.nl/ for Ricoh EuropeFigure 8 - Developed by BrightAlley http://www.brightalley.nl/ for client SWETS56  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Figure 9 - Royal Conservatoire of Scotland http://moodle.rcs.ac.uk/Figure 10 - Developed by www.synergy-learning.com© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 57 
    • Moodle 2 Themes 04/11/2011Appendix 4 - Moodle 1.9 site ExamplesFigure 11 - Southampton Solent University http://mycourse.solent.ac.ukFigure 12 - Southampton Solent University http://learn.solent.ac.uk58  © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com
    • Moodle 2 Themes 04/11/2011Figure 13 - Barking & Dagenham College http://vle.barkingcollege.ac.uk/ecampus/Figure 14 – University of Canberra - http://learnonline.canberra.edu.au© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 59 