HTML & CSS

I am looking for help locating the ID of rows within custom content pages to apply a background colour to a row area within a custom widget page, similar to the new look in Docebo University.

I have a custom public page that uses HTML and custom CSS to act as a home page and hides the catalog page and the links in the navigation bar.When I turn on the new Admin Navigation, it “un-hides” those links and “un-hides” the catalog page.I am sure it’s just a piece of code somewhere, but I am not sure where. 

I’m looking for help with CSS to hide the course score on the course landing page after completion of a specific course. Any help would be greatly appreciated!  

We’re currently getting a lot of user queries regarding switching/ unenrolling from ILT sessions due to those options being hidden in a menu right out of the way. I was hoping to use the Header Message to highlight a resource showing people how to switch sessions as a way of reducing this. However, the header message itself is completely unformatted with no way to do so in the settings. I tried editing it with CSS but nothing I try seems to work.Here’s where I got to: app-layout-header-message { background-color: #a11fff; color: #ffffff; padding: 10px 20px; text-align: center;}Has anyone managed to do this successfully?

Hi,I’m wanting to hide the  “invite to watch” circle button from channels as well as the ‘invite to watch’ button from the drop down list.Or does anyone know the CSS code to hide them?I found a couple of questions similar but there CSS isnt working ☹️Many thanks! 

I changed the colour on the UI status badge (One colour for not started, in progress and completed). Like shown on the picture underneath with the badge for in progress: It did change to the colours that I wanted, but not on the icons: I tried to change the colour, but with no luck. Anyone who knows how to change the colour on icon only within the UI bagdes? Underneath is the code I used a from another community thread (with some additional css added) to add new colour to the badges: /* *********************************************** *//* 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: #FAE4E2 !important;border: solid 1px #666666;color: #333333 !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 {backg

Hello Community members!I'd like to share one of my favorite code snippets with you, which can enhance the learning experience with a modern touch. By incorporating the code below, you can turn your widgets into rounded objects, similar to buttons, giving your platform a more contemporary look and feel."/* ****************** *//* Rounded Experience *//* ****************** *//* Sign-in pop-up window block */.external-simple-content { border-radius: 20px; overflow: hidden; z-index: 1; /* To ensure it stacks above the background */}/* Sign-in pop-up window */.external-simple-signin.ng-star-inserted,/* Cards in Built-in pages (e.g. My catalogs, My Courses and Learning Plans, etc) */.ui-card-wrapper,/* Course Panel Thumbnails within Learning Plans */.ui-card-header,/* Enrollment Types badges (e.g. Mandatory, optional, etc) */.lmn-badge-status-theme-info,/* Locked courses */dcb-sh-content-thumbnail { border-radius: 10px !important; overflow: hidden; /* ensures content respects the round

Ever wanted to hide all Page titles ? It’s super easy with custom CSS!  To hide all page titles on your platform, simply add the following code:/* Hide Page Title and Description*/#doc-layout-title-bar {  display: none !important;} Result below: Hope that helps! Similar articles:Change the course status color Make your widget with rounded corners Enhance the new calendar widget Hide the language code on courses cards 

Hi everyone,I'm curious to hear how heavily you are all relying on the HTML Training Material type in your current platform setups.With the platform's native features and widgets constantly evolving, I'm wondering if its primary use cases are shifting for the broader community.What are your main use cases for HTML training materials today? Are you using them heavily for structural course design and custom formatting, or mostly just as an iframe wrapper for external content?Would love to hear about some creative ways you're using it!

This post is meant to be an attempt at helping folks implement a slider type of widget with images that cycle through in an endless loop. No interaction. Down the road, I will offer one that has some manual selection to it. That is why this is titled as option 1.There has indeed been a number of postings referencing Comslider as a great resource for this sort of thing. I have not used it personally but I would venture a guess that it is much nicer and simpler than what I am about to offer here but this is free - so I guess you get what you pay for - LOL. At any rate - I figure that for some folks - Comslider may not be an option. If that is the case - you have one here.This is a CSS and HTML option - no JavaScript. This would still require some work on your part to tweak it for your number of images and to put in your image URLs - etc. I will try to help with that part as best I can.Here is a quick look at the one I built as a sample. Sorry it is a little small and blurry but I had to

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. 

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.