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

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.

$26.99    $13.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.

Read Part One of Moodle 1.9 Theme Design: Customizing the Header and Footer here.

Having dealt with customizing the header in the first part of this two-part article by Paul James Gadsdon, author of Moodle 1.9 Theme Design: Beginner's Guide, we will further look into customizing the footer and also cover browser compatability.

Customizing the footer

Obviously, the second thing that we are going to do after we have made changes to our Moodle header file is to carry on and change the footer.html file. The following tasks will be slightly easier than changing the header logo and title text within our Moodle site, as there is much less code and subsequently much less to change.

Removing the Moodle logo

The first thing that we will notice about the footer in Moodle is that it has the Moodle logo on the front page of your Moodle site and a Home button on all other pages. In addition to this, there is the login info text that shows who is logged in and a link to log out.

Moodle 1.9 Theme Design

More often than not Moodle themers will want to remove the Moodle logo so that they can give their Moodle site its own branding. So let's get stuck in with the next exercise, but don't forget that this logo credits the Moodle community.

Time for action – deleting the Moodle logo

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

    Moodle 1.9 Theme Design

  2. Find the following two lines of code:

    echo $loggedinas;
    echo $homelink;

  3. Comment out the second line using a PHP comment:

    echo $loggedinas;
    /*echo $homelink; */

  4. Save the footer.html file and refresh your browser window. You should now see the footer without the Moodle logo.
Moodle 1.9 Theme Design

What just happened?

In this exercise, we learned which parts of the PHP code in the footer.html file control where the Moodle logo appears in the Moodle footer. We also learned how to comment out the PHP code that controls the rendering of the Moodle logo so that it does not appear. You could try to put the Moodle logo back if you want.

Removing the login info text and link

Now that we have removed the Moodle logo, which of course is completely up to you, you might also want to remove the login info link. This link is used exactly like the one in the top right-hand corner of your Moodle site, insofar as it acts as a place where you can log in and log out and provide details of who you logged in as.

Moodle 1.9 Theme Design

The only thing to consider here is that if you decide to remove the login info link from the header.html file and also remove it from the footer, you will have no easy way of logging in or out of Moodle. So it is always wise to leave it either in the header or the footer. You might also consider the advantages of having this here as some Moodle pages such as large courses are very long. So, once the user has scrolled way down the page, he/she has a place to log out if needed.

The following task is very simple and will require you to go through similar steps as the"deleting the logo" exercise. The only difference is that you will comment out a different line of code.

Time for action – deleting the login info text

  1. Navigate to your mytheme directory and right-click on the footer.html file and choose Open With | WordPad (or an editor of your choice).

    Moodle 1.9 Theme Design

  2. Find the following two lines of code:

    echo $loggedinas;
    echo $homelink;

  3. Comment out the first line by using a PHP comment as shown below:

    /* echo $loggedinas; */
    echo $homelink;

  4. Save the footer.html file and refresh your browser window. You will see the footer without the Moodle logo or the login info link.
Moodle 1.9 Theme Design

What just happened?

In this task, we learned about those parts of the PHP code in the footer.html that control whether the Moodle login info text appears in the Moodle footer similar to the Moodle logo in the previous exercise. We also learned how to comment out the code that controls the rendering of the login info text so that it does not appear.

Have a go hero – adding your own copyright or footer text

The next thing that we are going to do in this article is to add some custom footer text where the Moodle logo and the login info text were before we removed them. It's completely up to you what to add in the next exercises. If you would like to just add some text to the footer then please do. However, as part of the following tasks we are going to add some copyright text and format it using some very basic HTML.

