course header 2000x350

In this article, we will continue our review of the Moodle Fordson theme settings by reviewing how to use Navigational Menus added by the Fordson theme. Perhaps the most glaring drawback of Moodle is the difficulty in creating custom menus and menu items. Menus are extremely important to visitors, students and teachers in making it easy to navigate a website. Joomla offers a very easy way to create menus and menu items and assign them to different pages. In Moodle, this function is much more difficult. Hopefully, this issue will be addressed in Moodle 4. But for now, we will describe the current menu creation options for Moodle 3.11.

How to create navigational menus and Menu items in Moodle
We begin by reviewing the default way to create menus and menu items. Amazingly, this crucial function is not included in the Moodle core. Instead, navigational menus and menu items are considered to be part of the Theme Settings. Moodle administrators can create a custom menu by going to Site Administration, Appearance, Theme Settings. Scroll to the bottom of the page. Then enter text items one per line in the your custom Theme settings. Sub menu items are preceded by a number of hyphens, with the number of hyphens determining the depth of the item. Items with no hyphen appear as the top level of the menu, items with a single hyphen appear on a drop down menu, and items with two hyphens appear on a drop down menu below the previous first level item.

A line of text without a link is used for the Menu Title. To create space or blank line between Menus and Menu Items use ### for the top menu and -### for a sub-menu.

The content of each menu item is constructed in two parts, separated by a | (pipe character). The two parts are:

Label... This is the text that will be displayed as the menu item. (If you want to use a special character such as an ampersand you must use & instead of &).

URL... This is the URL that the user will be taken to it they click the menu item.

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

Click Save Changes. Then view the Home page as a non-logged in visitor:

01

Tips on Adding Menu Items to the Top Menu
When not logged in, the top menu items are placed between the Home link and the Languages selector. There is very little space here and as the web browser screen narrows, the top menu is soon moved to the bottom of the Home page in a single column. It is therefore Important to limit the number of Top Level Menu Items to no more than three menu items and to limit the text in each menu item to no more than two words.

You can create as many Second Level Menu Items as you want. Here is an example of how they will look:

02

Also note that when someone logs in, an additional menu item called My Courses will be added to the Top Menu. This will tend to displace and hide the Settings area in the upper right corner. This is another reason to limit the number of custom top menu items.

Add a Moodle Main Menu Block
You can also create a separate menu that is not part of the Moodle Top Menu by adding a Main Menu Block to the front page.

Resources and activities can then be added to the front page,( for example to create a side menu for your Moodle site.)

You can also use the main menu block with Moodle pages to create a side menu for your Moodle site, instead of or in addition to the custom menu items at the top of your site. Thus you could create Moodle Pages pages called "About" or "Contact" and use a Moodle Main Menu block to display these pages.

To add a Moodle Main Menu Block, first log in as an administrator and go to the Home page. Then turn on the editing on the front page. This will display a couple of blank spaces and the Add a Block box just above your main content area:

03

From the "Add block" link, click Main Menu.

04

Click on the Settings wheel to edit the Main Menu Block.

05

Change Page Context from Front Page only to Display throughout entire site. Then scroll down and change the display region from Column C to Column A. Sadly, we do not seem to be able to change the name of the main menu. Click Save Changes.

Then click "Add an activity or resource" and choose Page.

06

Copy this description to the Content Section. Then click Save and Display. Then repeat the process to create a FAQ page and a Contact Us page. Then turn off editing. Then visit your website home page as a non-logged in user:

07

This is not a very efficient usage of space on the Home page. The problem is that we are limited in terms of where we can put the Main Menu Block. We do not want the block in a right side menu as that will limit the width of the main content area. Sadly, there was not an option to put the block in the left side menu. We can and eventually will copy the links to these pages and place them in our top menu or bottom menu and then delete this Main Menu Block. Next, we will look at additional menu creation options provided by the Fordson theme.

Fordson Icon Navigation Menu
Fordson provides an additional top menu, called the Icon Navigation Menu, which is only visible for logged in users and is only displayed on the Home and Dashboard pages. Here is what it looks like:

08

There are currently 5 links. But you can have up to 8 links shown in this menu. Each of the 8 buttons can be customized with an icon, text, and link. By default there are 4 buttons created automatically.

