HTML & CSS

We have a standard in all of our products that help is surfaced from a question mark icon on the main navigation header. We have long wanted to customize this but ran into limitations on old UI. Curious if anyone else has tried to implement a custom button on the navigation bar or even top header to launch a new page. 

Hello Community!Does someone know how to change this picture? Thanks! 

You’re looking to personalized the courses status badges (not started, in progress, completed)?Below, you'll find a code snippet that you can insert into your Custom Styles 💡:/* *********************************************** *//* Course Status Label Colors - Card, List, Channels *//* *********************************************** *//* Not Started */.ui-badge-status-success,.ui-list-item-status-not_started .ui-badge-status-success { background-color: #020050 !important; color: #ffffff !important;}/* In Progress */.ui-badge-status-neutral,.ui-list-item-status-in_progress .ui-badge-status-neutral,.ui-card-status-in_progress .ui-badge-status-neutral { background-color: #F7681E !important; color: #ffffff !important;}/* Completed */.ui-card-header:has(+ ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral,.ui-list-item-status-completed .ui-badge-status-neutral,.ui-card-status-completed .ui-badge-status-neutral { background-color: #008767 !important; color: #ffffff !i

im looking for a way to limit the amount of posts shown in the activity stream, similar to the QA widget 

When changing text in the localization tool, is it possible to add a bold attribute?  For example, I want to emphasize the word IMPORTANT, but html code does not work.Appreicate any feedback.Regards,Cheryl

Hello, we are re-designing our landing page and wondered if anyone has any CSS code to allow us to make the search bar more prominent?  I have exhausted AI suggestions!Many thanks in advance, Lisa

Hi - I’m looking for some help with customizing a catalog widget I’m using to serve up some learning plans on a page.  I’m trying to reduce the overall vertical height between the “Enroll in Partner Onboarding” title and the green learning plan cards below it - probably by about 10 pixels.   I’ve already the search bar that’s built into the widget and the resource count label with the following CSS:  /* removes the categories filters and search bar from the partner onboarding plan widget */#doc-widget-1621 .ui-data-browser-controls-bar {    display:none !important;}/* removes text showing number of resources in the widget */#doc-widget-1621 .course-catalog-total-count {display: none;} When I inspect the element in the browser console, I’m able to reduce this space by deactivating the padding-top shown here.   I’ve tried several variations of this CSS to duplicate the effect, but without any luck. /* adjusts position of cards in partner onboarding catalog to remove gap between cards and

We’ve found our users often miss the global search at the top of the screen. We would like to duplicate it within a custom page, and our homepage. Could this be done with an HTML widget, CSS, or both together?

So, this has been around for a few years now, but I only recently became aware of it. And I thought I’d spread the word here, because it’s really quite cool and opens up more options for us using custom CSS in Docebo.There’s a lot you can read about this online, but I liked this little run-down: https://gomakethings.com/the-has-css-pseudo-class/A couple of examples where I’ve already found a use-case for this in Docebo:It bugs me that when you self-enroll in a course that requires admin approval, on the course page it shows your status as “Enrolled” with a warning box below that. As far as I’m concerned, no. You are not enrolled yet. But how do I hide that status in this situation without hiding it all the time?Answer:.lrn-widget-content-enrollment-status:has(+.lrn-widget-content-enrollment-description) { display: none;}I have an external page embedded as an iframe. I don’t want the title bar to show up for this particular page; it’s superfluous and unhelpful. Perhaps there’s anothe

