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

Scenario:

Assume you need to change the theme of your Moodle site to better match your university’s branding or to improve the user experience.

Steps to Change the Theme 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 Theme Settings:
   • Under "Site administration," click on the "Appearance" tab.
   • Select "Theme selector" from the list of options.

4. Select a New Theme:
   • In the "Theme selector" page, you will see a list of available themes (e.g., Default (Boots), Classic).
   • Click on the "Change theme" button next to the device type you want to change (usually "Default" for general site use).

5. Choose a Theme:
   • A list of available themes will be displayed.
   • Browse through the themes and click on the "Use theme" button next to the theme you want to apply.

6. Confirm Theme Change:
   • After selecting the new theme, you will be asked to confirm your choice.
   • Click on the "Continue" button to apply the new theme.

7. Customize the New Theme (Optional):
   • After applying the new theme, you may want to customize it further to better match your university’s branding.
   • Go back to "Site administration" > "Appearance" > "Theme settings" or "Theme name settings" (where "Theme name" is the name of the new theme you selected).
   • Modify the settings such as logo, header, colors, and other customizable options provided by the theme.

8. Save Changes:
   • After customizing the theme settings, scroll down and click on the "Save changes" button to apply your customizations.

9. Verify Theme Change:
   • Go to the main page of your Moodle site to verify that the new theme has been applied successfully.
   • Ensure that the site looks and functions as expected with the new theme.