You are previewing Moodle 1.9 Theme Design.
O'Reilly logo
Moodle 1.9 Theme Design

Book Description

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

  • 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

  • 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

    Table of Contents

    1. Moodle 1.9 Theme Design
      1. Moodle 1.9 Theme Design
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. Preface
        1. What this book covers
        2. Who this book is for
        3. Conventions
        4. Time for action—heading
          1. What just happened?
          2. Pop quiz—heading
          3. Have a go hero—heading
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. An Introduction to Moodle
        1. What are Virtual Learning Environments?
          1. Importing/exporting and/or creation of course materials
          2. Delivery of course materials over the Internet
          3. Communication and collaboration between students and educators
          4. Online tracking and assessment of student progress
          5. Modularized activities and resources
          6. Customization of the interface
        2. What types of VLEs are there?
        3. What are the advantages of using a VLE?
        4. What is Moodle?
        5. Why should I use Moodle?
          1. Features
          2. Philosophy
          3. Community
          4. Free and open source
        6. What will you be doing?
        7. What skills will you need?
        8. Tools for the job
          1. Hardware
          2. Software
            1. Adobe Photoshop
            2. Firefox
            3. FileZilla
            4. Other web browsers
        9. Summary
      7. 2. Moodle Themes
        1. Important preliminary points
        2. What is a Moodle theme?
        3. Browsing and selecting a Moodle theme
        4. Time for action—browsing and selecting a Moodle theme
          1. What just happened?
          2. Have a go hero—choosing a few other themes
        5. Theme types
          1. Theme priority
          2. Parent themes
          3. Theme directory
        6. Time for action—browsing the 'Standard' theme folder
          1. What just happened?
            1. The pix folder
            2. config.php
            3. meta.php
            4. doctyles.php
            5. screenshot.jpg
            6. favicon.ico
            7. README.html
            8. header/footer.html
            9. styles_moz.css
            10. styles_ie6.css
            11. styles_ie7.css
            12. styles_fonts.css
            13. styles_color.css
            14. styles_layout.css
            15. rtl.css
        7. Searching for and downloading Moodle themes
        8. Time for action—searching for Moodle themes
          1. What just happened?
        9. Installing a new Moodle theme
        10. Time for action—downloading a new Moodle theme
          1. What just happened?
        11. Time for action—extracting and installing your Moodle theme
          1. What just happened?
          2. Have a go hero—download and install another theme
          3. Have a go hero—find and install some other themes
        12. Moodle's theme settings
        13. Time for action—forcing users to use your theme choices
          1. What just happened?
        14. Theme settings list
          1. Theme list
          2. Allow user themes
          3. Allow course themes
          4. Allow category themes
          5. Allow users to hide blocks
          6. Show blocks on module pages
          7. Hide activity type navigation
          8. Pop quiz
          9. Have a go hero—you are on your own
        15. Summary
      8. 3. Customizing the Header and Footer
        1. Important preliminary points
        2. Customizing the header
        3. Time for action—making a copy of the standard theme
          1. What just happened?
          2. Adding your own logo
        4. Time for action—copying your logo to your mytheme directory
          1. What just happened?
        5. Time for action—adding the logo code to your header.html file
          1. What just happened?
          2. Have a go hero—adding another logo
        6. Time for action—adding the logo code to your header.html file again!
          1. What just happened?
          2. Have a go hero—putting back the inner page title
        7. Making your own Moodle logo visible
        8. Time for action—changing the title text
          1. What just happened?
        9. Customizing the footer
          1. Removing the Moodle logo
        10. Time for action—deleting the Moodle logo
          1. What just happened?
          2. Removing the login info text and link
        11. Time for action—deleting the login info text
          1. What just happened?
          2. Have a go hero—adding your own copyright or footer text
        12. Time for action—adding your own footer text
          1. What just happened?
          2. Have a go hero—adding your own footer logo
        13. Browser compatibility—checking whether your changes have worked
        14. Time for action—installing Mozilla Firefox
          1. What just happened?
        15. Time for action—checking whether your changes have worked
          1. Recommendations
          2. Have a go hero—downloading Google Chrome
          3. Pop quiz—doing the thing
        16. Summary
      9. 4. Adjusting the Colors and Fonts
        1. Important preliminary points
        2. Installing Firebug and the Web Developer Toolbar
        3. Time for action—installing the Firebug extension for Firefox
          1. What just happened?
        4. Cascading Style Sheets and Moodle
        5. Time for action—creating a new Cascading Style Sheet
          1. What just happened?
        6. Changing the default font
        7. Time for action—changing the default font by using Firebug
          1. What just happened?
          2. More on Firebug
        8. Time for action—making our changes permanent
          1. What just happened?
        9. Setting the font color and size
        10. Time for action—changing the font color
          1. What just happened?
          2. Changing the default font size
        11. Time for action—setting the font size
          1. What just happened?
        12. Setting the link colors
        13. Time for action—changing the link colors
          1. What just happened?
        14. Changing the background
        15. Time for action—changing the background color
          1. What just happened?
          2. Have a go hero—change the background and font color and font type
          3. Have a go hero—change the background color of the sideblocks
        16. Accessibility and Moodle
          1. What is web accessibility?
          2. Moodle and web accessibility
            1. What does this mean to us?
            2. Does this affect the theming process?
            3. What can we do to ensure that our themes and Moodle sites are accessible?
              1. Online Web Accessibility testers
              2. Tools
              3. Reference Sites
          3. Pop quiz-
          4. Have a go hero—add a border to the blocks
          5. Have a go hero—customize the block header
          6. Have a go hero—browser compatibility
        17. Summary
      10. 5. Changing the Layout
        1. Full screen versus reduced width theme
        2. Time for action—choosing a reduced (fixed) width theme
          1. What just happened?
        3. Setting a theme's width
        4. Time for action—changing your theme to a fixed width design
        5. Time for action—adding a border and some padding to your theme
          1. What just happened?
        6. Fixed versus liquid designs
          1. Fixed width designs
          2. Liquid or relative widths
          3. What type of layout should you use?
          4. Have a go hero—set some different widths
        7. Changing the block's column widths
        8. Time for action—changing the width of the block columns
          1. What just happened?
        9. Setting the minimum and maximum width of the blocks
        10. Time for action—changing our theme back to a liquid layout
          1. What just happened?
        11. Time for action—setting the minimum and maximum block widths
          1. What just happened?
          2. Have a go hero—change your sideblocks again
          3. Pop quiz
        12. Summary
      11. 6. Planning your Moodle Theme
        1. Important preliminary points
        2. Know your audience
          1. Design wise
          2. Technology wise
          3. Some questions before you begin
          4. Theming for education
        3. Time for action—downloading and installing a theme for children
        4. Time for action—downloading and installing themes for those above 12 years old
        5. Time for action—downloading a Moodle theme for higher education
          1. What just happened?
          2. Theming for disabilities
        6. Gathering our assets
          1. Some more questions to ask
        7. The pix folder
        8. Designing your design
        9. Time for action—looking at other Moodle sites
          1. Creating our design on paper
          2. Creating a wireframe
        10. Creating a mockup using software
        11. Creating a design using graphics software
        12. Time for action—creating the header, footer, and menu in Photoshop
          1. What just happened?
        13. Time for action—creating the logo, menu text, and login info text
          1. What just happened?
        14. Time for action—creating a block graphic by using Photoshop
          1. What just happened?
          2. Have a go hero—you are on your own
          3. Have a go hero—filling in the gaps
          4. Have a go hero—making the other blocks
        15. Summary
      12. 7. First Steps: Creating your First Complete Moodle Theme
        1. Creating a new theme
        2. Time for action—copying the standard theme
        3. Time for action—setting a parent theme
          1. What just happened?
          2. Have a go hero—choose another parent theme
        4. Copying the header and footer files
        5. Time for action—copying the header.html and footer.html files
          1. What just happened?
        6. Theme folder housework
        7. Time for action—creating our stylesheet
        8. Time for action—deleting CSS files that we don't need
          1. What just happened?
        9. Let's make some changes
        10. Time for action—checking our setup
          1. What just happened?
        11. Time for action—one more change
          1. What just happened?
        12. Another theme setup
        13. Time for action—preparing our new theme
          1. What just happened?
          2. Have a go hero—more advanced theming
        14. Summary
      13. 8. Creating your Moodle Theme from your Mockup: Slice and Dice
        1. Creating the header
        2. Time for action—setting the header size and background color
          1. What just happened?
        3. Time for action—setting the margins and adding a logo
          1. What just happened?
          2. Have a go hero—moving the login info link
          3. Have a go hero—making the inner page headers the same as the home page
        4. Creating the menu
        5. Time for action—creating the menu.php file
          1. What just happened?
        6. Time for action—creating the menu block
          1. What just happened?
        7. Creating the footer
        8. Time for action—creating the footer bar
          1. What just happened?
        9. Setting the font and link styles
        10. Time for action—setting the body font
          1. What just happened?
          2. Have a go hero—styling the login info link
        11. Time for action—changing the link styles
          1. What just happened?
        12. Time for action—changing the menu font style
          1. What just happened?
        13. Changing the icons
        14. Time for action—changing the icon set
          1. What just happened?
        15. Changing icons one at a time
        16. Time for action—changing icons one at a time
          1. What just happened?
          2. Have a go hero—adding some padding to the page
          3. Have a go hero—testing your changes
        17. Summary
      14. 9. Under the Hood: Style your Navigation, Login Screen, and Blocks
        1. Changing the login splash page
        2. Time for action—opening the login page
          1. What just happened?
          2. Adding a border around the central box
        3. Time for action—changing the border around the central box
          1. What just happened?
        4. Changing the width of the sideblocks
        5. Time for action—copying and pasting the width code from index.php to config.php
          1. What just happened?
        6. Changing the appearance of the blocks
        7. Time for action—creating the block header background
          1. What just happened?
        8. Time for action—changing the block header background
          1. What just happened?
          2. Changing the sideblock footer
        9. Time for action—reducing the rounded content corners
          1. What just happened?
          2. Creating the content background
        10. Time for action—creating the sideblock content background graphic
          1. What just happened?
        11. Time for action—changing the block content background
          1. What just happened?
        12. Styling the breadcrumb trail
        13. Time for action—copying a style from another theme
          1. What just happened?
          2. Have a go hero—correct the padding on the breadcrumb trail
        14. Testing your changes
          1. Microsoft's Windows Internet Explorer 8.0
          2. Microsoft's Windows Internet Explorer 7 (8 in compatibility mode)
          3. Apple Safari 4 for Windows
          4. Google Chrome
          5. Have a go hero—changing the login info text
          6. Have a go hero—fixing the issue in IE 8 (compatibility mode)
        15. Summary
      15. 10. Under the Hood: Theming Core Functionality and Modules
        1. Theming the central area of our Moodle site
          1. Adding a course category and a sample course
        2. Time for action—adding a new course category and course to Moodle
          1. What just happened?
        3. Theming the course category section
        4. Time for action—changing the background color
          1. What just happened?
        5. Time for action—changing the header fonts
          1. What just happened?
        6. Theming the course view
        7. Time for action—changing the font color
        8. Time for action—changing the background color
        9. Time for action—copying the show/hide icons
          1. What just happened?
        10. Changing the appearance of the core modules
          1. Forum module
        11. Time for action—changing the forum summary box
        12. Time for action—customizing the forum
          1. What just happened?
        13. Time for action—customizing the forum posts
          1. What just happened?
          2. Glossary module
        14. Time for action—creating a glossary
        15. Time for action—customizing the glossary resource
          1. Have a go hero—adding a gradient background to all posts
        16. Summary
      16. A. Further Enhancements
        1. Some further small changes
          1. Changing the buttons
          2. Changing the drop-down fields
          3. Changing the form fields
        2. Rollover menu
          1. Creating a rollover menu
          2. Creating a drop-down menu
        3. Consolidating your CSS code
          1. Grouping styles
          2. Creating CSS shorthand
        4. Correcting some problems
          1. Fixing the .generalbox problem
        5. Downloading the Moodle features demo
          1. Installing the Moodle features demo
          2. Testing all of the features with our new theme
        6. Creating a separate course theme
          1. Why would we do this?
          2. How do we do this?
        7. Checking our theme against W3C validators
          1. What validators do we check against?
          2. Where can we find them?
        8. Moodle for mobile devices
          1. The Orangewhitepda theme
          2. How do we use it?
        9. Adding a theme splash screen
          1. How do we do this?
        10. Adding a theme screenshot
          1. How do we add a theme screenshot?
        11. Changing the column order
          1. Left, right, and middle
        12. Summary
      17. B. Glossary of Useful Terms and Acronyms
      18. C. Pop quiz—Answers
        1. Chapter 2
          1. Moodle Themes
        2. Chapter 3
          1. Customizing the Header and Footer
        3. Chapter 4
          1. Adjusting the Colors and Fonts
        4. Chapter 5
          1. Changing the Layout