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 FilesApache Software FoundationApache 2.2htdocstheme.
• 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.

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 themeblackandblueconfig.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.

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.

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.

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;}

   

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;
   }

   

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

   

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.