Chapter 10.  Extending Moodle Theming to Specific Sections

In this chapter, we will put together many pieces of the theming puzzle. We will take advantage of all the features that we have already dealt with and we will enhance them a little bit more by adding special elements or ingredients. Once the theme is set, we can develop its content taking into account all the elements that we have changed throughout the book. Said elements are tips which help us to organize course content, and adding blocks to enhance a theme, among others. Overall, this chapter will help you to create a more effective Moodle course.

We will extend Moodle theming by giving some tips, once we have made the necessary changes to the theme in the Moodle course. These changes are important to bear in mind when designing a Moodle course or while theming a Moodle course. Therefore, we will go over each of the chapters and we will add another element or ingredient to our Moodle course. That is to say, we will combine...

Putting all the pieces together

Here is a recap of what we have already covered in the previous chapters

In Chapter 1, An Introduction to Moodle 3 and MoodleCloud , we covered most of what needs to be known about e-learning, VLEs and Moodle, and MoodleCloud. There is a slight difference between Moodle and MoodleCloud especially if you don't have access to a Moodle course in the institution where you are working and want to design a Moodle course. Furthermore, Moodle is used in different devices and there are several aspects to take into account when designing a course and building a Moodle theme. We have also dealt with screen resolution, aspect ratio, types of images and text, and anti-aliasing effects.

In Chapter 2, Themes in Moodle 3 and MoodleCloud, we learned about what themes are and how to find them in Moodle and in MoodleCloud. We also explored a little about HTML code and how colors are named in this code. We also customized the "More" Moodle theme and found out where our Moodle...

Organizing course content

When we create or design a course from scratch, we have to bear in mind how to organize content, as well as consider the methodology that we will apply for teaching the students. Therefore, we organize the resources and the activities approximately.

We can arrange all the resources together or we can switch between resources and activities. We should provide students with content before designing an activity. Therefore, by taking advantage of Moodle's abundance of different resources and activities, we can create a variety of content for our Moodle course.

To organize the course content, we will work on the Course formats course, which was created in the previous chapter. Follow these steps to organize the course content:

1. Enter the Moodle course and log in.

2. Click on Turn editing on.

3. Click on Edit | Edit topic within a topic block, as shown in the following screenshot:

   

4. Complete the Section name block, untick the block next to Use default section name [Topic 1].

5. Complete...

Adding blocks to enhance a theme

Once the content is organized, we may customize the theme or change the theme that we are using. We have already dealt with themes in Chapter 2, Themes in Moodle 3 and MoodleCloud, therefore in this section we will not be changing the theme, but we will be adding elements to it. The elements that we will add are blocks. Blocks are where the instructional material is incorporated.

One of the reasons for choosing a specific theme for a course is the target audience. In the previous example, the audience are Moodlers who would like to learn about course formats, so we can add some blocks to the theme in order to enhance the look and feel of the Moodle course.

There are several types of blocks, which can be added to the Moodle course. We can enhance the course in a simple way by adding useful elements within blocks for the user of the course. We enter our Moodle course and log in, and afterwards when we click on Turn editing on, an option appears to add a block...

Uploading a logo in a description section

In Chapter 3, Setting Up Logos in Moodle Themes, we dealt with logos in Moodle. Therefore, as an example, our Moodle course has its own logo. So, we will use the same logo and add it to the description of a section. It is very attractive to start the section of a course with a logo that previews the topics that the students are going to deal with. We can also add a combination of images to create a new image, to define the section of a course.

To add a logo to our section, follow these steps:

1. Enter the Moodle course and log in.

2. Click on Turn editing off.

3. Click on Edit | Edit section, as shown in the following screenshot:

   

4. Complete the Section Name, and untick the block that reads Use default section name [General].

5. In the Summary block, click on insert an image, and upload the logo or the desired image to be inserted in the section.

6. Complete the necessary blocks and click on Save image, as shown in the following screenshot:

   

7. The logo appears in the Summary...

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

Coding with CSS in Moodle

In Chapter 5, Customizing Elements with CSS, we dealt with CSS code and we worked with some online editors which helped us with the coding. We can do plenty of things with coding and it would take an entire book or another chapter to edit CSS code. What we must bear in mind is that there is a block that allows us to use CSS code in order to edit what we need or desire. In most cases, HTML code is appropriate since it is also possible to edit HTML code when we add an activity or resource.

We have already dealt with CSS code in Chapter 5, Customizing Elements with CSS, and we can explore the resources in said chapter to improve and change the look and feel of the Moodle course. We have to bear in mind that we need a CSS block that allows us to edit such code, as was previously explained in said chapter.

Logos, images, and icons

Logos, images, and icons are essential elements to bear in mind and include in our Moodle course when changing the look and feel. We have been working with them throughout this chapter and we can also add more of them. Furthermore, when exploring several course formats, we came across the instances where images could be of great help. We always have the possibility to add an image in any HTML editor, whether we add an activity or resource, we make links to the images. Thus, explore the previous chapter to include logos, images, or change the Moodle icons to change the appearance of the course.

Dealing with different devices

In Chapter 7, Optimizing Themes for Mobile Devices, we emulated different devices in order to check how the theme looks/works on a mobile device. It is essential to check it, because there are many devices available and we need to test if what we have done works properly on both desktops and mobile devices. Therefore, any changes that we make to the look and feel of the Moodle course, we need to test by emulating them.

Course formats and layouts

We can download both free course formats and layouts from the following website: https://moodle.org/plugins/browse.php?list=category&id=19 . We can combine both themes, and enhance and tailor our Moodle course according to our needs. It would be impossible to set a combination of both because we would need to explore a matching. In other words, we need to analyze what we need from our Moodle course and explore the formats and layouts to choose the best combination. In Chapter 8, Exploring Layouts and Chapter 9, Course formats, we have explored both of them, so choose one in combination with the other to theme our Moodle course.

The result

The result is what we want our Moodle course to be: in other words, it's important to review the results to assure navigation and user experience among other facts to take into account in order to achieve learning goals and institutional objectives. We need to focus on the audience and the company or school for whom the course is meant for, and afterwards there are plenty of items that can be customized in order to get the appropriate course. Throughout this book, we have explored many items and some ideas that can be used to enhance the look and the feel of the course.

Summary

In summary, in this chapter, we have combined all the elements that we have learnt throughout the chapters. We have also added some ingredients in some cases, which allows us to change the appearance of the Moodle course in order to customize it in the desired way.

Furthermore, we have explored different ways in which we can simply change the look and feel of the course, since we can just add blocks, images, or make some small changes to the Moodle course, which will allow us to see it in a different way.

Whenever we design an activity or add a resource, we must also bear in mind that we need to think of how to organize them, because the course will look tidier depending on how we organize the content. Therefore, enjoy theming your Moodle course while you teach or design your courses!