Is it possible to change the url you are taken to from the ‘View all’ button? I do not want users to see literally every due dated course they have ever been enrolled on regardless of their completion status. If they have completed the course then I don’t need them to see it linked from a widget supposedly showing expiring courses that they need to complete. So, is it possible to change the url on that button to take them to the same page, but with the filters applied? For example: this - https://docebo.example.domain.name.co.uk/learn/mycourses?mclp0=s-_%22not_started%22_%22in_progress%22~v-%22enrolled_date_desc%22 not this - https://docebo.example.domain.name.co.uk/learn/mycourses

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? 

 Hi, I’m trying to get this menu bar to work. I have this HTML code <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body { font-family: Arial, Helvetica, sans-serif;}.navbar { overflow: hidden; background-color: #333;}.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}.dropdown { float: left; overflow: hidden;}.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0;}.navbar a:hover, .dropdown:hover .dropbtn { background-color: green;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}.

Does anyone have any fun CSS or system settings I’m missing to control the height of this header across the platform (marked by red rectangle in the image)?It really feels like a waste of real estate just for a page title.  

Hello, If we iframe a comslider in as an html widget on our homepage, and a user clicks a link in that comslider, can we make it navigate the whole “master” docebo page? Or do all comslider links have to be “new window” or “in iframe”. Here is an example of where the comslider would go - replacing that “limitless” banner. 

Sooooo, I really need some help, does anyone have any ideas how I can make the Renew certification button more obvious, I am struggling to find the right selector, without impacting the rest of the platform. I only want it to make changes on the course player pages. Getting slowly frustrated with users going I’ve recompleted the course but it hasn’t updated my records. Then I ask did you click the button? and the answer is always no what button!  

The add to calendar button doesn’t work for us. I was hiding it in the old player with this CSS:#doc-layout-action-buttons [aria-label="Calendar"] {display:none;} But I can’t seem to figure out how to do the same thing on the new course player. Does anyone know the class/ID that controls this, and what the aria labels are for the new menu? I want to hide the calendar as well as mark as outdated. Thank you in advance for your help!

We are not using points in gamification, is there a way to hide the “My Points” reference? 

Good day Community!I was curious to know if anyone had come up with code that could hide the point value that appears on badge ribbons. There's some concern in my organization that even if we set the point value to 0 for each badge we create (as we're going for a less competitive approach to badging), users will find it odd to see a line of 0s across their awarded badges. Any insight would be appreciated. Thank you!

When looking at the course cards at the course catalog, I’d like to add a border around the image/thumbnail on the course cards. Another important aspect, is that the colour of the border depends on of it is an ILT class or e-learning. Lets say the border around E-learning cards are red and the ILT ones blue. (As shown from a figma sketch(image underneath this text))I got a code snippet from employees at Docebo, but it didn’t work or change anything. Here’s the code snippet I got: /* Specific border color for E-learning courses (Course codes starting with "EL") *//* Note: Docebo uses dcb-ui-card or ui-card, check your specific platform structure */ [dcb-course-code^="EL"] .ui-card-wrapper, [course-code^="EL"] .ui-card-wrapper {border-color: #FF0000 !important; /* Red border for E-learning */} /* Specific border color for ILT courses (Course codes starting with "ILT") */[dcb-course-code^="ILT"] .ui-card-wrapper, [course-code^="ILT"] .ui-card-wrapper {border-color: #0000FF !important; /*

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?

Hello Everyone! I am attempting to hide this header on all pages.   When I tried the codes below in our STAGE environment, they all worked. When I add them to PROD, they did not work. ----------------------------doc-layout-internal-header {    visibility: hidden;}----------------------------doc-layout-internal-header {    display: none !important;}-----------------------------#doc-page-24 #doc-layout-title-bar { display: none; }----------------------------- Any ideas here? Anything is helpful. :) 

Hello,When a manager goes to enroll their team member into a course (my team → ellipsis Enroll in course), the title of the course appears as white on a white background. You can only see it if you select it or highlight over it... I do not see white font in our Configure Branding & Look section (Colors setting) or CSS settings (only thing for CSS is our homepage setup, widget for page etc.). I know the My Team page is a built-in page… Any ideas on how I can get the words to appear in a darker color without impacting how the homepage looks?   

Have you ever accidentally deleted a training material thumbnail?Adding a training material thumbnail is a great way to customize a learner's experience in your platform, but its really easy to accidentally delete a thumbnail - and when you do it will delete that custom thumbnail everywhere its been applied.While it would be helpful to be able to adjust how easy it is to accidentally delete the training material thumbnail, I've come up with some quick CSS to remove the delete icon from the thumbnail and save folks from the experience of accidentally removing hours and hours worth of work...definitely not speaking from experience.The CSSThis should correctly identify the delete icon on the training material thumbnail and remove the scary red “x” from the thumbnail and let you upload and adjust them in peace./* Hide ‘Red X’ on Training Material thumbnails */.sub-item .deleteicon {display: none !important;}This works for thumbnails assigned through Course Training Material and the Central

Hi Docebo community!We’ve been using Comslider for about five months. Periodically, we get a message that says “UserProjectAccountProblemThe project to be billed is associated with a delinquent billing account.The billing account for the owning project is disabled in state delinquent”. However, we are paid up through the end of the year and are nowhere near our quota for use. The odd thing is that the error seems to crop up about once a month for 24 hours and then self-resolves.I’ve emailed support but not response. Anyone else having this issue? 

Hi there. Does anyone know of a way (CSS or otherwise), to remove the “(required)”, as highlighted in the below image, from every mandatory question in an observation checklist on the Go.Learn App? The fact that it says (required) next to the title and the repeat it again below (in the actual response area) is confusing people. They think they should be able to type in the title area. I’ve tried using the localization tool with no luck. Thanks in advance!