Customize Moodle Themes

01 - Add Custom Menu

Scenario: Assume you need to add a custom menu for BSc - IT courses. "BSc - IT" is the main menu, with two submenus: "Semester 01" and "Semester 02". "Semester 01" has two subjects: "Networking" and "Software Engineering".

Steps to Add a Custom Menu in Moodle:

1. Log in to Moodle:
   • Access Moodle with administrative privileges using your credentials.

2. Access Site Administration:
   • Navigate to "Site administration" in the top-right corner of the page.

3. Navigate to Appearance Settings:
   • Under "Site administration," click on the "Appearance" tab.
   • Select "Theme settings" or "Theme" depending on your Moodle version.

4. Configure Custom Menu Items:
   • In the "Theme settings" section, locate the "Custom menu items" box.

5. Add Main Menu and Submenus:
   • Enter the menu structure using a specific format to denote main menus and submenus. For this scenario, use the following format:

     BSc - IT|# 
     - Semester 01|#
     -- Networking| Put here to URL # (network)
     -- Software Engineering| Put here to URL #(SE)
     - Semester 02|
     

6. Save Changes:
   • Scroll down to the bottom of the page and click on the "Save changes" button to apply the new custom menu.

7. Verify Custom Menu:
   • Go to the main page of your Moodle site to verify that the new custom menu appears as expected.
   • Hover over the "BSc - IT" menu to see the submenus for "Semester 01" and "Semester 02", and verify that "Networking" and "Software Engineering" appear under "Semester 01" with the correct links.

By following these steps, you will have created a custom menu for BSc - IT courses with the specified structure, making it easier for users to navigate to the relevant courses.

02 Customizing the Header

Scenario:Assume you need to add a contact email using the customization options available in the Moodle header.

Steps to Add a Contact Email by Customizing the Header:

1. Log in to Moodle:
   • Access Moodle with administrative privileges using your credentials.

2. Access Site Administration:
   • Navigate to "Site administration" in the top-right corner of the page.

3. Navigate to Appearance Settings:
   • Under "Site administration," click on the "Appearance" tab.
   • Select "Theme settings" or "Theme" depending on your Moodle version.

4. Customize Header:
   • In the "Theme settings" section, look for a section labeled "Additional HTML" or "Custom header content."

5. Add Contact Email:
   • Locate the text box where you can add custom HTML or text content for the header.
   • Enter the contact email using HTML to format it appropriately. For example:

    <div class="header-contact">
      Contact us at: <a href="mailto:contact@university.edu">contact@university.edu</a>
    </div>

• This HTML code adds a div with a class for potential styling and includes a mailto link for the contact email.

6. Save Changes:
   • Scroll down to the bottom of the page and click on the "Save changes" button to apply the custom header content.

7. Verify Header Customization:
   • Go to the main page of your Moodle site to verify that the contact email appears in the header as expected.
   • Ensure the email link works correctly by clicking on it to open your default email client.

By following these steps, you will have successfully customized the Moodle header to include a contact email, making it easily accessible to users.

03 - Change Theme