Note: You are currently viewing documentation for Moodle 3.11. Up-to-date documentation for the latest stable version of Moodle may be available here: Workplace theme.

Workplace theme

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

Overview

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.

  • Workplace launcher as modal (Default No): Show the Workplace launcher in a popup instead of a dropdown menu
  • 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
  • Enable Learning tab on Dashboard (Default Yes): Show the Learning tab on the Dashboard. The Learning tab replaces the Course overview block and shows a combined view of the learners' courses and programs. This is where learners can view the programs they are allocated to; alternatively, the My Learning block can be used for the same purpose.
  • Enable Teams tab on Dashboard (Default Yes): Show the Teams tab on the Dashboard. This tab is only displayed to users who have a manager position in the organisation structure and will display all other users that report to them; alternatively, the My Teams block can be used for the same purpose.
  • Display the "Course overview" block only in the mobile app (Default Yes): Display the "Course overview" block only in the mobile app, hiding it from everyone in the browser version.
  • 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, 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.

Images

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.

Colours

The Colours category on the Branding tab deals with some basic colours used throughout the site:

  • Links: The colour used for links and interactive elements
  • Navigation bar: The colour used for the top navigation bar
  • Primary buttons: The colour of the main action buttons
  • Drawer: The colour used for the navigation drawer background
  • Footer: The colour used for the footer background

Advanced

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.

Reset

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.