Time for action – adding your own footer text

  1. Navigate to your mytheme directory and right-click on the footer.html file and choose Open With | WordPad.
  2. At the very top of the file, paste the following text or choose your own footer text to include: My School © 2009/10 All rights reserved.

    Moodle 1.9 Theme Design

  3. Save the footer.html and refresh your browser. You will see that your footer text is at the bottom of the page on the right-hand side. However, this text is aligned to the left as all text in a browser would be.

    Moodle 1.9 Theme Design

  4. Open the footer.html file again (if it isn't open already) and wrap the following code around the footer text that you have just added:

    <div align="right">My School &copy; 2009/10 All rights reserved
    </div>

  5. Save your footer.html file and refresh your browser. You will see that the text is now aligned to the right.

Moodle 1.9 Theme Design

What just happened?

We just added some very basic footer text to our footer.html file, saved it, and viewed it in our web browser. We have demonstrated here that it is very easy to add our own text to the footer.html file. We have also added some basic HTML formatting to move the text from the left to the right-hand side of the footer. There are other ways to do so, which involve the use of CSS. For instance, we could have given the <div> tag a CSS class and used a CSS selector to align the text to the right.

Have a go hero – adding your own footer logo

Now try to see if you can edit the footer.html and add the same logo as you have in the header.html in to the footer. Remember that you can put the logo code anywhere outside of a PHP code block. So try to copy the header logo code and paste it into the footer.html. Finally, based on what we have learned, try to align the logo to the right as we did with the footer text.

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: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Browser compatibility – checking whether your changes have worked

As fledgling Moodle themers or website designers, we will need to understand the importance of browser compatibility, which is the need to make sure that our themes or designs all look similar in the many different browsers available in the market.

In most cases, the variation from one browser to another will be minor and probably not even noticeable for the average visitor. But in some cases, especially when using CSS, we might find that the differences will prevent users from using our Moodle site. The best way to make sure that our site is usable to most of the Internet audience is to test and then test some more.

One of the first things that we will need to do is to find out which browsers are the most commonly used by our visitors. If the Moodle site is an internal educational or corporate site, this will be relatively easier, as our IT department will probably allow only one or two different web browsers to be installed. If, however, our Moodle site is open to public, this task gets a little harder. The best way to see which are the most popular browsers used to visit our Moodle site is to look at our website statistics. By website statistics, I do not mean Moodle's reports, as these will not have the required information, I mean a software package that has been installed on your server such as AWStats, Webalizer, or Google Analytics. Most website-hosting companies will come with a pre-installed website statistics package.

If your organization hosts its own Moodle website, then you will probably need to contact the Moodle server administrator to see if they have any statistics packages installed. If they are not installed, then we could consider installing Google Analytics into Moodle by using the Google Analytics block. Anyway, we will discuss this subject in a little more detail in a while. For now let's install Mozilla Firefox and do our first browser compatibility testing.

Obviously, if you already have Mozilla Firefox, then you do not need to install it. If you are already using it, then you could follow the Time for action – checking whether your changes have worked section but replace the testing with Mozilla Firefox with Internet Explorer.

Time for action – installing Mozilla Firefox

  1. Open your favorite web browser, navigate to Google, and type the following in the search box: Mozilla Firefox download. You will be directed to the correct download site for your location.
  2. Click on the large Download button on the left-hand side. Note that the version number may be different.

    Moodle 1.9 Theme Design

  3. Choose the Run button from the following dialog box:

    Moodle 1.9 Theme Design

  4. After you choose Run, the following download dialog box will appear:

    Moodle 1.9 Theme Design

  5. After the download has been completed, Windows Internet Explorer will ask you to accept that you want to run this software.

    Moodle 1.9 Theme Design

  6. Click on Run and wait for the Mozilla Firefox Setup Wizard to appear

    Moodle 1.9 Theme Design

  7. Click on Next, choose Standard Installation, and Next again, and finally choose Install. You now should have a Firefox entry in your start menu and an icon on your desktop.

What just happened?

We have just gone through the steps necessary to install Mozilla Firefox. This process would be the same for most browsers apart from the fact that the website addresses where you get the downloads from will change. For future reference, if you want to install any other browsers for testing purposes, such as Google Chrome or Opera, just go to Google and search for the browser name - download where browser name is replaced with the actual name.

Now that we have installed Mozilla Firefox, we can start some basic browser compatibility testing. I suggest basic browser compatibility testing because for the time being we will be testing only our changes to the header and footer on our Moodle site in two different browsers, namely Windows Internet Explorer and Mozilla Firefox.

Other browsers used to check our changes will be covered at the end of this article. Other methods for checking can also be used if we don't want to install multiple web browsers on our PCs.

Time for action – checking whether your changes have worked

  1. Open your Moodle site in Windows Internet Explorer or Mozilla Firefox and log in as the administrator.
  2. Open up whichever web browser you haven't already opened and navigate to your Moodle site and log in again.
  3. Now all you need to do is switch between the two browsers either by clicking on the tabs of your two browsers on the status bar or pressing Alt + Tab keys on your keyboard and choosing either Firefox or Internet Explorer. Here are some screenshots of the two different browsers and what our changes look like:

Mozilla Firefox:

Moodle 1.9 Theme Design

Windows Internet Explorer:

Moodle 1.9 Theme Design

As you can see from your own testing and the preceding screenshots, there are minimal differences between the two browsers. Perhaps you might have been thinking that we would purposely have differences that we would then have to deal with—well, no. The reason we have done these exercises is to get used to checking every change we make as we go along. This is essential, as it's very easy to forget and do half-a-day's work only to find that your changes are different in a default browser.

Recommendations

The list of web browsers that are used on the Internet is endless, so because of this we have to be clever about which browsers we use for browser compatibility testing. At the beginning of this article, we learned that the best way to see what percentage of users are using a particular browser would be to look at your Moodle site's web server statistics.

The most common web browsers are:

  • Windows Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari
  • Google Chrome

You can download all of these for free and install them. The process would be pretty much the same as downloading Mozilla Firefox.

However, there is a problem here—it is much more difficult to install multiple versions of the same browser. For instance, you might want to have Windows Internet Explorer 5.0, 6.0, 7.0, and 8.0, because all these versions of the same web browser will render web pages and interpret CSS rules in a slightly different way. The only real way around this is to use an emulator or website service to check for web browser compatibility across different versions of the same browser.

The best by far that I have managed to find is the free "Browsershots" service found at http://browsershots.org. All you need to do is enter the URL of your Moodle site (assuming it's on the Internet), and check or uncheck the browsers you want to see with your Moodle site in them. A note of warning here: only check the most common browsers; try to avoid checking all of the boxes on this page as the service takes between 15 minutes and a couple of hours to take screenshots and upload them to your account.

For instance, I have Firefox, IE, Opera, Safari, and Google Chrome installed on my PC, which I use for browser compatibility testing. If I need to see whether there are any differences in the look and layout of my Moodle theme across multiple versions of the same browser, then I will use the above service.

In addition to the various online tools available for browser compatibility testing, there is also a tool called Microsoft Expression Web SuperPreview, which is a useful tool that allows developers to debug websites between all of the different versions of Internet Explorer.

You may wish to have a look at these online services as well:

  • Xenocode Browser Sandbox
  • CrossBrowserTesting.com
  • BrowsrCamp
  • Litmus

A full list of the online services will be included in the appendix.

Have a go hero - downloading Google Chrome

Go and do a Google search for the Google Chrome browser download. Navigate to the correct page and see if you can download, run, and install the Google Chrome browser. The process should be similar to what you have already learned in the installing Mozilla Firefox section.

Summary

Throughout this article, we have learned about making basic changes to the header and footer HTML files for our Moodle theme. We have learned that it's relatively easy to make small changes such as replacing the Moodle logo with our own. We have also learned about the importance of checking our changes in several web browsers and how to download and install different web browsers as part of the testing process. Finally, we also learned how to check that our changes have been applied by using online services such as Browsershots.

Specifically, we covered:

  • How to add our own logo to our theme's header.html file
  • How to remove the Moodle logo and login info link in the footer.html file
  • How and why it is important to test these changes in different browsers
  • How to download other web browsers
  • How to comment out HTML and PHP code
[ 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: $26.99
Book Price: $44.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