Liberty Enlightening the World

Liberty Enlightening the World
La Liberté éclairant le monde

Monday, 17 March 2014


From MoodleDocs

Jump to: navigation, searchAbout Moodle

*  License
*  Usage
*  Future
*  Credits

Moodle is a software package for producing Internet-based courses and web sites. It is a global development project designed to support a social constructionist framework of education.
Moodle is provided freely as Open Source software (under the GNU Public License). Basically this means Moodle is copyrighted, but that you have additional freedoms. You are allowed to copy, use and modify Moodle provided that you agree to: provide the source to others; not modify or remove the original license and copyrights, and apply this same license to any derivative work. Read the license for full details and please contact the copyright holder directly if you have any questions.
Moodle can be installed on any computer that can run PHP, and can support an SQL type database (for example MySQL). It can be run on Windows and Mac operating systems and many flavors of linux (for example Red Hat or Debian GNU). There are many knowledgeable Moodle Partners to assist you, even host your Moodle site.
The word Moodle was originally an acronym for Modular Object-Oriented Dynamic Learning Environment, which is mostly useful to programmers and education theorists. It's also a verb that describes the process of lazily meandering through something, doing things as it occurs to you to do them, an enjoyable tinkering that often leads to insight and creativity. As such it applies both to the way Moodle was developed, and to the way a student or teacher might approach studying or teaching an online course. Anyone who uses Moodle is a Moodler.

What is inside a theme folder?
Each theme folder contains the following:
The pix folder
This contains all pictures and icons used in the theme. Themes come with pictures for the tabs and eventually for the gradients.
The favicon.ico
This is the small icon shown in the browsers in front of the URL.
*   The standard Moodle favicon.ico looks like: Image:Favicon.gif.
*   The standard Cornflower theme favicon.ico looks like: Image:FaviconBlue.gif
header.html and footer.html pages
These pages contain the logo, the login, the jumpto menu, the navigation bar, the moodle logo etc. Within these files you can give Moodle your individual look at the top and the bottom of all pages.
All images linked from header.html and footer.html should use $CFG->httpswwwroot instead of the usual $CFG->wwwroot. The reason is proper operation of login page (and other https protected pages) when loginhttps is enabled.
These are the main variables available for use in these files:
$CFG  (object with all system variables)
$THEME (object with all current theme variables from config.php)
$COURSE (current course object)
$meta (all the meta tags, including stylesheets)
$home (boolean)
$title (page title)
$heading (heading for the page)
$navigation (the raw navigation, not the "navigation bar")
$navmenulist  (xhtml)
$menu (the popup menu or button)
Header only:
$direction (ltr or rtl)
$bodytags (tags that need to be added to the body)
Footer only:
$homelink (link back to "home" - current course page or site page)
$loggedinas (string with name of user as link)
$performanceinfo (string with performance information)
Finally, the header and footer can contain any Moodle PHP code, so all sorts of other data can be extracted from the database or environment as necessary.
The styles.php file is called from header.html and builds the bridge to the CSS files. You don't need to edit anything much in this file, use config.php instead. The one variable you may want to change during development, however is $lifetime. Set it to a very small value (like 1 second) to prevent the theme from caching too long when you are making changes. When you put theme on your production site and will not be changing themes, you may want to change it to several days (like $lifetime = 3*24*60*60) to improve load times and bandwidth use.
Every theme should contain a copy of this script. It lets Moodle set up variables and so on before Moodle includes the raw CSS files. The output of this script should be a completely standard CSS file.
In the Theme config file where the theme goes to find things. You can build your theme which does specific things but which will default back onto the standard or onto any parent theme when Moodle can not find the variable in your theme. A custom theme can include or exclude several CSS files.
For example, the standard Moodle Chameleon theme config.php file directs Moodle to it's moodle/theme/chameleon/pix folders to get images. The standard Moodle Formal white theme uses the moodle/pix folders to get most of it's images and this is determined by its config.php file.
The stylesheets
The use of Cascading Style Sheets CSS goal is to separate content from presentation for better flexibility, accessibility and for more flexible page design. Changing an element's definition, will change it throught the site. The CSS files are separated by general function into three files:
In addition, CSS styles_moz.css contains Firefox and Mozilla specific formatting, especially the rounded corners.
Additional files
Lastly, theme designers may provide information about the theme, plus a picture preview. The picture preview is shown on the themes page, the info in the README file after the theme has been selected.
Separating content from presentation
The content layer of the page is represented via XHTML, the presentation layer via CSS. To connect the belonging information in both layers XHTML tags and named hooks within page are used. You need quite a lot of them to style complex web applications like Moodle.
Cascading CSS
Moodle themes use style sheets to describe the Moodle "look" by controlling the layout, fonts and colors. These are constructed by a PHP script called "styles.php" in each theme directory, and controlled by a file called "config.php" in the same place.
Moodle has a "standard" theme which is very plain and provides a basic layout for other themes to build on. When a design element is not define in another theme, the default is the definition found in the standard theme. Each theme may also have a "parent" theme, which will be included before the current theme.
So, depending on your settings, you may have up to three stylesheets for a theme:
1.   "standard" theme - theme/standard/styles.php
2.   "parent" theme - theme/parenttheme/styles.php
3.   "main" theme - theme/yourtheme/styles.php
Due to the cascading character of CSS the definitions in later files can overwrite the definitions in the earlier CSS files. Moodle makes extensive use of the cascading character of CSS and gives the theme designer many opportunities. They range from easy development of themes based on the existing ones with few changes up to the design of a completely individual Moodle appearance with new CSS files.
Theme designers can define and add any CSS stylesheets and name them any way as needed for this theme.
The standard theme
Theme Standard
Figure 1: The theme "standard" with the CSS files "styles_layout.css", "styles_fonts.css", "styles_color.css" and "styles_moz.css".

