Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Moodle Theme Development
Moodle Theme Development

Moodle Theme Development: Build customized themes to make your Moodle courses engaging and interactive

eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Moodle Theme Development

Chapter 2.  Themes in Moodle 3 on-premises and MoodleCloud

In this chapter, we will cover the main aspects of Moodle theming of both Moodle and MoodleCloud. We will also change a theme, browse, select, and download it. We will also list the available themes in Moodle 3 on-premises at the time of the writing. We will work and understand how the Moodle theme More works with HTML tags. Afterwards, we will install the chosen theme. We can also create our themes from scratch in later chapters of the book, therefore it is necessary to understand what a theme is and how to change them. We shall learn the following topics in this chapter:

  • 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
  • Locating Moodle theme directory
  • Selecting and download a Moodle theme for Moodle 3 on-premises
  • Installing a Moodle...

Understanding what a Moodle theme is

In order to work and deal with Moodle themes, we need to have access to the server, if we are to have Moodle 3 on-premises and are not using MoodleCloud hosted services. In the event that we want to change Moodle themes in MoodleCloud, we need to have access as an administrator. An important element to take into account is that when we need to change the themes in MoodleCloud, there happens to be more restrictions than when dealing with an already installed Moodle platform.

A Moodle theme changes the look and feel of Moodle, that is to say, it is a template that controls the way Moodle looks. An administrator can change Moodle themes through the administrative interface of Moodle. The theme does not change Moodle but it changes the way it looks. It can be useful to change the look of a Moodle site according to the place that the Moodle course is being used, not only just to see it in a different way but also in order to cope with the place that it represents...

Learning about Moodle themes in MoodleCloud

Moodle themes are part of Moodle plugins but MoodleCloud does not support plugins, therefore, as it has already been mentioned before, themes in MoodleCloud are limited. As a default, MoodleCloud has the More theme, as stated in the MoodleCloud website: https://moodle.com/cloud/faq/ , and it is shown in the following screenshot:

Learning about Moodle themes in MoodleCloud

In order to change the MoodleCloud theme in a simple way, we can follow these steps:

  1. Click on Turn editing on.
  2. Click on Site administration | Appearance | Themes | Theme selector. The current theme of our MoodleCloud course appears, as shown in the following screenshot:

    Learning about Moodle themes in MoodleCloud

  3. The current theme of our MoodleCloud course is set by default. In order to change the theme of our MoodleCloud course in a simple way, click on Clean on the left-hand side margin, as shown in the following screenshot:

    Learning about Moodle themes in MoodleCloud

  4. Within the clean theme, we can customize Invert navbar, Logo, Custom CSS, and Footnote, but we are not customizing them right now...

Using HTML tags to define colors

HTML is found on all those pages that we find on the Internet. What we see on the screen has HTML code behind it. It also includes font colors, therefore we can change the color of text using HTML tags.

HTML tags are a bit complex. But we do not need to master the HTML standard in order to change colors. We can change colors using HTML code in a simple way. We can use a dynamic HTML color-code chart or an HTML code picker, such as the ones offered by the HTML Color Codes website: http://html-color-codes.info/ .

We can click on one of the color boxes in the chart and the site will display the selected color code, as shown in the following screenshot:

Using HTML tags to define colors

In this case, the selected color code is #FE642E. HTML codes define a color using a symbol (#) and a group of three two-digit hexadecimal numbers. Thus, we will see the # followed by six letters (A-F) or numbers (0-9). The three two-digit hexadecimal numbers represent the intensity of the red, green, and blue...

Customizing Moodle or MoodleCloud's theme More using HTML to define colors

More is a customizable theme which makes it easy to choose the desired colors for the MoodleCloud or Moodle platform course. Another important asset about this theme is that if you do not know how to create or develope a theme from scratch, More allows us to choose different colors.

