About Moodle
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.
Each theme folder
contains the following:
pix/
config.php
favicon.ico
footer.html
header.html
styles.php
styles_color.css
styles_fonts.css
styles_layout.css
styles_moz.css
This contains all
pictures and icons used in the theme. Themes come with pictures for the tabs
and eventually for the gradients.
This is the small icon
shown in the browsers in front of the URL.
The standard Moodle favicon.ico looks like: 
. The standard Cornflower theme favicon.ico looks like: 
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 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.
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.
README.html
screenshot.jpg
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.
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.
Figure 1: The theme
"standard" with the CSS files "styles_layout.css",
"styles_fonts.css", "styles_color.css" and
"styles_moz.css".
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'; 
Figure 2: The theme "standardwhite" with all
CSS files from the theme "standard" plus "gradients.css"
from the selected theme.
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. 
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".
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'); 
Figure 4: The faked
theme "formal_white_plus" with the additional CSS file
"my_layout.css".
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. 
Figure 5: The theme
with it's own CSS files "styles_layout.css",
"styles_fonts.css" and "styles_color.css".
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.
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
- 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.
- Create a new folder in the /themes directory. Remember not to have spaces or non-alphanumeric characters in the folder name.
- 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.
- 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.
- 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.
- Create one css file in your theme folder, called overrides.css. Use this to contain any css commands that are specific to your theme.
- 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:
Remember that, if you open a div in the header, you will need to
close it in the footer.
- 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.
- 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.
- 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 {
display:none;
}
#course-view .section td.left {
display: none;
}
/* But display for editing */
.editing#course-view .section .right a, .editing#course-view .right {
display:inline;
}
.editing#course-view .section td.left {
display:inline;
}
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: http://docs.moodle.org/en/Themes
THEMES
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.
Contents
[hide]
|
Moodle has a powerful
themes system that allows for a variety of effects through the use of XHTML and
CSS.
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.
See Creating a custom theme and/or Make
your own theme and/or Development:Themes 2.0
creating your first theme for some tutorials.
To distribute your
theme, zip the theme folder and submit to the Moodle.org 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.
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.
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:
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