HTML & CSS

Hello, Community! We’re new to Docebo (we just finished our onboarding!) and fairly new to CSS as well.I’d like to add a label to the “three-dots” icon at the top of the course page (or any page) so that people know it is a “More Options” menu. Our people seem to be “missing” that this icon is there.During onboarding, our rep provided the following code to add a label to our Admin gear:#doc-layout-internal-header > nav > div.internal-header-navigation-group.

Hi everyone,I’ve been passed here by the helpdesk because evidently, standard <td> and <tr> table HTML tags are not supported by Docebo, even though there is a table tool in the Course Description editor for certain types of learning objects in the Central Repository:Table tool in the Description editorI built a small presentation to supplement a video in my course, and that includes a simple table with text and images. In the editing preview, it looks just like I want, and Docebo’s own tool provided the standard table tags to build it:Sample of the Docebo-generated table code

Hi, we would like to show the user’s name on each page/tab of the user personal summary. Currently the name only appears on the Statistics page, but we’d like to have it appear on the other pages. Has anyone created CSS code to do this? 

Hello, Working on some designs for our homepage and two of them use the For attribute to function. However, it seems as though as soon as we add the code to the HTML widget, all instances of the For attribute are removed by the system automatically. Has anyone seen this before? Any workarounds? Thanks - 

Hello!  I recently learned about inserting a rotating banner using Google Slides to our home page. An easy enough process and I have it 95% done. I have the HTML code and am inserting the code as an HTML widget. It works perfectly fine, but I do notice that it has the “Google Slides” bar at the bottom of it, almost like it is doing a presentation. Does anyone know how to remove this bar? I’ve looked at several threads that also use Slides to HTML banners, but haven’t found anything. 

Hi CSS experts,Is there a way to change the color of the Star icon?Thanks for your help! 

Hi all,We have our LMS platform built and looking how we want using CSS but now we want to have an additional homepage for another customer to view tailored content and when we duplicate the original homepage it appears as though the CSS from the default hompage isn’t pulling through to the newly created one and elements of the page are different.  What do we need to tweak CSS wise to get consistancy throughout the pages?  I have tried looking at the IDs of the boxes etc without success.This is the default homepage...One created in sandbox for the group… So the main box has lost the formatting of the font and colour and the small blue box

Has anyone figured out a way to customize the columns on the learning paths page. Ours currently looks like this   And I would really like to extend the name column so we can see the name. I found a page that has the CSS tags for the course management page but not for learning paths. Does anyone have any experience with the CSS for learning paths ?  

We use email notifications to send training plans to our users. In the last 2 weeks email notifications that we have been set up using Source Codes are not being sent from the platform.Has something changed to where notifications only work using HTML text? Is anyone else having this issue? I’ve recreated a few of our notifications removing the Source code and only using the Short Codes provided and it seems to work. However, we use the source code due to the branding and clean look that it provides. 

Hello again CSS gurusFollowing my previous question, I was also able to change LO completion iconsBut when displaying my LP courses (by clicking on a LP details)… I would like also to match my icon colorsAny hint ?Thank you

Has anyone had success adding a sticky left navigation? I’ve been gazing adoringly at Tiktok Academy’s version, but I only seem to be able to find HTML/CSS for horizontal nav. I’d love any tips if you have them! 

Is there a way to give a contractor access to build out an HTML page without making them a SuperAdmin  thus giving them access to my entire platform.  

Hello!Does anyone know how to change the text on the Play button in a Learning Plan? We would like to change the text on the button that takes you to the courses in the Learning Plan from “Play” to “Enroll” but I am having some trouble. I can change it on the page itself by using the following: <div class="ui-button-outlined-content visible"><!---->Enroll<!----><!----></div> However, when I go to Configure Branding and Look, enter this into the CSS section under Custom Styles, and hit save, there is no change to the Learning Plans when I go back to them. This is very new to me so any help is appreciated!

 Hello, our organization is a big fan of using catalogs and assigning views as needed. For many cases, we may leave a catalog open to all users - but share the link to those who need to access it. As it stands- the advanced settings for catalogs is set on ‘hide.’ Making it hide the internal catalog. We also have a custom built homepage, with a widget for catalogs. This widget only displays certain catalogs that are publicly availble. Today as I was setting up an unlisted but public catalog - I realized in my test account that users are able to click ‘course catalog’ - which redirects them to the full internal catalog. This encompasses the catalogs that we would like to be unlisted but public, and only visible by linking. I have tried to delete or edit the ‘course catalog’ built in page but it cannot be done. I would appreciate any insight into keeping users from having the option and or clicking ‘course catalog’ and being taken to the full catalog.

