Hi there
Does anyone have any guidance or suggestions in regards to changing the layout and/or colour of the Renewable Certification bar that appears at the top of each module of an E-Learning course? (As shown in the image below)
We provide guidance to staff that they must click this when renewing training but increasing we are noticing that they aren’t which causes considering admin time as we have to go back and update certifications and completion dates manually etc.
Thank you in advance.
Best answer by Olli-Pekka Haataja
Hello
Unfortunately, I don’t have a CSS code to provide as we haven’t had the need to modify this section from the system since re have guided the users what needs to be done in renewal.
I can suggest that you provide the a screenshot to a ChatGPT and give it a prompt what you are looking for and it can write you a baseline CSS which you can try and modify then.
That way you can get at least close.
Hopefully you can get it solved!
Also, additionally you can add general instructions to the certification notification what to do exactly when learner needs to renew the certification to avoid them going around the required path.
Thanks
Thanks for replying :)
Andrew
Hello
Unfortunately, I don’t have a CSS code to provide as we haven’t had the need to modify this section from the system since re have guided the users what needs to be done in renewal.
I can suggest that you provide the a screenshot to a ChatGPT and give it a prompt what you are looking for and it can write you a baseline CSS which you can try and modify then.
That way you can get at least close.
Hopefully you can get it solved!
That’s a great idea
Got it working - Chat GPT was a great idea
For anyone interested, the CSS code is noted below that worked for me. I was also able ta “pulse” feature which is quite cool and really makes it stand out so that you really can’t miss it! I’ve noted the CSS code for this below as well.
/* 🧱 Optional: Style the "Renew certification" button */
lmn-notification .lmn-button-theme-neutral {
background-color: #0a0a0a !important; /* white background */
color: #ffffff !important; /* red text */
border: 2px solid #ff0000 !important;
}
lmn-notification .lmn-button-theme-neutral:hover {
background-color: #ffe5e5 !important; /* light red on hover */
color: #ff0000 !important;
}
/* 🎨 Force the "i" info icon inside the notification to be white */
lmn-notification.lmn-notification-theme-info lmn-icon svg {
fill: #ffffff !important;
}
/* ✅ Smooth grow/shrink pulse */
@keyframes subtlePulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
lmn-notification.lmn-notification-theme-info {
animation: subtlePulse 1.8s ease-in-out infinite;
}
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
