Creating your First Complete Moodle Theme

Exclusive offer: get 50% off this eBook here
Moodle 1.9 Theme Design: Beginner's Guide

Moodle 1.9 Theme Design: Beginner's Guide — Save 50%

Customize the appearance of your Moodle Theme using its powerful theming engine.

$26.99    $13.50
by Paul James Gadsdon | May 2010 | Moodle Open Source

In this article by Paul James Gadsdon, author of Moodle 1.9 Theme Design: Beginner's Guide, we will cover the following topics:

  • Creating a new theme
  • Time for action – copying the standard theme
  • Time for action – setting a parent theme
  • Copying the header and footer files
  • Time for action – copying the header.html and footer.html files
  • Theme folder housework
  • Time for action – creating our stylesheet
  • Time for action – deleting CSS files that we don't need
  • Let's make some changes
  • Time for action – checking our setup
  • Time for action – one more change
  • Another theme setup
  • Time for action – preparing our new theme

So let's crack on...

Creating a new theme

Finding a base theme to create your Moodle theme on is the first thing that you need to do.There are, however, various ways to do this; you can make a copy of the standard themeand rename it as you did in part of this article, or you can use a parent theme that isalso based on the standard theme.

The important point here is that the standard theme that comes with Moodle is the cornerstone of the Moodle theming process. Every other Moodle theme should be based upon this theme, and would normally describe the differences from the standard theme. Although this method does work and is a simple way to get started with Moodle theming, it does cause problems as new features could get added to Moodle that might cause your theme to display or function incorrectly. The standard theme will always be updated before a new release of Moodle is launched. So if you do choose to make a copy of the standard theme and change its styles, it would be best to make sure that you use a parent theme as well. In this way, the parent theme will be your base theme along with the changes that you make to your copy of the standard theme.

However, there is another way of creating your first theme, and that is to create a copy of a theme that is very close to the standard theme, such as standardwhite, and use this as your theme. Moodle will then use the standard theme as its base theme and apply any changes that you make to the standardwhite theme on the top (parent). All we are doing is describing the differences between the standard and the standardwhite themes. This is better because Moodle developers will sometimes make changes to the standard theme to be up-to-date with new Moodle features. This means that on each Moodle update, your standard theme, folder will be updated automatically, thus avoiding any nasty display problems being caused by Moodle updates.

The way by which you configure Moodle themes is completely up to you. If you see a theme that is nearly what you want and there aren't really many changes needed, then using a parent theme makes sense, as most of the styles that you require have already been written. However, if you want to create a theme that is completely different from any other theme or wish to really get into Moodle theming, then using a copy of one of the standard sheets would be best.

So let's get on and see what the differences are when using different theme setups, and see what effect these different methods have on the theming process.

Time for action – copying the standard theme

  • Browse to your theme folder in C:\Program Files\Apache Software Foundation\Apache 2.2\htdocs\theme.
  • Copy the standard theme by right-clicking on the theme's folder and choosing Copy.
  • Paste the copied theme into the theme directory (the same directory that you arecurrently in).
  • Rename the copy of standard folder to blackandblue or any other name that you wish to choose (remember not to use capitals or spaces).
  • Open your Moodle site and navigate to Site Administration Appearance | Themes | Theme Selector|, and choose the blackandblue theme that you have just created.

Creating your First Complete Moodle Theme

Y ou might have noticed that the theme shown in the preceding screenshot has a header that says Black and Blue theme. This is because I have added this to the Full site name in the Front Page settings page.

