Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Moodle Theme Development
  • Table Of Contents Toc
Moodle Theme Development

Moodle Theme Development

By : Silvina Paola Hillar
1 (1)
Buy this Book
close
close
Moodle Theme Development

Moodle Theme Development

1 (1)
By: Silvina Paola Hillar
Buy this Book

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

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...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Moodle Theme Development
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon