When it comes to Moodle theme development, the first thing to do is find a base theme, but how do you do this? There are essentially two ways: you can either copy the standard theme and rename it, or you can use a parent theme (which will also be based on the standard theme).
If you opt to create a copy of a theme that is close to the standard theme, Moodle will then use the standard theme as its base in your Moodle theme development process. Any changes you then make will be applied on top.
The way in which you configure your Moodle themes is open to interpretation. You can use a parent theme is a good way to go if you find a theme that is very close to what you are looking for, without needing to make many changes. If you are looking to create something from scratch and really sink your teeth into Moodle theme development, however, use a copy of one of the standard sheets.
Moodle Theme Development – What You Need to Know
How to copy the standard theme
1. Navigate to your theme folder on your computer.
2. Right-click on the standard theme’s folder and choose copy.
3. Paste the theme (now on your clipboard) into the theme directory. This is the location you are already in.
4. Rename the copied folder to a name you’ll remember. Do not use capital letters or spaces in your file name.
5. Next, open your Moodle site. Navigate to Site Administration > Themes > Theme Selector and choose the file you just created.
Creating your first Moodle theme
Setting the parent theme
1. Be sure you are logged in to your Moodle site as Administrator.
2. Open your web browser and navigate to your Moodle site and log in as the administrator.
3. Navigate to the theme folder you just created and right-click on the config.php file.
4. Choose the option for “open with WordPad.”
Make the following changes to the file:
$THEME->sheets = array(‘user_styles’);
$THEME->standardsheets = true;
$THEME->parent = ‘autumn’;
$THEME->parentsheets = array(‘styles’);
Save your changed config.php file and refresh your browser window.
Copying the Header and Footer Files
- Browse to the theme folder and highlight both the header.html and footer.html files. To do this, hold down the CTRL key and click on them both. Right-click and choose copy.
- Navigate to Moodle theme development folder you create, right-click, and choose Paste.
- Refresh your browser page.
Creating your First Complete Moodle Theme
Now that you have copied the header and footer files into your theme folder, you now have an unmodified copy of the standard theme. Now you need to edit the theme to make it your own.
First, you need to create the user_style.css file and delete any other CSS files, since your new Moodle theme will utilize only one stylesheet. We’ll create that now.
Create your stylesheet
1. Right-click anywhere on your theme folder and choose New Text Document.
2. Rename this document user_styles.css. Do this by right-clicking and choose Rename.
Delete unnecessary CSS files
Delete the following files by selecting them, right-clicking and choose “Delete”
You have now set up your theme. Next up on the Moodle theme development checklist is to use your own theme, with the standard theme as the base as well as using the parent theme.
Open up your Moodle site with your create theme, which will look like the parent theme.
Navigate to your created theme’s folder and right-click on the user_style.css file. Choose Open. What you should see is a blank file.
Type in the following, then save the file:
Now refresh your browser window. You should see a black background. You have added one style declaration to your empty theme. This is just a test; we’ll create your theme for real in a bit.
Preparing Your New Theme
- Navigate to your htdocs\theme\yourtheme folder. Right-click on it and choose Copy.
- Paste this folder to your desktop (so it’s easy to find later).
- Go back to your folder and delete everything inside it. Navigate to the standardwhite folder and copy all of the files inside it by selecting them, right-clicking and choosing Copy.
- Go back to your folder. Right-click inside it and choose Paste. You should now have all of the files formt he standardwhite folder in your created folder.
- Right-click and choose New Text Document. Rename this text document to user_styles.css
- Right-click on the config.php file and choose Open With WordPad|.
Change the Line
$THEME->sheets = array(‘gradients’);
$THEME->sheets = array(‘user_styles’);
By doing this, you’ll ensure you are using your own stylesheet in your created theme.
Save the config.php file. Go back to your Moodle site, and refresh the browser window. There, you should see the changes you have made to your own theme. Remember that you made a copy of your theme and pasted it to your desktop in case you need it later.
You have now deleted all of the files in your folder. You made a copy of the standardwhite theme, and then pasted this theme into your empty, newly created theme. You then changed the config file in your new theme’s folder to load the user_styles.css file that you created.
If you want to take things to a more advanced level, go back and change the config.php file so that it only loads the layout.css from the standard theme. Why? Because there may be a time when you only want to utilize the physical layout of the standard theme, sort of like a road map. You can then customize the fonts and link colors to suit your preferences. It’s easier to use less of the standard style at the get-go and then customize it than it is to have to overwrite a bunch of options you don’t want later.
You’ve now learned about themes and how the standard, parent and your own created themes relate to each other. Theming on Moodle should be less confusing now! You can now use the Moodle theming process to load certain themes (or parts of themes) and why you might use parent themes (or not). In truth, Moodle theme development isn’t really that difficult, it’s just a matter of learning to follow the steps and understanding why you are doing what you are doing.