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.

Header that will be edited

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:

Header with title selected

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