Moodle 2.3 Theme Engine

Setting up a Custom Menu

AutoTheme enables you to customize the Moodle 2 drop down menu, to control where it shows up in addition to the color settings that we will determine later on this page.

First, we'll have to add some links to the the custom menu before we can use it.

To add links, go to the the theme settings for your site.
Theme settings link

At the theme settings, scroll down to the Custom Menu items:
Theme settings screen custom menu items section

Here you can enter menu items that will be displayed in the top bar of you site. Enter the item name, then a 'pipe' character - | then the URL, as above. This will create a new tab item in the top bar.

If you want to have sub-items, that will automatically appear in a drop down below the top level item above, enter them as follows:

Theme settings screen custom menu items section

Add the items with the name of the item, a pipe, and a url as above, but type a dash (-) in front of their names.

Theme settings screen custom menu items section

Follow the same pattern to create sub-sub items with two dashes.

Theme settings screen custom menu items section

Add a second top level item by inputting it without a dash.

Now save changes and go back to the RL Master theme.

Colors tab custom menu settings

On the Colors tab, there are 3 custom menu sections:
  1. Custom Menu: The background color changes the background of the custom menu, the foreground color changes the color of the text in the custom menu.
  2. Custom Menu Border Color: The foreground color changes the border color of the custom menu.
  3. Custom Menu Hover Color: The background color changes the color of the custom menu item that is being hovered over, the foreground color changes the color of text in the custom menu item that is being hovered over.

Images tab custom menu background section

To set a background image for the custom menu go to the Images tab > Custom Menu Background section. The custom menu background image will overwrite the custom menu background color for the top menu. Sub-items will still have the custom menu background color.

For example, in the following image the custom menu background color is changed to yellow, but there is a custom menu background image that overwrites the yellow on the top menu.

Custom menu display

By default the Custom Menu is shown on all pages. To edit the custom menu display settings go to the Miscellaneous tab. Set the custom menu to show on All pages, the Front page only, or on none. Save changes at the bottom of the page when finished.

RL Master Miscellaneous tab

Now we see how the custom menu works.

Custom menu
  1. Hovering over the top level item Moodle community displays the sub-items.
  2. Hovering over the sub-item Moodle development displays additional sub-items.
  3. Select any of the items to link to the item's URL.

In the Custom Tab documentation, we'll talk about how to further control/customize the look of the drop down menus.