Moodle 1.9 Theme Design: Customizing the Header and Footer (Part 1)

So, let’s get on with it…

Important preliminary points

In order to continue with the exercises in the article, you will need to understand the importance of web browser compatibility. All web browsers are different, and most of them handle HTML and Cascading Style Sheets (CSS) differently. It is not so much that one web browser is better than another or that one web browser is more accurate at rendering HTML or CSS. Rather, it’s that CSS rules are often interpreted differently by software developers who designed these browsers. For web developers and designers, this can be very annoying, but an unfortunate and inevitable reality.

So, to make sure that the changes that you make to Moodle’s theme files are the same or similar across most of the major web browsers, you will need to install various web browsers, such as Firefox, Internet Explorer, Chrome, Opera, Safari, and so on, and make sure that you remember to test your changes. You shall learn to install the required web browsers as you work through this article.

Customizing the header

One of the first tasks that you will be asked to do concerning Moodle theming is to customize the main Moodle header file. Most people start by learning to change the Moodle logo for one of their own. The file that you will be editing in the first part of this article is the header.html file. For this article, you will assume the standard theme that comes with Moodle.

Time for action – making a copy of the standard theme

In this exercise, you will be making a copy of the standard theme so that you can make changes to it without interfering with Moodle’s theming process. You need to do this because many of the Moodle themes use the standard theme as the base theme.

1. Navigate to the folder: C:Program FilesApache Software FoundationApache 2.2htdocstheme.
2. Right-click on the standard theme folder and choose Copy, as seen in the following screenshot:

   
3. Right-click again in some empty space and choose Paste. The copied standard theme will be replicated and have the name Copy of standard, as seen below:

   

4. Right-click on this folder and choose Rename to rename the folder to mytheme.

   

What just happened?

You have just made a copy of the standard theme that comes with Moodle and have relocated and renamed the theme, so you can now make some basic changes without interfering with any other themes in the theme directory. Most themes use the standard theme as the parent theme and then build upon this styled theme. So, if you were to change this theme directly, you would probably mess up most of the themes that are installed in your Moodle site.

Adding your own logo

Now that you have made a copy of the standard theme, you will go on and replace the Moodle logo with your own. Most oft en, your organization will have a logo that you can use; perhaps you could just copy one from their website. An important point to note here is that the logo that you use should be in the GIF or .png format.

The following figure has been created with Adobe Photoshop to demonstrate that it would be best to create a very basic logo if you don’t have one.

Time for action – copying your logo to your mytheme directory

1. Navigate to the location of your logo.
2. Right-click and choose Copy.
3. Navigate to your Moodle site’s thememythemepix directory, right-click, and choose Paste. The result should resemble the following screenshot:

   

What just happened?

In this very simple exercise, you have copied the logo that you had or created and placed it in the correct directory in your new mytheme directory. This is now ready for you to use in the header.html file to display your logo.

Now you will edit the main header.html file to include your new logo. The header.html file can be found in your site’s thememytheme directory.

Time for action – adding the logo code to your header.html file

1. Navigate to your mytheme directory, right-click on the header.html file, and choose Open With | WordPad.
2. Open the header.html file with your favorite text editor (WordPad, Notepad, Vim, and so on). As a Windows shortcut, you can right-click on the header.html file and choose Open With | WordPad, as seen below:

   

   Top Tip – Text editorsWe have chosen WordPad here as it retains the original markup format. Notepad, on the other hand, can be difficult to use, as it lacks some of the functionalities of WordPad. If you already use another text or HTML editor, then please use it. It’s about familiarity here, so it’s always best to use that with which you feel comfortable.

3. Find the following lines of code:

   <?php print_container_start(true, '', 'header-home'); ?>
    <h1 class="headermain"><?php echo $heading ?></h1>
    <div class="headermenu"><?php echo $menu ?></div>
   <?php print_container_end(); ?>

4. Insert the following line of code:

   <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/
   logo.gif" alt="Institutions Logo" />

   Immediately after:

   <h1 class="headermain">

   As shown here:

   <?php print_container_start(true, '', 'header-home'); ?>
    <h1 class="headermain">
     <img src="<?php echo $CFG->themewww .'/'.
      current_theme() ?>/pix/logo.gif" alt="Institutions Logo" />
     <?php echo $heading ?></h1>
    <div class="headermenu"><?php echo $menu ?></div>
   <?php print_container_end(); ?>

   You can download this code from the Packt website.

5. Save and close header.html.
6. Open your web browser and type in the URL of your local Moodle site.
7. Change the current theme, which should be Autumn, to your theme by navigating to Appearance | Themes | Theme Selector and choosing mytheme. You should see something similar to the following screenshot but with your own logo.

What just happened?

In this exercise, we have learned where a theme’s header.html file is and how to open the header.html file for editing. We also learned what part of the code we should change in order to have our own logo appear on the front page of out Moodle site.

Have a go hero – adding another logo

Again, it’s time for you to have a go yourself at changing and modifying some of the things that you have learned through this article. First, it would be a good idea if you would try to create a new logo and add it to the header.html file in your mytheme folder. This time leave the inner page header as it is.

Top Tip – Two headers
During this exercise, you may have noticed that the header.html file has two instances of the following line of code: <h1 class=”headermain”>. This is because Moodle loads a slightly different header depending on whether you are on the front page or any other page within the site. This means that the changes we have made will only be visible on the front page and not on any other page at the moment. Why don’t you go and check this by opening your local Moodle site and clicking on the Logout link in the top right-hand corner and then clicking the Login link in the same place? This will take you to the login front page of Moodle and you will notice that your logo isn’t where it is supposed to be. In most situations, we would want to have our logo on all pages within our Moodle site, so we will have to replicate the last exercise and paste our logo code in the other instance of <h1 class=”headermain”>.