Your Customers are Mobile, you will be too …

In this tutorial we will show you how to set your Moodle theme up ready for you to edit it to your hearts content. We will show you how to get the name of your Moodle theme to show up properly in the themes selection menu, edit the basic information of your theme and how to get Moodle to show any changes you have made to the CSS. Many beginners have problems with these three areas in particular having their CSS changes not show up in Moodle.

Although I am using Moodle 2.1 for this tutorial these changes are all exactly the same in Moodle 2.0 and Moodle 1.9. Although I am not sure about earlier versions they would fairly similar to the changes in these versions.

Moodle 2.1: Getting a Theme Ready to Edit

Hopefully we all have our Moodle server set up in XAMPP and in Dreamweaver as well. If not visit this tutorial to learn how to set your Moodle server up in Dreamweaver. The other thing that we need is a theme that you like that is similar to the one you want to create. When I say similar I am not talking about the graphical elements of the design I am talking about the layout. The graphic elements are the easiest piece for a beginner to change, its the actual layout of the site that is the hardest. So find a Layout very similar to what you want to use and install it.

Changing the Name of Your Theme

First thing we will want to do is make a copy of the theme we wish to work on and get it to display its name correctly so we know we are working on the right theme. It is quite common for beginners to try to change the name of their theme and when they go to load it up they plug-in name just says “[[PluginName]]“. We will show you how to get around this.

In windows navigate to the theme directory in which you installed the theme that you are going to edit. Right click on it and select copy and then right click elsewhere within the folder and select paste. You will see a folder now called yourtheme – copy . You need to change the name of this folder to begin with. Other wise it simply won’t show you in your theme selection list.

Now we need to open up our server in Dreamweaver and navigate our themes directory within the site. Inside the folder we just created we will find a file named config.php double click on it to open it.

The first line inside this file should read something like this.

$THEME->name = 'youroldthemename';

Change the name without and space or special character and re-save the file. Now if we log-in to the site in our browser and go to Administration >> Appearance >> Themes >> Theme Selector and hit the button to select a new theme we will now be able to find our theme in the list. However the name of theme is [[pluginname]]. Naturally we don’t want this so lets fix it.

Lets go back to Dreamweaver and look at our theme’s folder again. Inside that folder should be a folder called Lang and inside that another folder called EN if your doing this in english. Inside that folder is the file we are looking for. It should be on its lonesome and called something like theme_youroldthemname.php. Open this file up by double clicking on it.

We are interested in this line of code right at the top.

$string['pluginname'] = 'youroldthemename';

Change your old theme name for your new one. At the bottom of this file is another line you may be interested in editing as well. It handles the description of your theme.

$string['choosereadme'] = 'a whole pile of html mark up and text in here.';

Change this to your description of your theme.

When you are finished editing this file we need to save it, however we do not want to save it under the name we opened it as so hit Ctr-Alt-S and rename the file to the name of your new theme. The name of this file is what shows up in the them selection list. So how do we name this file so Moodle can find it. For starters you MUST start the file name for this file with theme_ no exceptions or Moodle won’t use it. After that name your file what ever you want your theme name to show up is in the selection list. If you use an underscore in the middle of your theme name while naming this file it will show up as a space in your theme selection list. So if you called you file theme_my_new_theme.php it would show up as My New Theme in the selection list. But if we called it theme_mynewtheme.php it would show up as Mynewtheme.

OK now that we have our copy of the Moodle theme named and ready to edit it time to move onto the next trap beginners often hit.

Why Won’t my CSS Change Anything in Moodle

This trap gets a lot of people but once its figured out making changes to your theme become quite easy to do.

First thing we need to do, well actually the only thing we need to do is log-in to our Moodle server again and go to Site Administration >> Appearance >> Themes >> Theme Settings. The second selection from the top is called

Theme designer mode

Click the box beside it and scroll to the bottom of the page and hit Save changes. Now if you open your Moodle site in Dreamweaver and edit the CSS it will make the changes. Moodle does this to protect the Moodle administrator from accidentally changing things and buggering the site up. Unfortunately it can be a pain to figure out. I know I took a while to find this when I first started out.

Hope you all found this helpful and see you again next time.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: