Moodle 1.9 Theme Design: Beginner's Guide

Book Image

Moodle 1.9 Theme Design: Beginner's Guide

Book Image

Moodle 1.9 Theme Design: Beginner's Guide

Overview of this book

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.

Moodle 1.9 Theme Design

Moodle 1.9 Theme Design

Credits

About the Author

About the Author

About the Reviewer

About the Reviewer

Preface

Free Chapter

An Introduction to Moodle

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

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

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

Customizing the Header and Footer

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

Adjusting the Colors and Fonts

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

Changing the Layout

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

Planning your Moodle Theme

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

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

First Steps: Creating your First Complete Moodle Theme

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

Creating your Moodle Theme from your Mockup: Slice and Dice

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

Under the Hood: Style your Navigation, Login Screen, and Blocks

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

Under the Hood: Theming Core Functionality and Modules

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

Further Enhancements

Further Enhancements

Some further small changes

Consolidating your CSS code

Correcting some problems

Downloading the Moodle features demo

Creating a separate course theme

Checking our theme against W3C validators

Moodle for mobile devices

Adding a theme splash screen

Adding a theme screenshot

Changing the column order

Glossary of Useful Terms and Acronyms

Glossary of Useful Terms and Acronyms

Pop quiz—Answers

Pop quiz—Answers

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action—setting a parent theme

1. Open your web browser and navigate to your Moodle site and log in as the administrator.
2. Go to Site Administration | Appearance | Themes | Theme Selector and choose your blackandblue theme if it is not already selected.
3. Browse to the root of your blackandblue folder, right-click on the config.php file, and choose Open with | WordPad.
4. You need to make four changes to this file so that you can use this theme and a parent theme while ensuring that you still use the default standard theme as your base. Here are the changes:
```
$THEME->sheets = array('user_styles');
$THEME->standardsheets = true;
$THEME->parent = 'autumn';
$THEME->parentsheets = array('styles');
```
Let's look at each of these statements, in turn.
```
$THEME->sheets = array('user_styles');
```
This contains the names of all of the stylesheet fi les that you want to include in this theme, and in what order you want to use them. You will have only one stylesheet for your blackandblue...