remui-moodle-ux-theme

How to Customize Header Menu in Edwiser RemUI

Edwiser RemUI completely customizes the Moodle layout. Through improved navigation and highlighted sections, Edwiser RemUI transforms the look of conventional Moodle for the user.

The header or the top navigation bar, consists of the logo, the Moodle custom menu, quick access links and a link to the user profile page. The colors and the logo can be customized using settings in Edwiser RemUI.

To personalize the custom menu items, there are some Moodle settings involved!

edwiser-remui-top-nav-menu

Customizing Header Menu

Now, to display menu items according to your preference in the header menu, you need to head over to Site Administration → Appearance → Themes → Theme Settings.

Under ‘Custom menu items‘ you can decide the menu items to display.

moodle-add-custom-menu-items

To create a menu list you need to follow the below format:

Moodle community|https://moodle.org
-Moodle free support|https://moodle.org/support
-###
-Moodle development|https://moodle.org/development
--Moodle Docs|http://docs.moodle.org|Moodle Docs
--German Moodle Docs|http://docs.moodle.org/de|Documentation in German|de
#####
Moodle.com|http://moodle.com/
  • Each item should be written on a separate line
  • The format is <menu-name>|<menu-link>|<menu-tooltip>|<language-support>
    • the menu-name will be displayed in the header
    • the link should be the URL of the target page or section in your website
    • the tooltip is an optional field and is used to provide the user with helper text regarding the menu item
    • the language-support field is optional, and can be used to optionally display the menu item only for the supported language. E.g., Moodle|http://moodle.com|News|en, Moodle|http://moodle.de|Nachrichten|de
  • A sub-menu item should precede with a hyphen ‘-‘ and the next level menu should precede with an additional ‘-‘ for each level
  • A horizontal separator line can be added using ‘###’

The ‘link’ field supports HTML attributes too, such as target. For example, Moodle Homepage|http://moodle.org” target=”_blank.

You need to add the attributes within escaped quotes. You can find all the details here.

RemUI

Moving Ahead

Introduced in Moodle 2.0, custom menus are supported by several Moodle themes. Edwiser RemUI displays this custom menu in the header, whereas the default Moodle layout has a separate section under the header to display the menu.

Since the menu is static across all pages, you could consider adding important pages to this menu, such as the ‘Courses’ page, ‘Support’ or ‘Contact’ page, link to blog, and so on.

Have you customized the Edwiser RemUI top menu? Share your views with us.

 

Leave a Comment

Your email address will not be published. Required fields are marked *