Question

How to change color of catalog widget bar

  • 19 March 2022
  • 8 replies
  • 143 views
omer.bitas
Rank
Userlevel 4

Hi CSS and HTML experts

It would be great to get your help with this one:

Can you help me with specifying the color or these buttons using CSS?

This was changed to white after I specified the color of the header icons and I want to now separately assign them with a darker color for visability.

 

thanks,

  

8 replies

dklinger
Rank
Userlevel 7
Badge +6

@omer.bitas this is a great place to use your browsers inspect capabilities.

One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option. Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools.

 

omer.bitas
Rank
Userlevel 4

@omer.bitasthis is a great place to use your browsers inspect capabilities.

One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option. Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools.

 

Hi, 

Thanks for the guidance.

I am familiar with finding the CSS string using the inspect capabilities and was able to adjust multiple items in the system.

This specific item- I couldn't find the right CSS reference for it so I came to ask help from this forum...

C
Rank
Userlevel 4
Badge +2

@omer.bitas Try the below code:
 

#doc-widget-[id of catalog widget] .ui-icon.ui-icon-size-sm svg {

         fill: red;

 }

To get the id of the catalog widget, right click and inspect:
 

 

gstager
Rank
Userlevel 7
Badge +5

Are you looking to change the color of the icon itself or the background portion?

You might try something like this for the background portion..

/** Change color of Catalog Widget Bar **/

doc-widget-course-catalog div.ui-data-browser-controls-bar-start {
    background-color: black;
}

 

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

It actually sounds like you might have not been selective enough when choosing the header icon colors which then impacted these, you might want to circle back and see if there is something more specific to just those to avoid other crossover issues in the future.

omer.bitas
Rank
Userlevel 4

It actually sounds like you might have not been selective enough when choosing the header icon colors which then impacted these, you might want to circle back and see if there is something more specific to just those to avoid other crossover issues in the future.

Hi

Yes, I was too general when selecting the CSS reference and that is the cause, was trying to see if anybody can help with being more specific

Bfarkas
Rank
Userlevel 7
Badge +3

Can you show us what you have so far, and screenshot of the items you were intending to change? 

Bfarkas
Rank
Userlevel 7
Badge +3

You could also look at just using what you have and adding conditions to it so that it is only impacting the header and no where else, for instance:

#doc-layout-header-bar dcb-ui-icon span.color-neutral svg, #doc-layout-header-bar ui-icon span.color-neutral svg {
fill: #ff0000;
}

Where by adding the #doc-layout-header-bar only impacts the icons in the header which you updated to the white, and then the rest of the page would have the default color neutral color from your theme set.

Trying to get a better understanding of your actual goals though.

Reply


Terms & ConditionsCookie settings