Moodle 1.9 Theme Design Beginner's Guide Customize the appearance of your Moodle Theme by using Moodle's powerful theming engine Paul James Gadsdon BIRMINGHAM - MUMBAI Moodle 1.9 Theme Design Beginner’s Guide Copyright © 2010 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: April 2010 Production Reference: 1150410 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849510-14-1 www.packtpub.com Cover Image by Ed Maclean ([email protected]) Credits Author Editorial Team Leader Paul James Gadsdon Akshara Aware Reviewer Project Team Leader Mauno Korpelainen Priya Mukherji Acquisition Editor Project Coordinator David Barnes Prasad Rai Development Editor Proofreaders Dhiraj Chandiramani Joel T. Johnson Technical Editor Dirk Manuel Namita Sahni Graphics Copy Editor Geetanjali Sawant Lakshmi Menon Production Coordinator Indexer Aparna Bhagat Hemangini Bari Cover Work Aparna Bhagat About the Author Paul James Gadsdon has been at the forefront of the web development industry for more than 12 years. He has worked as a web developer/designer and project manager for various national and international companies during this period. He has also worked for a local government in an advisory capacity, and undertakes consultancy work in a variety of technical subjects. His technical expertise lies in areas such as SQL, ASP, ASP.Net, VB, C#, DotNetNuke, Joomla, and PHP. Some four years ago he became involved in Moodle and since then he has worked as an e-Learning Technologist and a Moodle Virtual Learning Environment Developer. Paul currently works for the University of Wales, Lampeter. I would like to thank my partner Steph Copson for the whole 30 minutes of patience she afforded me over the time of writing this book. About the Reviewer Mauno Korpelainen teaches Mathematics for high school and adult students in Hyvinkää, Finland and has been a PHM (Particularly Helpful Moodler) for several years, and is one of the moderators of the moodle.org forums. Table of Contents Preface 1 Chapter 1: An Introduction to Moodle 7 What are Virtual Learning Environments? 8 Importing/exporting and/or creation of course materials 9 Delivery of course materials over the Internet 9 Communication and collaboration between students and educators 9 Online tracking and assessment of student progress 10 Modularized activities and resources 10 Customization of the interface 10 What types of VLEs are there? 10 What are the advantages of using a VLE? 11 What is Moodle? 12 Why should I use Moodle? 12 Features 13 Philosophy 13 Community 13 Free and open source 14 What will you be doing? 14 What skills will you need? 14 Tools for the job 15 Hardware 15 Software 15 Adobe Photoshop 16 Firefox 16 FileZilla 16 Other web browsers 16 Summary 17 Table of Contents Chapter 2: Moodle Themes 19 Important preliminary points 19 What is a Moodle theme? 20 Browsing and selecting a Moodle theme 20 Time for action – browsing and selecting a Moodle theme 21 Theme types 25 Theme priority 26 Parent themes 26 Theme directory 27 Time for action – browsing the 'Standard' theme folder 27 The pix folder 29 config.php 29 meta.php 29 doctyles.php 29 screenshot.jpg 29 favicon.ico 29 README.html 29 header/footer.html 30 styles_moz.css 30 styles_ie6.css 30 styles_ie7.css 30 styles_fonts.css 30 styles_color.css 31 styles_layout.css 31 rtl.css 31 Searching for and downloading Moodle themes 31 Time for action – searching for Moodle themes 32 Installing a new Moodle theme 33 Time for action – downloading a new Moodle theme 33 Time for action – extracting and installing your Moodle theme 36 Moodle's theme settings 40 Time for action – forcing users to use your theme choices 40 Theme settings list 44 Theme list 45 Allow user themes 45 Allow course themes 45 Allow category themes 45 Allow users to hide blocks 46 Show blocks on module pages 46 Hide activity type navigation 46 Summary 47 [ ii ] Table of Contents Chapter 3: Customizing the Header and Footer 49 Important preliminary points 50 Customizing the header 50 Time for action – making a copy of the standard theme 50 Adding your own logo 52 Time for action – copying your logo to your mytheme directory 53 Time for action – adding the logo code to your header.html file 54 Time for action – adding the logo code to your header.html file again! 56 Making your own Moodle logo visible 59 Time for action – changing the title text 60 Customizing the footer 62 Removing the Moodle logo 62 Time for action – deleting the Moodle logo 63 Removing the login info text and link 64 Time for action – deleting the login info text 65 Time for action – adding your own footer text 67 Browser compatibility – checking whether your changes have worked 69 Time for action – installing Mozilla Firefox 69 Time for action – checking whether your changes have worked 72 Recommendations 75 Summary 77 Chapter 4: Adjusting the Colors and Fonts 79 Important preliminary points 79 Installing Firebug and the Web Developer Toolbar 80 Time for action – installing the Firebug extension for Firefox 80 Cascading Style Sheets and Moodle 83 Time for action – creating a new Cascading Style Sheet 84 Changing the default font 86 Time for action – changing the default font by using Firebug 86 More on Firebug 88 Time for action – making our changes permanent 88 Setting the font color and size 89 Time for action – changing the font color 90 Changing the default font size 91 Time for action – setting the font size 91 Setting the link colors 92 Time for action – changing the link colors 92 Changing the background 94 Time for action – changing the background color 94 [ iii ]