Skip to main content

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 buttonnaria-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!


Hi Cshea,

 

Thank you so much for your help!


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 buttonnaria-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


Reply