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

Exclusive offer: get 50% off this eBook here
Moodle 1.9 Theme Design: Beginner's Guide

Moodle 1.9 Theme Design: Beginner's Guide — Save 50%

Customize the appearance of your Moodle Theme using its powerful theming engine.

£16.99    £8.50
by Paul James Gadsdon | April 2010 | Moodle Open Source Web Development

Packt are due to launch a new Open Source brand, into which future Moodle titles will be published. For more information on that launch, look here.

This article will cover the steps needed to make changes to the header.html and footer.html files in the theme directory of your Moodle site. You will start by making some small changes, such as changing the logo and the title text so that you can see how easy it is to customize the header in Moodle. You will also look at some basic HTML recommendations to keep your Moodle theme standards-compliant. After this, you will move on to changing the footer, including removing the Moodle logo and the login information links and adding your own copyright or footer text. Finally, in this article, you will learn to check that your changes are standards-compliant and look similar in more than one web browser.

In this two-part article by Paul James Gadsdon, author of Moodle 1.9 Theme Design: Beginner's Guide, you shall:

  • Replace the Moodle logo with your own
  • Replace the title text with your own
  • Replace the footer logo and remove the login link
  • Add your own customized footer information
  • Download a different web browser
  • Test your changes in several web browsers

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 Files\Apache Software Foundation\Apache 2.2\htdocs\theme.
  2. Right-click on the standard theme folder and choose Copy, as seen in the following screenshot:

    Moodle 1.9 Theme Design

  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:

    Moodle 1.9 Theme Design

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

    Moodle 1.9 Theme Design

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.

Moodle 1.9 Theme Design

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 \theme\mytheme\pix directory, right-click, and choose Paste. The result should resemble the following screenshot:

    Moodle 1.9 Theme Design

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 \theme\mytheme 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:

    Moodle 1.9 Theme Design

    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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?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.

Moodle 1.9 Theme Design

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">.

Moodle 1.9 Theme Design: Beginner's Guide Customize the appearance of your Moodle Theme using its powerful theming engine.
Published: April 2010
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

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

  1. Navigate to your mytheme directory, right-click on the header.html file, and choose Open With | WordPad.
  2. Open with a text editor (that is, WordPad or other).

    Moodle 1.9 Theme Design

  3. Find the following lines of code:

    <?php print_container_start(true, '', 'header'); ?>
    <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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/
    logo.gif" alt="Institutions Logo" />

    Immediately after:

    <h1 class="headermain">

    As shown:

    <?php print_container_start(true, '', 'header'); ?>
    <h1 class="headermain">
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?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. If you haven't already opened your Moodle site, then open your web browser and type in the URL of your local Moodle site.
  7. Navigate to any other page in your site or click on the Logout and Login links on the top right-hand corner and this time you should see the main login page with your logo.

Moodle 1.9 Theme Design

What just happened?

We added the logo code to the second instance of the theme's Moodle header. Both instances are in the same theme header.html file, and they load depending on whether the user is on the front page or any inner Moodle pages.

Have a go hero - putting back the inner page title

Now try to go back to your header.html file and comment out the inner page header code so that it does not load the inner page title. This will hopefully make you more familiar with editing the header.html file.

Making your own Moodle logo visible

Now wherever we go within our Moodle site our own logo should be visible on all Moodle pages.

The next thing we want to do is to change the title text in the header.html file within our theme directory. By default, the site's name text is generated automatically by Moodle and is dependent on the site name that was added when installing Moodle (front page), or the site name and course's short name (course pages). The front page title can be changed at any stage by navigating to: Administration | Front Page | Front Page settings.

However, Moodle themers may want to add their own title text to the front page or to all inner pages or even both. Having your own title text on the front page, for instance, is used when the Moodle's front page is being used as a general welcome page and doesn't have any Moodle courses loaded.

Top Tip – Commenting out code
In the following exercise, we will be changing the core code of the header.html file. So it is worth pointing out that rather than deleting code from this file, it is best to comment out the parts of the code that we don't want to use. This way we always have the original code to fall back on.
There are two different types of comments in Moodle theme files: HTML comments and PHP comments. In order to comment out a piece of code that is outside a section of PHP code—<?php – code in here ?>—you will need to wrap the code in HTML comments:
<!--<?php – code in here ?>-->
However, if the code you need to comment out is inside of a section of PHP code, for example:

<?php }
echo $loggedinas; - line to comment
echo $homelink;
<?php }

Then we should use:

<?php }
/*echo $loggedinas;*/
echo $homelink;
<?php }

This will render the code line obsolete—the web server can't see it, but it is still there for you to uncomment if you wish to use it again.

Time for action – changing the title text

  1. Navigate to your mytheme directory, right-click on the header.html file, and choose Open With | WordPad.

    Moodle 1.9 Theme Design

  2. Find the following lines of code:

    <?php print_container_start(true, '', 'header-home'); ?>
    <h1 class="headermain">
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $CFG->themewww .'/'.
    current_theme() ?>/pix/logo.gif" alt="" />
    <?php echo $heading ?></h1>
    <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>

  3. Replace the following line of code:

    <?php echo $heading ?>

    with:

    <!--<?php echo $heading ?> -->My Front Page Heading

    as shown below:

    <?php print_container_start(true, '', 'header-home'); ?>
    <h1 class="headermain">
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $CFG->themewww .'/'.
    current_theme() ?>/pix/logo.gif" alt="" />
    <!--<?php echo $heading?> --> My Front Page Heading</h1>
    <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>

    You can download this code from the Packt website.

  4. Save your header.html file and refresh your browser window making sure that you are on your Moodle front page, and you should see something like the following screenshot. Notice that the Moodle heading has now changed to My Front Page Heading.

Moodle 1.9 Theme Design

What just happened?

We have just learned how to change the title text on the front page of Moodle. In the process of doing this, we also learned how to comment out PHP code so that we can reuse it at a later stage. It is useful to note here that PHP comments are different than HTML comments. We used an HTML comment here because the PHP code was on only one line and it was self-contained. Hopefully, we have also learned why we might need to do this insofar as we might want to have a different front page for Moodle as we would the Moodle inner pages.

Most of my Moodle sites, for instance, have no title text on the front page as I prefer to have a larger graphic logo. And I normally prefer to leave the title on the inner pages as this loads the "course name" when browsing a course.

Summary

With this we conclude the part on customizing the header. In the next part we will cover customizing the footer and also browser compatability.

>> Continue Reading- Moodle 1.9 Theme Design: Customizing the Header and Footer - Part 2

[ 1 | 2 ]

If you have read this article you may be interested to view :


Moodle 1.9 Theme Design: Beginner's Guide Customize the appearance of your Moodle Theme using its powerful theming engine.
Published: April 2010
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

About the Author :


Paul James Gadsdon

Paul James Gadsdon has been a web designer/developer since 1996. He specializes in graphic design, ASP, ASP.net, PHP, and DotNetNuke. He has recently been working as an educational technologist and currently works as a Moodle Virtual Learning Environment developer for the University of Wales, Lampeter.

Books From Packt


Moodle 1.9 Teaching Techniques
Moodle 1.9 Teaching Techniques

Moodle 1.9 for Second Language Teaching
Moodle 1.9 for Second Language Teaching

Moodle 1.9 for Design and Technology
Moodle 1.9 for Design and Technology

Moodle 1.9 Extension Development [RAW]
Moodle 1.9 Extension Development [RAW]

Moodle 1.9 Multimedia
Moodle 1.9 Multimedia

Moodle 1.9 Math
Moodle 1.9 Math

Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide
Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide

Moodle 1.9 E-Learning Course Development
Moodle 1.9 E-Learning Course Development


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software