Small changes
If you just want to make small changes to a theme like using different colors or adding a logo then your new theme will include the "standard" theme and you define a few extra CSS styles in a new CSS file.
As an example, see the "standardwhite" theme.
It uses the file "config.php" to set the appropriate options. The first entry $THEME->sheets = array('gradients'); defines the CSS file "gradients.css" as the file with additional CSS definitions. It also specifies $THEME->standardsheets = true; which says to include all the styles from the standard theme too.
Instead of basing the theme on "standard", you could base it on another theme by specifying $THEME->parent = 'cooltheme';
Theme Standardwhite
Figure 2: The theme "standardwhite" with all CSS files from the theme "standard" plus "gradients.css" from the selected theme.

Mixed CSS - standard layout plus your own fonts and colours
The theme "formal_white" mixes the page layout from the theme "standard" with its own layout, fonts and colours. This way all layout changes in the standard Moodle layout are kept. This is done by setting $THEME->sheets = array('fw_layout','fw_color','fw_fonts'); and $THEME->standardsheets = array('styles_layout'); in the config file.
Theme "formal_white"
Figure 3: The theme "formal_white" with the CSS file "styles_layout.css" from the theme "standard" and the individual files "fw_layout.css", "fw_fonts.css", "fw_color.css".

A theme using a parent theme (faked)
An advanced feature is to set any existing theme as the "parent" theme and offer variant themes to this. Two possible uses can be to design one "parent" theme with all CSS definitions. Then offer "child" themes with color variants to be chosen by the users according to their color preferences. These "child" themes need only one CSS file holding the different color definitions. Or create "child" themes which only vary in the logo/banner placed in the "header.html". These "child" themes do not need their own CSS files.
The configuration for the "child" themes could look like $THEME->sheets = array('my_layout');, $THEME->parent = 'formal_white'; and $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');
Theme Formalemwhite plus, faked
Figure 4: The faked theme "formal_white_plus" with the additional CSS file "my_layout.css".

A theme without standard dependencies (faked)
This theme would use its own CSS. The settings $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); and $THEME->standardsheets = false; deactivate all other Moodle CSS and make a completely independent theme. All changes in the standard Moodle theme do not change this theme at all.
Theme Independent (faked)
Figure 5: The theme with it's own CSS files "styles_layout.css", "styles_fonts.css" and "styles_color.css".

Some more basic CSS files
In addition to theme CSS files, Moodle features a basic CSS file for every module, block and for every language. Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.
These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.
Moodle CSS Loading Order
Figure 6: The CSS file loading order of all Moodle CSS and theme CSS files.
Free moodle themes

Working with Moodle themes

Moodle  6200 views
Moodle is well known for a slight lack of design flair in the out-of-the-box theme packs. That's fine. They still work.
Often, though, we'll need to redesign the overall look and feel of a Moodle site. Perhaps you need to make it match an existing website, or you just need something that's more in keeping with your particular organisation.

Things to note before you start

Firstly, you don't need to start from scratch. In fact, I would recommend strongly that you don't! Moodle is a very complex application, with many different parts of the interface that need styling. So, I always start with an existing theme and build on that.
Secondly, remember that each upgrade to Moodle may add new interface elements. If you're not careful these will break your theme. Follow the guidelines below and you should be OK.
Thirdly, Moodle themes cascade. This means that you can build your theme pack so that Moodle starts by reading the standard theme, which will always be kept up-to-date with regard to new interface elements. Once the standard theme is read in, then you can add in your customised theme on top.

