Skip to main content

Hello Docebians!

Hello! I’m looking for CSS support in eliminating the Course details from the ILT courses 

and Learning Plans Details 

 

Thank you in advance!

@lrnlab 

 

 

Hi @Isram 

I made a check on my platform and I suppose you are meaning removing this from the catalog page, by selecting a course or a learning plan.

I have to remember you that Docebo does not provide support in CSS/HTML encoding, anyway by doing a test from my side, It seems that the code below works for your use case.

.ui-ripple.ui-accordion-custom-panel-header.ui-accordion-panel-header.ng-star-inserted {

  display: none;

}

.dcb-te-content-details-widget-items-list.ng-star-inserted

{

  display: none;

}

 

Please apply this CSS code at your discretion. If you choose to apply this CSS code to your LMS through the Branding > Custom Styles area, note that it is not guaranteed to be the best possible CSS solution, nor is it guaranteed to reflect across all browsers and browser versions.

 

Have a wonderful day!

Roberto


@roberto.moscatelli  Thank you . I will test  it and I  let you know the results. 

Thanks again! 


 @roberto.moscatelli it seems to work , however it also applies to the course syllabus accordion…

Please Check the before and after images 

 

BEFORE

 

AFTER

 

 

do you think there is a way to fix this? @roberto.moscatelli 

Thanks


@Isram could you try to substitute all the code that I share above with the following one?

 

#doc-layout-page-content > lrn-content-overview > div.ui-row-slender.lrn-content-overview-main-wrapper.ng-star-inserted > div.ui-col-24.ui-col-md-8.lrn-content-overview-sidebar > div > lrn-widget-content-details > dcb-te-content-details-widget > section > dcb-ui-accordion > div > dcb-ui-accordion-panel > div > div {display:none !important;}

 

Please let me know if this works!

 


Hi there,

This should help towards this.

/* Hides Course Details on ILT Page START */
body:has(#lrn-widget-course-sessions-title) lrn-widget-content-details {
display: none!important;
}
/* Hides Course Details on ILT Page End */

This will then hide the Course Details area ONLY on ILT courses. This will then remain in place for eLearning courses.


@roberto.moscatelli Thank you ! it worked 


@DPatel Thank you it worked very well, and as you mentioned, the changes  only applied to ILT COURSES !! 


Hi there,

Here is the CSS to remove the Learning Plan Details

/* Hides Learning Plan Details on Learning Plan Page START */
body:has(lrn-widget-learning-plan-content) lrn-widget-content-details {
display: none!important;
}
/* Hides Learning Plan Details on Learning Plan Page END */

I hope this is of help


@DPatel Thanks


Similar question - is there a way to remove the learning plan details for only specific learning plans? Or edit what is displayed so instead of Time to Complete saying Unlimited it has a date. I know you can set that as a validity period on the learning plan but we don’t want “hard” validity and there is no way to still allow access to the courses if we use that option. Trying to make it clear to the learners the deadlines - other than putting it in the LP title. Thanks!


Hi there,

Here is the CSS to remove the Learning Plan Details

/* Hides Learning Plan Details on Learning Plan Page START */
body:has(lrn-widget-learning-plan-content) lrn-widget-content-details {
display: none!important;
}
/* Hides Learning Plan Details on Learning Plan Page END */

I hope this is of help

Do you know how to edit this so that it just removes the Learning plan ID and not the entire Learning Plan details box?


Reply