DISCLAIMER: Some content in this article shows details only available with the new course page. As a Superadmin, you can activate the preview of the new course page for your user only, test it, and then activate it for all users. Learn more on the transition to the new course page.

Introduction

The look and feel 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, look & feel of your desktop platform. Learn more about the configuration for mobile devices.

Learn More on DoceboU

Want to learn more about customizing the layout of your platform? Have a look at the dedicated course, Configuring the Platform Branding, Look, and Feel (opens in a new tab) on Docebo U!

Accessing Your Look & Feel Settings

To reach the look & feel management area of your platform, access the Admin Menu from the gear icon in the top right corner of your platform, then press the Configure Branding and Look button in the Settings section. The page shows the Desktop tab by default. Go through each section of the configuration page to customize the theme as desired.

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 flag 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 simply 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.

 Here are some 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.

Course Starting View

Please Note! This section is not available if you have activated the new course page.

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 courses.

The overview page is shown to learners when they select a course, before the course player page. When the overview page is active, all the course widgets are displayed on this page instead of the course player page, and the course content is moved to the Content tab. This configuration may help learners to focus on the course content, leaving all additional information on a separate page.

The overview page is optional for e-learning courses, while it is mandatory for ILT (Instructor-Led Training) courses. This means that the course overview page will be displayed for ILT courses, regardless of which option you select in this section. 

Table of Contents Visibility

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

The table of content visibility  is also managed directly by learners by using the panel button on the course player page and by taking advantage of one of the following options:

• Full visibility: the table of content is fully displayed on the right of the course player
• Flat visibility: the table of contents is shown below the course player.
• Compact visibility: the table of contents only displays the icons of the training material composing the course, on the right. This visibility mode is not available when the training materials are arranged in folders or when they include multi-chapter content.

Background Image

In the 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.

Lightbox Navigation

Use the toggle in this area to set whether to show or disable the navigation buttons for any training material played in the lightbox view mode.

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 Catalog Page

Please Note! This section is only available if you have activated the new course page.

The Course Catalog 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.

Best Practices

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

• Follow your official website's look and feel. 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.