course header 2000x350

Your Moodle Home page is important because it is the public face of your Moodle website. Your Moodle Home page should not only welcome visitors and guests to your website but also explain the purpose and benefits of your Moodle courses. It should also explain the structure of your course categories, courses and other educational resources. Yet, despite its importance, one of the most common complaints on the Moodle Forums is the difficulty of modifying the appearance of the Moodle Home page. In later articles, we will explain how to use a custom theme to make the Home page customization process easier. However, because we do not yet have a custom theme, in this article, we will provide a process for customizing your Moodle Home page.

Compare your Home Page to the Moodle Demo Home Pages
One of the first things you will want to do after creating your Moodle Site is to customize your Home page. To understand how this is done, we will compare our Default Site to the two Moodle Demo sites. Here is what the home page of our initial Moodle website looks like:

01

Our initial Home page looks pretty empty. The top row is called the Navigation bar. It consists of a Hamburger menu icon that can be clicked on to pull out or hide the Moodle Left Side Menu. To the right of the Hamburger menu icon is a site short name (Home).

To the right of this is a Languages drop down which only has one language. But you can add 120 languages to make your educational website available to people all over the world. In the left corner is a link to your log in page.

Below the Navigation bar is the website header area with the website full name. The box below this, which is empty, is called the content area. The dark box on the bottom is called the footer which has the Moodle logo and a second link to your log in page. Click either of the Log In links on this page to reach your log in page:

02

Then log in with the administrator username and password you created when you made your Moodle website. Alternately, if you have not yet made your own Moodle website yet, you can open a web browser and log into the Moodle Sandbox Demo website (the one without content). Here is a link to the Moodle Sandbox Demo site:

https://sandbox.moodledemo.net

03

The Moodle Sandbox Home page is similar to our default Home page but has three additions. First, the Language drop down has added more than one hundred languages. Second, a Welcome article has been added to the Content area. Third, two courses have been added and made visible in the Content area below the Welcome article. To view the back end of the Moodle Sandbox Demo Site, click on either of the log in links. Here is a direct link for that log in page. https://sandbox.moodledemo.net/login/index.php

Log in to the sandbox site back end as an administrator with the username admin and the password sandbox. The sandbox website may have been altered by others and thus may be slightly different than your initial Moodle website. It is also missing several important features. For example, it does not allow us to install Moodle plugins. So using your own website is better. Or wait until just past the start of the hour to use the Sandbox Moodle website. Here is what the default Moodle website “logged in” page looks like when we first log in:

04

Here is what the Sandbox Moodle website “logged in” page looks like:

05

Note in the side menu that the Sandbox site opens to the Home page while our initial Moodle Site opens to the Dashboard page.

Change your Website Opening “Logged In” Page from the Dashboard to your Home page
Because the Dashboard page changes as the role of the user changes, for the sake of consistency, we will change the opening page of our default Moodle website so that it also opens on our Moodle Home page (which Moodle called the Front Page).

Go to Site Administration, Appearance, Navigation and your will see that the Home Page for all Users is set for Dashboard. But on the Sandbox Moodle site, it is set for Site. So change the default Moodle site setting from Dashboard to Site. Then scroll to the bottom of the page and click Save Changes. Then click Home. Here is the initial appearance of our Default website Home page:

06

Add a Custom Title and Welcome Article to your Home page

To put a Welcome article on our Default Moodle Site Home page, the official Moodle documentation says you should go to your Home page and click on the Settings wheel. Then click Edit Settings. Alternately, click Site Administration. Then scroll down to Front Page Settings.

07

Change the Title of the site to a custom title. Then add a Front Page description.

"Welcome to our College in the Clouds Moodle website! We offer several courses on using free open source tools including Linux, LibreOffice, Joomla and Moodle."

Then click Save at the bottom of the page. Then go back to your Home page. The new Site Description is not showing. To show our Site Description, click on the Settings wheel again. Then click Turn Editing On.

08

This will add three new items to your Home page. In the left side menu, there is now a menu item called Add a block. To the right of the side menu is a new settings wheel. To the right of this is a link to Add an Activity or Resource. To display the description we have already made on the front page, click on Add a block. This will display a long list of possible blocks. Click on the Course/site summary block. Suddenly, our site description now appears on our Home page:

09

But our Home page does not look very good. Click on the new Settings wheel just below the Site Title. This brings up a screen called Summary of Site.

10

This screen appears to be just like the Course/site summary block. However, it has a few more buttons in the Editor Menu. In particular, you can add a video file, video link or record a new video or audio file. There is also a button to Manage Files. I therefore recommend using the Summary of Site tool instead of the Course/site summary block to create your custom Home page. Click on the Down arrow to see more Editor functions.

