Moodle

Moodle theme development on Boost, in your brand

We design and build child themes that make Moodle look like your organization and read clearly on a phone, without forking the parent theme you depend on for updates.

  • Child themes, not forks
  • Accessibility checked
  • Editable theme settings
Get a free quote See our work
What is included
  • Boost child theme
  • SCSS and brand variables
  • Mustache template overrides
  • Renderers and layouts
  • Theme settings page
  • Accessibility and responsive testing
Get a free quote Reply within one business day. NDA on request.
The problem

Moodle theme problems we are called in for

People judge a learning platform in the first ten seconds, and stock Moodle does not make that easy. The login page is plain, the dashboard is busy, and the course page looks like every other Moodle site your learners have used. A theme fixes that, but themes are also where a lot of Moodle sites pick up their worst technical debt.

The usual story goes like this. A commercial theme was bought for its demo, loaded with sliders and page builders, then customized by editing its files. It looked good at launch. A few releases later it is unsupported, and the site cannot be updated without losing the design. We build the other way: a small child theme on top of Boost, Moodle's standard theme, that contains only what makes your site yours. Boost keeps receiving fixes from Moodle, and your layer rides on top.

  • The theme blocks upgrades

    Your current theme was built for an older release or edited in place. Each Moodle update breaks the layout, so updates are skipped and the gap keeps growing.

  • It fails on a phone

    Half your learners open courses on mobile during a shift or a commute. Tables overflow, the navigation drawer covers the content and quiz buttons are too small to hit.

  • Brand rules are not met

    Marketing supplied fonts, colors and a logo. The site uses none of them correctly, and every fix is another block of custom CSS pasted into a settings box.

  • One site, several audiences

    Different faculties, client companies or brands share the platform and each expects its own look, but you do not want to run a separate Moodle for each of them.

What we do

What a Moodle theme project covers

A theme project with us is design plus engineering, with the long-term upkeep considered from the first mockup.

Boost child theme

A theme that inherits from Boost and overrides only what must differ, so layout fixes and new features from Moodle arrive without rework.

SCSS and brand variables

Colors, typography, spacing and component styles set through Bootstrap variables and your own SCSS partials, compiled by Moodle and cached for production.

Mustache template overrides

New markup for the login page, navigation, course cards, footer and activity pages, made by overriding templates in the theme and never in core.

Renderers and layouts

Custom page layouts and output renderers where a template alone is not enough, such as a different header per page type or a redesigned course index.

Theme settings page

Logo, brand colors, login background, footer links and custom snippets exposed as admin settings, so routine changes need no developer.

Accessibility and responsive testing

Contrast, focus states, keyboard paths and screen reader labels checked against WCAG criteria when you ask for it, on phones, tablets and desktops.

Typical projects

Moodle theme work by example

01

A corporate academy look

Your brand guide applied to login, dashboard, course catalog and certificates, so the LMS feels like part of the intranet instead of a third-party tool.

02

Multi-brand or multi-tenant styling

One Moodle with a different logo, palette and footer per category or cohort, used by training providers who serve several client companies from one site.

03

Replacing an outdated commercial theme

We rebuild the parts of the old design people value as a Boost child theme, drop the features nobody used, and clear the way for the next upgrade.

04

A redesigned course page

A course header with progress, cleaner section cards and clearer activity icons, delivered through template overrides and, where structure must change, a matching course format.

In depth

How a Boost child theme is put together

Why Boost is the parent

Boost is the default theme that Moodle develops and tests with every release. It is built on Bootstrap, and its navigation, drawers and course index are where new interface work appears first. A child theme names Boost as its parent in config.php and inherits its layouts, templates and styles. Whatever we do not override keeps coming from Moodle. Standalone themes copy all of that code, and from then on someone has to merge every upstream change by hand.

Variables first, overrides second

Moodle compiles SCSS on the server. A theme supplies three pieces through callbacks: variables injected before Bootstrap, the main preset, and extra rules appended after. We put brand decisions (primary color, fonts, border radius, spacing scale) in the first group, because changing a variable restyles every component consistently. Hand-written overrides come last and stay short. Sites that do it the other way round end up with thousands of lines of CSS fighting the framework, and every new Moodle component arrives unstyled.

