How to Brand Your Docebo E-Learning Platform

Template Management...........................................................................................3 Upload a New logo .................................................................................................3 Customize the Login Page: Image and Layout .......................................................4 Add Sign In Web Pages ..........................................................................................5 Check the Final Outcome .......................................................................................5 Customize the CSS file ...........................................................................................6

Template Management
Docebo allows you to customize your LMS layout in a straightforward way. Thanks to the template manager, you can change the logo and the login page image, as well as the actual layout. In this brief manual well show you how to completely customize the Learning Management System layout, by creating a hypothetical medical project. Weve just created an ad-hoc logo and a main image that fit our target. The easiest way to access the template manager is by using the simplified version of the LMS.

Upload a New logo

You can upload any image you like, and use it as your new LMS logo. Click Choose File, select your favorite image and click Save to apply the changes. Just remember that the maximum logo size is 200 MB. Your new logo will now be shown on the upper-left corner of the E-Learning Platform. You can use the official logo of your company, or maybe just a logo that refers to the specific training project you are about to deploy. In all cases, be sure to choose a logo that is captivating and attractive for you audience.

Customize the Login Page: Image and Layout

Once you have uploaded your logo, you can customize the login page image. Pick an image among the preloaded ones, or upload a new image from your PC. The logo, like the login page image, must be smaller than 200 MB. For best results, we recommend using an image at 900x372 PX resolution. Click Upload File in order to have a preview of the final outcome.

You can also spend a bit of time to customize the actual homepage layout. By doing this, you can move the login box, as well as the description text- you can also assign a Title and a Description to your E-Learning Platform, and translate them into different languages so each user will be able to see the texts in their own language. In order to make the customization process easier, the Docebo E-Learning Platform gives you the opportunity to choose among 3 different pre-loaded homepage layouts. In a click, you can have the login box displayed as a side, top or bottom element. The description text will be placed accordingly to the login box position. Once you are satisfied with the changes you made, confirm them by clicking Save Changes.

Add Sign In Web Pages

Thanks to Sign In Web Pages tool, located in the Admin Area/Settings, you can push your branding customization further. You can use this tool in order to include links, videos, text and photos on your pages, and use them to engage the users, and also to introduce them to your online training project. In order to insert a web page, click Add and use the text editor to fill-in the form with the page name and the information you want to be displayed in the login page. Then click Save Changes. Now you have to activate the page, so it will become visible to your users. This process is quite simple, as you have just to click the flag: a green flag means that the page is visible to your students. If you are managing multiple pages, you can also organize their order of appearance by using the arrow icons.

Check the Final Outcome

As you can see in the example below, we have added a logo, an introductory text and a couple of web pages. We have also customized a page, by including some texts, an e-mail address and a small image.

Customize the CSS file

If you have a basic knowledge about CSS (Cascading Style Sheets) you can customize and brand your LMS layout at a higher level. In order to access the customization panel, click Template Manager under the technical options icon, and then select Customize CSS.

By using the CSS panel you are able to customize each element of the E-Learning Platform: font, size, style and so on. You just have to type-in the element you want to modify, and specify the attributes accordingly.

For example, if you want to remove the Powered by Docebo @ Cloud sentence from the footer, use the following code: .footer .powered by {display:none}.

Keep in mind you always have to save changes before you leave this page. Here you can find some more hints about how to manage your CSS. Type the following codes to obtain the related effects. Hide the Need Help? footer: .navbar-inner {height:53px;}

Customize the Need Help? footer size: .footer .span12 {height:50px;} Customize the menu-bar size: .navbar .nav {font-size:15px;} If you want to cancel a change you have made to your CSS, simply delete the related code/text and save changes. Those examples are just the beginning: By using the CSS you will be able to completely customize your Docebo E-Learning Platform!

www.docebo.com