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

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.

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.

   

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.

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.

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

   

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.

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.

   

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.

   

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.

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.