Time for action – setting a parent theme

  1. Open your web browser and navigate to your Moodle site and log in as the administrator.
  2. Go to Site Administration | Appearance | Themes | Theme Selector and choose your blackandblue theme if it is not already selected.
  3. Browse to the root of your blackandblue folder, right-click on the config.php file, and choose Open with | WordPad.
  4. You need to make four changes to this file so that you can use this theme and a parent theme while ensuring that you still use the default standard theme as your base. Here are the changes:

    $THEME->sheets = array('user_styles');
    $THEME->standardsheets = true;
    $THEME->parent = 'autumn';
    $THEME->parentsheets = array('styles');

    Let's look at each of these statements, in turn.

    $THEME->sheets = array('user_styles');

    This contains the names of all of the stylesheet files that you want to include in this for your blackandblue theme, namely user_styles.

    $THEME->standardsheets = true;

    This parameter is used to include the standard theme's stylesheets. If it is set to True, it will use all of the stylesheets in the standard theme. Alternatively, it can be set as an array in order to load individual stylesheets in whatever order is required. We have set this to True, so we will use all of the stylesheets of the standard theme.

    $THEME->parent = 'autumn';

    This variable can be set to use a theme as the parent theme, which is included before the current theme. This will make it easier to make changes to another theme without having to change the actual files.

    $THEME->parentsheets = array('styles');

    This variable can be used to choose either all of the parent theme's stylesheets or individual files. It has been set to include the styles.css file from the parent theme, namely autumn. Because there is only one stylesheet in the Autumn theme, you can set this variable to True. Either way, you will have the same outcome.

  5. Save \theme\blackandblue\config.php, and refresh your web browser window. You should see something similar to the following screenshot. Note that your blocks may be different to the ones below, but you can ignore this.

Creating your First Complete Moodle Theme

What just happened?

Okay, so now you have a copy of the standard theme that uses the Autumn theme (by Patrick Malley) as its parent. You might have noticed that the header isn't correct and that the proper Autumn theme header isn't showing. Well, this is because you are essentially using the copy of the standard theme and that the header from this theme is the one that you see above. It's only the CSS files that are included in this hierarchy, so any HTML changes will not be seen until you edit your standard theme's header.html file.

Have a go hero – choose another parent theme

Go back and have a look through some of the themes on Moodle.org and download one that you like. Add this theme as a parent theme to your blackandblue theme's config.php file, but this time choose which stylesheets you want to use from that theme. The Back to School theme is a good one for this exercise, as its stylesheets are clearly labeled. So you

Copying the header and footer files

To show that you are using the Autumn theme's CSS files and the standard theme's HTML files, you can just go and copy the header.html and footer.html files from Patrick Malley's Autumn theme and paste them into your blackandblue theme's folder. Don't worry about overwriting your header and footer files, as you can always just copy them again from the ac tual standard theme folder.

Time for action – copying the header.html and footer.html files

  1. Browse to the Autumn theme's folder and highlight both the header.html and footer.html files by holding down the Ctrl key and clicking on them both. Right-click on the selected files and choose Copy.
  2. Browse to your blackandblue theme's folder and right-click and choose Paste.
  3. Go back to your browser window and press the F5 button to refresh the page. You will now see the full Autumn theme.

Creating your First Complete Moodle Theme

What just happened?

You have copied the autumn theme's header.html and footer.html files into your blackandblue theme, so you can see the full autumn theme working. You probably will not actually use the header.html and footer.html files that you just copied, as this was just an example of how the Moodle theming process works.

So you now have an unmodified copy of the standard theme called blackandblue, which is using the autumn theme as its parent theme. All you need to do now to make changes to this theme is to edit your CSS file in the blackandblue theme folder.

Theme folder housework

However, there are a couple of things that you need to do first, as you have an exact copy of the standard theme apart from the header.html and footer.html files. This copied folder has files that you do not need, as the only file that you set for your theme to use was the user_styles.css file in the config.php file earlier. This was the first change that you made:

$THEME->sheets = array('user_styles');

The user_style.css file does not exist in your blackandblue theme's folder, so you will need to create it. You will also need to delete any other CSS files that are present, as your new blackandblue theme will use only one stylesheet, namely the user_styles.css file that you will be creating in the following sections.

Time for action – creating our stylesheet

  1. Right-click anywhere in your blackandblue folder and choose New Text Document|.
  2. Rename this text document to user_styles.css by right-clicking again and choosing Rename.
  3.  Creating your First Complete Moodle Theme

