Moodle 1.9 Theme Design: Beginner's Guide

Table of Contents

• Preface

• Chapter 1: An Introduction to Moodle
  • What are Virtual Learning Environments?
    • Importing/exporting and/or creation of course materials
    • Delivery of course materials over the Internet
    • Communication and collaboration between students and educators
    • Online tracking and assessment of student progress
    • Modularized activities and resources
    • Customization of the interface
  • What types of VLEs are there?
  • What are the advantages of using a VLE?
  • What is Moodle?
  • Why should I use Moodle?
    • Features
    • Philosophy
    • Community
    • Free and open source
  • What will you be doing?
  • What skills will you need?
  • Tools for the job
    • Hardware
    • Software
      • Adobe Photoshop
      • Firefox
      • FileZilla
      • Other web browsers
  • Summary

• Chapter 2: Moodle Themes
  • Important preliminary points
  • What is a Moodle theme?
  • Browsing and selecting a Moodle theme
  • Time for action – browsing and selecting a Moodle theme
  • Theme types
    • Theme priority
    • Parent themes
    • Theme directory
  • Time for action – browsing the 'Standard' theme folder
    • The pix folder
    • config.php
    • meta.php
    • doctyles.php
    • screenshot.jpg
    • favicon.ico
    • README.html
    • header/footer.html
    • styles_moz.css
    • styles_ie6.css
    • styles_ie7.css
    • styles_fonts.css
    • styles_color.css
    • styles_layout.css
    • rtl.css

• Searching for and downloading Moodle themes
• Time for action – searching for Moodle themes
• Installing a new Moodle theme
• Time for action – downloading a new Moodle theme
• Time for action – extracting and installing your Moodle theme
• Moodle's theme settings
• Time for action – forcing users to use your theme choices
• Theme settings list
  • Theme list
  • Allow user themes
  • Allow course themes
  • Allow category themes
  • Allow users to hide blocks
  • Show blocks on module pages
  • Hide activity type navigation

• Summary

• Chapter 3: Customizing the Header and Footer
  • Important preliminary points
  • Customizing the header
  • Time for action – making a copy of the standard theme
    • Adding your own logo
  • Time for action – copying your logo to your mytheme directory
  • Time for action – adding the logo code to your header.html file
  • Time for action – adding the logo code to your header.html file again!
  • Making your own Moodle logo visible
  • Time for action – changing the title text
  • Customizing the footer
    • Removing the Moodle logo
  • Time for action – deleting the Moodle logo
    • Removing the login info text and link
  • Time for action – deleting the login info text
  • Time for action – adding your own footer text
  • Browser compatibility – checking whether your changes have worked
  • Time for action – installing Mozilla Firefox
  • Time for action – checking whether your changes have worked
    • Recommendations
  • Summary

• Chapter 4: Adjusting the Colors and Fonts
  • Important preliminary points
  • Installing Firebug and the Web Developer Toolbar
  • Time for action – installing the Firebug extension for Firefox
  • Cascading Style Sheets and Moodle
  • Time for action – creating a new Cascading Style Sheet
  • Changing the default font
  • Time for action – changing the default font by using Firebug
    • More on Firebug
  • Time for action – making our changes permanent
  • Setting the font color and size
  • Time for action – changing the font color
    • Changing the default font size
  • Time for action – setting the font size
  • Setting the link colors
  • Time for action – changing the link colors
  • Changing the background
  • Time for action – changing the background color
  • Accessibility and Moodle
    • What is web accessibility?
    • Moodle and web accessibility
      • What does this mean to us?
      • Does this affect the theming process?
      • What can we do to ensure that our themes and Moodle sites are accessible?
  • Summary

• Chapter 5: Changing the Layout
  • Full screen versus reduced width theme
  • Time for action – choosing a reduced (fixed) width theme
  • Setting a theme's width
  • Time for action – changing your theme to a fixed width design
  • Time for action – adding a border and some padding to your theme
  • Fixed versus liquid designs
    • Fixed width designs
    • Liquid or relative widths
    • What type of layout should you use?
  • Changing the block's column widths
  • Time for action – changing the width of the block columns
  • Setting the minimum and maximum width of the blocks
  • Time for action – changing our theme back to a liquid layout
  • Time for action – setting the minimum and maximum block widths
  • Summary

• Chapter 6: Planning your Moodle Theme
  • Important preliminary points
  • Know your audience
    • Design wise
    • Technology wise
    • Some questions before you begin
    • Theming for education
  • Time for action – downloading and installing a theme for children
  • Time for action – downloading and installing themes for those above 12 years old
  • Time for action – downloading a Moodle theme for higher education
    • Theming for disabilities
  • Gathering our assets
    • Some more questions to ask
  • The pix folder
  • Designing your design
  • Time for action – looking at other Moodle sites
    • Creating our design on paper
    • Creating a wireframe
  • Creating a mockup using software
  • Creating a design using graphics software
  • Time for action – creating the header, footer, and menu in Photoshop
  • Time for action – creating the logo, menu text, and login info text
  • Time for action – creating a block graphic by using Photoshop
  • Summary