In this case, we are customizing More from a Moodle platform course. The steps are the same for MoodleCloud. There are some steps that we have to follow in order to customize More:

  1. Enter the MoodleCloud or Moodle platform course.
  2. Click on Site Administration | Appearance | Themes.
  3. Click on More, as shown in the following screenshot:

    Customizing Moodle or MoodleCloud's theme More using HTML to define colors

  4. When we click on More, the HTML code charts appear, as shown in the following screenshot:

    Customizing Moodle or MoodleCloud's theme More using HTML to define colors

  5. We can change colors by using a kind of HTML code chart, which was previously explained in the Using HTML tags to define colors section. The following screenshot shows how we can change the text color by...

Understanding what a Moodle theme is


In order to work and deal with Moodle themes, we need to have access to the server, if we are to have Moodle 3 on-premises and are not using MoodleCloud hosted services. In the event that we want to change Moodle themes in MoodleCloud, we need to have access as an administrator. An important element to take into account is that when we need to change the themes in MoodleCloud, there happens to be more restrictions than when dealing with an already installed Moodle platform.

A Moodle theme changes the look and feel of Moodle, that is to say, it is a template that controls the way Moodle looks. An administrator can change Moodle themes through the administrative interface of Moodle. The theme does not change Moodle but it changes the way it looks. It can be useful to change the look of a Moodle site according to the place that the Moodle course is being used, not only just to see it in a different way but also in order to cope with the place that it represents...

Learning about Moodle themes in MoodleCloud


Moodle themes are part of Moodle plugins but MoodleCloud does not support plugins, therefore, as it has already been mentioned before, themes in MoodleCloud are limited. As a default, MoodleCloud has the More theme, as stated in the MoodleCloud website: https://moodle.com/cloud/faq/ , and it is shown in the following screenshot:

In order to change the MoodleCloud theme in a simple way, we can follow these steps:

  1. Click on Turn editing on.

  2. Click on Site administration | Appearance | Themes | Theme selector. The current theme of our MoodleCloud course appears, as shown in the following screenshot:

  3. The current theme of our MoodleCloud course is set by default. In order to change the theme of our MoodleCloud course in a simple way, click on Clean on the left-hand side margin, as shown in the following screenshot:

  4. Within the clean theme, we can customize Invert navbar, Logo, Custom CSS, and Footnote, but we are not customizing them right now, so click...

Using HTML tags to define colors


HTML is found on all those pages that we find on the Internet. What we see on the screen has HTML code behind it. It also includes font colors, therefore we can change the color of text using HTML tags.

HTML tags are a bit complex. But we do not need to master the HTML standard in order to change colors. We can change colors using HTML code in a simple way. We can use a dynamic HTML color-code chart or an HTML code picker, such as the ones offered by the HTML Color Codes website: http://html-color-codes.info/ .

We can click on one of the color boxes in the chart and the site will display the selected color code, as shown in the following screenshot:

In this case, the selected color code is #FE642E. HTML codes define a color using a symbol (#) and a group of three two-digit hexadecimal numbers. Thus, we will see the # followed by six letters (A-F) or numbers (0-9). The three two-digit hexadecimal numbers represent the intensity of the red, green, and blue...

Customizing Moodle or MoodleCloud's theme More using HTML to define colors


More is a customizable theme which makes it easy to choose the desired colors for the MoodleCloud or Moodle platform course. Another important asset about this theme is that if you do not know how to create or develope a theme from scratch, More allows us to choose different colors.

In this case, we are customizing More from a Moodle platform course. The steps are the same for MoodleCloud. There are some steps that we have to follow in order to customize More:

  1. Enter the MoodleCloud or Moodle platform course.

  2. Click on Site Administration | Appearance | Themes.

  3. Click on More, as shown in the following screenshot:

  4. When we click on More, the HTML code charts appear, as shown in the following screenshot:

  5. We can change colors by using a kind of HTML code chart, which was previously explained in the Using HTML tags to define colors section. The following screenshot shows how we can change the text color by just clicking on...

Understanding types of Moodle and MoodleCloud themes


We can customize Moodle themes within Theme settings so that they are assigned to different contexts such as site, users, courses, and categories. Therefore, we can have one site theme but we can choose a different course or category theme. We just have to customize the settings in order to allow it and make it possible.

User themes


Users can choose their preferred theme on the Edit profile page. All the Moodle pages will show the theme which has been chosen by the user. in order to enable a user to change the theme, we must click on Allow user themes within Site Administration | Appearance | Themes | Theme settings. Click on Allow user themes, as shown in the following screenshot:

Then scroll down the page and click on Save changes.

Course themes


Any user with the proper permissions, including teachers with editing permissions, can change to the desired theme in order to design the course theme. Course theme overrides site themes, user themes, or session themes. In other words, if a user has set a theme and the editing teacher has set the course theme, the course theme is the one which is going to be seen instead of the one chosen by the user.

In order to allow an editing teacher to design a course theme, we must follow these steps:

  1. Under Site administration, click on Appearance | Themes | Theme selector.

  2. Click on Allow course themes as shown in the following screenshot:

  3. Then scroll down the page and click on Save changes.

Category themes


There is the option of choosing a theme by category. It is not advisable to work with it since there is a warning tip because it may affect performance. Category themes affect other course themes:

  1. Under Site administration, click on Appearance | Themes | Theme selector.

  2. Click on Allow category themes if you consider that it is necessary; otherwise, it is not advisable. It is shown in the following screenshot:

  3. Then scroll down the page and click on Save changes.

    Tip

    When selecting another theme in order to be detected by different mobile devices, smartphones, desktops, and so on, we have to click on Enable device detection.

    Under Site administration, click on Appearance | Themes | Theme settings. Click on Enable device detection, as shown in the following screenshot:

  4. Click on Save changes.

Locating the Moodle theme directory


The Moodle theme directory can be found at Local Disk C:/Moodle30/server/moodle/theme, as shown in the following screenshot:

The directory has the following Moodle themes as standard: base, bootstrapbase, canvas, clean, and more. When we click on any of these Moodle themes, we can display a list of folders and files which are contained in the Moodle theme. For instance, in this case, we click on moodle | theme | more and these are the files and folders that we can find, as shown in the following screenshot:

Each Moodle theme file and folder contains information and can be edited so as to customize Moodle themes. We will deal with these folders in later chapters; so far, we have learned where to locate Moodle themes and their folders.

Left arrow icon Right arrow icon

Key benefits

  • 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

Description

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.

Who is this book 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
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Dec 07, 2016
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781786463210
Vendor :
Moodle
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Dec 07, 2016
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781786463210
Vendor :
Moodle
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 152.97
Moodle Theme Development
$48.99
Moodle 3 Administration, Third Edition
$54.99
Moodle 3.x Developer's Guide
$48.99
Total $ 152.97 Stars icon

Table of Contents

11 Chapters
1. An Introduction to Moodle 3 and MoodleCloud Chevron down icon Chevron up icon
2. Themes in Moodle 3 on-premises and MoodleCloud Chevron down icon Chevron up icon
3. Setting Up Logos in Moodle Themes Chevron down icon Chevron up icon
4. Customizing the Header and the Footer Chevron down icon Chevron up icon
5. Customizing Elements with CSS Chevron down icon Chevron up icon
6. Locating, Editing, and Using New Icons Chevron down icon Chevron up icon
7. Optimizing Themes for Mobile Devices Chevron down icon Chevron up icon
8. Exploring Layouts Chevron down icon Chevron up icon
9. Course Formats Chevron down icon Chevron up icon
10. Extending Moodle Theming to Specific Sections Chevron down icon Chevron up icon
A. Test Your Knowledge Answers Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
(1 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 100%
Brianne Jun 28, 2023
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
This book is not about theme development but simply about theme modifications.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela