Moodle—Modular Object-Oriented Dynamic Learning Environment—is a free, open source e-learning platform. It is one of the most popular Virtual Learning Environments (VLEs) available today, and is used as a teaching and learning tool in schools, colleges, universities, and more recently in the corporate environment.
The proliferation of Moodle for learning and teaching means that there has never been a better time to become familiar with this e-learning platform. This book focuses on the visual customization (theming) of Moodle so that Moodle can be customized to match your educational institution's or corporate branding guidelines. It will guide you step by step through the processes required to create your own Moodle theme while helping to ensure that you understand what might be required of your theme in terms of web standards and browser compatibility.
This book is split into two sections:
Section 1, Getting Started (Chapters 01 to 05), helps you become familiar with Moodle themes and how to customize themes by using HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
Section 2, Creating a standards-compatible, accessible Moodle theme, shows you how to create a Moodle theme from scratch. It shows you how to visualize your planned theme and turn this concept into a fully-compatible, working Moodle theme.
Chapter 1, An Introduction to Moodle, introduces you to Moodle, explaining what Moodle is and how it works. It will also cover why Moodle should be used. You compare Moodle to other Course Management Systems (CMSes) and Virtual Learning Environments (VLEs) and this chapter details Moodle's pedagogic principles. This chapter also outlines why the book has been written and who its intended audience is. Finally, it discusses what software and hardware tools you will need, and makes some assumptions with regards to the ICT and web design/development skills needed to complete this book.
Chapter 2, Moodle Themes, covers the basics of Moodle theming, including theme types, priority, location of the theme directory, and the concept of parent themes. We also cover browsing and changing a theme within Moodle, and also searching for, downloading, and installing custom themes. We then finish off by changing the theme settings on the Moodle theme settings page.
Chapter 3, Customizing the Header and Footer, covers the steps needed to make changes to the header.html and footer.html files in the theme directory of your Moodle site. You start by making some small changes, such as changing the logo and the title text so that you can see how easy it is to customize the header in Moodle. This chapter also looks at some basic HTML recommendations to keep your Moodle theme standards-compliant. Then it moves on to changing the footer, including or removing the Moodle logo and login info links, and adding your own copyright or footer text. Finally, in this chapter, you learn to check that your changes are standards-compliant and look similar in more than one web browser.
Chapter 4, Adjusting the Colors and Fonts, initially covers what Cascading Style Sheets are, and why stylesheets are important when theming Moodle. After this, you learn to change the default font, set the font size and color, set the link color, and change the background color by using CSS. Additionally, this chapter focuses on the concept of "accessibility" so that you can theme Moodle with accessibility in mind from the outset.
Chapter 5, Changing the Layout, teaches you how to change the default layout of Moodle through the use of CSS. It covers setting the width of the Moodle site and you learn to understand the differences between fixed and liquid Moodle theme designs. You then move on to learn how to change the width of the sideblocks and introduce resolution-independent design concepts while you work through the exercises.
Chapter 6, Planning your Moodle Theme, introduces the concept of "know your audience" and continues with this by making sure that you create your own goals for your Moodle theme before continuing with the "planning and gathering assets" stage. In this section, you learn about the need to think about the images or graphics that might be needed and also to decide whether animation or static graphics should be used. Informal research is the key to this stage. This chapter then addresses how you should create the design for the Moodle theme, from a simple paper mockup to a full-blown exact copy built using a graphics software application (a mockup).
Chapter 7, First Steps: Creating your First Complete Moodle Theme, starts the process of creating your first complete Moodle theme. You learn a little more about themes, parent themes, and how to set these in Moodle's configuration files.
Chapter 8, Creating your Moodle theme from your Mockup: Slice and Dice, helps you start to "slice and dice", taking you through a series of exercises so that you can edit the header and footer of your Moodle theme to match that of the mockup that you created in the planning stage. This chapter also takes you through the process of changing all of the links, fonts, headings, and background, and continues on to changing the themes' icons and testing the changes that you have made.
Chapter 9, Under the Hood: Style your Navigation, Login Screen, and Blocks, further develops your skills learned in Chapter 8 to show you how to change the look and feel of some more functional elements of Moodle. This includes elements such as the splash page login screen, the width and appearance of the sideblock headers and sideblock content areas. You also learn how to style the breadcrumb trail and test these changes in multiple browsers.
Chapter 10, Under the Hood: Theming Core Functionality and Modules, allows you to change the appearance of some of the core code (non-contributed) parts of Moodle. You first look at theming the central content part of your Moodle site, including the home page course category pages and the actual course view. You then move on to learn how to theme the forum and glossary modules to match your theme. You change only a small amount in each module so that you can pave the way to further improvements, in the next chapter.
Appendix A, Further Enhancements, elaborates some further enhancements that you can make to your new theme and ways by which you can test that all of the functionality within Moodle works the way that it is supposed to. We discuss ways by which we can streamline some of the actions that we have been undertaking, such as grouping CSS styles. You also correct a few problems that the author has noticed and create rollover and drop-down menus, among other things.
Appendix B, Glossary of Useful Terms and Acronyms, is a simple glossary of the terms, definitions, and acronyms that you will come across while learning about Moodle and Moodle themes.
Appendix C, Pop Quiz Answers, contains the answers to the pop quizzes.
If you are a Moodle administrator, ICT technical personnel, designer, or a teacher, and wish to enhance your Moodle site to make it visually attractive, then this book is for you. You should be familiar with the basics of Moodle operation, and some familiarity with web design techniques, such as HTML and CSS, will be helpful.
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
1. Action 1
2. Action 2
3. Action 3
Instructions often need some extra explanation so that they make sense, so they are followed with:
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
These are short multiple choice questions intended to help you test your own understanding.
These sections set practical challenges and give you ideas for experimenting with what you have learned.
You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
<?php print_container_start(true, '', 'header-home'); ?> <h1 class="headermain><?php echo $heading ?></h1> <div class="headermenu"><?php echo $menu ?></div> <?php print_container_end(); ?>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<?php print_container_start(true, '', 'header-home'); ?>
<h1 class="headermain">
<img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/logo.gif" alt="" /> <?php echo $heading ?></h1>
<div class="headermenu"><?php echo $menu ?></div>
<?php print_container_end(); ?>
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " Click on Run and wait for the Mozilla Firefox Setup Wizard to appear ".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note via the SUGGEST A TITLE form on www.packtpub.com, or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Note
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/0141_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.