I have been exploring making a new theme for Moodle. There are already some good resources on creating a new theme in the Moodle documentation. These cover customizing the CSS to make changes to most parts of Moodle.

I did not find any good docs on actually changing the templates for Moodle. In the current Moodle 1.9.x design the index page and other course pages don't entirely share layouts. In addition Moodle 1.9.x uses table based layout so styling the boxes can be a little tricky.

The first problem I had was getting the spacing between the columns on the home page and the course pages consistent. Course pages have a container in the middle column that you can style, but the index page does not. It has a div that does not have a css id or class. 

The first change I made was to moodle/index.php. 

I changed 

    echo '<td id="middle-column">'. skip_main_destination();

to

    echo '<td id="middle-column-index">'. skip_main_destination();

Now I can customize the spacing something like this in user-styles.css in our theme.

#middle-column-index {
vertical-align:top;
padding-left:10px;
padding-right:0px;
} 

Since the contents of the middle column on the index page are just <div> without any class of id, you can't use CSS like this

#middle-column .div {} to style the middle column on the index page.

Hopefully Moodle 2.0 will get rid of table based layout and specify ids on all the main content containers to make this a little easier.