Hi
What is the way to set the color of the header icons/buttons (?, Gamification, Notifications etc) ?
I’ve tried
/*question mark menu color*/
#ui-button-icon-4{
color: #f1f1f1 !important;but although the CSS reference is right (Display:none works), the color will not change.
Does anybody know a solution?
(P.S about the same question for the breadcrumb bar color and text color)
thanks,
Best answer by Bfarkas
The id you are calling is the container of the icon, its not the icon itself which is setting the color, it is an svg which gets it’s color designed by the fill value:
.dcb-ui-icon span.color-neutral svg, ui-icon span.color-neutral svg {
fill: #008767;
}
For breadcrumb bar, it uses the color variables set in the GUI custom area, but if you want to override for some reason:
.doc-layout-breadcrumbs .breadcrumbs {
background: #ff0000;
}
+5The id you are calling is the container of the icon, its not the icon itself which is setting the color, it is an svg which gets it’s color designed by the fill value:
.dcb-ui-icon span.color-neutral svg, ui-icon span.color-neutral svg {
fill: #008767;
}
For breadcrumb bar, it uses the color variables set in the GUI custom area, but if you want to override for some reason:
.doc-layout-breadcrumbs .breadcrumbs {
background: #ff0000;
}
+7Give this a shot for the gamification button.
/** Change icon Color **/
g#gamification {
fill: white;
}You should be able to do a similar mod for the others for different results if that is what you wish.
g#notifications {
fill: #4CAF50;
}
The white does not show very well but you can see that the changes work.
The id you are calling is the container of the icon, its not the icon itself which is setting the color, it is an svg which gets it’s color designed by the fill value:
.dcb-ui-icon span.color-neutral svg, ui-icon span.color-neutral svg {
fill: #008767;
}
For breadcrumb bar, it uses the color variables set in the GUI custom area, but if you want to override for some reason:
.doc-layout-breadcrumbs .breadcrumbs {
background: #ff0000;
}
I tried #doc-page-xxx …. but it didn’t work - figured out that the page Number refers to the content below the header
+5The id you are calling is the container of the icon, its not the icon itself which is setting the color, it is an svg which gets it’s color designed by the fill value:
.dcb-ui-icon span.color-neutral svg, ui-icon span.color-neutral svg {
fill: #008767;
}
For breadcrumb bar, it uses the color variables set in the GUI custom area, but if you want to override for some reason:
.doc-layout-breadcrumbs .breadcrumbs {
background: #ff0000;
}
I tried #doc-page-xxx …. but it didn’t work - figured out that the page Number refers to the content below the header
yeah, you already found your answer unfortunately.
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.
