How do you change the color of the widgets background?

[Brad21]

Hi,

I'm very new at servicenow development, thank you for bearing with me. How do you change the color of the widgets background? I got the bootstrap set how i want, and i have looked using the Branding Editor. Still cannot change it, this is in my instance. thank you.

[Community Alums]

1. Clone the Widget
2. add a custom class name to the parent div (or what ever you want to change the colour of)
3. add a class definition to the CSS
4. add your cloned widget to the page and remove the original

An example of the same widget (top is cloned version with new background colour), bottom is original.

[Brad21]

HTML

<div ng-class="{'hidden-xs' : hideCategoryWidgetInXS}" class="panel panel-{{::options.color}} category-widget no-border">
 <div class="panel-heading">
  <div class="custom m-t-sm">

CSS

.custom {
background-color:#9ec16c;
}

Thank you for the help, above is what i have in my code so far. In your example the window that has "Apple iPad 3" in a greenish color is the widget color background I'm trying to change. Right where the iPad pictures are is the background that i cannot get to change. Thank you for you help.

[SatheeshKumar]

Hi Brad,

 Service Portal> Pages > Open SC Category Record > paste the below css in page specific css section

OR directly add the below CSS in your widget

.b {
    
    background-color: green;
}

check below link to know the steps involved in adding page specific CSS

https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/c_PageSpecificCSS.html

 

-Satheesh

[Mark Roethof]

Why clone the widget? You could just add CSS to the Page Specific CSS.

Kind regards,
Mark

---

LinkedIn