Book Image

Moodle Theme Development

By : Silvina Paola Hillar
Book Image

Moodle Theme Development

By: Silvina Paola Hillar

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Moodle Theme Development
Silvina Paola Hillar
Dec, 2016 | 302 pages
No titles found
Table of Contents (19 chapters)
Moodle Theme Development
Moodle Theme Development
Credits
Credits
About the Author
About the Author
Acknowledgements
Acknowledgements
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Dedication
Dedication
Preface
Preface
Free Chapter
1
An Introduction to Moodle 3 and MoodleCloud
An Introduction to Moodle 3 and MoodleCloud
Understanding what e-learning is
Learning about Virtual Learning Environments
Learning Moodle and MoodleCloud
Using Moodle on different devices
Sizing the screen resolution
Learning about sharp and soft images
Learning about crisp and sharp text
Understanding what anti-aliasing is
Test your knowledge
Summary
2
Themes in Moodle 3 on-premises and MoodleCloud
Themes in Moodle 3 on-premises and MoodleCloud
Understanding what a Moodle theme is
Learning about Moodle themes in MoodleCloud
Using HTML tags to define colors
Customizing Moodle or MoodleCloud's theme More using HTML to define colors
Understanding types of Moodle and MoodleCloud themes
User themes
Course themes
Category themes
Locating the Moodle theme directory
Selecting and downloading a Moodle theme for Moodle 3 on-premises
Installing a Moodle theme
Test your knowledge
Summary
3
Setting Up Logos in Moodle Themes
Setting Up Logos in Moodle Themes
Designing a logo
Adding the logo to MoodleCloud in the More theme
Adding the logo to the Essential theme in Moodle on-premises
Downloading a Favicon
Changing the Favicon in the Essential theme in Moodle on-premises
Adding a header background image in the Essential theme to Moodle on-premises
Test your knowledge
Summary
4
Customizing the Header and the Footer
Customizing the Header and the Footer
Adding footnotes in MoodleCloud
Adding social networks to header
Customizing the footer in Moodle on-premises Essential theme
Editing front page area content
Creating a slide show in the front page area content
Test your knowledge
Summary
5
Customizing Elements with CSS
Customizing Elements with CSS
Customizing the height and width of an element with CSS
Setting the height and width of an image element with CSS
Locating the information of an image element
Customizing the height and width of an element in Moodle on-premises with CSS
Customizing the height and width of an element in MoodleCloud with CSS
Using Sublime Text to edit code
Locating the information of a title element
Customizing styles of elements using the enjoycss website
Editing the code to customize the style of elements
Testing the code
Changing the elements in Moodle on-premises
Test your knowledge
Summary
6
Locating, Editing, and Using New Icons
Locating, Editing, and Using New Icons
Locating the icons in our Moodle on-premises course
Locating the icon file in the server
Downloading Inkscape
Editing an SVG file
Converting SVG files to PNG files
Checking the properties of the PNG file
Replacing the SVG file
Replacing the PNG file
Testing the new icon in Moodle on-premises
Locating Add an activity or resource icons in our Moodle on-premises
Rendering parts of icons
Test your knowledge
Summary
7
Optimizing Themes for Mobile Devices
Optimizing Themes for Mobile Devices
Downloading Google Chrome web browser
Enabling device mode
Editing an emulated device
Adding a custom device
Checking network throttling profiles
Emulating network connectivity
Test your knowledge
Summary
8
Exploring Layouts
Exploring Layouts
Exploring themes suitable for academic use
Exploring themes suitable for corporations, companies, and professionals
Exploring themes for personal use
Exploring two-column themes
Exploring website themes
Exploring miscellaneous themes
Comparing and contrasting all the themes
Test your knowledge
Summary
9
Course Formats
Course Formats
Creating a Moodle course
Exploring the topic course format
Changing a course format
Downloading a course format plugin
Exploring plugin course formats
Test your knowledge
Summary
10
Extending Moodle Theming to Specific Sections
Extending Moodle Theming to Specific Sections
Putting all the pieces together
Organizing course content
Adding blocks to enhance a theme
Uploading a logo in a description section
Social networks, headers, footers, and breadcrumb styles
Coding with CSS in Moodle
Logos, images, and icons
Dealing with different devices
Course formats and layouts
The result
Summary
Test Your Knowledge Answers
Test Your Knowledge Answers
Chapter 1, An Introduction to Moodle 3 and MoodleCloud
Chapter 2, Themes in Moodle 3 on-premises and MoodleCloud
Chapter 3 Setting up Logos in Moodle Themes
Chapter 4, Customizing the Header and the Footer
Chapter 5, Customizing Elements with CSS
Chapter 6, Locating, Editing, and Using New Icons
Chapter 7, Optimizing Themes for Mobile Devices
Chapter 8, Exploring Layouts
Chapter 9, Course Formats

Social networks, headers, footers, and breadcrumb styles

In Chapter 4, Customizing the Header and the Footer, we changed the look and feel of the Moodle course by adding some elements to the header and the footer. Since the Moodle course always represents a place such as an institution or a company, we may include some elements that belong to it. Therefore, we have already covered in Chapter 4, Customizing the Header and the Footer, how to customize the header and the footer. We dealt with both MoodleCloud and Moodle on-premises.

We added a footnote in MoodleCloud. We also embedded social networks buttons to the header in Moodle on-premises using the Essential theme. We have customized the footer in Moodle on-premises using the Essential theme and we have edited the front-page area contents. Furthermore, we have created a slide show in the front-page area content. We can keep on customizing it and tailoring it according to where the Moodle course belongs.

In this section, we will change the...

Previous Section
End of Section 6
Next Section