Templates and renderers

Almost all Moodle markup comes from Mustache templates. To change one, the theme carries a copy under its templates folder with the same component path, and Moodle uses it in place of the original. When the data passed to a template is not enough, we override the renderer that prepares it. What matters most here is restraint. Each overridden template is a file we must compare against core at upgrade time, so we keep a list and override narrowly.

Branding by category, cohort or tenant

Moodle can apply a different theme per category, per course, per cohort or per user when the administrator allows it. For a handful of brands we usually ship one child theme with settings that switch logo and palette by category, which is easier to maintain than several themes. Where clients need fully separate identities and login pages, separate themes or separate sites may be the cleaner answer, and we will say which.

Accessibility and the app

Boost starts from a reasonable accessibility baseline, and a careless brand palette can undo it in an afternoon. We check color contrast, visible focus, heading order and keyboard access on the key learner paths: login, dashboard, course, quiz, assignment. One limit to know early is that a site theme does not style the Moodle mobile app, which has its own interface. Our Moodle mobile app development page covers branding there.

Process

From brand guide to live Moodle theme

  1. 1

    Brand and audit

    We collect your brand guide, review the current theme and list the pages learners use most, then agree which screens get designed.

  2. 2

    Design mockups

    Our designers produce the login, dashboard, course and activity views for desktop and mobile, using real Moodle components so nothing is impossible to build.

  3. 3

    Theme build

    The child theme is developed on staging: SCSS variables, templates, layouts and the settings page, all committed to your repository.

  4. 4

    Device and accessibility checks

    We test on current browsers and phone sizes, with keyboard and screen reader, in every language and role your site uses.

  5. 5

    Switch-over and training

    The theme is switched on in a quiet window, caches are purged, and administrators are shown how to use the theme settings.

Deliverables

What comes with your Moodle theme

  • A Boost child theme in your own repository
  • Design files for the key learner screens
  • An admin settings page for logo, colors and footer
  • A list of overridden templates for future upgrades
  • Accessibility and device test notes
FAQ

Moodle theme questions

Why build on Boost instead of buying a ready-made Moodle theme?
A ready-made theme is quicker on day one and can suit a small site. The risk is dependence: if its vendor is slow to support a new Moodle release, your upgrade waits. A child theme of Boost contains only your branding, so it is small, quick to check at upgrade time and fully yours.
Can you turn our existing design or brand guide into a Moodle theme?
Yes. Give us the brand guide, or mockups if you have them, and we map them onto Moodle's components. Where a design asks for something Moodle cannot do without heavy overrides, we show an alternative. If you need the design work too, our UI and UX design team produces the screens first.
Can different departments or clients have their own branding on one site?
Yes. Moodle allows a theme to be set per category, course or cohort, and a single theme can also switch logo and colors by category through its settings. We recommend an approach based on how many brands you have and how different they need to look.
Will the theme also change the Moodle mobile app?
No. The app has its own interface and does not load the site theme. It has some appearance options of its own, and deeper branding needs a branded or custom app. We raise this early, because many clients assume one design will cover both the website and the app.
How do you make sure the theme survives Moodle upgrades?
By keeping it thin. Brand styling sits in SCSS variables, template overrides are few and listed, and nothing is edited in Boost or in core. During a Moodle upgrade we compare each overridden template with the new original and adjust it, which is typically a short task instead of a rebuild.
Do you test the theme for accessibility?
Yes. We check contrast, focus visibility, keyboard operation and screen reader output on the main learner paths, and we can build and test to WCAG 2.2 AA when you ask for it. We report what we tested and what we found. We do not issue compliance certificates.
Related

Moodle Customization

Moodle Mobile App Development

Moodle Upgrade

UI/UX & Website Design

Moodle Plugin Development
Start a project

Show us your brand and your current Moodle

Send the site address and your brand guide. We will reply within one business day with thoughts on what a child theme can do for it and how a free quote would be scoped.

  • Free consultation and quote
  • NDA on request
  • You own the source code
  • Reply within one business day
Prefer to talk first? Book a call WhatsApp wwc@worldwincoder.com
Add budget and timeline optional, helps us quote faster

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.