Change Moodle Title Colors with ChatGPT – Quick HTML Tutorial

In this video, learn how to quickly and easily change the color of multiple titles in Moodle using ChatGPT. Instead of manually editing HTML, we'll show you how to streamline the process by copying and pasting code into ChatGPT to update the colors of your course titles. Perfect for anyone looking to unify the design of Moodle pages with minimal effort.

Step-by-Step Tutorial:

  1. Access Edit Mode in Moodle:

    • Navigate to your Moodle page and turn on Edit Mode by clicking the button in the top-right corner.

  2. Locate the Section to Edit:

    • Scroll to the block or section you want to update. Click on Edit Settings for the block or text frame that contains the titles you wish to change.

  3. Copy the HTML Code:

    • In the editor, switch to HTML view (usually an icon labeled <> or "HTML").
    • Select all the HTML by pressing Command + A (Mac) or Control + A (Windows), then copy it with Command + C or Control + C.

  4. Open ChatGPT:

    • Open ChatGPT in your browser.
    • Paste the copied HTML into ChatGPT and prompt it to change the color of all titles. Example:
      "Change all <h1> and <h2> tags to color #00CED1."

  5. Select a New Color:

    • Use a CSS color picker (search “CSS color codes”) to select a color. Copy the hex code (e.g., #00CED1 for dark turquoise).

  6. Modify Titles in ChatGPT:

    • Paste the color code into your prompt and run the request. ChatGPT will return the updated HTML with the new title colors.

  7. Replace HTML in Moodle:

    • Return to Moodle, delete the old HTML from the text frame by selecting all and pressing Delete.
    • Paste the new HTML from ChatGPT using Command + V (Mac) or Control + V (Windows).

  8. Save and Preview:

    • Save changes and exit the HTML view. Preview the Moodle page to ensure the titles reflect the new color.

  9. Proofread and Adjust:

    • Carefully proofread the page to ensure all titles are updated and no text or links were inadvertently altered by ChatGPT.

  10. Backup the Original (Optional):

  • Before making changes, consider copying the original HTML and saving it in a text file. This allows you to revert if needed.

Pro Tip: If the color change doesn't apply perfectly, adjust your ChatGPT prompt or manually tweak the HTML. Small refinements can ensure your Moodle page looks polished and cohesive.

Print Article