HTML & CSS

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,

We’re currently running some custom code to round the corners of widgets. It’s working for all full-size widgets and one-third sized widgets. However, it’s not working for two-thirds widgets -- I’m trying to upload a two-thirds banner and the sharp corners starkly contrast with all the rounded corners. Here’s the CSS we’re currently using to round the corners:/* Make all widgets border rounded*/.pages-widget-page .single-widget *:not(.title):not(.ui-carousel-title):not(.ui-text-link):not(.ui-card-title):not(.ui-typography-heading-5):not(.subtitle) { border-radius: 10px;}Any thoughts? 

Hi All!We want to put our department email in the footer of the homepage, is there a way to edit or add to the “Powered by Docebo” text that currently exists there? I’m sure CSS is needed to do this, but don’t know where to start, I’m not great with that stuff :/ 

I can’t for the life of me figure out why Not Started tags show as #004e72 background (blue) but In Progress and Completed show as Black. Any ideas? Thanks!   

Hey, Our platform has been very stable for quite a while layout wise, we haven’t had to make any css changes for months. Today however, the layout of our header spontaneously changed without our custom CSS changing.  Is anyone aware of any platform changes that would have caused this?  We have this line in our custom css which USED to push items down below our header, but now it doesn’t seem to do anything.#doc-layout-page-content{    margin-top: 84px!important;} I have done a comparison on an old page that I had loaded, cached with the old layout, and on comparing t

Hi everyone,I am designing a page that has 3 areas on it depending on what a learner wants to do (attend an ILT, sit on demand eLearning or browse resources).  I am wondering if there is a way to hide the search / filter / sort bar so that there’s not a huge gap between the custom image and the courses appearing:Is this even possible?

Hi there, Does anyone know of any CSS that will hide the ‘Score’ field in the ‘Report External Training’ page? Thanks in advance to anyone who takes the time to respond.

I’ve not found any notification settings or alerts that would allow some form of pop-up modal to be utilized as important reminder or announcement notification. The only threads on this I’ve found on this are 1-2 years old. IF there is anything new/updated on the issue would someone please point me in the right direction. I’ve been able to build out a modal that I can link out of, but cannot get the system to accept a build to simply allow the ‘Close’ or ‘X’ to actually remove/hide the modal from the page. Is there a way to hide a widget on a page? I’d be most appreciative of any insight.  <div class="dcbo-modal-wrapper">  <input type="checkbox" id="dcbo-modal-toggle" checked="checked" value="" />  <div class="modal-window">    <div>      <label class="modal-close">Close</label>      <h1>Exciting News!!</h1>      <div>Be sure to check out our upcoming Tips & Tricks sessions!&