11

We will review some of these Editor functions later. For now, type in a sentence and use the A button to change the size of the text to Medium heading. Then click Save Changes. Then delete the Course/site summary block by clicking on its setting wheel and clicking Delete the block.

12

Next, log into the Sandbox Demo site as an Administrator and click on the Settings wheel and click Turn on Editing. Then click on the small settings wheel to the right of the side menu.

13

The Sandbox Demo site Home page content also uses the Summary of Site Editor to create its Home page content.

Turn off Available Courses on your “non-logged in” Home page
You may not want to display a list of your courses on your “non-logged in” Home page (especially since we do not have any courses built yet). To turn off the Available Courses module, click on the settings wheel in the upper right corner of the Home page. Then click Edit Settings. Then scroll down to the Front Page section and change the first box from List of Courses to None.

Then in the next section, Front Page items when logged in, leave the list of courses to make them visible for logged in users. Then scroll to the bottom of the page and click Save Changes. Then open a web browser and visit your Home page as a non-logged in visitor to verify that the List of Courses box is now gone on our public Home page.

Replace the Moodle Header Title with our own custom Header Image

Go to the Home page of the Moodle Demo Site called Mount Orange School and you will see that it has a cool image instead of a Header title on the Home page. Here is a link to the Mount Orange Demo site Home page: https://school.moodledemo.net/

14

We will add a similar header image to our own site by first adding the new header image to our Summary of Site area and then hiding the default Header title. Go back to our default site and click on Home. Then click on the settings wheel and click Turn on Editing. Then click on the Summary of Site Settings wheel. Then click on the Insert or Edit image button. This image properties screen will appear:

15

Click Browse repositories. This opens the File Picker. Click on Upload a File.

16

Click on Browse. This opens your home computer file manager. Navigate to your custom header image and open it. Give it a descriptive name. Then click Save Image. This returns us to the Summary of Site Editor. Click Save Changes.

17

Change Home page background color.

Go to Administration, Appearance, Themes, Boost, Background image. Then drag and drop a light blue image into the background image box. Then click Save and view the Home page again:

18

Use CSS to Hide the Header Title and footer section and add a background color to our content section.

It is useful to know both HTML and CSS to adjust the appearance of a Moodle website. Here is a link to our College in the Clouds free course on learning HTML and CSS:

https://learnhtmlandcss.com/

In particular, it is useful to know how to use the Firefox inspector to identify CSS classes for the HTML elements you want to change. Here is a link to an article I have written on how to use the Firefox inspector:

https://learnhtmlandcss.com/3-css-basics/3-4-how-to-become-a-css-detective

Using this tool, I determined that the CSS selectors for the Moodle Header Area, Content Area and Footer Area are called:

#page-header

#page-content

#page-footer

In addition, if you place the following CSS selector, any change you make will only apply to the Home page header and not to the Moodle header on other Moodle pages.

#page-site-index

Here is the CSS we need to add to hide the header text, hide the footer and use CSS to add a background color to the content area:

#page-site-index #page-header {display: none;}

#page-content {background-color: #ccccff;}

#page-footer {display: none;}

Click on Administration, Appearance, Themes, Boost, Advanced Tab and then copy paste the above into the section called Raw SCSS:

19

Click Save Changes. Then click Site Administration, Development tab, Purge Caches, Purge All Caches. Then open a separate browser, clear the browser cache and reload your Moodle Home page.

20

Add a Video to our Home page

Click on the Settings wheel in the lower left corner. This opens the Summary of Site editor. Press Enter on your keyboard to create a new line. Then click on the Insert or Edit a Video icon in the editor menu.

21

If you have created one or more videos for your courses, it is best to host them on a YouTube channel or other video sharing platform. Click on the Video tab. Then copy and paste the video link in the Source URL box. We will insert a link to our College in the Clouds video:

https://www.youtube.com/watch?v=yboWT4OwqEk

22

Then click on Display Options. Enter the video Title and size. Since the ratio of modern full screen videos is 16 wide by 9 high, we will use a size of 640 by 360. Then click Insert Media. The Summary Editor might claim that No video with support was found. However, press Enter with your keyboard to create a new line and the error message will go away. Add some text before and after the video.

We have a complimentary website to this Moodle website that has a series of articles on creating your own online course. Here is a link to that website: https://collegeintheclouds.org/

This is a work in progress. We are just getting started adding articles about this important topic. Check back in a few weeks and we should have the entire course posted.

Then save changes and then view your website as a non-logged in visitor.

23

Congratulations! You now have a relatively easy way to control the appearance of your Home page welcome article.

What’s Next?

Now that we have control over our Home page Welcome article, we will next look at how to create user roles and permissions.