How to Customize Docebo Branding and Look & Feeldocebo.com/knowledge-base/elearning-branding-layout-logo-manual/

Learn how to to customize the branding and look and feel of your LMS layout.

DOWNLOAD AS PDFPRINT ARTICLE

Docebo allows you to customize your LMS layout in a simple way using Docebo’s Branding and Look & Feel. Youcan change the logo, login page images, and the actual layout of the site as desired.

In this tutorial, we’ll show you how to completely customize the LMS layout and branding. Begin by accessing theAdmin menu (gears icon) from the left sidebar, then click Branding and Look & Feel from the Settings area.

In this section, you will see seven tabs on the left side of the page, dividing the tasks that you can manage in thissection. Let’s take a look at the functions in each tab.

Upload a New Logo

The logo page is the first page displayed in the Look & Feel section. You can upload any image to use as your newLMS logo.

Begin in the first section, Page Title. Use the corresponding text box to type in the title of your Docebo platform. Itwill appear in browser tabs an the top bar on the homepage of your LMS.

Then, move to the Logo section. Press the Choose File button, select your image, then click Save to applyyour changes. Remember, the maximum logo size is 200 MB.

1/14

Your new logo will then appear in the upper-left corner of the platform. You can use the official logo of your companyor an image referring to the specific training project you will deploy. The most important aspect of your logo choice isselecting a logo that is captivating and attractive for your audience.

Next, you can flag the option for a header message to appear underneath your logo. This could be your companyslogan, vision, etc. Simply type the message into text box that will appear after you flag this option. You can edit thetext as necessary.

You can also upload a custom Favicon. This is the icon shown on the browser’s tabs and top bar. Click the Uploadyour favicon button, then select a 16×16 png image from your computer. Then, check the final outcome:

Sign In Page

Once you’ve uploaded your logo, you can customize the sign in page. You will see the Sign In Page tab under theLogo tab on the left side of your screen.

2/14

In order to make the customization process simpler, Docebo provides three different pre-loaded homepage layoutsfrom which you can choose.

In one click, you can have the login box displayed as a side, top, or bottom element. You can also choose a MinimalSign In form, which is explained later in this manual.

By choosing among one of the first three options, you can move the login box as well as the descriptiontext. Additionally, you can add a background image for your login page. Simply select an image from the pre-loadedimage options, or upload a new image from your PC.

The login image, like the logo, must be smaller than 200 MB.

3/14

You can also add a title and text to your homepage, then translate them into different languages so each user will beable to see the texts in his or her own language.

The description text will be placed according to the position of the box position. Once you are satisfied with yourchanges, confirm by clicking Save Changes.

Next, you will see the Web Pages section, where you can push your branding customization further by adding anexternal page in the login area.

This specific tool allows you to add links, videos, text, and photos to your pages. Adding these features leads tofurther user engagement and helps your users familiarize with your content on the platform. To insert a web page,click ADD PAGE.

4/14

Use the text editor to fill in the form with the page name and the information you want to be displayed in the loginpage. When finished, you need to activate the page in order to make it visible to your users. To do this, flag thecheck box and press SAVE.

How to Manage the Minimal Sign In Form

The Minimal Sign In Form feature is only available for the Docebo version 6.8 or higher.

This option allows you to create a very simple login page that displays only the login box along with your choice of animage, video, or blank/colored screen in the background.

5/14

Start by choosing which background you want. You can have a colored background (select the color you want todisplay or insert its HEX code and select SAVE).

Check the final outcome:

You can also have a custom image background. Upload your custom image and select SAVE. Suggested imagedimensions are at least 1280×720 px.

6/14

Check the final outcome:

Finally, you can have a video background (full width). The supported video formats are MP4 and H264. Thesuggested size specifications are 1.5 to 2 MB, bitrate 500 to 800 kbps, resolution 1280×720 px (at least). Uploadyour video and select SAVE. You can also insert a fallback image that will be displayed in case the video is notsupported or not loading properly.

Check the final outcome:

7/14

Layout and Colors

This feature allows you to customize the colors of some of the elements on your platform. You can choose betweenpreloaded colors schemes, for which you can activate, deactivate, or edit.

Additionally, you can create your very own customized color scheme by clicking the New Colors Scheme button atthe top of this tab, then selecting your preferred color palette. As you will see, there’s a preview to show youwhat the platform will look like for each color scheme.

Click Save Changes to create the scheme.

8/14

Customize the CSS file

If you have basic knowledge of CSS, you can customize and brand your LMS layout at a higher level. You will seethe Customize CSS tab under the Layout & Colors Tab in the Branding and Look & Feel section.

By using the CSS panel, you’re able to customize each element of the platform: font, size, style, etc. Just type in theelement you want to modify along with the specific attributes.

Keep in mind that you always need to save changes before you leave this page.

Main Menu Features

You can also customize the platform menu by adding and managing new modules. By doing this, users will only beable to view your selected items in their menus. You can easily show or hide items by clicking on the checkmark icon in the Show column.

Items marked with the green check mark icon will be visible in the user’s menu, and items marked with the graycheck mark icon will be hidden to users.

9/14

You also have the ability to manage who can view the module by pressing the item in the Filter By column in themodule’s row, as shown in the picture below.

You’ll be able to choose among groups and branches. (I.e. You can decide to show the Courses Catalog only to theusers included in a specific group or branch).

How to Add New Items to Users Menu

Add a new module to your LMS menu by selecting the New button at the top of the Main Menu features tab. Forexample, perhaps you want insert a link to an interesting website in the user menu to make easily and quickly

10/14

accessible for your users.

After pressing the New button, select and manage the languages, add a name for the menu item, choose an iconfrom the dropdown menu, then decide if you want users to open this link in the same window or in a new one.

When creating a new menu, you can also flag the Use Advanced SSO URL option. Doing so allows the platform toprovide certain information to the link, enabling the target website to identify the user and allow single sign-on. Thisinformation is encrypted using a secret key that must be inserted identically in both systems.

11/14

If you enable the “Use Advanced SSO URL” option, the system will generate a URL for the selected menu item. ThisURL will contain a digital signature (also called a security hash) that will be used by the target system. This securityhash is used to verify the URL’s authenticity.

This URL verification prevents untrustworthy users from manually accessing the protected page. This is theresponsibility of the target system.

The digital signature (hash) is generated like this:

Generate the “keyed-hash message” (HMAC, https://tools.ietf.org/html/rfc2104) value using the sha1cryptographic algorithm.

Read the timestamp, username and email HTTP GET params and concatenate them (combine themtogether) with the shared secret key in this same order.

Run a Base64 encode of the resulting hash value.

Select SAVE CHANGES to finish. You’ll need to logout and log back into the system in order toview the changes. You can edit or delete the item at anytime.

Check the final outcome:

12/14

Remember, you can change the order of the items by clicking on the Drag & Drop icon and reordering them.

Course Player

You can also customize the course player by choosing a background image and managing the related settings,seen below. Click here to learn more about training material views.

13/14

Docebo White Label

The last option of the Branding, Look, & Feel menu is Docebo White Label. This feature allows you to hideDocebo’s custom branding elements from your Docebo E-Learning Platform.

In order to use this function, you will need to activate the Docebo White Label APP . Click here to learn more aboutthe Docebo White Label APP.

Select the GET THIS APP button to access to the Docebo APPS Marketplace .

14/14