HTML & CSS

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!

Hi all,Can someone please help with the lesson success message?We used to have the red icon and animation line in green.It stopped working. I tried so many things and nothing worked.Anyone was able to change it and can share?Our main color in red, that’s why Docebo is using it...but I need to change itThanks,Ziv 

Hi everyone,Where we cannot configure the names related to the task widget, I was wondering if there was a way via CSS to adjust the title of one.For example, there is a new overdue and expired list. We want to rename it to just overdue.Is there a way to:adjust the title to something else via CSS (like do a replace) remove the titles all together from the widget.We can use the “row title container” to name the tile a bit more appropriately.So if you have gone down this rabbit hole in the past and have come back up with a rabbit, I would love to save a cycle of research on it. Let me/us know!

i was trying to make custom button to launch course in fullscreen mode but it does not seem to work at all. First of all dcbo-course-player always displaying a course no matter i set showpreview = false. Second issue the dcbo-course-player does not respond to any event i send to it. I have send many event to widget, it replies to me but does nothing.[DEBUG] [CommandBus] Sending command 'go_fullscreen' to 'widget123'SDKKernel-v1-latest.bundle.min.js:1[DEBUG] [CommandBus] Got reply data: {"fullscreen":false} for command 'go_fullscreen' sent to 'widget123'

Anyone know how to get rid of the “Optional Courses” section in the learning plan player? We have no optional courses so this is pointless. I also would like to get rid of the time counter as it is not accurate and is causing confusion.  

Hi, I have been trying all sorts of CSS to force expand the folders in a syllabus. No luck. I have tried many versions but similar to this:  .ui-accordion-panel-header[aria-expanded="true"] + .ui-accordion-panel-divider + .ui-accordion-panel-content-wrapper{ height: auto !important; max-height: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; transition: none !important;}Does anyone have the trick? I want all the folders expanded showing all the sub-content in the syllabus. Thank you!Mark

 Guide to Using the Docebo HTML and CSS BotAt Docebo Inspire 2024 in Dallas, Patrick Morales and I shared a custom GPT that we built as part of our talk: “Building Custom Widgets with ChatGPT”. For those that weren’t able to attend, I wanted to share some more details about how the custom GPT works. If you just want to jump right in, here’s the link to the Docebo HTML and CSS Assistant custom GPT. Important Notice:I hope you’ll find this tool to be helpful and valuable. But as with all HTML and CSS added to the platform, Docebo can’t guarantee that any modification can be achieved or that it wi

Hello all, we made a custom CSS navigation menu, but the menu dropdowns “hide” behind our catalog widget. Does anyone know what might be going on? It works fine on all other pages that have other widgets. 

Would any CSS experts know the code to remove a tab from the admin menu (specifically the Question Bank)? Our power users need permission to create courses but this enables the Question Bank which we cannot have them access. We would apply the CSS only to Extended Enterprise domains so it would not impact our main platform. Thank you in advance!

Here is CSS code to remove the default dancing with confetti image and replace it with something else.I had to move my text to the bottom of the page and i moved the retake course to the top left corner so it was also out o the way. Change the sizing up to best fit your image. lmn-blank-slate {    display: flex;    background-image: url(https://i.imgur.com/La8dCQI.gif) !important;    background-repeat: no-repeat;    background-size: contain;    background-position: center;    width:100%;    height:400px;}lmn-blank-slate-title {    position: absolute;    bottom: 20px;    left: 0;    right: 0;    text-align: center;}dcb-course-lesson-completion-slate .dcb-course-lesson-player-completion-actions{    position: absolute;    top: 0;    left: 0;    z-index:9999;    visibility: visible;}lmn-illustratio

Hello, I’m looking for ideas or tips with CSS and exam color selection. We’ve settled on branding colors, but the red confuses some people while taking exams. There was another post that was very helpful, but now facing a new problem. Our multi-select questions are not amended satisfactorily. Does any know what code I need to add to fix this? Or tips to find the necessary code to remedy the issue? The code I’ve implemented in Staging so far. Also, I’m learning the basics of CSS & HTML, does anyone have recommendations for courses/learning that would promote better understanding and maintenance in the future? I thought I would ask. There’s a lot of talented people in here :) Thanks!! /** Single Choice **/

We are looking for a way to hide the Looks Good and Take a Look status banners from the My Team page. The majority of our courses do not have due dates and these banners have led to confusion by managers. Example: they see the Looks Good status for an employee and assume that employee has completed all courses so they don’t look at the Personal Summary page for the employee.We tested the CSS provided in this post but found it removed status labels from other areas of the platform where we need the labels. We tried using the Localization Tool to adjust the wording. This wasn’t a good fit because we would need to use too many words to describe things to our managers. We tried simply entering a s

Hi all,Wanted to share an update we just made to help enhance the learner experience! CSS for "No Upcoming Events" Purpose: Adds instructional text under the “No Upcoming Events” widget on live course pages. Why: Learners often think no sessions are available if they have missed the events they were meant to attend, as the widget only shows events for their current session they have already missed. This clarifies that they can use the ellipsis (⁝) menu to switch sessions or unenroll. What it does: Does not alter the view prior to missing the events

Warning - Long geeky post ahead!!Lots of questions have come up surrounding accordions.I’ve toyed around with these and shared a relatively simple example in my animation series.I have since put together an FAQ accordion that I believe looks and functions well - at least in my environment. I have taken the CSS and heavily commented it for your ease of application to your own environments should you wish to make use of it. I’ve also added a short gif and some pictures so you can sort of see it in action.The code provided is for exactly what you see in this post.You’ll want to adjust as desired and test as usual for your environments.Here is a picture in full, 2/3, and 1/3 size widgets.

Hey Everyone!We are newer to Docebo and have started to play around with CSS in the course player. Is there a way to remove the play header and content label?  We are using Articulate for content creation, so when all is said and done we have 3 headers on the course page for the same content.  Any ideas are appreciated!!  

Hi,Looking to hide the Score on the My Activities page under courses, ILT  and external training.Does anyone know how to do this so its the how column and not just the title.