NewSchool Learning: Standards Based Moodle Designs

How to Use the Web Developer Extension for Firefox

This tutorial will demonstrate how you can use the free Web Developer extension for Firefox to understand the Moodle CSS. If you do not already have the web developer extension, it can be downloaded here.

Once you have the Web Developer extension installed in Firefox, you should see a new toolbar appear underneath your Navigation Toolbar:

If you don't see the toolbar, right click on the navigation bar to see a menu of possible toolbars.

For this tutorial, we're only going to use one feature of this toolbar: View Style Information.

1. From the Web Developer Toolbar, select CSS >> View Style Information. When selected, you should see a third bar appear.

2. Hover your mouse over a part of the page that you wish to style differently. You should see a red box appear and follow your mouse around the screen.

That box is continually reshaping itself to identify the different elements on the page. As the box changes, notice also that the text in the web developer bar (shown above) changes also. Technically, any element can be styled to your preferences.

For example, let's look at our demo server using the Standard theme. Say I was interested in changing the color of the background that appears behind the sideblock titles. With "View Style Information" turned on, I would simply hover my mouse over the part I was interested in changing to figure out how that element was identified in the Moodle code.



Now, I know that there is quite a learning curve to understand everything that appears in text, but that shouldn't stop you from attempting to figure things out. This should help:

• Elements are divided by the ">" symbol. The farther right an element appears on the screen, the more specific it is to what you have selected.
• A "div" is a generic container element that is used to define a section.
• The "#" symbol is used to designate element IDs. An element ID can only appear once on a page and should be considered very specific. For example, adding a CSS style to div#inst311 will style ONLY that specific instance of that div.
• A "." is used to designate element classes. A class can appear several times on a page. Adding styles to a class in your style sheet will change every element identified with that class. For example, styling div.header would change the header of every sideblock on the page.

Some elements belong to more than one class. (ex: div.block_login and div.sideblock - though the period is not present above for the "sideblock" class, it is implied.)

• IDs and classes can be listed from left to right to get more specific. For example, adding #right-column .block_login .header { background:#000; } to your style sheet would change the header background color of the login block whenever it appears in the right column. When in the left column, the header would be uneffected.
3. Once you have found what you want to style, search your theme's style sheets (ending in .css) for the specific ID or class.

Since, in my imaginary scenario, I want to change the background color of the sideblock header in the Standard theme, I would search styles_color.css for .header until I found: .sideblock .header { border-color: #dddddd; }

4. Add your desired changes to what you've found. I would add my background color as such:
.sideblock .header { border-color: #dddddd; background:#00f; }

If the class or ID you are looking for simply cannot be found, add one yourself using the information learned from the toolbar.

5. Save and check your site for the change.

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