Following the recent upgrade to the Docebo webkit, we have noticed that there were a few changes to the core styling that impacted our specific styling. Accordingly, we have taken measures to address the changes with our own styling. I wanted to start this thread with the goal of sharing knowledge across the community and benefit from input from more experienced stylers.
For instance, the new green button color is now appearing instead of our yellow branding color. Formerly, the branding color on the buttons was being controlled by the Configure Branding and Look >> Customize Colors >> Confirmation Messages. It appears that the new green styling is just Docebo default styling which make sense because I don’t associate Confirmation Messages with buttons inside the course (or the search bar icon either).
In the previous webkit, we were using CSS to make this text color black to improve its accessibility against the yellow background.
Here is the code that we use to target the text:
/* Change the text color of buttons to black */
.nwm-btn-text {
color: #233651;
font-size: 20px !important;
font-weight: 700 !important;
text-transform: uppercase;/* Change the text color of the 'Download certificate' button to black */
.dcb-ui-button-label.dcb-ui-typography-button-3 {
color: black!important; /* black text */
}/* Target the text in the Learning Plan Progression Menu */
.dcb-course-header-learning-plan button[data-dcb-ui-version="2"] .dcb-ui-button-label {
color: black !important; /* Default text color */
}/*hides foreground*/
button[lmnButtonPrimary] .lmn-button-content, a[lmnButtonPrimary] .lmn-button-content{
background-color: #ffb81c !important;
}/*start/resume course color change*/
button[lmnButtonPrimary].lmn-button-shape-squared {
background-color: #ffb81c !important;
}
Can anyone help us identify the element to target to hide the scooter girl in all her various locations? We like to replace that image with our own logo. Unfortunately, the updated code provided by Docebo has been partially effective in that it is currently displaying both images.
