Skip to main content

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,

 

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;
}

 

Give 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.

Ha ha @Bfarkas - we were clearly typing at the same time. :grinning:

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;
}

 

@Bfarkas @gstager  is there any way to target the above two changes to a specific page, rather than site wide?

I tried #doc-page-xxx …. but it didn’t work - figured out that the page Number refers to the content below the header

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;
}

 

@Bfarkas @gstager  is there any way to target the above two changes to a specific page, rather than site wide?

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. 

Reply


Terms & ConditionsCookie settings