Configuring the branding and design of your platform

Introduction

The design of your platform is composed of a set of interface elements that you as the Superadmin can customize to optimize the learning experience and the overall user experience of your platform, both on desktop and on mobile. These elements can be set globally or for individual clients of the Extended Enterprise. Some of these elements include the header and footer, custom CSS, which buttons appear on the login page, and more.

This article describes how to configure the branding and design of your desktop platform. Learn more about the configuration for mobile devices.

Accessing the branding and design settings

To reach the branding and design area of your platform, access the Navigation menu, find the Customization (shapes icon), then click Branding and design. The page shows the Desktop tab by default. Go through each section of the configuration page to customize the theme as desired. 

Notes on uploaded images or media 

In many settings for the platform design you can upload images or other media files. These include the logo and favicon in the header, the background image or video for the sign-in page, the background of the course player, and the cover image of the course overview page. 

Once you upload a file, you will see a red trash can icon that lets you remove it if needed. Please be aware that doing this will delete the image immediately, even if you do not save your changes.

Customizing headers

In the Header section, you can customize the platform with your title, header message, logo, and favicon. Please note that for the text fields in this section, you can create them in multiple languages using the multi-language selector tool, which is accessible from the globe icon in the top right corner of the section. Learn more about the multi-language selector tool.

Begin in the first section, Page title. Use the corresponding text field to type in the title of your platform. It will appear in browser tabs and the top bar on the homepage of your platform. Please note that there is a 1000-character limit for this text field before it is cut off by an ellipsis.

Then, flag the option to enable a header message in the corresponding section. When this option is enabled, you can type your header message into the text field below. This could be your company slogan, vision, etc. The text can be edited as desired using the toolbar at the top of the text box. The header message will appear below your logo on your platform as well as on the Sign-in page. Please note that there is a 340-character limit for this text field before it is cut off by an ellipsis.

In the Logo section, press the Upload your logo button to select an image for the logo. In order to grant good performances on page loading, and to avoid issues with features like reports, we suggest uploading a maximum of 380x72px logo image and making sure that the image height is not smaller than 36px. The maximum image file size is 2MB and the allowed formats are JPG, PNG, JPEG and GIF. Your new logo will then appear in the top left corner of the platform. You can also upload a custom favicon. This is the icon shown on the browser’s tabs and top bar. Press the Upload your favicon button, then select a 16×16 PNG or JPG image from your computer. Please note that you may experience problems in the favicon display when using Safari due to Safari's limitations on dynamic favicon loading.

Please note: You can use globe icon in the top right corner of this section to create the Header Message in multiple languages using the platform's multilanguage tool, but the Page Title can only be added in one language.

Customizing the sign in page

In the Sign In Page Background section, select which kind of background you want. If you flag the option to have a color background, select the color using the tool that will appear below, or enter the corresponding HEX code.

If you flag the option to add a full-width background image, press Upload your Image. The supported formats are JPG and PNG. The recommended resolution is 1280×720 px, and the maximum file size is 10 MB. If you want to delete the image, select the red trash can icon.

Please note: If you have activated a public catalog on the Course catalog tab on the Advanced settings menu, please note that only the color background and the background image are available, while the background video is not available. If you have activated (or plan to activate) a public catalog in your platform, consider using a smaller image, since the area dedicated to the background image is partially overlapped by the catalog area.

If you select the option to add a full-width background video, press Upload your video. The supported video formats are MP4 and H264. The suggested specifications for the file are: recommended file size 1,5-2 MB; bitrate: 500-800 kbps; minimum resolution: 1280x720 px; maximum file size: 50MB.

You can also insert a fallback image that will be displayed in case the video is not supported or not loading properly. If you want to delete the video or image, select the red trash can icon.

In the Login form section, you can flag the option to hide the standard platform login form and show only the SSO buttons for login (Gmail, OKTA, LinkedIn, etc) both on desktop and mobile. Please note that you should have a valid SSO integration properly configured and tested before enabling this option.

When this option is selected, the Prevent users from changing their password setting in the platform Advanced Settings, Users tab, is enabled by default, and cannot be disabled unless the Show only SSO buttons and hide login form is disabled too. This configuration prevents users from changing their password in the platform (both on desktop and mobile), losing the synchronization with the password set in the Identity Provider.

Customizing colors

In the Colors section, you can select the colors of each kind of font in your platform. Enter the HEX codes into the corresponding text boxes, or select colors using the color wheels.

There are different ways to get the right HEX color, but if you don’t have any specific graphic software, you can use this free HTML color picker (opens in a new tab).

Accessibility hint: Keep accessibility in mind when configuring the interface of your platform and take advantage of the accessible colors included in the Docebo Learn default color theme.

Custom styles

If you have basic knowledge of CSS, you can customize the layout of your desktop platform at a higher level. Use the CSS areas in this section to customize the elements of the desktop platform: font, size, style, etc. Identify the element you want to modify along with the specific attributes. The CSS text areas have a code editor embedded so that you can take advantage of the options available within the editor itself.

Best practices for your customization:

• Save your current settings in a document or a file, so you can easily get them at any time.
• Test your changes on your browser inspector before applying them to your live environment.
• Keep two tabs or windows open, one to make your changes in this area, and another one to view any changes in incognito mode or in another browser.

