
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.
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 theid="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>
- Repeat the same steps for the general.php page as well. Navigate to the
theme/fusion/layout/general.php
file. 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.php
file. Find the line of code towards the bottom that says<!-- START OF FOOTER -->
. Add the following image code right before theid="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>
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.
‹
Section 2: Changing the Logo and Footer in Moodle themes
|
›
Section 4: Manually installing a theme for Moodle 2.3
|
Related Questions
Support Center Login
Our Login page has moved. Please click the button below to be redirected to the login page.Recent Articles
Changing the Appearance of Moodle
Search
Ask the Community!
Current Customers
Chat: | Click to Chat Now | E-mail: | support@InMotionHosting.com |
---|---|---|---|
Call: | 888-321-HOST (4678) | Ticket: | Submit a Support Ticket |
Post a Comment