Adding a logo through the theme code in Moodle

Uploaded logo image Moodle Fusion themes

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:


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:

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. View of the header code Moodle Fusion theme

    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="" 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="" 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. View of logo in the header Moodle Fusion theme

    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. Code view for footer Moodle Fusion theme

    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="" 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="" align="center" />

  2. View of the logo in the footer Moodle Fusion theme

    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.

Alyssa Kordek Technical Writer

Alyssa started working for InMotion Hosting in 2015 as a member of the Technical Support team. Before being promoted to Technical Writer, Alyssa developed a skillset that includes data migration and system administration. She now works to produce quality technical content such as how-to guides that help users get the most out of their hosting experience.

More Articles by Alyssa

Was this article helpful? Let us know!