HTML & CSS

Hello,Has anyone had any luck withdisplay: none;on either of these two elements on the new course player?Can’t get anything to stick - thanks

Hi! How do I remove or make transparent the overlay in the course player? I have tried all sorts of nonsense. I put this code in the Configure Branding and Look > Course Player area:.lrn-course-player-training-material-idle-view-overlay {    background-color: #ffffff;    opacity: 0;}Doesn’t work. 😪 Please help! 

The table cells do not show up when you are actually taken the test?  Is there anyway to have the table cells show? This is now it displays when taking the assessment 

Hi community!Has anyone managed to changed the border colour (on hover) for the course icons? Thank you!

hi, I am trying to add an interactive reaction buttons html widget to my LMS homepage. when I test the code on an external platform, it seems to work fine, but when I try to add this to an HTML widget, for some reason the buttons are not visible, and the html code I am adding in the widget configuration settings, disappears. is there any additional configuration I need to do here?would appreciate any help, thanks! 

Hi,we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..I tried to do this with CSS but then I have an empty spot on the list I used the following CSS Code:#doc-page-97 .ui-card-status-done {display: none !important;}We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).Does anybody have an idea how we can hide completed courses from the channel widget?

Here’s some CSS that will adjust the new course player to “light mode” if you don’t like the default look and feel. Insert the following into the CSS editor:/* Light Theme */lrn-course-player-play-area { --ui-color-layout-contrast: rgba(255, 255, 255, 1); --ui-color-typography-negative: rgba(33, 39, 33, 1); --ui-color-border-accessibility-default: rgba(228, 230, 229, 1); --ui-color-layout-overlay-dark: rgba(255, 255, 255, 1);}lrn-training-material-header,.lrn-course-player-table-of-contents-header,.lrn-course-player-training-material-idle-view-content { --ui-color-icon-negative: rgb(73, 43, 43); --ui-color-icon-neutral: rgba(255, 255, 255, 1);}lrn-training-material-header button,.lrn-course-player-table-of-contents-header button,dcb-ui-list-item-training-material-content,.lrn-course-player-training-material-idle-view-content { -

Hello, So I had a client ask me if there was another way to create a “2nd” sign in button on the Sign in page. In this client’s use case they want to quickly point learners who were external to use the Extended Enterprise if they accidentally arrived at the main parent platform page. Please see the Look of the Sign and Page, the header I created, and the CSS I use to style the Sign in Button which is a link to Extended Enterprise.   CSS Used:/*Use to Edit Header Sign in Button Me

Can anyone share any CSS wizardry to hide the Completion Status box in the ILT player? It’s irrelevant in my situation.  

Hey everyone,I’m wondering if anyone here uses iframes and if you do, where do you host external files?Currently we have a rotating carousel image banners, with the images being hosted from another server. I was thinking if there are options or workaround for hosting the files within Docebo rather than pulling the urls from another server?

Can someone help me with inline CSS?Most of the style tags just get deleted once I save the HTML training material and I’m a little desperate already. We are offering some pictures to download on our LMS through HTML pages. We show the pictures with a hover effect. When you click on the picture it opens in a new tab where you can download it. On the browser everything is working fine, since I can use custom CSS. However, this custom CSS is not working on the Go.Learn App (only the design).This is how it looks on my browser:This is how it looks on the App: So my problem is that I tried to use some inline CSS to make them look a bit better on the smartphone app (I don

Hello.  We are new to using CSS and started by having the Global search removed and then following a previous community post to remove Groups from a users summary statistics tab. We would like the following purple outlined fields removed/ hidden from view, as well. The image below is a managers view of the user summary report.Any help and advice is greatly appreciated. 

Hi Community,I have a Power Automate workflow that sends a calendar invitation when a user is enrolled into a session.Whatever I write in the session description, will be reflected in the body of the calendar invitation.So what we do is ahref the teams meeting link.The issue, however, is that for some reason it duplicates the links.@Docebo support say “they dont support html” but in this case I believe this is a system flaw.What do you guys think? any ideas?Screenshot of double link attached. 

Howdy all,Hoping the CSS gurus among you can provide assistance for the below (seemingly simple) CSS tweaks to the public catalog page (pre-SSO): Change the background colour of the page. Have achieved this for the post SSO home page by targeting page ID #. However, this does not appear to work for the public page, what am I missing here?#doc-page-catalog {      background-color: #000000;} Reduce the height of the header image by half. Simply uploading an image with reduced height px does not achieve this. The below code variations are also not working. Any ideas?#doc-page-catalog > div > intro.text-white {    height: 150px !important;} Any assistance greatly appreciated. 

 A few colleagues and I have an ongoing joke that one of us will throw out an idea late in the afternoon on a Friday, and normally it would go nowhere, but there is something special about that magic hour before taking a weekend break, not only do we tend to come up with a  solution, but it is usually ready for Monday! These could be small quality of life improvements, style adds, complex automations, or anything in between. I thought it might be nice to start documenting and sharing some of these that are applicable to other organizations.First up, last week I was on the phone with a colleague at a different organization and she was working on making some department and instructor pages. She was lamenting on how it just felt static and stale. After sending some screenshots of what it currently was, it was basically 2-5 people, with a headshot, name, and a link, and then a widget underneath with a broader description and information for the group, something like the be

Hi everyone!We've been given guidance by our Marketing and Design team on some pointers on the top Nav. One of the things which they want to see is - the Nav header remaining highlighted based on the page we are on aka an Active nav link indicator for every page. For example - If I am to navigate to the 'Home' page the Top Nav should highlight the 'Home' button on the Nav. Proposed lookUpon further research I have seen that an Active nav link indicator can only be added via JavaScript which Docebo Learn does not support at the moment.Is there any roundabout way to do this with only the help of CSS? Would really appreciate insights on this problem, thanks!

Hi! I'm looking for general assistance with HTML and CSS. My company is planning a learning center cleanup, and we'd like to be able to construct a drop down menu at the top of our site. We are trying to use the code in: Creating a Horizontal Navigation Menu for Novices | Community (docebo.com). The difficulty is that I'm not clear where the HTML and CSS information should go. I'm using an HTML widget at the top of our page, but when we save the HTML and CSS to the widget, we get this:Can somebody tell us where we need to enter

Hi there,In the new course player, is there a way to hide the Learning Plan ID in the box ‘Learning Plan Details’?Thank you!

Greetings~I can’t find any info on this. My Power users can see this under their user management. What is manage team requests? Where would someone put in a request that would appear here? More importantly, how can I hide this? Thank you!  

Based upon user feedback, we are trying to add a hyperlink to text within the banner on our public page to direct people to the sign in page. (For whatever reason our users are not seeing the bright sign in button in the top right corner where all other log-in buttons on all other websites always are).Using the suggestion I found through Add/edit hyperlinks on Sign In page | Community (docebo.com) I translated the text to add hyperlinks.  But all it is doing is verbatim adding that text on the banner:

Hi all, I’m hoping the CSS geniuses in the audience here can help me with this one. We are switching from an Auth0 to SSO and OpenID login process in phases, and I need to relabel the button to make it crystal clear to our learners which one they need to click on depending on their role. Here is our login page with the new Open ID button turned on (our field and corporate users have been using only Auth0 up until now):  Our IT team was assured by Docebo’s IT team that it is possible to “reskin” the button using CSS but don’t have an established process as to how so they pointed me here to the Community. How can I achieve this? I have only a baseline knowledge of CSS and don’t know where to start.

Hello,Does anyone know the CSS code for changing the shape of buttons to an elliptical shape??I want them to be like that:Thanks in advance,Inessa

Hi all, we want to move the SSO login button futher up, so users get to see this first rather than the login (which they don’t use)….. We can’t turn off/hide the login buttons as others have suggested otherwise we wouldn't have access (security).  Does anyone have any CSS code we could take a look at please? 

Hello There,I need to make the registered trademark info ® appear in superscript on my course title instead of big horsey block letters. Can someone assist?Thank You

I would like remove the button “enroll” and “syllabus” from a course page. (like the screenshot below)Before the new course player, we used a CSS code to remove that but now it doesn’t work anymore. The course is an e-learning that we have adapted like a “window” of our training. The objective is to have a showcase of the learning plan by showing only the description of the course and that learners cannot enroll for it. (Because this is the manager who enrolls in our process) Does anyone know what CSS code we should use?Thank you in advance for your help,