In this tutorial we will be concentrating on using Dreamweaver CS5.5 to add a logo to your Custom Moodle theme. Before you go ahead with this tutorial you should make sure that you have already set your Moodle server up and that the theme you are going to edit is ready to edit before proceeding. If you have not already done so please check out the following articles then we can begin to edit your Moodle themes header and footer ready for deployment to the web.

• Dreamweaver CS5.5: Create Custom Moodle 2.0 Themes in Dreamweaver CS5
• Moodle 2.1: Getting a Theme Ready to Edit

Although I am using Dreamweaver CS5.5 for my run through everything that I do is exactly the same in Dreamweaver CS5 and CS4.

Note: This method is based loosely on the Methods used in the older style Moodle setups. This will work more often than not however there there is an easier way to do this so please visit that tutorial to see if that will work for you before proceeding with this now outdated method. (some themes may still need to do things using this method.) This method is usually used if the code that places the Logo in your header has been removed from the theme you are basing your Custom theme on.

Moodle 2.1: Changing the Moodle Logo and Favicon

Moodle 2.1: Adding a Logo to your Moodle Theme

The first change we will be making to our theme today will be changing the logo in the header to your logo or if your theme currently doesn’t have a logo in it you will be adding your own logo. The first thing you are going to need naturally is a logo to put into your header. Your logo should be saved in either GIF or PNG format for best results. I would personally recommend the use of PNG files rather than the the more out dated GIF format.

Once you have a PNG copy of your institutions logo you need to make a copy of it save it in your themes “pix” folder. So navigate to your logo on your computer and right click on the image and select copy then navigate to your themes directory and save it in the pix directory. The path is usually

c:xampphtdocsyourmoodledirectorythemeyourthemenamepix

Once in this folder right click and select paste to save a copy within this folder. If the logo is not saved in this folder Moodle will have trouble locating the file down the track when your site goes live.

Now with older versions of Moodle we would start looking for the Header.php file and begin adding the logo, however Moodle 2.0 onwards has done away with this file. This does slightly complicate things for us. Instead of changing the header.php we now need to modify a few files.

Inside of your themes folder is another folder called “layout”. In this folder are a number of different file each handling a different section of your website. One is usually for the frontpage which people see before they even login, another is usually called general which is for when people are logged into your site. Plus depending on your theme you are using as a base you will find there are other files each for different page layouts used through out your website.

For each page type within your website that you wish to have your logo displayed you need to open the PHP file that handles that particular page. So we will begin by opening the frontpage.php file and place our logo in that. Once we have done that we will then do the same to all the other files in this folder.

So in the layout folder open your frontpage.php file. Near the top you will find the beginning of a div that looks like this.

<div id="page-header-wrapper">

Regardless of who made the original theme you are working this div id is standard to all moodle themes. If we were to try and locate our header any other way we would end up getting lost because different designers mark there code in different ways. This div name is built into Moodle 2 and above and so does not change and is the only fool proof method to locate the header section of each of the PHP files in our layout folder.

Anything inside of this div make up the header of our web-page. As we wish to put our logo in our header this is where we need to put our logo. If we do not know much about PHP looking at the code can be quite confusing but as we want out logo in most cases to be next to or replacing our website name we only need to find one line of code.

<h1><?php echo $PAGE->heading ?></h1>

This line of code is how moodle puts the name of your website in the header of your web-page. This like the div name above does not change between designers again because it is pretty much hard coded into moodle 2.0 and above. If we want our logo to appear before the name of website we need to put our logo code before this line. If our logo is intended to replace this heading our logo code will replace this line or code. And naturally if you want your logo after the heading we need to place the code for our logo after this line of code.

<img class="mylogoclass" src="<?php echo $OUTPUT->pix_url('mylogo', 'theme');?>" alt="" />

Replace the ‘mylogo’ with the name of your logo file. DO NOT put the file extension on the end of your file-name. Moodle will not work if you do this. Moodle will work out for itself what format the file is in and load it. This is why you must have the file saved as PNG or GIF so Moodle is able to find it. The mylogoclass should be replaced with the name a class you will create later just for fien tuning the positioning of this logo within the header when we look at changing our header CSS in my next tutorial.

So if you wanted your logo to appear before your website name your code would look like this this.

<img class="mylogoclass" src="<?php echo $OUTPUT->pix_url('mylogo', 'theme');?>" alt="" />  <h1><?php echo $PAGE->heading ?></h1>

Once you have placed the code into your header you now need to do the same to the other PHP files inside your themes layout folder that they display the same across every-page.

Hope you all found this helpful and see you again next time. I will be showing you how to make change to the header of your Moodle theme.