Moodle 1.9 Theme Design: Beginner's Guide


Moodle 1.9 Theme Design: Beginner's Guide
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$40.49
save 44%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • 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 : 9781849510141
Author(s) : Paul James Gadsdon
Topics and Technologies : All Books, Other, Beginner's Guides, e-Learning, Moodle, Open Source


Table of Contents

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
  • 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 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

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.

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.

Frequently bought together

Moodle 1.9 Theme Design: Beginner's Guide +    Upgrading to Lotus Notes and Domino 7 =
50% Off
the second eBook
Price for both: $22.95

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

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

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software