In addition, you can customize via CSS the layout of every single desktop page and widget, since every platform page and widget is identified by a unique ID in the CSS HTML, automatically assigned by the platform.

Please note: Your customized CSS could be affected by new releases. In this case, any backward-compatibility with your code is not guaranteed.

Customizing the course player

In the Course Player section, you can customize the course player so that the settings configured in this section will be applied as the default settings for all courses. However, you can specify local course player settings for individual courses.

Focus mode

Use this area to configure the default focus mode setting for the course player of all courses and learning plans.

When the focus mode is enabled, the course player opens by default in full screen, and:

• Course widgets are grouped by area and overlaid by the player, but learners can always access them by clicking on the widget group name at the bottom of the page.
• When learners close the player, they are always redirected back to the page where they launched the course, whether it is a page including the Courses and learning plans widget or the My courses and learning plans page.
• When the course includes a single training material, the syllabus visibility and theater mode navigation settings are ignored to maximize the space for content. This means that the syllabus is not displayed and the navigation buttons for the training materials playing in theater mode are hidden.
• The course autoplay is automatically activated.
• If the course contains multiple training materials, the Next lesson and Previous lesson buttons appear on the right side of the header, making it easier to navigate between lessons and enhancing the learning experience. When hovering over these buttons a tooltip shows the title of the following lesson.
• For courses within a learning plan, navigation is dynamic, providing users with a simple and intuitive way to move between course content and other courses in the plan. Once learners complete the final lesson of a course, the Next Lesson button changes to Next Course, making it easier to navigate through the learning plan.
• The focus mode is available for Instructor-Led Training (ILT) courses to help focusing learners' attention on the most important content: the next session event. If they are not enrolled in any session, they can browse and enroll in available sessions without leaving the page.
• For Superadmins, Power Users, and instructors, the manage button in the course page header is minimized to a gear button with no text.
• Learners are notified about the certificates and certifications issued for the content they are viewing through the Achievements button on top of the content page.

This configuration is optimal for an immersive learning experience and minimizes distractions.

The default behavior can be overridden for individual courses (Properties tab > Player) and for individual learning plans (Properties tab > Player). The focus mode setting chosen at the learning plan level is applied as the default to all courses in the plan, overriding any course-level configuration to ensure consistent navigation.

Syllabus visibility

Then, manage the custom syllabus default visibility for all courses by selecting whether to hide or display it when a user enters the course.

The syllabus visibility is also managed directly by learners by using the panel button on the course player page using the Show course syllabus - Close course syllabus buttons at the top of the syllabus area.

When the focus mode is enabled, the syllabus is hidden by default, but learners can still choose to show it manually.

Theater mode navigation

Set whether to show or hide by default the navigation buttons for any training material played in theater mode for all e-learning courses.

When the focus mode is enabled, the theater mode navigation configuration is automatically disabled.

Player background image

In the Player background image section, you can upload an image that will display as the background of the course player.

After uploading an image, set whether you want to stretch the image to the size of the page, or if you want to keep the aspect ratio and center the image on the course player page.

Course player appearance

Use this area to set the default appearance of the course player for all courses: dark mode or light mode. The setting can be overridden for specific courses in the course properties. This setting regulates the color of text, the course header and the Course syllabus area for all learners.

If you have configured custom CSS rules for the player in CSS for the HTML training material section, those rules prevail over this setting.

By default, the course player is displayed in dark mode. 

Please note: When configuring branding and design on extended enterprise clients, if you disable custom settings for Course player appearance, the player will default to Dark mode, irrespective of what is set on the root platform.

CSS for the HTML training material

Finally, you can add custom CSS for your HTML page training material.

In this section, you can copy and paste your CSS classes. They will be automatically applied to all of your HTML Page training material.

Customizing the course overview page

Header layout

The Course overview page section allows you to configure a default course header for all course and learning plan pages in catalogs. It is possible to overwrite this default configuration at course level from the Header layout section of the course Properties tab and at learning plan level from the Details tab.

The available options are:

• Solid color layout: Use a solid color, for example, to emphasize your brand colors. Enter the color HEX code in the Color code area, or select a color using the color wheel. Please note that the selected color is always shaded with black.
• Cover image layout: Selecting an image for the course header offers a high impact on the course page. Find out more about managing header images for courses.
• Basic page layout: Select this option for a minimal and clean header layout with no images and colors.

E-learning starting view

In this section, set whether users will land directly on the course player page upon accessing a course, or on the course overview page, for all e-learning courses. The configuration of this option can be changed at course level from the course properties, Player tab, Starting view section.

The overview page is displayed before the course player and includes course and enrollment details helping learners to focus only on the course content once they access the course player, since the player will be the page's main focus.

Depending on the course configuration and the learner's enrollment status, the overview page includes various types of information about the course and the learner’s enrollment, aiming to provide a clear understanding of what to expect.

The course widgets are always displayed under the course player and not on the overview page, regardless of whether the overview page is active or not.

Best practices

If you are not a graphic designer, follow these simple suggestions:

• Follow your official website's design. Try following the same structure and colors as closely as possible.
• Keep it readable. Double-check the contrast between text/background or logo/background. If you modify the font size, remember that it should be readable on the device of your user.
• Less can be more. If you don’t have a style guide, try to start with the colors of your logo.