Moodle 1.9 Theme Design: Beginner's Guide

Paul James Gadsdon

Jump to: Overview | Reviews | The Author | Sample Chapters

Moodle 1.9 Theme Design: Beginner's Guide

Click here to view more images

eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats

$22.94 save 15%!

Print book: $44.99

$40.49 save 10%!

Print + eBook bundle: $71.98
Includes free access to the book on PacktLib

$44.54 save 38%!

Free Shipping! UK, US, Europe and selected countries in Asia.

This book can also be purchased from:

Overview

Table of Contents

The Author

Reviews

Downloads

Create your own Moodle theme from the graphic design stage right through to the finished complete Moodle theme
Offers design examples and ways to create appropriate themes for different student age groups and styles
Effective planning for creating and modifying new themes, customizing existing themes, and enhancing them further
Clear focus on beginners with ample screenshots and clear explanations to facilitate learning

Book Details

Language : English
Paperback : 308 pages [ 235mm x 191mm ]
Release Date : April 2010
ISBN : 1849510148
ISBN 13 : 978-1-849510-14-1
Author(s) : Paul James Gadsdon
Topics and Technologies : All Books, Beginner's Guides, e-Learning, Moodle, Open Source

Preface
Chapter 1: An Introduction to Moodle
Chapter 2: Moodle Themes
Chapter 3: Customizing the Header and Footer
Chapter 4: Adjusting the Colors and Fonts
Chapter 5: Changing the Layout
Chapter 6: Planning your Moodle Theme
Chapter 7: First Steps: Creating your First Complete Moodle Theme
Chapter 8: Creating your Moodle Theme from your Mockup: Slice and Dice
Chapter 9: Under the Hood: Style your Navigation, Login Screen, and Blocks
Chapter 10: Under the Hood: Theming Core Functionality and Modules
Appendix A: Further Enhancements
Appendix B: Glossary of Useful Terms and Acronyms
Appendix C: Pop Quiz Answers
Index

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

Paul James Gadsdon has been a web designer/developer since 1996. He specializes in graphic design, ASP, ASP.net, PHP, and DotNetNuke. He has recently been working as an educational technologist and currently works as a Moodle Virtual Learning Environment developer for the University of Wales, Lampeter.

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.

Sample chapters

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

Find your book in our support section to find errata and to download code samples.

What you will learn from this book

Plan a Moodle theme from scratch
Install a Moodle theme and change Moodles theme settings
Add your own customized logo, title text, and footer information, and test your changes in several web browsers
Customize the Moodle site to fit in with other elements of your web site
Create a design mock-up using graphics software
Slice and dice your design mock-up and create your graphic elements
Build your theme using HTML and CSS
Create themes that you can share with the Moodle community
Theming core Moodle functionality

Special Offers

PacktLib gives you access to this and 600+ other titles with an annual or monthly subscription.

Annual subscription:

$220.00 per annum

Monthly subscription:

$21.99 per month

Buy 2 eBooks and Get 50% Off		+
Buy Moodle 1.9 Theme Design: Beginner's Guide with Moodle Security and get 50% off both the eBooks.
Just add both the eBooks to your shopping cart and enter mtdms19 in the 'Enter Promotion Code' field. Click 'Add Promotion Code' and the discount will be applied.
View more Moodle book offers here \| View Best Selling eBook offers

In Detail

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.

A step-by-step, practical guide to creating professional-looking Moodle themes.

Approach

This is a Beginner's Guide, with plenty of worked examples, step-by-step visual guides, and explanations.

Who this book is for

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.