Step-by-step guidelines to creating a new theme

  1. Get yourself a locally hosted version of Moodle. You'll find it a lot quicker to build your theme here. It's very easy to install Moodle on both Windows, MacOSX and Linux. Instructions are here.
  2. Create a new folder in the /themes directory. Remember not to have spaces or non-alphanumeric characters in the folder name.
  3. Copy all the files from /themes/standardwhite into your new theme folder. You will see that standardwhite is a custom theme built on top of the main standard theme.
  4. Use Firefox as your browser, with the web-developer toolbar and ColorZilla colour picker add-ins. Without these, or something similar, your job becomes ten times harder.
  5. Understand how to use the config.php file within the theme pack. Especially how it is used to pull in css files from the standard theme, and also from another theme which you would like to act as a parent. If you understand this, it makes building slightly-tweaked themes for specific courses or course categories a whole lot easier.
  6. Create one css file in your theme folder, called overrides.css. Use this to contain any css commands that are specific to your theme.
  7. Add overrides to the line in config.php that starts $THEME->sheets = ... so it reads $THEME->sheets = array('overrides');
    NB. I normally remove the gradients.css file from the files I copied in from the standardwhite theme. It usually becomes redundant when I created the new theme.
8.    Use the header.html and footer.html files to add in any extra styled divs that you might want to use to wrap the page or to add in horizontal menu bars. You can see both in the image below:
Moodle header with page wrap and menu
Remember that, if you open a div in the header, you will need to close it in the footer.
  1. Also in header.html add in any logos or other images. Again, you might want to add extra styled divs here, remembering to add those styles to the overrides.css file.
  2. As with all css, start with the big things you want to change: link colours, page backgrounds, overall font styles etc. Then, using the web-developer toolbar, find the specific page elements that need changing, eg. #left-column, #right-column and .sideblock and tweak those.
  3. One thing I always do, in my overrides.css file, is add the lines:

    /* needed to remove left & right bars */

    #course-view .section .right a, #course-view .right {

    #course-view .section td.left {
    display: none;

    /* But display for editing */
    .editing#course-view .section .right a, .editing#course-view .right {

    .editing#course-view .section td.left {

    These tidy up the course view for students, by hiding extraneous information such as topic numbers, and confusing functionality such as the hide topics button.
Some helpful resources:
Design a new custom Moodle theme for your school.  This will require
knowing or learning some CSS.  Make the colours and graphics match the
school's existing colours etc.  Make sure that you have copyright
permission to use any graphics that you get from the Internet or other sources.
Lots of info here:
A Moodle theme is a pre-designed user "view" (interface) that can be changed by the site administrator, teacher, or student. While robust, it does not affect how Moodle functions, just how it looks. Moodle comes with a standard set of themes and there is a large free library available to download.
*  Themes in Moodle 2.0 will be built in a new manner and they will not be upgradeable from earlier version.
Moodle themes
Moodle has a powerful themes system that allows for a variety of effects through the use of XHTML and CSS.
*  Themes may be selected at site level, course level and/or user level as long as the Moodle site has been configured to allow changes at these levels.
*  Each page is individually-addressable via CSS, allowing you to pinpoint exact items.
*  Our CSS class naming system uses simple English, is consistent and easily understood.
*  New modules can tell Moodle what styles they need and automatically include these in the stylesheet.
*  Themes can be based on the standard theme, which is very plain but functional. You simply override styles you want to change by adding to the stylesheet in your own theme. This means that if you upgrade Moodle later and new styles are needed, your custom theme will still work without any changes, because the new classes will be defined in the standard theme.
*  Themes can also be based on any other theme. This allows you to easily create families of themes, or variations on a theme. For example you might create a spectrum of pastel shades for use in different courses, but with the same basic layout and logos. You may also want to create a family of differently-coloured themes for accessibility purposes.
Creating your own theme
If you plan to work on your own theme please create a new one (with its own named subfolder) and use Moodle's theme system to base your theme on an existing theme such as standard. If you just modify one of the delivered themes it will be overwritten by the next Moodle update.
To distribute your theme, zip the theme folder and submit to the Themes database.
Theme Design Limitations: The overall 3 column layout can be customized to some degree, but it needs to maintain the uniformity of the standard Moodle layout.
Installing a theme
To install a theme:
1.   Unzip the .zip file to an empty local directory.
2.   Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
3.   Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector (version 1.7+) or Administration > Configuration > Themes (older versions).
See Installing a new theme for more information.
Theme system changes
Themes have improved a great deal in recent versions of Moodle. If you are using your own theme and want to upgrade, please refer to one of the following:
*  2.0 themes not upgradable :(
Themes in standard install
Themes included in Moodle 1.9 are chameleon, cornflower, custom corners, formal white, metal, oceanblue, orangewhite, orangewhitepda, standard (default), standardblue, standardgreen, standardlogo, standardred, standardwhite, wood. See Standard themes for screen shots of each.

No comments:

Post a Comment

Design and

Design and
Interactive Digital Media

Popular Posts