Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


VLE Edit

A presentation about styling Moodle VLE

Matthew Cannings

on 10 January 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of VLE Edit

Virtual College Design
Student Only
Virtual College is powered by software called Moodle
Moodle is used worldwide in over 204 countries
38,060 registered validated sites
Clients include Open University
About Virtual College
Moodle has a fairly rigid layout structure.
All pages must have a header and footer area
All pages have a central area that has a large middle column for course content with two optional outer columns for ‘blocks’.
Blocks are optional modules of content such as Calendar, Upcoming Events, Countdown Timer and many others
Moodle Design
Standard Theme
The standard layout consists of:-
Header, Footer, Central Column and 2 Outer Columns
Site Level
Each Moodle site has an overall theme that all the individual course areas will inherit. The site theme must maintain the 3 columns with header and footer layout, but may modify:-

Width of the 3 columns
Colour Scheme

Course Level
Although each course will inherit the site theme a lecturer may customize the appearance to a certain degree

Optionally remove outer columns to leave a single or two column layout
Modify structure of content area to better organise materials
Add blocks of content to outer columns
Three Column
Two Column
Three Column with Content Blocks
Some sample courses styles
Variations in Moodle Design
Almost all Moodle themes used on other sites use a variety of the modifications summarised below and detailed after

Fixed or Variable width
No Navigation, Menu or Grid Navigation
Modified Column Widths/Placement
Background images
Fixed widths are designed to be viewed at a specified screen resolution. Usually 800 or 1024 pixels wide. Larger resolutions fill the edges with blank space. Lower resolutions require scrolling to view the entire width.
Variable resolutions use a flexible central column that expands to fill all available screen space. On wide screens the central column may become very wide
Fixed or Variable Width
Fixed Width
Variable Width on Widescreen
Notice the stretched width of the middle column
Navigation Variations
By default Moodle provides a view of all categories on the home page with courses that you are already enrolled on listed separately. To move around you click on a category to view a list of all courses within.
To move from one area to another you must return to the home page and select from the categories again
Grid Navigation
Some sites use a grid of icons on the homepage to enable navigation to key areas of the site.
This method is user friendly but still requires returning to the home page to change areas
To prevent having to return to the homepage to move around, many sites use a horizontal menu with drop down lists of options to speed navigation around the site.
Menu Navigation
Modified Column Placement
To replicate the look of many modern blogs some sites use a 3 column layout but have the content column with the two optional block columns adjacent to one side.
Background Images
To liven up the screen some sites have background images or colours behind the text
Rarer Customizations
Variable width for use on multiple monitor sizes, with max/min limitations
Designed for maximum accessibility and flexibility
Theme is distraction free which enables students to concentrate on content
High contrast colours used to aid legibility and enables accessibility tools to change colours easily
Current College Theme
800 Pixels Wide
1900 Pixels Wide
Accessibility Colours Enabled
Accessibility Zoomed
Maintain horizontal menu navigation but with improved content
Add grid navigation to improve Home Page navigation
Keep current accessibility features and keep flexible width
Allow lecturers to change header within their courses page
Minor cosmetic changes
Updated Theme for 09/10
Hello World
Full transcript