Skip to main content
Question

With the new enrollment attributes coming in Dec '24, is there any CSS available to make them stand out?


Jtischler
Helper II
Forum|alt.badge.img+1

The attributes can be helpful, many threads point out some shortcomings which are helpful.  I don’t see anything related to CSS formatting of the attributes on the content card.  Regardless of the attribute its just small grey font.  It doesn’t stick out.  It would be nice to color code/format the attributes so they stand out and don’t get overlooked.  Any CSS pro’s out there know if this is possible?

10 replies

pmo
Docebian
Forum|alt.badge.img+3
  • Docebian
  • 272 replies
  • November 22, 2024

Real basic but here’s something: 

 

.ui-card-status-details {
  color:white !important;
  background-color: blue !important;
  border-radius: 5px;
  border-style:solid !important;
  border-color: black !important;
  text-align: center;

}

 


lrnlab
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 4709 replies
  • November 22, 2024

@pmo thank you for this…

on the same note...do you have CSS to hide the “mark as Outdated” button and “Share” button on the new player?


andrew.charles
Docebian
Forum|alt.badge.img
lrnlab wrote:

@pmo thank you for this…

on the same note...do you have CSS to hide the “mark as Outdated” button and “Share” button on the new player?

Good afternoon! I’d suggest hiding the Share button with the Admin > Advanced Settings > Social & Rating > Social Sharing option described on the KB here. Is there some part of that functionality we’d like to keep activated but just hide the button itself globally with CSS? I can see it if one wanted to keep it activated globally, but hide it on certain EE domains with custom CSS.

In that case, we could attempt the below, which worked on my test platform and was generated with AI:

#doc-layout-page-content > lrn-course-player > div.lrn-course-player-play-area > dcb-course-player > dcb-course-header > div > div.dcb-course-header-actions button[iconsvgname="share"] {
  display: none;
}

As with all CSS, and especially that generated by AI, we should be all kinds of careful to verify that it’s just hiding the element in question. Docebo also doesn’t guarantee the backwards compatibility of CSS, so implementing periodic checks is highly recommended. I’d also like to set the expectation that Docebo Support isn’t able to support custom CSS and this is a one-time favour because of the impact you have for our Community :)

Regarding hiding specifically the “Mark as Outdated” option, we would use the below code with the same disclaimers as above:

.dcb-course-header-mark-as-outdated {
  display: none;
}

Open to thoughts on this approach, and again, please, please, please, always test CSS. It has a habit of hiding more than you want to when using display: none;

That said, I did take a fairly deep look and the classes in question appear to be specific enough to not cause other elements to be hidden.


lrnlab
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 4709 replies
  • November 23, 2024

Hi ​@andrew.charles thank you for the code...I will try it.

FYI, the “share” link is the result of enabling the Enrolment Link and not social sharing; the social sharing was never enabled in our LMS. Since there is no option to remove that from the admin side, CSS is the only way we can hide it from users.


andrew.charles
Docebian
Forum|alt.badge.img
lrnlab wrote:

Hi ​@andrew.charles thank you for the code...I will try it.

FYI, the “share” link is the result of enabling the Enrolment Link and not social sharing; the social sharing was never enabled in our LMS. Since there is no option to remove that from the admin side, CSS is the only way we can hide it from users.

Ah we may be referring to different behaviour with the same Share link. I’ll include a screenshot of the Share button below that appears in the New Course Player when activating the feature I described above:
 


That course has the below Enrollment Link settings:
 

 

Actually pretty interesting behaviour here. Keeping in mind I’m testing this on a pre-release platform, but the behaviour is thus:​​​​​​

  • Social sharing is deactivated in Advanced Settings
  • Enrollment link is deactivated as above
  • No CSS is applied to feature

In the above scenario, the Sharing button doesn’t show. If we activate either enrollment link or Social Sharing, it appears. So, we’re both right? :)

Edit: I would also add that you’re entirely correct. If the Enrollment Link is activated, there is no way other than CSS to hide the Share button. Good findings and CSS would be the play here.


lrnlab
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 4709 replies
  • November 25, 2024

Thanks ​@andrew.charles LOL, indeed, we are both correct...


emily.mccarthy
Guide I
Forum|alt.badge.img+3
lrnlab wrote:

Hi ​@andrew.charles thank you for the code...I will try it.

FYI, the “share” link is the result of enabling the Enrolment Link and not social sharing; the social sharing was never enabled in our LMS. Since there is no option to remove that from the admin side, CSS is the only way we can hide it from users.

Just curious… Did the code work when you implemented it? I tried it in our sandbox as is and then modified it a bit but I am not seeing the modification in the courses.


lrnlab
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 4709 replies
  • November 25, 2024

@emily.mccarthy not yet...will let you know here once I try it. The new course player has its own set of challenges with these user options being a moving target based on the course settings...not an easy one fix.


emily.mccarthy
Guide I
Forum|alt.badge.img+3

@lrnlab thanks for the collaboration! I am going to continue to fiddle, but I figured I would ask just incase. I’ll be sure to share if I find the golden code as well.


andrew.charles
Docebian
Forum|alt.badge.img
emily.mccarthy wrote:
lrnlab wrote:

Hi ​@andrew.charles thank you for the code...I will try it.

FYI, the “share” link is the result of enabling the Enrolment Link and not social sharing; the social sharing was never enabled in our LMS. Since there is no option to remove that from the admin side, CSS is the only way we can hide it from users.

Just curious… Did the code work when you implemented it? I tried it in our sandbox as is and then modified it a bit but I am not seeing the modification in the courses.

Hello Emily, it definitely did! The above code hides the below buttons on my test platform.
 


If it isn’t working on yours, please open a Support ticket linking this post so that we can take a closer look at your specific platform. It’s also somewhat likely that the above code won’t work until this goes live on December 4th for Production platforms. In which case, the above code should work on your sandbox if you have one.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings