Make your own theme
There are a number of ways of creating new themes for Moodle. This page describes a simple way of making a new theme based mostly on changing the colours, fonts and headings. Hopefully it gives you a start to do more adventurous things.
Getting started
I need to make a few assumptions. There are many different ways to set up Moodle and I can't cover all of them. I am therefore assuming that you can handle the following...
- Copying files and directories in your Moodle installation.
- Editing a file in you Moodle installation.
- You have at least a basic understanding of HTML and CSS.
- If you need custom graphics you have a basic understanding of web graphics and can work graphics creation/editing software.
If there is a "trick" to this it is the ability to analyse the existing CSS for the Moodle page. There are a number of tools, but the best I have found is Firebug. This is an extension for the Firefox web browser, so you'll need that first. Basically, Firebug allows you to right click on any element on an HTML page, select "Inspect Element" and it will show you loads of information about that element including the CSS rules that affect it.
There is a similar tool in Chrome which seems to be enabled by default (right click and select Inspect Element). It's not quite as easy to use as Firebug IMO.
Some basic information you should know
The cornerstone of Moodle themes is the 'Standard' theme. Every other theme (should) simply describe the differences from the Standard theme. This makes theme development relatively simple as you only have to identify the elements of the Standard theme that you wish to change. Often there are very few.
First steps
The first thing to do is to make a new "empty" theme on your site. The easiest thing is to start with a theme that is very similar to the Standard theme and delete some stuff.
I will use the "Standard White" theme. Find the theme directory in the top level of your Moodle directory and find the standardwhite theme within. Copy the standardwhite directory and all its contents (important!) to a new directory still within the theme directory. You can call it whatever you like.
From now on we will be working entirely inside this new directory.
You can now (in the new directory - I won't say this again) delete two files - gradient.png and gradients.css. These are specific to this theme and we won't need them. You can now login to your Moodle site as Administrator and select your "new" theme from the list. If you can't see it, check your new folders permissions and ownership are the same as all the other theme directories. All being well, this will now be identical to the Standard theme.
Dealing with the config.php file
This is the one in every theme directory, not that other one! Open the file for editing and find the line (near the top)...
$THEME->sheets = array('gradients');
This line sets the CSS files that will be loaded by your theme. You can have more than one and the one there now refers to the file we just deleted. You should change the name gradient to, again, whatever you like (we'll create the file in a moment). I'm going to use user_styles:
$THEME->sheets = array('user_styles');
There are lots of other options in this file which I won't consider. They are all well commented however. One interesting one is right at the end:
$THEME->custompix = false;
...see next section...
Changing your icons
I don't really like the standard icons, the "chameleon" theme has a nicer set. If you want to use them simply copy the entire pix folder from within the chameleon theme directory to your new theme directory (take care with permissions). And change the setting in config.php...
$THEME->custompix = true;
Creating the new CSS file
It's now (finally) time to create the file to contain all your custom CSS definitions. I set this in config.php to be user_styles so, in my case, I'm going to create an empty file called user_styles.css - don't forget the .css extension and watch the permissions!
Basically "all" we have to do now is to add CSS definitions to this file that "override" the CSS in the Standard theme that we want to change. For the most part you need to copy the definition exactly for the element you want to change. This can be heavy going but Firebug can make it "relatively" easy. There are loads of things you can change, here are a few worked through examples. My new theme is going to be broadly blues, greys and blacks. Not a million miles from the Standard theme (luckily).
Background color
This doesn't really need any poking about with Firebug. I want a light grey background to my site, so I'll add the following line to user_styles.css':
body {
background-color: #f0f0f0;
}
Refresh the page. Your white background is now grey.
Default fonts
By using Firebug's Inspect Element and checking out the CSS on my example site I have established that the font family needs to be Arial,Helvetica,sans-serif. Moodle's is slightly different Arial,Verdana,Helvetica,sans-serif. Not the end of the world, but we might as well have it right. You may have a completely different list.
Right click on a text element in the Site Administration and select "Inspect Element". The Firebug panel will appear with the HTML source selected (you can change the selected source in this panel if required, especially if you "missed" the element you intended to inspect). Make sure that "Style" is selected in the tabs on the right. There is quite a list of CSS affecting this text and some override others (styles that are overriden are handily struck-through). Run down the list until you see the font-family defined (not struck through). For me this was a definition for "body, table, td, th, li". You can add the new definition to you user_styles.css file:
body, table, td, th, li {
font-family: Arial,Helvetica,sans-serif;
}
Block headers
The next thing I want to do is to make the side-block headers have a blue background. Using Firebug I select the text of one of the blocks. However, I need to back up a bit to the div class="header" to get the bit I want. Notice that as you mouse over bits of the HTML the affected region is highlighted on the original. Clever! The elements seem to be .sideblock .header and no background colour is defined either here or further down the list. So, let's try:
.sideblock .header {
background-color: #06f;
}
Cool! It does what I needed. If it didn't, I would have had to play around a bit but there's no way around that.
Course Content
It's all a bit grey at the moment. I want the course content to be white. Again I use Firebug to find examine the bit I want. A bit of poking around finds that this is done with a table cell with class content. The CSS element is td.content, again with no background colour defined. Ok, so in our user_styles.css let's add:
td.content {
background-color: #fff;
}
Well it worked but I'm not happy yet. The Topic Outline isn't white yet and the column to the left of the content is also white and can't be seen. This is what I did:
body#course-view .headingblock {
background-color: #fff;
}
#course-view .weekscss .section, #course-view .section td.side {
background:#666b6e none repeat scroll 0% 0%;;
}
Note in the second case that even though I just wanted to change the background colour, I can't use background-color as that is different to background and won't override it. I have to reproduce the whole line and just change the bit I want. I also changed the background colour for the .generalbox class to white.
It's not the nicest theme ever but in a few minutes and with just a few lines of simple CSS we have made a big difference to the look of the Moodle site.
Change the header
Probably the thing most people want is a custom header. This is all done by editing an HTML file (although there's a bit of PHP in it too) in the theme directory called header.html. The file checks if you are on the front page or any other page. The header is (or can be) different for each state.
Nearly everything that matters is in a small area of the code, so find this...
if ($home) { // This is what gets printed on the home page only
?>
<?php print_container_start(true, , 'header-home'); ?>
<?php echo $heading ?>
<?php print_container_end(); ?>
<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>
<?php print_container_start(true, , 'header'); ?>
<?php echo $heading ?>
<?php print_container_end(); ?>
<?php } ?>
What I am going to do is to remove the generated heading and simply replace it with an image. The slight trick is that you need to locate the URL of the theme directory. I copied my image straight into the theme directory first (you could put it in the pix sub-directory, but I didn't bother). The magic PHP code is this
<?php echo $CFG->themewww .'/'. current_theme() ?>
this gets replaced with the URL of your theme directory (no matter what you name it).
So this is what I came up with...
// if ($home) { // This is what gets printed on the home page only
if (true) { // force home page style for everything
?>
<?php print_container_start(true, , 'header-home'); ?>
<img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/logo.png" alt="logo" />
<?php print_container_end(); ?>
<?php } else if ($heading) { // This is what gets printed on any other page with a heading
Note that I have commented out lines that I don't need anymore rather than deleting them (in case I want to change it back). The first if has now been "forced" true so that the same style will always be displayed. The $heading text has been commented out and replaced with an image (although you leave out the comment and have both). I've cheated slightly and add a snippet of CSS in the div to centre the image.
Final CSS
This is the full CSS I ended up with. It's very simple and there's a lot more you can do. It's often all you need though.
body {
background-color: #f0f0f0;
}
body, table, td, th, li {
font-family: Arial,Helvetica,sans-serif;
}
.sideblock .header {
background-color: #06f;
}
td.content {
background-color: #fff;
}
body#course-view .headingblock {
background-color: #fff;
}
#course-view .weekscss .section, #course-view .section td.side {
background:#666b6e none repeat scroll 0% 0%;;
}
.generalbox {
background-color: #fff;
}
.headermenu {
float: none;
background-color: #666b6e;
padding: 4px;
}
Tips
- It's very common to have to make Moodle look like some other existing site. Use Firebug on that site to "steal" the CSS of the various elements to make sure it matches exactly.
- Moodle loads the CSS files using a PHP script the result of which is the CSS file name and line number indicated by Firebug is meaningless.
