Adding a logo through the theme code in Moodle

When using a theme that does not have the theme editing options, you can add the code for your logo to the theme files. This article is somewhat advanced, so if you are not comfortable editing code, please contact a web developer to do this. Before you can add the logo to your Moodle site, you will need to upload the logo file to your server.

Note! This article will explain how to edit the code in the "Fusion" theme for tutorial purposes. Other themes can be edited in this way as well.

Upload the file into your "Fusion" theme directory at the following location path:

theme/fusion/layout

For information on how to upload your files to your server, see our article on How to I upload a file to my server?. Once you upload your logo to your Fusion theme directory, you can link to your image using a link like the following:

http://your-moodle-site.com/theme/fusion/layout/logo.gif

This article will explain how to add your logo code to the header and footer of the "Fusion" theme.

Adding your logo to the header

Logos on most sites are floated next to the web site title. The following steps will show you how to float your logo in the header of the "Fusion" theme.

1. Edit the theme/fusion/layout/frontpage.php page in the "Fusion" theme. To learn how to edit your files click here. The link you will use is similar the following: Find the line of code that says <!-- START OF CONTENT -->.

   <img src="http://your-moodle-site.com/theme/fusion/layout/logo.gif" style="float:left;padding: 0px 20px 0px 0px;" />

   Place an image link to your logo in the id="region-header" <div> section. You will need to clear the float using <br style="clear:both;" /> before the end of the id="region-header" ending </div> tag.

   The code should look like the following when done.

   <div class="region-content">
   <div id="region-header">
   <img src="http://your-moodle-site.com/theme/fusion/layout/logo.gif" style="float:left;padding: 0px 20px 0px 0px;" />
        <h1 class="headermain"><?php echo $PAGE->heading ?></h1>
        <p class="tagline"><?php echo $tagline ?></p>
   <br style="clear:both;" />
   </div>

   
   
2. Repeat the same steps for the general.php page as well. Navigate to the theme/fusion/layout/general.php file.
3. Visit your Moodle site. You should see the logo show in the header of your web page like the snapshot to the right.
   

Adding your logo in the footer

Adding a logo to the footer of the "Fusion" theme is similar to adding the logo to the header In this section. We will add the logo so that it centers at the bottom of your Moodle footer.

1. Edit your theme/fusion/layout/frontpage.php file. Find the line of code towards the bottom that says <!-- START OF FOOTER -->. Add the following image code right before the id="page-footer" ending </div> tag.

   <img src="http://your-moodle-site.com/theme/fusion/layout/puzzle.gif" align="center" />

   
   

   The code should look like the following code.

   <!-- START OF FOOTER -->
       <div id="page-footer" class="wrapper clearfix">
       
       <?php echo $footnote ?>
           <p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>
           <?php
               echo $OUTPUT->login_info();
               echo $OUTPUT->home_link();
               echo $OUTPUT->standard_footer_html();
           ?>
       <img src="http://your-moodle-site.com/theme/fusion/layout/puzzle.gif" align="center" />  
       </div>

   
   
2. Repeat step 2 for adding the logo code to the theme/fusion/layout/general.php page.

   The logo will show at the bottom of your Footer now like the image on the right.