O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Moodle Theme Development

Book Description

Build customized themes to make your Moodle courses engaging and interactive

About This Book

  • Leverage the power of Moodle 3 to create interactive and engaging themes for your courses
  • Experience and integrate the power of Bootstrap and CSS into your Moodle app
  • Implement your plans with illustrative examples to become a top notch designer

Who This Book Is For

If you are a Moodle administrator, developer, or designer and wish to enhance your Moodle site to make it visually attractive, then this book is for you. You should be familiar with web design techniques such as HTML and further experience with CSS would be helpful.

What You Will Learn

  • Plan a personalized Moodle theme from start to finish
  • Install a Moodle theme in different operating systems and change Moodle's theme settings
  • Add your own customized logo and test your changes in several web browsers
  • Customize the Moodle site to fit in with other elements such as websites and social networks, among others
  • Create a design mock-up using graphics software
  • Design themes that are capable of working with a huge number of different resolutions, screen sizes, screen orientations, and pixel densities
  • Work with code to adjust the theme to users requirements
  • Create new custom icons for your theme

In Detail

Theming is one of the main features of Moodle, and it can be used to customize your online courses and make them look exactly how you want them to,according to your target audience. If you have been looking for a book that will help you develop Moodle themes that you are proud of, and that your students will enjoy, then this is the book for you.

We start off by introducing Moodle 3 and explaining what it is, how it works, and what tools you might need to create a stunning Moodle theme. We then show you how to choose and change the pre-installed Moodle themes in detailed steps, and explain what Moodle themes are and how they work. Next, we show you how to change an existing theme and test the changes that you have made.

You can not only plan the customization of theme, but also tailor it using advanced Moodle theming processes; this book is your one-stop guide to creating your own personalized Moodle 3 theme.

Style and approach

This book acts as a comprehensive guide which helps you to create visually stunning and responsive themes to add that extra edge to your Moodle apps.

