Book Image

Moodle 1.9 Theme Design: Beginner's Guide

Book Image

Moodle 1.9 Theme Design: Beginner's Guide

Overview of this book

Moodle is a highly extensible virtual learning environment and is used to deliver online teaching and training materials. Theming is one of the main features of Moodle that can be used to customize your online courses and make them look exactly how you want them to. If you have been looking for a book that will help you develop Moodle Themes that you are proud of, and that your students would enjoy, then this is the book for you.This book will show you how to create themes for Moodle, change pre-installed Moodle themes, and download new themes from various resources on the Internet. It is filled with suggestions and examples for adapting classroom activities to the Virtual Learning Environment.This book starts off by introducing Moodle, explaining what it is, how it works, and what tools you might need to create a stunning Moodle theme. It then moves on to show you in detailed steps how to choose and change a Moodle theme, and explains what Moodle themes are and how they work. It shows you how to change an existing theme and test the changes that you have made.The latter half of this book will start you off on the road to creating your own themes from scratch. It provides detailed instructions to guide you through the stages of creating a stunning theme for your Moodle site. From planning theme creation, through to the slicing and dicing, and more advanced Moodle theming processes, this book will give you step-by-step instructions to create your own Moodle theme.
Table of Contents (18 chapters)
Moodle 1.9 Theme Design
Credits
About the Author
About the Reviewer
Preface
Glossary of Useful Terms and Acronyms

Some further small changes


As we have progressed through the chapters of this book, there are a few small changes that we could have made as we worked through them. We didn't make these changes because it would have made some of the chapters a little long, and I felt that it would be best if you (the reader) tried to change these with only a few small hints and tips.

Try to make the following changes by using some of the hints set out below.

Changing the buttons

One thing that I thought might need to be changed was the look and feel of the button elements in your theme. You can change the color, size, and font, or even implement a rollover so that the button changes color when the user places his or her mouse over the button. Set out below is an example of two buttons—one styled using CSS and in the active state and the other in a rollover state.

Active state:

Rollover state:

Let's see if you can make the form buttons in your theme look like the ones above. Remember: you can add backgrounds, borders, change the font type and size, and even have a rollover state for the buttons.

Here is a CSS hint:

input[type="button"], input[type="submit"]
button:hover, input[type="button"]:hover, input[type="submit"]:hover

Changing the drop-down fields

Another thing that you might want to sort out is the drop-down fields, such as the language chooser on the top right-hand corner of your theme. These can be styled, but not as much as the buttons. Another thing to look out for is that elements often share classes, so changing the width of one might have an effect on another.

So go and jump in and see if you can find the correct class that will alter the look of the language drop-down box on your theme, by using Firebug.

It's not there, is it? Well here is a tip: look in the standard theme's stylesheets for a style called select. Here is an example of a drop-down form field that has been styled:

Changing the form fields

Again, there are lots of form fields scattered around Moodle, and there is no reason why you shouldn't make these look a little better as well.

button, input[type="password"], input[type="text"]

The above CSS hint might help you with this, but make sure that the correct form fields are changed. Here is an example of a form text field that has been styled: