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