Moodle 1.9 Theme Design: Beginner's Guide

Customize the appearance of your Moodle Theme using its powerful theming engine.

Moodle 1.9 Theme Design: Beginner's Guide

Beginner's Guide
Paul James Gadsdon

Customize the appearance of your Moodle Theme using its powerful theming engine.
$10.00
$40.50
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.
+ Collection
Free sample

Book Details

ISBN 139781849510141
Paperback308 pages

About This Book

  • 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

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.

Table of Contents

Chapter 1: An Introduction to Moodle
What are Virtual Learning Environments?
What types of VLEs are there?
What are the advantages of using a VLE?
What is Moodle?
Why should I use Moodle?
What will you be doing?
What skills will you need?
Tools for the job
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
Time for action—browsing the 'Standard' theme folder
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
Summary
Chapter 3: Customizing the Header and Footer
Important preliminary points
Customizing the header
Time for action—making a copy of the standard theme
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
Time for action—deleting the Moodle logo
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
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
Time for action—making our changes permanent
Setting the font color and size
Time for action—changing the font color
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
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
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
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
Gathering our assets
The pix folder
Designing your design
Time for action—looking at other Moodle sites
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
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
Time for action—reducing the rounded content corners
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
Summary
Chapter 10: Under the Hood: Theming Core Functionality and Modules
Theming the central area of our Moodle site
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
Time for action—changing the forum summary box
Time for action—customizing the forum
Time for action—customizing the forum posts
Time for action—creating a glossary
Time for action—customizing the glossary resource
Summary

What You Will Learn

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

Authors

Table of Contents

Chapter 1: An Introduction to Moodle
What are Virtual Learning Environments?
What types of VLEs are there?
What are the advantages of using a VLE?
What is Moodle?
Why should I use Moodle?
What will you be doing?
What skills will you need?
Tools for the job
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
Time for action—browsing the 'Standard' theme folder
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
Summary
Chapter 3: Customizing the Header and Footer
Important preliminary points
Customizing the header
Time for action—making a copy of the standard theme
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
Time for action—deleting the Moodle logo
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
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
Time for action—making our changes permanent
Setting the font color and size
Time for action—changing the font color
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
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
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
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
Gathering our assets
The pix folder
Designing your design
Time for action—looking at other Moodle sites
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
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
Time for action—reducing the rounded content corners
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
Summary
Chapter 10: Under the Hood: Theming Core Functionality and Modules
Theming the central area of our Moodle site
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
Time for action—changing the forum summary box
Time for action—customizing the forum
Time for action—customizing the forum posts
Time for action—creating a glossary
Time for action—customizing the glossary resource
Summary

Book Details

ISBN 139781849510141
Paperback308 pages
Read More