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:
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.
- Edit the
theme/fusion/layout/frontpage.phppage 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
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>
- Repeat the same steps for the general.php page as well. Navigate to the
- 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.
- Edit your
theme/fusion/layout/frontpage.phpfile. Find the line of code towards the bottom that says
<!-- START OF FOOTER -->. Add the following image code right before the
<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>
- Repeat step 2 for adding the logo code to the
The logo will show at the bottom of your Footer now like the image on the right.
We value your feedback!
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.
Post a Comment
Do you want to publish a tutorial to our support center?