NewSchool Learning: Standards Based Moodle Designs

How to Add a Logo to a Moodle Theme Using Basic HTML and CSS.

Whenever I add a custom logo to a Moodle theme, I always try to leave the H1 tag and headings in the HTML for search engines and screen readers to find. And, since this isn't the method described in the Moodle Documentation, I thought it was time I shared my method in the name of accessibility and search engine optimization.

What follows was pulled from header.html in the Standard theme folder on version 1.9:

<?php print_container_start(true, '', 'header-home'); ?>   <h1 class="headermain"><?php echo $heading ?></h1>   <div class="headermenu"><?php echo $menu ?></div> <?php print_container_end(); ?>

In the above, <?php echo $heading ?> is your site title. The easiest way to add a logo would be to replace this code with something like <img src="image.jpg" />, save and be done with it. However, this would essentially leave your site nameless since screen readers and search engines can't read your image.

Luckily, there is another way.

1. The first thing you'll want to do is copy your logo to your theme's pix folder. Since I'm using the Standard theme, I will copy my logo to ../moodle/theme/standard/pix/.
2. Open your theme's header.html file and search for the following:
<h1 class="headermain"><?php echo $heading ?></h1> <div class="headermenu"><?php echo $menu ?></div>

This will appear twice. The first sets what will appear on your front page only (designated by 'header-home'). The second sets what will appear on all other pages where the header is used (designated by 'header'). If you want your logo to appear on ALL pages, you will simply have to add it twice, in both places.

3. Add your logo between the h1 and div tags using PHP to designate a relative path to your logo.
<h1 class="headermain"><?php echo $heading ?></h1> <img class="logo" src="<?php echo $CFG->themewww ."/". current_theme() ?>/pix/logo.jpg" /> <div class="headermenu"><?php echo $menu ?></div>
4. Save changes and check your theme to make sure you have entered everything correctly. Your header should look something like this, with both your site title AND logo showing:

And, that's it for the HTML. Now, let's use CSS to hide your site title from viewers while retaining it in the HTML.

1. Open a primary CSS document within your theme. If you are using the Standard theme like I am, open styles_layout.css. If you are using one of our themes, it will be something like styles.css, styles_base.css, styles_default.css, or styles_themename.css (where themename is the name of the theme you're using).
2. If adding a logo only to the front of your site, add the following to the bottom of your theme's primary CSS document:
#header-home .headermain { position:absolute: left:-9999px; } #header-home .logo { float:left; }

And, if you are adding a logo to all pages (and you have made the appropriate additions to both places in header.html noted above), your addition will look like this:

#header-home .headermain, #header .headermain { positiion:absolute: left:-9999px; } #header-home .logo, #header .logo { float:left; }
3. Save changes and check your site. It should look something like this:

4. If you find that your logo isn't centering properly, you can always add padding to your image until you get it placed where you like:
header-home .logo { float:left; padding:Wpx Xpx Ypx Zpx; }

In the above example W="top", X="right", Y="bottom", and Z="left".

Please feel free to post any questions you have in our forums.