Configuring the Look & Feel of your Platform

Set the look and feel of your platform using themes.

Last Updated

January 31st, 2019

Reading Time

8 min

Version

User Level

Introduction & End of Life Notice

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

If you activated your learning platform on or after October 16, 2018, you are only able to customize a certain set of elements (the Docebo 7.0 theme). This is the latest Docebo theme, so your learners will see the most up-to-date interface and functionalities. If you activated your learning platform before October 16, 2018, you currently have the possibility to use either the 6.9 theme or 7.0 theme, but it is strongly recommended to use the 7.0 theme.

Please note: The 6.9 theme will be deprecated in the near future. If you’re still using this theme, it is strongly advised to begin your migration to the 7.0 theme, which has the most up-to-date interface and functionalities to enhance your platform’s learning experience. For questions regarding your migration, contact your Customer Success Manager or the Help Desk from your platform’s Communication Center, and check back soon for a migration guide.

Also note that if you are currently using the 6.9 theme and you switch to the 7.0 theme, you will not be able to switch back to the 6.9 theme. If you are wanting to view the 7.0 theme before activating it, please use Preview mode.

For the purposes of this article, we outline how to configure the elements included in the 7.0 theme.

Accessing Your Look & Feel Settings

If you activated your platform on or after October 16, 2018

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.

If you activated your platform before October 16, 2018

To reach the themes area of your platform, access the Admin Menu from the gear icon in the top right corner of your platform, then press the Manage Themes item at the top. On this page, you will see two themes: Docebo 6.9 and Docebo 7.0. The Docebo 6.9 theme is the old Docebo 6.9 interface, while the Docebo 7.0 theme is the interface released with Docebo 7.0 and any following releases.

To activate a theme, press the Activate button in the theme’s tile. Please note that the Manage Themes section will not appear if Theme 7.0 is already activated in your platform. To customize a theme, press the gear icon in the theme’s tile. Configurations that are made to a theme will only be applied if the theme is set as the active theme in your platform. Go through each section of the configuration page to customize the theme as desired.

Customizing Headers

In the Header section, you can customize the LMS 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 multilanguage selector tool, which is accessible from the globe icon in the top right corner of the section. Refer to this article to learn more about using this 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 LMS. 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 in 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.

themes header

In the Logo section, press the Choose File button to select an image for logo. The maximum logo size is 200 MB. 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 image from your computer.

Customizing the Sign In Page

In the Sign In Page section, flag whether you want to display the signin form or display the public courses catalog page. In the Sign In Page Background section, flag 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 the Upload your Image button. Suggested image dimensions are at least 1280×720 px. If you want to delete the image, select the red trash can icon.

themes sign in

If you flag the option to add a full width background video, press the Upload your Video button. The supported video formats are MP4 and H264. The suggested size specifications are 1.5 to 2 MB, bitrate 500 to 800 kbps, resolution 1280×720 px (at least). 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 LMS login form and show only the SSO buttons for login (Gmail, OKTA, LinkedIn, etc). Please note that you should have your SSO integration properly configured and tested before flagging this option.

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.

themes colors

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

Custom Styles

If you have basic knowledge of CSS, you can customize your LMS layout at a higher level. By using the CSS text boxes in this section, you’re able to customize each element of the platform: font, size, style, etc. Just type in the element you want to modify along with the specific attributes. For those using and managing the 7.0 theme, you can access the custom CSS for both the 6.9 and 7.0 theme in the 7.0 theme settings without having to switch to theme 6.9 to edit the 6.9 CSS. To see a sample of the differences between a 6.9 and 7.0 interface, use the linked reference in the top right corner of each text box.

themes css

You can use this area to have full access to all CSS for the platform. Before to start, please adhere the following suggestions:

  • Save your current settings in a document or a file, so you can easily get them later, if needed.
  • 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.

Please note: Your customized CSS in your platform 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 global course player settings. Please note that any settings configured in this section will be applied as the default settings for all courses, but you can specific local course player settings for individual courses in a course’s Advanced Settings menu, or while editing training materials.

In the first section, flag whether you want to globally activate the course pre-page (overview page) for all courses. The overview page can be for all three course types: E-Learning, ILT Classroom, and Webinar. While it is optional for E-Learning courses, it is mandatory for ILT Classroom and Webinar courses. This means that the course pre-page will appear for ILT Classroom and Webinar courses, regardless of which option you flag in this section.

themes course player

Then, flag whether you want the table of contents panel to be displayed by default when a user enters the course player page. The table of the contents display can be managed directly by the learner by using the panel button on the course player page. In the Background Image section, you can upload an image that will display as the background of the course player. After uploading an image, flag 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.

Then, use the toggle to decide whether to show or disable the navigation buttons for any training material played in the lightbox view mode. Please note that this only applies to the 7.0 theme. You can also set this option locally for specific courses in a course’s Advanced Settings area.

Finally, you can add custom CSS for your HTML Page learning objects. In this section, you can copy and paste your CSS classes. It will be automatically applied to all of your HTML Page training material.

Customizing Tiles

In the Tiles section, you can flag which size ratio that you want to give to your asset and course thumbnails. For those using the new Docebo interface (7.0 theme), the default size for your thumbnails will be rectangular.

look & feel tiles

Please Note: Square thumbnails only apply for catalogs and the My Courses and Learning Plan page. This means that square thumbnails will only appear in those platform pages, but they will be rectangular on every other page of the platform. Keep in mind that the option to select square thumbnails will be removed on the same date as the set End of Life date for the 6.9 theme which is scheduled for July 2019. For best practice purposes, it is suggested to use rectangular thumbnails. If you are currently using square thumbnails, please begin switching out your thumbnails to the rectangular versions.

Previewing Themes

The Docebo 7.0 theme can be previewed before you activate it in your platform. On the theme’s tile in the Manage Themes page, press the Preview item. Once you’re in preview mode, you will see the previewed theme in action on your platform. Other users will not see the previewed theme, but only the currently active theme.

The preview bar at the top allows you to exit preview mode or apply the theme to your platform. Once you’ve activated the theme, all users in the platform will see the new interface.

Managing Themes for Multidomain Clients

For those using Docebo’s multidomain functionality, you can assign specific themes to specific multidomain clients. When creating a new client or editing an existing client, select which theme to apply to the client from the dropdown menu in the pop up box.

themes multidomain

All customization options for clients using the Docebo 6.9 theme will be found in that client’s settings page. For multidomain clients using Docebo 7.0, all of these settings will now be found in the theme’s customization page. A theme can have variants, meaning that several multidomain clients can use the same theme while applying their own specific branding to the theme.

To change the theme of an existing multidomain client, access the admin menu, then press the Manage item in the Multidomain section. In the list of clients on the management page, press the edit icon in the client’s row. In the pop up box, select a theme from the corresponding drop-down menu.

Best practices and Tips

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 close as possible.

– Keep it readable. Double check the contrast between text/background or logo/background. If you modify the font-size, remember that should be readable on the device of your user.

– Less can be more. If you don’t have any style guide, try to start from the colors of your logo.

– Preview the theme before going live. Check your final results, and consider asking others in your company about their learning experience based on your changes.