Hi There, We have a request to remove the ‘Remove from my Team’ button on the My Team page - The CSS code work is Sandbox - but not production. I have used the code in the Sample 7.0 interface box - remove all other codes - moved it to the top, and nothing. Here is the code: /** This option hides the "remove from team" option from Direct Manager view **/.team-member-card__actions div.ui-button-dropdown-menu.ui-shadow-md ui-button-dropdown-option:nth-child(4){display: none;}/* This option hides the "remove from team" option in My Team on team member sub-pages */doc-layout:has(a[target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" href="/manage/my-team;isTeamMemberPage=true"]) mng-team-member-card ui-button-dropdown-option:nth-child(2){display: none;}

Hello,Has anyone developed a CSS fix to hide the word “Free” in the Harmony search resultsI chatted with Chat Support and there is no setting to turn it off and no localization tag to edit for it. Our organization has all the ecommerce features turned off as our Docebo instance is internal use only. Having ‘Free’ listed for a course cost would be a bit odd for our users. Sadly my CSS skills are limited to copy and pasting other people’s solutions. Thanks in advance for any replies.

This "Chat" button is in the way of selecting the button behind it. Im working in the CLOR and its difficult to manage around it. Can this be moved please. 

In short, does Docebo support declaring your own variables?In my testing, it seems like it doesn’t appear to but I think it could be because I’m declaring them to root instead of a specific section. However, the challenge there is how to figure out which section they should be assigned to in order to function as broadly as possible.

Hello community!  I am looking for CSS code to set up a multi-image carousel or slider.  Does anyone have any sample CSS code for this that you can share?  Your assistance would be greatly appreciated. Thank you.

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 All, Our catalog widgets only display the first line of anything the description field set up in the catalog. To view the entire description, a learner needs to click on the title and then navigate to the full catalog page. Has anyone had any luck with CSS that will force more lines of the catalog description to display in the catalogs widget on a page? It currently cuts off at one line.   Thanks! Chris 

We are using Channels to provide targeted instruction to groups of users. The content in each channel is curated to that specific set of users, with specific job roles and access.  Currently, when a learner is viewing an asset in their assigned channel, there is a “Recommended Next” panel displayed.  And it is showing/recommending assets that are NOT IN THE ASSIGNED CHANNEL. How can I disable this?  I cannot have leaners accessing information that does not apply to them.  For instance, User Guides and tutorials for our Power Users on the platform.  They have different Power User profiles.  I don’t want my Schedulers to be recommended to view the Course Development assets.  It is confusing to the users.  Is there a way to either (1) hide this Recommended Next thing or (2) lock assets to channels so that if you’re not assigned to the channel, the asset isn’t visible in the Recommended panel?Thanks! 

I have created a new page in which I want to include the HTML/WYSIWYG widget.It’s going to be a simple list of headings, text, and links which I spent some time formatting so that the font, size, padding etc looked right. While I was between ‘Composer’ and ‘Desktop Preview’ it all looked how I expected it as I made the amends.However, when I clicked ‘Save changes’ on the page level it had changed the HTML itself which ruined all the formatting that I had written.Granted my HTML knowledge is fairly basic, but is that supposed to happen? It is incredibly frustrating that it breaks when you save it.

Hi folks so I have setup an HTML widget with a flexgrid in it and the elements within seem to be doing the right thing - but the HTML widget container puts a scrollbar along the side instead of resizing when I adjust the browser window size.This is what it looks like at full-screen:Not too shabby.But when I pucker the browser window, I cant get the container to scale and so it puts a scrollbar along the side of it…so I land up with something like this.Flex-grid is flexing but the widget isn’tIf you can pass along any advice I would appreciate it.Here is the css snippet:/* Scope everything to j

Hi all, Complete CSS beginner over here but I’m loving reading all the posts about how to customise your platform using CSS. I’ve rounded all the edges of our widgets which looks awesome and now I’m looking for how I can round the edges of the course icons (screenshot of what I mean attached)?! I know it’s possible but I can’t quite work out how to do it. Could someone help?  ThanksSarah

A change to the player sometime ago has left the size of the box containing our Survey too narrow to display all the options on our Likert Scale. This leads to distortion of our scores when learners fail to scroll to the right to find the highest level.  The survey doesn’t need the vast white space around it….We’ve been told that CSS coding can reduce the white space around it or expand the box size.  We haven’t been able to find the solution yet. Do any of our CSS coding experts have an idea?

Hi there,I’m having a real challenge with redesigning my pages using custom HTML and CSS (I am NOT a designer, and do not pretend to be in any way). I am struggling to say the least. We want more flexibility in the design and layout of the pages in our system that the widgets don’t seem capable of providing. Any ideas on how I can bring the ideas to life that we want? I feel like I am banging my head against the wall!!!

Hey there, Does anyone else have the issue where having a background image removes table borders when creating certificates? How can I make the border visible while still having a background image? Thanks!

I want to be able to configure and change the appearance of Channels with CSS. Since it is not a page, what do I need to do? Is there an article I can read?

Hello! Is there a way to hide the “asset uploaded by” field within channels, using CSS? If so, can it apply globally, and/or to just to specific domains within Extended Enterprise? The rationale is that we use channels for content presentation and functionality, but the uploaders are not considered to be experts/contacts for the content.Example: I’d like to hide the names of all uploaders from all assets, such as this one: 

Hi Docebo Community/ ​@Lena ​@lrnlab ​@nick.tosto - Does anyone know if these course thumbnails can be completely removed using CSS?Appreciate your help!