Uploaded logo image Moodle Fusion themesWhen 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. View of the header code Moodle Fusion themeEdit 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. View of logo in the header Moodle Fusion themeVisit 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 themeEdit 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. View of the logo in the footer Moodle Fusion themeRepeat 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.


Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!