Table of Contents

  1. Moodle Theme Development
    1. Moodle Theme Development
    2. Credits
    3. About the Author
    4. Acknowledgements
    5. About the Reviewer
    6. www.PacktPub.com
      1. Why subscribe?
    7. Dedication
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    9. 1. An Introduction to Moodle 3 and MoodleCloud
      1. Understanding what e-learning is
      2. Learning about Virtual Learning Environments
        1. Designing, creating, storing, accessing, and using course content
        2. Delivering or sharing course content
        3. Communicating, interacting, and collaborating with students and teachers
        4. Assessing and personalizing the learning experience
        5. Modularizing both activities and resources
        6. Customizing the interface
      3. Learning Moodle and MoodleCloud
      4. Using Moodle on different devices
      5. Sizing the screen resolution
        1. Screen resolution chart
        2. Calculating the aspect ratio
      6. Learning about sharp and soft images
      7. Learning about crisp and sharp text
      8. Understanding what anti-aliasing is
      9. Test your knowledge
      10. Summary
    10. 2. Themes in Moodle 3 on-premises and MoodleCloud
      1. Understanding what a Moodle theme is
      2. Learning about Moodle themes in MoodleCloud
      3. Using HTML tags to define colors
      4. Customizing Moodle or MoodleCloud's theme More using HTML to define colors
      5. Understanding types of Moodle and MoodleCloud themes
      6. User themes
      7. Course themes
      8. Category themes
      9. Locating the Moodle theme directory
      10. Selecting and downloading a Moodle theme for Moodle 3 on-premises
      11. Installing a Moodle theme
      12. Test your knowledge
      13. Summary
    11. 3. Setting Up Logos in Moodle Themes
      1. Designing a logo
      2. Adding the logo to MoodleCloud in the More theme
      3. Adding the logo to the Essential theme in Moodle on-premises
      4. Downloading a Favicon
      5. Changing the Favicon in the Essential theme in Moodle on-premises
      6. Adding a header background image in the Essential theme to Moodle on-premises
      7. Test your knowledge
      8. Summary
    12. 4. Customizing the Header and the Footer
      1. Adding footnotes in MoodleCloud
      2. Adding social networks to header
      3. Customizing the footer in Moodle on-premises Essential theme
      4. Editing front page area content
      5. Creating a slide show in the front page area content
      6. Test your knowledge
      7. Summary
    13. 5. Customizing Elements with CSS
      1. Customizing the height and width of an element with CSS
      2. Setting the height and width of an image element with CSS
      3. Locating the information of an image element
      4. Customizing the height and width of an element in Moodle on-premises with CSS
      5. Customizing the height and width of an element in MoodleCloud with CSS
      6. Using Sublime Text to edit code
      7. Locating the information of a title element
      8. Customizing styles of elements using the enjoycss website
      9. Editing the code to customize the style of elements
      10. Testing the code
      11. Changing the elements in Moodle on-premises
      12. Test your knowledge
      13. Summary
    14. 6. Locating, Editing, and Using New Icons
      1. Locating the icons in our Moodle on-premises course
      2. Locating the icon file in the server
      3. Downloading Inkscape
      4. Editing an SVG file
      5. Converting SVG files to PNG files
      6. Checking the properties of the PNG file
      7. Replacing the SVG file
      8. Replacing the PNG file
      9. Testing the new icon in Moodle on-premises
      10. Locating Add an activity or resource icons in our Moodle on-premises
      11. Rendering parts of icons
      12. Test your knowledge
      13. Summary
    15. 7. Optimizing Themes for Mobile Devices
      1. Downloading Google Chrome web browser
      2. Enabling device mode
      3. Editing an emulated device
      4. Adding a custom device
      5. Checking network throttling profiles
      6. Emulating network connectivity
      7. Test your knowledge
      8. Summary
    16. 8. Exploring Layouts
      1. Exploring themes suitable for academic use
        1. Contemporary
        2. Aardvark
        3. Academi
        4. Adaptable
        5. eGuru
        6. Pioneer
        7. Dynamic
        8. Eduhub
        9. Snap
        10. Sharp
        11. Klass
      2. Exploring themes suitable for corporations, companies, and professionals
        1. Rocket
        2. Shoehorn
      3. Exploring themes for personal use
        1. Sharp
      4. Exploring two-column themes
        1. Elegance
      5. Exploring website themes
        1. Crisp
      6. Exploring miscellaneous themes
        1. Archaius
        2. Bootstrap
        3. Roshnilite
        4. Campus
        5. Morecandy
        6. Ulkit
        7. Aigne
        8. Flexibase
        9. Decaf
        10. Afterburner
        11. Bootswatch
        12. Cerulean
        13. Splash
        14. Serenity
        15. Anomaly
        16. Shoelace
        17. Flexpage
        18. Overlay
      7. Comparing and contrasting all the themes
      8. Test your knowledge
      9. Summary
    17. 9. Course Formats
      1. Creating a Moodle course
      2. Exploring the topic course format
      3. Changing a course format
      4. Downloading a course format plugin
        1. Selecting the Grid course format
      5. Exploring plugin course formats
        1. Collapsed topics
        2. Socialwall format
        3. Onetopic format
        4. MindMap format
        5. Periods format
        6. Flexible sections format
        7. Buttons format
        8. Board (Grid and Blocks) format
        9. Mansonry topics format
        10. eTask topics format
        11. Menutopic format
        12. Flexpage format
        13. GPS format
        14. Columns format
        15. Noticeboard format
        16. Folder view format
        17. NED tabs course format
      6. Test your knowledge
      7. Summary
    18. 10. Extending Moodle Theming to Specific Sections
      1. Putting all the pieces together
      2. Organizing course content
      3. Adding blocks to enhance a theme
      4. Uploading a logo in a description section
      5. Social networks, headers, footers, and breadcrumb styles
      6. Coding with CSS in Moodle
      7. Logos, images, and icons
      8. Dealing with different devices
      9. Course formats and layouts
      10. The result
      11. Summary
    19. A. Test Your Knowledge Answers
      1. Chapter 1, An Introduction to Moodle 3 and MoodleCloud
      2. Chapter 2, Themes in Moodle 3 on-premises and MoodleCloud
      3. Chapter 3 Setting up Logos in Moodle Themes
      4. Chapter 4, Customizing the Header and the Footer
      5. Chapter 5, Customizing Elements with CSS
      6. Chapter 6, Locating, Editing, and Using New Icons
      7. Chapter 7, Optimizing Themes for Mobile Devices
      8. Chapter 8, Exploring Layouts
      9. Chapter 9, Course Formats