NewSchool Learning: Standards Based Moodle Designs

Whenever I add a custom logo to a client’s Moodle theme, I always try to leave the H1 tag and title 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 SEO.

Here’s what I’m talking about. What follows was pulled from header.html in the Standard theme folder.

<div id="header-home" class="clearfix">
    <h1 class="headermain"><?php echo $heading ?></h1>
    <div class="headermenu"><?php echo $menu ?></div>
</div>

All code in this tutorial is presented in green on a black background. Highlighted text will appear in yellow; additions will appear in blue; subtractions will appear in red with a line through the text.

1. The first thing you’ll want to do is copy your logo to your theme’s “pix” folder. For example, since I’m using the Standard theme, I would copy my logo to …/moodle/theme/standard/pix/.
2. Then, 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 should appear twice:

• <div id="header-home" class="clearfix">
      <h1 class="headermain"><?php echo $heading ?></h1>
      <div class="headermenu"><?php echo $menu ?></div>
  </div>

and:

• <div id="header" class="clearfix">
      <h1 class="headermain"><?php echo $heading ?></h1>
      <div class="headermenu"><?php echo $menu ?></div>
  </div>

The first appearance (header-home) determines what will appear on your front page only. The second appearance (header) determines what will appear on all other pages. 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 h1.headermain and div.headermenu using PHP to designate a relative path to your logo.

    <h1 class="headermain"><?php echo $heading ?></h1>
    <img src="<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/logo.jpg" />
    <div class="headermenu"><?php echo $menu ?></div>

4. Add a “logo” class to your image for future positioning.

    <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>

5. 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:

Now that we have your HTML in order, let’s hide your site title from view without actually “getting rid” of it. We’ll do this using CSS.

1. Open your primary CSS document. If you are using the Standard theme, use styles_layout.css. If you are using a NewSchool Learning theme, use styles_base.css, styles_default.css, or styles_themename.css (where themename is the name of the theme you’re using!).
2. If you are only adding a logo to the front of your site, add the following to the very bottom of the CSS document opened above.

#header-home .headermain {
    position:absolute;
    left:-9999px;
}
#header-home .logo {
    float:left;
}

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

#header-home .headermain,
#header .headermain {
    position:absolute;
    left:-9999px;
}
#header-home .logo,
#header .logo {
    float:left;
}

4. Save changes and check your site. It should look something like this:

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”.