Standards Based Moodle Designs

We have begun the process of upgrading all themes for Moodle 1.9. This will move all themes from 1.0 to 1.1. The upgrades, we’re finding, are pretty minor. 1.9 didn’t change too much of its core structure from 1.8.

We will offer free upgrades to all who have previously purchased a theme from us. Simply drop us an email with your name, site URL, and invoice number from your purchase, and we’ll send you a new download link.

Update: So far, Solstice, Elegance, Convertible, Envy, and Modern have been upgraded. I will continue working on upgrading the others and will post my progress here.

Update 2: All “for sale” themes are now updated.

I have updated the Elegance theme to version 1.1 to fix some general layout issues I was experiencing in IE6. If you have already purchased the Elegance theme and would like a free upgrade, please contact me with your purchase information (name, invoice #, etc.), and I will gladly send one to you.

If, however, you have committed changes to your theme already and would prefer updating manually, you can download the changelog here.

I’m proud to release our seventh premium theme for Moodle - Prestige.

This theme is fixed at 900px wide, which of course could easily be changed to any width with a single-line CSS edit.

I have included 5 style variations in every download: default, red, green, blue, & brown.

As is typically the case with every new release, this is my favorite so far. I like the cleanliness that two columns gives Moodle.

To get the two columns, all that I’ve done is hide the left column as such:

#left-column {
    display:none;
}

The problem this presented, however, was that it instantly hid any block that was present in the left column prior to selecting the theme. So, I added the following to display the left-column whenever editing was turned on:

.editing #left-column{
     display:block;
}

But, then I thought how this could cause confusion if an instructor places something in the left column while editing is turned on only to have it disappear when outside editing mode. For this reason, I’ve shaded the left column with a “warning” pink background to remind them that anything placed there will not be shown to all users (shown below):

.editing #left-column{
     display:block;
    background:#fdadae;
}

I’m just now finishing up our newest premium theme for Moodle. We’re calling it “Prestige,” and it can be seen on our new two-column demo Moodle installation.

Prestige is a 900px fixed-width theme that hides the left column from typical users who are unable to “turn editing on.” The effect is a two column theme for Moodle that is still just as accessible. (I’ll go much more into detail on this feature when the theme is formally released.)

I hope to have this theme available for download at the beginning of next week. It has been sitting on the back-burner for a couple of months now, and I’m really itching to get it out.

I bet that if one were to count the number of posts in the Moodle Themes discussion forum that asked for help locating the various parts of Moodle that people want to change, one would reach well into the hundreds of posts.

In my opinion, all of these posts are unnecessary, and are evidence that a thorough tutorial on identifying CSS elements, ids, and classes is certainly overdue. This is that tutorial.

This tutorial will describe the best practice for using Firefox’s Web Developer toolbar to decipher your Moodle theme’s cascading style sheets (CSS). It is intended for individuals who are not web developers, but who have at basic knowledge of HTML.

Both Firefox and the Web Developer toolbar can be downloaded for free from mozilla.org.

1. Once you have downloaded and installed the Web Developer toolbar, navigate Firefox to your Moodle installation.
2. Click Information from the choice of options in the toolbar, then select Display Element Information from the drop-down menu that appears (Ctrl+Shift+F will invoke the same action).
3. Move your cursor (which should have turned into cross-hairs) overtop the element that you would like to identify and click on it.

I’ll use a practical example:

Say I wanted to change the color of the title that appears in the header when you’re inside a course.

With the Web Developer toolbar installed, I would Display Element Information, and click my mouse overtop the title that I wanted to edit. This would show the following:

What the above tells us is that the course title is wrapped in an H1 heading that is being identified by the class “headermain.” In terms of HTML, here is what this would probably look like:

<h1 class="headermain">NewSchool Demo</h1>

Now that you know what you want to style:

1. Open your theme’s CSS documents one at a time and search for “headermain”.
2. Once you find what the element and class that you are looking for (in this case, h1.headermain), edit your CSS document to reflect your desired changes. A good place to start if new to CSS is http://w3schools.com

As we approach the end of 2007, it’s time we reflect on our six month existence by taking a look at which of our premium (for sale) themes have been most popular (in terms of downloads).

1. Solstice
2. Envy
3. Convertible
4. Elegance
5. Modern
6. Stealth

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

We will be taking proposals for custom work between now and the end of December. Time is limited, but we would like one or two new projects to be completed for the first week of January. Contact us if you have a project you think we’d be interested in.

I spent the majority of this rainy Sunday coding what will become NewSchool Learning’s seventh Premium Theme - Prestige is a 900px, fixed-width, TWO-COLUMN Moodle theme that will come in as many color combinations as I can think up.

The choice of using the two-column feature is, of course, up to the admin installing the theme, as I’ve included a single-line edit to turn it off. And, then, there is another single-line edit if you prefer something a little wider or thinner than 900px. The theme stays intact at any width.

Back in September, we were commissioned to do a custom Moodle theme for our friends at Liip (Moodle Parther in Switzerland). They wanted a corporate theme that matched their current website so we gave them what they asked for. The cool thing about this theme is that Liip has offered their theme to the Moodle community for free!

It’s a complete one off.

• 900px fixed-width
• Crisp white background
• Subdued black type spaced with care
• Grayscale icon set
• Icons on block headers
• Clean, browser tested, validated goodness!

You can demo this theme on our Moodle Demo server.

To download this new theme, click here and click “Liip.”

Enjoy.