Moodle is one of the world’s most popular and powerful e-learning systems that allows communities such as schools and small businesses the chance to learn together.
Getting the most out of Moodle is as easy as creating a simple, user-friendly theme that is easy for the user to navigate. That’s why we’ve prepared this short Moodle theme development tutorial.
Well, we say easy, but if you’ve little to no experience with customising themes, you might find Moodle development to be a little tricky at first. So let’s take a look at how to create Moodle theme with our essential guide. It really is just as simple as a few steps.
First of all, you will need a few things in order to edit your theme:
- Moodle 1.9 (or better)
- Easy access to server where Moodle is hosted
- You need a transfer program (FileZilla is free)
- Text editor
Once you are logged in to your Moodle server, you need to hop over to /theme director before copying the /standard folder and changing it to the name of your new theme. Note: Avoid capital letters.
Now that you have copied and renamed your theme, the next step in your Moodle development is to alter its features.
Use this code: /theme/yourtheme/config.php
Okay, so you want to configure your theme, in which case you’ll want to know all about the colours you can use.
Take the time to make a not of all the colours you’ll be using and bear in mind that CSS uses exact language which doesn’t recognise space bars. DarkRed will work but Dark Red won’t.
To make sure that your create Moodle theme looks good, we recommend that you use a light colour for your background and a dark colour for your text. This will make your website readable and user friendly.
After you have chosen your colours, you can move onto styling your page.
Go to the styles_colour.css folder inside your text editor.
Conversely, if you would rather use the editor in Windows, hop on over to Start > All Programs > Accessories > Notepad.
Changing the look of a specific element can be tricky because you often don’t know what CSS to change.
We recommend that you first install Firefox (if you haven’t already installed it.
Press Shift _ CTRL-Y and click on any part of the page to check out what CSS rules have been applied.
By placing the same rules into the user_styles.css file with different values, you can alter the look of a specific element.
Add A Logo
Placing a logo on your page is really simply.
Importantly, you cannot use a JPEG; your logo has to be in the GIF format and it can have a height no bigger than 100 px.
To create thus file, you can use a free online picture re-sizer.
Theme Display Information
Your theme may not appear in the theme selector unless you give it a unique name. This is an important part of Moodle development.
Go to lang/ and enter the directory of your language.
You are looking for a file called theme_THEMENAME.php. Once you’ve found it, open it.
You will notice several variables that have been set which relate to your name and which display your theme. Find $string[‘pluginname’] and change it to a name you want your theme to display.
Note: It can be different from the the theme name in the current file name.
Not sure you got everything right? Feel free to ask our theme developer then!