• Chapter 7: First Steps: Creating your First Complete Moodle Theme
  • Creating a new theme
  • Time for action – copying the standard theme
  • Time for action – setting a parent theme
  • Copying the header and footer files
  • Time for action – copying the header.html and footer.html files
  • Theme folder housework
  • Time for action – creating our stylesheet
  • Time for action – deleting CSS files that we don't need
  • Let's make some changes
  • Time for action – checking our setup
  • Time for action – one more change
  • Another theme setup
  • Time for action – preparing our new theme
  • Summary

• Chapter 8: Creating your Moodle Theme from your Mockup: Slice and Dice
  • Creating the header
  • Time for action – setting the header size and background color
  • Time for action – setting the margins and adding a logo
  • Creating the menu
  • Time for action – creating the menu.php file
  • Time for action – creating the menu block
  • Creating the footer
  • Time for action – creating the footer bar
  • Setting the font and link styles
  • Time for action – setting the body font
  • Time for action – changing the link styles
  • Time for action – changing the menu font style
  • Changing the icons
  • Time for action – changing the icon set
  • Changing icons one at a time
  • Time for action – changing icons one at a time
  • Summary

• Chapter 9: Under the Hood: Style your Navigation, Login Screen, and Blocks
  • Changing the login splash page
  • Time for action – opening the login page
    • Adding a border around the central box
  • Time for action – changing the border around the central box
  • Changing the width of the sideblocks
  • Time for action – copying and pasting the width code from index.php to config.php
  • Changing the appearance of the blocks
  • Time for action – creating the block header background
  • Time for action – changing the block header background
    • Changing the sideblock footer
  • Time for action – reducing the rounded content corners
    • Creating the content background
  • Time for action – creating the sideblock content background graphic
  • Time for action – changing the block content background
  • Styling the breadcrumb trail
  • Time for action – copying a style from another theme
  • Testing your changes
    • Microsoft's Windows Internet Explorer 8.0
    • Microsoft's Windows Internet Explorer 7 (8 in compatibility mode)
    • Apple Safari 4 for Windows
    • Google Chrome
  • Summary

• Chapter 10: Under the Hood: Theming Core Functionality and Modules
  • Theming the central area of our Moodle site
    • Adding a course category and a sample course
  • Time for action – adding a new course category and course to Moodle
  • Theming the course category section
  • Time for action – changing the background color
  • Time for action – changing the header fonts
  • Theming the course view
  • Time for action – changing the font color
  • Time for action – changing the background color
  • Time for action – copying the show/hide icons
  • Changing the appearance of the core modules
    • Forum module
  • Time for action – changing the forum summary box
  • Time for action – customizing the forum
  • Time for action – customizing the forum posts
    • Glossary module
  • Time for action – creating a glossary
  • Time for action – customizing the glossary resource
  • Summary

• Appendix A: Further Enhancements
  • Some further small changes
    • Changing the buttons
    • Changing the drop-down fields
    • Changing the form fields
  • Rollover menu
    • Creating a rollover menu
    • Creating a drop-down menu
  • Consolidating your CSS code
    • Grouping styles
    • Creating CSS shorthand
  • Correcting some problems
    • Fixing the .generalbox problem
  • Downloading the Moodle features demo
    • Installing the Moodle features demo
    • Testing all of the features with our new theme
  • Creating a separate course theme
    • Why would we do this?
    • How do we do this?
  • Checking our theme against W3C validators
    • What validators do we check against?
    • Where can we find them?
  • Moodle for mobile devices
    • The Orangewhitepda theme
    • How do we use it?
  • Adding a theme splash screen
    • How do we do this?
  • Adding a theme screenshot
    • How do we add a theme screenshot?
  • Changing the column order
    • Left, right, and middle
  • Summary

• Appendix B: Glossary of Useful Terms and Acronyms

• Appendix C: Pop Quiz Answers
  • Chapter 2
    • Moodle Themes
  • Chapter 3
    • Customizing the Header and Footer
  • Chapter 4
    • Adjusting the Colors and Fonts
  • Chapter 5
    • Changing the Layout

• Index

Paul James Gadsdon

This book gives you a whole array of practical and very thorough sound advice and guidance to help you create your special and unique theme.

This would be a very useful book for anyone working with Moodle 1.9 to improve the appearance of their site.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.