HTML & CSS

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! 

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

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, 

I just got this message from a manager trying to understand.So, for example, xxxx and xxxx need to log into the learning center and complete NH Training even though they show as Looks Good?What do I tell the person??? They are right.So a question for you - does anyone know if you can hide the KPI “Looks Good” tag via CSS? Because the training is given a deadline? Albeit a soft-deadline - and the KPI tag isnt helping - it is confusing people on my end. 

Anyone catch the CSS needed to adjust the color of the profile widget?

Hello, I have used a GIF instead of an image on a widget but i dont know how to remove the white space at the bottom and also the scroll panel at the side. I have tried resizing but no luck, any ideas?  

We are trying to reduce the number of START buttons and this particular pop up it just an additional click we don’t need.   I’ve been digging on the HTML/CSS pages but haven’t quite found any code that shows how to eliminate/block this pop up.   Our external users don’t care about their “learner activity”  they just want to register and start a course.   So it would be a huge win if there were code to block this box. 

I’m running into a spot of bother with some custom CSS. All I want to do is replace the default Open Sans with a different web font. The CSS itself is fine (it’s managing to replace Open Sans with my fallback font, Arial). However, where the preferred web font is concerned, I’m running into issues with CORS:"Access to font at 'https://example.com/font.woff2' from origin 'https://example.docebosaas.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."I’ve seen posts here illustrating that you can host images in Docebo (tried uploading the woff2 file as an image; it was unsurprisingly rejected as invalid). I also tried uploading it as a file (as part of a course’s training materials); that seemed to be working, but then it said: File does not e