Workplace theme

From MoodleDocs
workplacelogo.png This feature is part of Moodle Workplace™, which is available through Moodle Certified Partners and Service Providers only.


Moodle Workplace comes with a responsive theme called Workplace. The theme supports all Workplace-specific tools and can be customised for each tenant. While other Moodle themes - whether standard (Boost, Classic) or third-party - will work in Moodle Workplace, we strongly discourage using any Moodle LMS theme in Moodle Workplace. They will display certain elements incorrectly and potentially break your system!

Workplace Theme Settings

There are a number of site-wide settings that apply to the theme across tenants. They are located at Site administration > Appearance > Themes > Workplace.

  • Raw initial SCCS: Any code that has to injected side-wide before any other code
  • Raw SCCS: Any code that has to injected side-wide  at the end of the style sheet
  • Hide program courses from the "Course overview" block (Default Yes): Do not display courses in the "Course overview" block on the Dashboard when a learner is only enrolled into them through programs. This will help to avoid courses being displayed twice when programs are displayed separately, especially in the Mobile app.

Branding Tenants

The Workplace theme is fully tenant-aware. To modify its look & feel, go to Site administration > Users > Manage tenants or go directly to Tenants via the Workplace launcher. Then, choose the tenant to be branded and select the Branding tab. You will see the main categories Images, Colours, Advanced, and Reset.

To change the theme settings of the current tenant, as an administrator you can also navigate to Site administration > Appearance > Appearance which directs you directly to the Branding options.

It may take several minutes before changes are visible on your site. To expedite this refreshing process, purge your cache by going to Site administration > Appearance > Theme selector and select Clear theme caches.


The Images category on the Branding tab deals with the pictures displayed on your site:

  • Header logo: The company logo to be displayed in the navigation bar.
  • Login logo: The organization logo displayed above the username and password fields on the login screen. This is often the same as the header logo.
  • Tenant selector logo: This logo will be displayed on the login tenant selector if enabled. If not specified, the Login logo will be used.
  • Login background image: The picture to be displayed on the login screen. We will take a closer look at the login screen(s) later in this section.
  • Favicon: The icon associated with this site is usually shown in the browser's address bar.


The Colours category on the Branding tab lets you customise the following:

  • Primary colour: The accent colour used throughout the site


The following settings are available in the Advanced category on the Branding tab:

  • Custom SCSS: Any valid custom SCSS code
  • Footer text: Text displayed at the bottom of all pages, for example, a copyright disclaimer.


By clicking The Reset tenant appearance button, you will be able to select which elements will be restored to their default values.

The default values fully comply with accessibility standards.