TheBetterM is a Chrome extension that redesigns the appearance and layout of NCKU Moodle while keeping the original Moodle functionality intact.
It focuses on visual improvements, cleaner layouts, and a few small usability changes without replacing or modifying Moodle's core functionality.
- Refreshes Moodle's colors and backgrounds.
- Restyles cards, panels, navigation, and other common UI elements.
- Reorganizes parts of the layout for a cleaner interface.
- Changes the upper-left title to NCKU TheBetterM.
- Makes the title button return to the Moodle Dashboard (
/my/). - Opens syllabus links in a new tab.
- Applies only to NCKU Moodle and does not affect unrelated websites.
Keep Moodle's original functionality, but give it a better interface.
TheBetterM is currently designed for:
- Desktop Google Chrome
- NCKU Moodle only
Note
TheBetterM is currently not designed for mobile browsers, including:
- Chrome on Android
- Chrome on iOS
- Other mobile browsers
Other Chromium-based desktop browsers may work, but they are not officially tested or supported at the moment.
Get TheBetterM from the Chrome Web Store.
- Download or clone this repository.
- Open
chrome://extensionsin Google Chrome. - Enable Developer mode.
- Click Load unpacked.
- Select the
srcfolder.
TheBetterM should now be active when you visit NCKU Moodle.
When running TheBetterM from source using Load unpacked, you can replace the images inside src/assets.
| File | Used for |
|---|---|
header.jpg |
Header / banner image |
site-background.png |
Site background |
Keep the same filenames after replacing the files so the existing styles can continue to locate them.
- Photo source: NCKU material
The included images have been visually modified and are used solely to customize the appearance of NCKU Moodle in this open-source, unofficial, non-commercial extension.
The styling is separated into several CSS files to make different parts of the interface easier to maintain.
| Source | Responsibility |
|---|---|
styles/theme.css |
Colors, backgrounds, glass surfaces, and shared theme styling |
styles/interface.css |
Navigation, dialogs, controls, menus, layout, spacing, and responsive behavior |
styles/pages.css |
Activities, statistics, forms, messaging, and page-specific styling |
If something looks broken or behaves unexpectedly, feel free to open an issue.
When reporting a problem, please include:
- A short description of what happened.
- What you expected to happen.
- A screenshot showing the problem.
- The URL of the affected Moodle page.
- Steps to reproduce the issue.
- If possible, the affected element's CSS selector or relevant class names.
Tip
Before sharing screenshots or URLs, remove personal information, course details, student information, or other private data.
Made for NCKU Moodle