Time for action – deleting CSS files that we don't need

  1. Delete the following CSS files by selecting them and then right-clicking on the selected files and choosing Delete.
    • styles_color.css
    • styles_ie6.css
    • styles_ie6.css
    • styles_ie7.css
    • styles_layout.css
    • styles_moz.css
    {background: #000000;}

     Creating your First Complete Moodle Theme

What just happened?

In the last two tasks, you created an empty CSS file called user_style.css in your blackandblue theme's folder. You then deleted all of the CSS files in your blackandblue theme's folder, as you will no longer need them. Remember, these are just copies of the CSS files in the standard theme folder and you have set your theme to use the standard theme as its base in the blackandblue theme's config.php file.

Let's make some changes

Now you have set up your theme the way that you want it, that is, you are using your own blackandblue theme by using the standard theme as a base and the Autumn theme as the parent. Move on and make a few changes to your user_style.css file so that you can see what effect this has on your theme, and check that all of your config.php file's settings are correct. Remember that all of the current styles are being inherited from the Autumn theme.

Time for action – checking our setup

  1. Open up your Moodle site with the current theme (which should be blackandblue but looks like the Autumn theme).
  2. Navigate to your blackandblue theme's folder, right-click on the user_style.css file, and choose Open. This file should be completely blank.
  3. Type in the following line of CSS for the body element, and then save the fi le:

    body {
    background: #000000;
    }

    Creating your First Complete Moodle Theme

  4. Now refresh your browser window. You will see that the background is now black.

    Creating your First Complete Moodle Theme

Note: When using Firebug to identify styles that are being used, it might not always be obvious where they are or which style is controlling that element of the page. An example of this is the body {background: #000000;}code that we just pasted in our user_style.css file. If we had used Firebug to indentify that style, we would not have found it. Instead, I just took a look at the CSS file from the autumn theme. What I am trying to say here is that there will always be an element of poking around and trial and error.

What just happened?

All seems fine there, doesn't it? You have added one style declaration to your empty user_style.css file to change the background color, and have checked the changes in your browser. You now know how the parent themes work and know that you only need to copy the styles from Firebug into your user_style.css file and edit the style declarations that need to be changed.

Moodle 1.9 Theme Design: Beginner's Guide Customize the appearance of your Moodle Theme using its powerful theming engine.
Published: April 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Time for action – one more change

  1. Open up your Moodle site with the current theme (which should be blackandblue but looks like autumn).
  2. Open Firebug by clicking on the Bug icon.
  3. Remember to click on the Inspect icon on the left -hand side of your Firebug window.

    Creating your First Complete Moodle Theme

  4. Roll your mouse over the header section, as set out in the following screenshot, and you should see a blue outline.

    Creating your First Complete Moodle Theme

  5. Check the resultant CSS code in the right-hand firebug window; it should look like the one in the next screenshot. The top six lines are the ones that we are after.

    Creating your First Complete Moodle Theme

  6. Highlight the top six lines of CSS, right-click on them, and choose Copy.

    Creating your First Complete Moodle Theme

  7. Open your user_style.css file once again, place your cursor below the background declaration, and then choose Paste

    .

    Creating your First Complete Moodle Theme

  8. Delete everything that you copied except for the part of the last line as seen below:

    background:#000000;

  9. Refresh your browser window and you should have replaced the gray-to-black gradient background image to a solid black color.

    Creating your First Complete Moodle Theme

What just happened?

In this task, you have made another small change to your user_style.css file and have successfully changed a part of the header's background from a gradient image to a solid color.

Another theme setup

In this section, we will cover in a little more detail some of the complexities surrounding themes, with specific reference to parent themes and the importance of using the standard theme as the base of any theme that you create. There are, however, other methods of creating themes, one of which we are going to have a look at next.

This is important, we didn't cover them in sufficient detail for us to know exactly how they work. This article is about becoming completely familiar with Moodle's theming process. So for these reasons, we are going to have a look at another theming method.

This next method is the way that I prefer, as it gives me complete control over my theme; and lets me start with a very basic theme that is included with Moodle. In this theme setup, we will not be using parent themes at all and will be basing our theme on the standardtheme and using the standardwhite theme to layer on top of it. We will then use the standardwhite theme to work from, making changes to this as we go along. Remember, we will not be using the standardwhite as a parent with this theming setup; rather we will be using it as our theme, minus a few files. The diff erence here is that instead of using:

OurTheme > Pa rentTheme > StandardTheme

We will be using:

OurTheme > StandardTheme

So let's continue with this theming method.

Time for action – preparing our new theme

  1. Navigate to your htdocs\theme\blackandblue folder; right-click on it and choose Copy.
  2. Paste this folder somewhere safe (maybe on your desktop), as you might want to use it later.
  3. Go back to your blackandblue folder and delete all of the files inside it. Navigate to the standardwhite folder, and copy all of the files by selecting them all and then right-clicking and choosing Copy
  4. Navigate back to your blackandblue theme's folder; right-click inside it, and then choose Paste. Your folder should look like the following screenshot:

     Creating your First Complete Moodle Theme

  5. Right-click again and choose New Text Document|. Rename this text document to user_styles.css.
  6. Right-click on the config.php file and choose Open With WordPad|.
  7. Change the line :

    $THEME->sheets = array('gradients');

    To :

    $THEME->sheets = array('user_styles');

    This ensures that you will be using your own stylesheet in the blackandblue theme.

  8. Save the config.php file, go back to your Moodle site, and refresh thebrowser window. You should see that your blackandblue theme changes to the following screenshot:

    Creating your First Complete Moodle Theme

What just happened?

In this exercise, you have made a copy of your blackandblue theme and pasted this somewhere safe (because you might need this theme at a later stage) and then deleted all of the files in the blackandblue folder. You then made a copy of the standardwhite theme and pasted this theme into your now-empty blackandblue theme. You also changed the config file in your theme's folder to load the new user_styles.css file that you created.

Have a go hero – more advanced theming

Using what you have learned so far, go back and change the config.php file in your blackandblue theme's folder so that it loads only the layout.css from the standard theme, and see what happens. Think about why you would do this. The answer to this is that you might only want the layout of the standard theme and not the fonts and link colors. The more of the standard styles that you use, the more that you will have to overwrite at a later stage.

Summary

In this article, you have learned a lot more about themes and their relationship with each other. You should now understand the difference between a theme and a parent theme, and how you can use the Moodle theming process to load certain themes or even elements of these themes before your own theme's styles are used. You should also understand why you might use parent themes, and what would be the best method in any given situation.

Specifically, we covered:

  • Creating a new theme from a copied current theme
  • Setting a parent theme to use with our copied theme
  • Why we might want to have a parent theme
  • When not to use a parent theme

If you have read this article you may be interested to view :


Moodle 1.9 Theme Design: Beginner's Guide Customize the appearance of your Moodle Theme using its powerful theming engine.
Published: April 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Paul James Gadsdon

Paul James Gadsdon has been a web designer/developer since 1996. He specializes in graphic design, ASP, ASP.net, PHP, and DotNetNuke. He has recently been working as an educational technologist and currently works as a Moodle Virtual Learning Environment developer for the University of Wales, Lampeter.

Books From Packt


Books from Packt

Moodle 1.9 Teaching Techniques
Moodle 1.9 Teaching Techniques

Moodle 1.9 for Second Language Teaching
Moodle 1.9 for Second Language Teaching

Moodle 1.9 for Design and Technology
Moodle 1.9 for Design and Technology

Moodle 1.9 Extension Development [RAW]
Moodle 1.9 Extension Development [RAW]

Moodle 1.9 Multimedia
Moodle 1.9 Multimedia

Moodle 1.9 Math
Moodle 1.9 Math

Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide
Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide

Moodle 1.9 E-Learning Course Development
Moodle 1.9 E-Learning Course Development

 


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software