course header 2000x350

The Fordson theme comes with a slideshow that displays at the top of the Home and Dashboard pages. Adding a slideshow to the top of your home page can be an alternative to adding three feature boxes. We will create slides for the pages “Meet your Teacher”, Learn Better Word Processing” and “Contact Us” so that we can compare the slideshow to the three feature boxes we created in our last article and then choose one or the other. However, before we can add our slide images, we need to create them.

Create your slideshow images
Slideshow images should be carefully made so that they all have the same ratio of width to height. Because your computer screen is about twice as wider than it is tall (typically 1920 wide by 1080 tall), I recommend slides that are about 1200 pixels wide and 400 pixels tall. You can look for free images on the Internet. However, it is often easier to create your own images using Libre Office Draw.

Step 1: Open a new Libre Office Draw document
Click on Page, Page Properties to set the workspace width to 12 inches and the height to 4 inches.

01

Then click on the Background tab and click on the Color screen to give the image a light blue background. Then click OK. Save the document as moodle-slide-1 in a new folder called Moodle Slideshow.

Step 2 Copy paste the image into a Writer document
Use Flameshot to capture the image. Paste the image into a Writer document. Here is the first slide:

02

Title: Meet Your Teacher

Description: David has more than 30 years of experience teaching Information Sharing courses and building online stores. For more information, CLICK HERE.

Step 3: Compress the Image to 150 DPI
Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide1. Click file Save. Then click File, Save As and save the Libre Draw document as moodle-slide-2. Repeat this process using different images and text to create slide2.

03

Title: Learn Better Word Processing

Description: Learn how to use Libre Writer to create well organized web pages, reports and even entire books! For more information, CLICK HERE.

Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide2. Click file Save. Then click File, Save As and save the Libre Draw document as moodle-slide-3. Repeat this process using different images and text to create slide3.

04

Title: Ask Us a Question

Description: If you have questions about any step in the Information Sharing process, feel free to contact us. For more information, CLICK HERE.

Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide3. Then close Libre Draw.

Step 4: Use Pix to set the Image width to 1200px
Open the Linux Mint Pix graphical editor and select slide1. Then click on the Edit file button in the upper right corner.

05

Click Resize and increase the image height to 400px. Then click OK. Then click Crop, Maximize and reduce the image width to 1200px. Then click Crop. Then click Save As and save the image as slide1-1200. Then select the second image and repeat this process.

Here are the documents and images in our Moodle slideshow folder:

06

Step 5: Organize your slideshow URLs
As we noted in our last article, here are our three special pages URLs:

Meet Your Teacher

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Learn Better Word Processing

https://collegeintheclouds.com/course/view.php?id=2

Ask Us a Question

https://collegeintheclouds.com/mod/page/view.php?id=5

Step 6: Add Images, Titles and Descriptions to the Fordson Slideshow

Now that we have our three URLs and our three slideshow images, click Site Administration, Appearance, Themes, Fordson, Slideshow.

07

Check the box to activate the slideshow and set the slideshow to only show on the site Home and Dashboard. Then change the slideshow height to 500 px. (extra 100 px needed to make the slideshow somewhat responsive). Then scroll down to the Slide settings. For each slide, enter a title and a very short description that includes a CLICK HERE link. Then add and image. Once all three slides are done, click Save Changes.

08

Sadly, the Title and Description cover too much of the slide. We could redo the slide so that there is blank space in each image for the title and description. Or we could redo each slide so that there is no need for the title and description. Or we could add custom CSS to improve the appearance of the Title and description. We will add the following CSS to the Fordson theme, Color tab, Custom CSS box:

.carousel-caption.d-none.d-sm-block {background: rgba(0,0,0,.1);}

.carousel-caption {padding-top: 4px; padding-bottom: 4 px; color: #111155; line-height: 1.1;}

Then click Save changes.

09

In addition, since it is not obvious that there are actually three slides, we will add a hint to the lower left corner of the first slide to click on the white bar to see the second slide:

10

The drawback of this slideshow is that it is not a responsive slideshow. In fact, it appears that we would need to switch to a different Moodle theme for the home page to have a responsive slideshow. This is yet another example of how things that are easy to accomplish on our parallel Joomla education website are nearly impossible to achieve with Moodle. We therefore may be better off with the three feature boxes instead of this Fordson slideshow.

What’s Next?
In our next article, we will review options for adding video conferencing to our Moodle website.

A Mega Menu is a horizontal menu with a full width drop down menu that is ideal for displaying a large number of menu items in columns to help visitors more quickly navigate to pages on your website. Here is the link to download the Moodle Mega Menu plugin:

https://moodle.org/plugins/local_megamenu

After installing this plugin, new menu items will be added to the Plugins, Local Plugins page:

01

Click on Manage Menus. Then click Create Menu:

02

The Name of the menu will not be displayed in the Moodle Top Navigation bar, but the drop down label will be displayed. So keep the drop down label short like View Courses. Then use the search box to add your course categories:

03

Then click Save Changes. The new Top Level Menu Item called View Courses is now in the upper right corner near the log in link:

04

Click on View Courses to open the Mega Menu Drop Down:

05

This is a nice display of your course Categories with the actual courses shown below the categories. Clicking on the course brings up the website log in page.

Delete competing top level menu items

Unfortunately, the Moodle Top Menu is not really responsive. On narrower screens, with several menu items in the top menu, the mega menu top level menu item is hidden. Therefore to help the Mega Menu appear on narrower screens, we need to remove some of the other top level menu items. We can delete the Moodle community, English and Teaching forum links because all of these are now in our Moodle Side Menu.

Go to Site Administration, Appearance, Theme Settings. Then delete everything in the Custom Menu Items box. Then click Save changes. Here is the result on the top of the Home page when not logged in:

06

Here is the drop down menu on a narrow screen:

07

Add Feature Boxes

Feature boxes are small boxes of content that draw your website visitors attention to special features about your website. These boxes are often used to provide a link to special pages on your website. We will add three feature boxes to the top of the Home page as examples. These pages and links are:

Meet Your Teacher

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Better Word Processing

https://collegeintheclouds.com/course/view.php?id=2

Contact Us

https://collegeintheclouds.com/mod/page/view.php?id=5

Create three feature boxes
Log into your Home page and click Turn on Editing. This displays Add a Block. Click HTML to add an HTML block. Type in a Title, Text, image and CLICK HERE link. Reduce the image width to no more than 100 pixels and change the alignment to Middle.

08

Then click Save image.

09

Then select the text CLICK HERE and click on the link icon in the text editor.

10

Copy paste the link in the URL box. Then check Open in a new window. Then click Create link. Then click Where this block appears and change the location from Column C to Column A. Also change On this page to Column A. Then click Save Changes.

11

Then click Add again to add a second HTML block. Click Configure. For title call it Learn Better Word Processing. Give it a description and add an image and a CLICK HERE link. Place it in Column B. Then click Save changes.

12

Then click Add again to add a third HTML block. Click Configure. For title call it Contact Us. Give it a description and add an image and a CLICK HERE link. Place it in Column C. Then click Save changes. Then turn off editing. Here is what the top of our Home page now looks like to a non-logged in visitor:

13

What’s Next?
In our next article, we will look at another way to direct viewers towards special pages on your website - adding a slideshow to your Home page with links to pages your views may want to read.

In article 4.3, we added menu items to the Moodle Top Menu by pasting links into a special box. In this article, we will explain how the Moodle left side menu items change depending on the page you are on.

The Case of the Missing Moodle Menu Manager
One of the most puzzling aspects of Moodle is the lack of a Menu Manager. Click on Site Administration and you will see 9 categories:

01

Moodle comes with a top menu and a left side menu. But it does not come with an obvious way to add additional menus or a way to add and organize additional menu items to its existing menus. Nor does Moodle come with a Media Manager to add and organize images or an article manager or page manager to add and organize additional pages. By contrast, the Joomla Content Management System comes with a very well organized Menu Manager, Media Manager and Articles Manager. Since each of my courses uses hundreds of images and dozens of pages or menu items, I have created a Joomla website to organize the content of each of my courses. I then link the Joomla pages to Course lesson or section pages inside of Moodle. However, this process of creating two websites does require learning how to use Joomla in addition to learning how to use Moodle. We will therefore cover some Moodle plugins that can provide some control over Moodle Menus and Moodle Menu items. Still, given the importance of menus and menu items to navigating through a website, it is shocking that Moodle does not have a Menu Manager.

Fordson Theme Course Menu Changes
By default, all of the courses we create are shown in a block called Available Courses. This block is displayed at the bottom of our Home page and is visible after we log into our Moodle website.

02

The Fordson theme adds another Icon menu to the top of our Dashboard page. Click on the icon called All Courses to reach a page that displays all of our courses and course categories. Fordson also adds a menu item to the Top Menu called My Courses which shows all of the courses a person is registered for. To enroll yourself to an existing course, click on Site Administration, Courses, Manage Courses and Categories. Then click on the Course name. Then scroll down the page to see this tabbed menu:

03

Click View to go to the Course Home page which displays course menu items in the left side menu.

04

Click the Enrolled Users tab to see a list of all enrolled teachers and students. On the Enrolled Users page is an Enroll Users button. Click on this to add yourself as a teacher or student to this course.

05

This course is then added to your list of My Courses in the top menu.

06

The menu item My Courses is also shown in the left side menu and the menu item All Courses is shown in the Icon Menu in addition to appearing in two menu blocks on the Dashboard page. Clearly Moodle navigation can be confusing for both teachers and students.

We will next add a plugin to create additional pages and then look at yet another plugin for adding and subtracting pages from the Moodle left side menu.

Add the Static Pages Plugin to Create Moodle Pages and add them to a Moodle Menu
There is an Activity option called Page that will create a static page. But the Page Activity option is intended simply to add a link placed on an existing page to lead to another related page of content. It is not a real stand alone web page as it must exist as part of an existing page. To create real stand alone web pages, we need to add a Moodle Plugin called Static pages. Here is a link to download this plugin: https://moodle.org/plugins/local_staticpage

Install the Static Pages plugin by going to Site Administration, Plugins, Install Plugins. Once installed, the Static Pages plugin will display three new menu items at the bottom of the Site Administration page:

07

The first menu item, Documents, allows you to upload document files to be used in static pages. Before loading a document, create an HTML document with the Bluefish editor and make sure that it begins with a title formatted with the Heading 1 or h1 paragraph style. This will be used for a static page title. Click on the second menu item called Settings. You can review and change these settings. But we will stay with the default settings. Click on List of Static Pages. It will explain that, because there are no HTML files in the Static Pages Files folder, there are no static pages to display links to. We will therefore create an example HTML page with Bluefish. It is also possible to convert any Libre Writer document into an HTML page just by clicking on File Save As and saving it as an HTML document. However, Bluefish has several tools that allow you to format your HTML document more precisely than you can with Libre Writer.

08

To learn more about how to use Bluefish to create HTML documents, visit our course on this topic: https://www.learnhtmlandcss.com/

Your Static Page file names should only contain lowercase alphanumeric characters and the - (hypen) and _ (underscore) symbols. We will create an HTML file called meet-your-teacher.html. Then click on Site Administration, Static Pages, Documents and drag a copy of this file from your Home computer file manager to the Static Pages Files box. Then click Save changes. Then click on Static Pages, List of Static Pages. A link will be provided to the new static page.

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Click on the link to see this page:

09

Styling your static pages

If you want to style your static page with CSS, you can include a <style> tag into the <head> section of your HTML document. For example, we will add the following to our HTML page with Bluefish:

<style>

p { font-size: 24px; color: blue;}

</style>

Then delete and reload the HTML document to the Static Pages Documents box. Here is the result:

10

Add an image to a static page
If you want to include one of more images into your static page, you cannot just upload them in local_staticpage's document box. You have to upload them somewhere else. Then link to the image in your HTML file with an absolute URL, not a relative URL. For example, open your home computer file manager and rename your image so that it only has lower case letters and numbers and dashes. It will have a name like:

david-spring.jpg

11

Sadly, Moodle does not offer a way to add images directly to static pages. We have two options to add this image to our static Meet your Teacher page. The first option is to add an HTML block to the static page and then insert the image into the HTML block. The second option is to load the image into a parallel Joomla educational website and then copy paste the absolute link from the Joomla website image into the static page. Let’s look at adding the HTML block first.

Add an HTML block to a static page

The local_staticpage plugin was not intended to show blocks on the static pages. However, it is possible. You have to enable page editing by going to your Home page and turn on editing. Then go to your static page. Now you see the standard "Add block" menu and can add blocks to the static page.

12

We will add an HTML block.

13

Click on Insert an image.

14

Click Browse Repositories. Upload a file and upload the image. Then click on this page only. Then click Save Changes.

15

Then click on the Home page and turn off editing. If you have a lot of images, a better option would be to load them into a parallel Joomla website Media manager. For example, I have a parallel Joomla website with the URL https://collegeintheclouds.org/

which has content for my moodle website https://collegeintheclouds.com/

The images in my Joomla media manager are in a folder called images where I have added a folder called moodle. So the full URL to the image david-spring.jpg is https://collegeintheclouds.org/images/moodle/david-spring.jpg

Then copy paste the absolute or full URL into your HTML document and then reload the HTML document.

16

Now that we have a static page, we will next install a plugin for adding and subtracting pages from the side menu.

Add or Subtract a Menu Item from the Moodle Side Menu
There is a plugin called Flexible Menu which really should be part of the default Moodle installation. It can be downloaded at the following link: https://moodle.org/plugins/local_vxg_menus

Install the plugin with the Moodle Plugin installed. Once installed, two new menu items will appear at the bottom of the Appearance page:

17

Click on Hide Navigation Items. Scroll down to Private Files and check the boxes to hide Private files from all roles.

18

Then scroll to the bottom of the page and click Save changes. Note that Private files no longer appear in the side menu. Then click Side Menu, Custom Menu Item. Then click Add New. Call the Menu item, Meet Your Teacher. Then copy and paste the Static Pages URL into the URL box.

19

Note that currently there is an error in this plugin that adds the website URL to the link URL like this: https://collegeintheclouds.com/https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

To work around this problem, delete the first part of the link URL and only copy paste this into the URL box: local/staticpage/view.php?page=meet-your-teacher

Then click Choose Icon to choose a menu item icon. (note: this function might not work). Then click Save Changes. Then click on the new Meet Your Teacher Menu item in the side menu. Here is the result:

20

What’s Next?
In our next article, we will add another Moodle Menu plugin called Boost Navigation fumbling.

In this article we will add and review how to use another Moodle Menu Plugin called Boost Navigation Fumbling. You can download it from the Moodle Plugins are at this link:

https://moodle.org/plugins/local_boostnavigation

Once installed, the plugin will add six new menu items to the Appearance page:

01

Root Nodes
A Moodle Root Node is more commonly known as a Moodle Menu Item. Root nodes removes or moves various links from the Boost Side menu. Scroll down the page and check the box for Remove content bank in non-course context. Also check the box for Move Content bank to Course Content. Then click Save changes. We will not change the My Courses Root Node.

Custom Root Nodes
This gives us a menu item box that works in a similar way to the Top Menu Item box we used in a previous article to add menu items to our top menu. Custom menu items can be nested so that top level menu items can have child menu items. To create a child menu item instead of a parent menu item, just prefix the child menu item with a hyphen. There are two boxes, one for items you want see by everyone and the other for menu items you only want to be seen by administrators. We will use the first box.

Here is the list of links we added to the top menu in Article 4.3:

The following is an example of how to create a custom menu (copy and paste into the Custom Menu items box as a starting point):

Moodle community|https://moodle.org

-Moodle Plugins|https://moodle.org/plugins/

-Moodle Demo Sites|https://moodle.org/demo

-Moodle Docs|https://docs.moodle.org/311/en/Main_page

-Moodle World Forums|https://moodle.org/course/

English Forums|https://moodle.org/mod/forum/index.php?id=5

-Moodle Forum General Questions|https://moodle.org/mod/forum/view.php?f=32

-Moodle Forum Installation|https://moodle.org/mod/forum/view.php?f=15

-Moodle Forum Blocks|https://moodle.org/mod/forum/view.php?f=396

-Moodle Forum Course Formats|https://moodle.org/mod/forum/view.php?f=30

-Moodle Forum Enrollment|https://moodle.org/mod/forum/view.php?f=512

-Moodle Forum Repositories|https://moodle.org/mod/forum/view.php?f=352

-Moodle Forum Roles|https://moodle.org/mod/forum/view.php?f=941

-Moodle Forum Themes|https://moodle.org/mod/forum/view.php?f=29

Teaching Forum|https://moodle.org/mod/forum/view.php?f=24

-Moodle Activities Forum Assignment|https://moodle.org/mod/forum/view.php?f=117

-Moodle Activities Forum Attendance|https://moodle.org/mod/forum/view.php?f=125

-Moodle Activities Forum Glossary|https://moodle.org/mod/forum/view.php?f=126

-Moodle Activities Forum Lesson|https://moodle.org/mod/forum/view.php?f=333

-Moodle Activities Forum Quiz|https://moodle.org/mod/forum/view.php?f=121

-Moodle Activities Forum Resources|https://moodle.org/mod/forum/view.php?f=122

-Moodle Activities Forum Scheduler|https://moodle.org/mod/forum/view.php?f=1000

After copy pasting the above menu items into the first box, scroll down the page and check Collapse custom root nodes for all users. Also check Collapse custom root nodes for all users by default. Then click Save Changes. Here is what a non-logged in site visitor sees:

02

Here is what a logged in administrator sees:

03

Course Nodes
This menu item allows us to remove menu items such as Badges that normally appear in the Moodle side menu Courses pages. Check the box Remove Course node Badges and Remove Course Node Competencies. Then click Save Changes.

Custom Course Nodes
This is a box for adding custom menu items to the Moodle Side Menu when viewing course pages.

Custom Bottom Nodes
This page provides boxes for adding course menu items to the bottom of the Moodle left side menu. The top box adds menu items that can be seen by anyone and the bottom box adds menu items that can only be seen by administrators. We will get the links for our three Main Menu Block Menu items and add them to the bottom menu. These are links to three site pages:

About Us

https://collegeintheclouds.com/mod/page/view.php?id=3

FAQ

https://collegeintheclouds.com/mod/page/view.php?id=4

Contact Us

https://collegeintheclouds.com/mod/page/view.php?id=5

Add the Pipe character (on the upper right side of your keyboard) after the Menu Item title and before the link like this:

About Us|https://collegeintheclouds.com/mod/page/view.php?id=3

FAQ|https://collegeintheclouds.com/mod/page/view.php?id=4

Contact Us|https://collegeintheclouds.com/mod/page/view.php?id=5

Now that we have these links in the Moodle side menu, we can delete the Moodle block called Main Menu. While logged into the Home page, click on Turn on editing in the upper right corner. Then delete the block. Then turn off editing. Then view the Home page. Here is what it looks like before we log in:

04

Here is what it looks like after we log in:

05

What’s Next?
Now that we have improved the Moodle left side menu, we will add a mega menu plugin to improve the appearance of our Moodle Top Menu.