Reader small image

You're reading from  Moodle Theme Development

Product typeBook
Published inDec 2016
Reading LevelIntermediate
Publisher
ISBN-139781786463210
Edition1st Edition
Languages
Tools
Right arrow
Author (1)
Silvina Paola Hillar
Silvina Paola Hillar
author image
Silvina Paola Hillar

Silvina P. Hillar is Italian and has been teaching English since 1993. She has always had a great interest in teaching and has done a lot of research on teaching methodologies, management techniques and embed them into e-learning and teaching. She has also explored different types of e-learning combining them with Moodle. She also researches on multimedia assets that enhance teaching and learning through VLE platforms. She tries to embed the learning of students through new resources that are appealing and innovative for them. In this way, she ensures that multimedia stimulates different thinking skills as well as multiple types of intelligence. She is an English teacher, a Certified Legal Translator (English/Spanish), and has a postgraduate degree in Education (graduated with honors). She has worked at several schools and institutions with native English speaking students and students of English as a foreign language, and as an independent consultant for many international companies in the capacity of an Interpreter, Translator, and Virtual Learning Environment (VLE) Course Designer. She has always had a passion for technological devices concerning education. Formerly, videos and cassettes were a must in her teaching lessons; the computer was, and still does, play a big role. Her brother, Gastón C. Hillar, designed some programs and games for her teaching. Lately, she has been teaching using Moodle and the Web. She believes that one of the most amazing challenges in education is bridging the gap between classic education and modern technologies. She has authored: Moodle 1.9: The English Teacher's Cookbook, Moodle 2.0 Multimedia Cookbook, Moodle 2.5 Multimedia Cookbook second edition, Mind Mapping with FreeMind and Moodle 2.3 Multimedia Video Course. When not tinkering with computers, she enjoys travelling with her son, Nico and her love, Jorge, with whom she spends wonderful time.
Read more about Silvina Paola Hillar

Right arrow

Chapter 3.  Setting Up Logos in Moodle Themes

In this chapter, we will use the UI to cover how to design a logo for Moodle on-premises and MoodleCloud. We will use an online logo designer since it can be used on our computer or smartphone, and it works on different OSes. Logos are very important for a Moodle course since they represent the organization that we are working for. We need to upload an image to enhance the look and feel of our Moodle course.

We are also going to change the Favicon of the Moodle course so that all the logos are new and the look and feel changes. Therefore, we will learn how to do this with the Essential theme in Moodle on-premises. We will add a header background image to the Essential theme in a tiled style so that the image is repeated throughout the header.

In this chapter, we shall cover the following topics:

  • Designing a logo

  • Adding a logo to MoodleCloud in the More theme

  • Adding a logo to the Essential theme in Moodle on-premises

  • Downloading a Favicon

  • Changing...

Adding the logo to MoodleCloud in the More theme


Once the logo has been created, we can replace the Moodle logo with our own. Every organization has a logo that represents it, as Moodle has its own, which is shown in the Moodle course. We have already created a logo or copied the logo of the organization that we belong to from their website.

Now, there are some steps that we need to follow in order to upload the logo to MoodleCloud. A key factor that we need to take into account is that the logo should be in .png format. These are the steps to follow:

  1. Log in to MoodleCloud.

  2. Click on Site administration| Appearance | Themes | More (in this case, it is the theme for MoodleCloud).

  3. Scroll down the site and a logo block appears.

  4. The maximum size of the file is 167.2 MB, so we check the size before uploading it to MoodleCloud. We can also check the pixels to customize the logo before uploading it. This is shown in the following screenshot:

    1. Click on the file and both the pixels and the size are shown...

Adding the logo to the Essential theme in Moodle on-premises


We have downloaded and installed the Essential theme in our Moodle on-premises in previous chapters, therefore we are going to add a logo to it. In order to add the logo, the steps are similar to the ones that we have followed for uploading a logo to the More theme in MoodleCloud. Therefore, we enter our Moodle on-premises course and follow these steps in order to upload the logo. We are going to use the same logo that we have created at the beginning of the chapter:

  1. Enter the Moodle course.

  2. Under Administration, click on Site administration | Appearance | Themes | Essential | Header, as shown in the following screenshot:

  3. Scroll down the page and look for the logo block.

  4. Remember to check the logo size and pixels before uploading the logo. Click on Add or drag and drop the file.

  5. Below the Logo block, there are two blocks, Logo width, and Logo height, as shown in the following screenshot:

  6. Scroll down the page and click on Save changes...

Downloading a Favicon


Favicon is short for a favorite icon. It is the shortcut icon which is found in the tab. It is a file containing a small icon; we can replace the Moodle Favicon for one related to our Moodle course. The Moodle Favicon is shown in the following screenshot:

In order to change the Favicon, we need to choose a new one. There are some websites that provide us with free icons. In this example, we will use the following website: http://www.iconarchive.com/ or https://icons8.com/ .