I understand the usefulness of tags for search. However once a learner arrives at a video, the need to show the tags is not important. Is it possible to hide the tags?

Is there a way to export our Custom Styles CSS? I know we should back it up regularly, so I was wondering if there was a way to run a report on it so we could have it export on a regular basis. How is everyone keeping theirs backed up? Saving a copy each time something is changed?

Good Morning!My organization is currently implementing Docebo Learn and we are trying to work with the UI/UX to create some custom catalog pages.  Specifically, we have a page on which we’ll have buttons for access to titles by category (image #1). The challenge comes in whether we can create the effect of the white back drop and course listing appear when clicking on one of the topic buttons (image #1).Since we are so new to the application I was hoping there was an expert here who could share whether they think we can make this work and how we might approach it.  I have two excellent designers who code in HTML/CSS but we didn’t want to go too far down the rabbit hole if this simply isn’t functionality that could be supported.Would anyone be able to share their thoughts on if this is something we can get working in our portal?Thank you so much!Michelle

Why This Post?It seems the flip tile has made a resurgence in popularity of late and having been asked about how to rotate something and defaulting to the Z-axis which was not the desired effect but rather to rotate along the Y-axis - I decided to spend a little time playing with this and offer some code.Also because a common question I have seen is how to get the code from the Docebo Inspire session a couple years ago. My hope is that this post will help make the process of implementing some flip tiles in your platforms a little bit easier by finding it here directly without downloading and digging it out of another document.Lets start with the end result of my playing around. I made four tiles that were slightly different.**NOTE**These are tiles which are all placed inside of an HTML/WYSIWYG widget.These are not widgets themselves that are flipping.

Ok! you guys are just great at helping I am a jack of all master of none. I do everything from ID, to graphics, to LMS, to video editing, so CSS HTML is a jack not expert trade for me.I am trying to design a new page. I really liked the hover on the map kind of example Docebo put out on the guides, but I couldn’t get it to work without a white background and scrollbar.I moved to the custom flipcard and added those *somewhat* successfully. I don’t love the background color, etc.I am down to just trying to create a HTML widget that takes you to a course because I do not have Coaching or Assets. (It is also not my favorite, I would rather have just a list of downloadable files) If I could JUST get rid of that padding on the image, I could be satisfied but not happy with what I’ve done so far.Here is my CSS and my HTML for the Handy Tools/Course link widget (I gave up on the hover effect on this one): //HandT_image 

Hi! Tell me please if I can change the name of the button “SAML SSO” in this login window, I didn't find such an option in the settingsI need the button to be called differently for internal and external customers but have redirect on the same link.Also, I need to change the link under the Register button. Please tell me how I can do this?Thanks!

Hi! I’m not too bad with CSS but I can’t figure out the code to enlarge the logo and the header that contains it. I have inspected the code and tried various things, but no luck, Can someone help me? Thanks!

Hi.  I have a few questions re: the use of channels.First, is it possible to place a channel I’ve created inside the HTML/WYSWYG widget? If so, how is that done?Second, is it possible to change the height and width of a channel widget? Thanks,Emily

Hi thereIs there a way to manipulate the background color of the ”task list” and the “activity overview” widgets via costum css? I changed the thunps up picture, but the white background does not match the rest of the design.Best Regards

Hey! We are trying to change the colours of our Progress wheels on the user summary page. At the moment the inner colours wheel and text sit as red, the middle is light blue and the outer is red. We would like it to be red outer ring, yellow/orange middle ring, and green inner ring. We have tried using the CSS in the pic attachedbut when editing the HEX codes and colours names it doesn't work. Does anyone know how to fix this? 

HiI read else where that the CSS code below would remove the “Change Password” for Super Admin.  I have plugged this in but it removes it for users only. Does anyone have code to remove the “change password” for super admin?  Or does it matter? /*hide the “Change Password” section the “My Profile” page*/#vertical-tab-changePassword { display: none; }