Sooooo, I really need some help, does anyone have any ideas how I can make the Renew certification button more obvious, I am struggling to find the right selector, without impacting the rest of the platform. I only want it to make changes on the course player pages. Getting slowly frustrated with users going I’ve recompleted the course but it hasn’t updated my records. Then I ask did you click the button? and the answer is always no what button!
Hi there!
We used the following CSS code to add a border and change the button color:
/* Target the specific 'Renew Certification' button by its aria-label */
.dcb-ui-notification-banner-actions button[aria-label="Renew certification"] {
border: 2px solid #000; /* Solid black border */
border-radius: 5px; /* Rounded corners */
padding: 5px 10px; /* Space inside the button */
box-sizing: border-box; /* Ensure padding does not affect size */
background-color: #ffffff; /* Optional: White background */
color: #000000; /* Optional: Black text color */
font-size: 14px; /* Optional: Adjust font size */
cursor: pointer; /* Show pointer cursor */
}
It seems to have helped our users. Hopefully this helps!
Did this work for you? im trying to do the same thing but the code doesnt seem to do anything in my platform.
In the above CSS code, try replacing the CSS selector .dcb-ui-notification-banner-actions button[aria-label="Renew certification"] with .dcb-ui-notification-actions
The aria-label attribute is commonly used to provide an accessible name for elements that may not have visible text, enhancing accessibility for assistive technologies and is recommended primarily for accessibility purposes and to use classes or IDs for styling.
this change worked, thank you
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.