Choose any icon from these websites or from any other website; there are plenty of websites which supply Favicons, so you can search for them. When a Favicon has been selected, we are ready to change it in our Moodle on-premises. In this example, we are going to work with the following Favicon:

An important thing to bear in mind is that we need to download the .ico file so that we can use it; other file extensions won't work. So, once we have selected the icon, click on it and download it as...

Changing the Favicon in the Essential theme in Moodle on-premises


We enter our Moodle on-premises course in order to change the Favicon. We want to change the icon in order to change the profile of our course; in this way, we get rid of the Moodle icons to customize it with icon of our choosing.

To change the Favicon, we have to follow these steps:

  1. Enter the Moodle course.

  2. Under Administration, click on Site administration | Appearance | Themes | Essential | General.

  3. Scroll down the page and find the Custom favicon block.

  4. Click on Add or drag and drop the file, as shown in the following screenshot:

  5. Click on Save changes.

  6. The Favicon looks as shown in the following screenshot:

Adding a header background image in the Essential theme to Moodle on-premises


We can enhance the header of the Moodle on-premises course by adding a background image so that the logo does not appear on its own. If the organization that we are working with has a special logo with a background image, we can use it; in some cases, schools are divided into houses or categories, and each of them has a specific color. Those colors may be a part of a background image or a flag.

There are also plenty of background images that we can download, or we can create one ourselves. In this case, we are going to use an already created background image, the background of the header. These are the steps that we have to follow:

  1. Under Administration, click on Site administration | Appearance | Themes | Essential | Header.

  2. Scroll down until you find the Header background image block.

  3. Click on Add or drag and drop the file of the background image to upload it.

  4. Click on the down arrow next to the Header background style...

Test your knowledge


A. We can see the logo in the More MoodleCloud theme ...

  1. ...in the header of the front page and on the login page.

  2. ...in the header of the front page only.

  3. ...on the login page only.

B. If we add a logo to the Essential theme ...

  1. ...we can see the logo in the header of the front page only.

  2. ...we can see the logo in the header of all pages in the course.

  3. ...we can see the logo on the login page only.

C. Favicon is short for ...

  1. ...favorite icon.

  2. ...fabulous icon.

  3. ...neither, it's just a word for the icon in the website tab.

D. When we add a Favicon ...

  1. ...we have to download a .png file.

  2. ...we have to download a .ico file.

  3. ...we have to download a .jpg file.

E. Header background images can be set as tiled style ...

  1. ...to cover all the header below the logo.

  2. ...to cover the logo, so that we cannot see it.

  3. ...to appear as a simple image below the logo.

Summary


In this chapter, we have been working with UI-based settings to tune our Moodle themes. We did not have to make changes to specific files, such as HTML files or CSS, because we took advantages of a theme where we could upload a logo, Favicon, and background image as a tiled style. We have made all these changes in Moodle on-premises.

With regards to MoodleCloud, we have uploaded a logo that can then be seen in the header of the front page and the header of the login page, which is allowed in the theme that we are working with, although MoodleCloud has some limitations.

Now we are ready to make many more changes to the look and feel of Moodle on-premises and MoodleCloud in Chapter 4, Customizing the Header and the Footer.

lock icon
The rest of the chapter is locked
You have been reading a chapter from
Moodle Theme Development
Published in: Dec 2016Publisher: ISBN-13: 9781786463210
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Silvina Paola Hillar

Silvina P. Hillar is Italian and has been teaching English since 1993. She has always had a great interest in teaching and has done a lot of research on teaching methodologies, management techniques and embed them into e-learning and teaching. She has also explored different types of e-learning combining them with Moodle. She also researches on multimedia assets that enhance teaching and learning through VLE platforms. She tries to embed the learning of students through new resources that are appealing and innovative for them. In this way, she ensures that multimedia stimulates different thinking skills as well as multiple types of intelligence. She is an English teacher, a Certified Legal Translator (English/Spanish), and has a postgraduate degree in Education (graduated with honors). She has worked at several schools and institutions with native English speaking students and students of English as a foreign language, and as an independent consultant for many international companies in the capacity of an Interpreter, Translator, and Virtual Learning Environment (VLE) Course Designer. She has always had a passion for technological devices concerning education. Formerly, videos and cassettes were a must in her teaching lessons; the computer was, and still does, play a big role. Her brother, Gastón C. Hillar, designed some programs and games for her teaching. Lately, she has been teaching using Moodle and the Web. She believes that one of the most amazing challenges in education is bridging the gap between classic education and modern technologies. She has authored: Moodle 1.9: The English Teacher's Cookbook, Moodle 2.0 Multimedia Cookbook, Moodle 2.5 Multimedia Cookbook second edition, Mind Mapping with FreeMind and Moodle 2.3 Multimedia Video Course. When not tinkering with computers, she enjoys travelling with her son, Nico and her love, Jorge, with whom she spends wonderful time.
Read more about Silvina Paola Hillar