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! 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
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Moodle Theme Development
Moodle Theme Development

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

Arrow left icon
Profile Icon Silvina Paola Hillar
Arrow right icon
$19.99 per month
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1 (1 Ratings)
Paperback Dec 2016 302 pages 1st Edition
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Silvina Paola Hillar
Arrow right icon
$19.99 per month
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1 (1 Ratings)
Paperback Dec 2016 302 pages 1st Edition
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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

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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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 3.x Developer's Guide
$48.99
Moodle 3 Administration, Third Edition
$54.99
Moodle Theme Development
$48.99
Total $ 152.97 Stars icon
Banner background image

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 included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.