When looking at the course cards at the course catalog, I’d like to add a border around the image/thumbnail on the course cards. Another important aspect, is that the colour of the border depends on of it is an ILT class or e-learning. Lets say the border around E-learning cards are red and the ILT ones blue. (As shown from a figma sketch(image underneath this text))
I got a code snippet from employees at Docebo, but it didn’t work or change anything.
Here’s the code snippet I got:
/* Specific border color for E-learning courses (Course codes starting with "EL") */
/* Note: Docebo uses dcb-ui-card or ui-card, check your specific platform structure */
[dcb-course-code^="EL"] .ui-card-wrapper, [course-code^="EL"] .ui-card-wrapper {
border-color: #FF0000 !important; /* Red border for E-learning */
}
/* Specific border color for ILT courses (Course codes starting with "ILT") */
[dcb-course-code^="ILT"] .ui-card-wrapper, [course-code^="ILT"] .ui-card-wrapper {
border-color: #0000FF !important; /* Blue border for ILT */
}
I did check if another code snippet that I had already added made the result of the code snippet above not appear or were overwriting anything, but after commenting it out/removing that particular code snippet, there were still no change. This is the other code snippet I’m talking about (for the additional “cards” under learning plans) + image of what it does:
/** Stacked UI cards on learning plans **/
ui-card.ui-card-stacked div.ui-card-wrapper::before {
background-color: #96171a;
}
ui-card.ui-card-stacked div.ui-card-wrapper::after {
background-color: #96171a;
}
Does anyone of you out here in the community know how to solve this?
Help is much appreciated.