To add or remove menu items from this menu, go to Site administration, Appearance, Themes, Fordson. Then click Icon Navigation. The Dashboard icon is Homepage Icon one and the Calendar Icon is Homepage Icon two. Badges are Homepage Icon Three. All Courses are Homepage Icon Four. Homepage Icons Five, Six, Seven and Eight are all blank. Each link can open in the current page or in a new page. Create a Course is in a special area called Special Course Creator Button. The Create a Course button is only displayed for those who have Course Creator permissions.

Not shown by default is the Special Slide button. The Slide button toggles the display of a textbox. This is great for instructions, news, or other information that doesn’t need to be seen all the time.

You can remove icon menu items by deleting the text in the icon field. You can add icon menu items by adding text and a link and an icon code in the boxes provided. If you have more than six icons, reduce the width of each icon from 100 px to 85 px using the setting provided. As an exercise, we will replace the Badges icon with a new icon called College Courses with a link to our Joomla College in the Clouds Courses.

https://collegeintheclouds.org/

For the icon, click on this link to see your 675 options:

https://fontawesome.com/v4.7/icons/

We will use the heart icon. Also set the link target to open in a new page. Click Save Changes and visit your logged in Home page. Here is the result.

09

Click on the Icon to make sure the link works.

Fordson Theme Menu Settings Panel
This panel allows you to turn the Fordson Course Management icon on or off. This icon only displays when you are on a Course page. We will leave this Settings panel at its default settings.

Content Areas Panel
Fordson provides a homepage text box that can display a different message for logged-in users and logged-out users. It can be used to welcome users when they log in and provide them with additional instructions on what to do next.

Footer
The Footer panel is where you can apply organizational branding and links. The footer is be displayed at the bottom of every page.

10

Go to Site Administration, Appearance, Themes, Fordson, Footer. Then fill in the Organization Name, website, email address and type in a footnote with or without an image. Then click Save Changes.

To delete the Moodle footer logo, copy and paste the following into the bottom of the Fordson Themes Colors panel.

.sitelink {visibility: hidden;}

To delete the retention summary link in the Moodle footer, go to Site administration, Users, Privacy, Privacy settings. Uncheck the 'Show data retention summary' checkbox and save the changes.

To delete the Get the Mobile App link in the Moodle footer, go to Site Administration, Mobile App, Mobile Appearance and delete the App download page link. Then click Save Changes.

To clear the theme cache, go to Site administration > Appearance > Themes > Theme selector.

Then click Clear theme caches.

The go to your Home page and view the footer:

11

Colors

We have already used the Fordson Colors panel to insert custom CSS. The Colors panel can also be used to change the background color on several areas of our website pages. To see the effect of changing background colors, use the following table to directly enter CSS colors in these boxes:

Area

Color Name

CSS Color

Brand Primary

Medium Blue

#9999FF

Body Background

Light Blue

#EEEEFF

Top Navigation Navbar

Sky Blue

#CCCCFF

Breadcrumb Background

Light Green

#EEFFEE

Content Background

Light Gray

#EEEEEE

Side Drawer Background

Medium Green

#99FF99

Footer Background

Light Red

#FFEEEE

Marketing Tile Text Background

Light Purple

#FFEEFF

Then click Save Changes. Then view your Home page as a logged in user.

12

it hard to read the light colored text in the Icon Menu. You can either not use the Gray content area background or you can use CSS to darken the color of the text in the Icon Menu. The text color is also the Brand primary color. So change the Brand primary color to Dark Blue #222277. Click Save Changes and view the Home Page:

13

Fordson Theme Marketing Tiles
Fordson Theme Marketing tiles are also known as Module Menu Items. Tiles or modules are boxes of content that include a link to a special page. Fordson supports up to six marketing tiles which can appear at the bottom of the page or at the top just below the Icon Navigation Bar. Add text, images, and links to help draw attention to special pages.

To create Theme Marketing Tiles, go to Site Administration, Appearance, Themes, Fordson and click on Marketing Tiles. Leave the Display position at the bottom of the page. Then enter a short title, small image (or if no image, add a short description). Then enter link text such as CLICK HERE and link URL. Then change the Link Target to open in a new page. Repeat to add a second Marketing Tile. Then click Save Changes. Then view your Home page:

14

Skip the Fordson Theme Slideshow
There are two problems with the Fordson slideshow. First, the images are not responsive for smaller screens. Second, slides do not advance automatically and there is no forward arrow. Hopefully, we can find a better slideshow when we look at Moodle Plugins.

What's Next?
In our next article, we will use the Fordson theme to create a custom log in page.