Change the Service Portal Widget Back ground Color

SNOW46
Tera Contributor

Hi All,

I want to change the widget header color in Service Portal.

can anyone suggest me on the same.

find_real_file.png

The one above marked in red I want to change the color of the background.

 

1 ACCEPTED SOLUTION

Hi,

With the step provided and is OOB, you can make the color either red(Danger), blue(Primary), orange(Warning), green(Success), Light blue(Info).

OR you can add panel-heading class in the CSS of the widget instance as shown in the screenshot.

find_real_file.png

If you want things other than these, you need to clone the widget, provide some id to the div tag holding the header and provide CSS to it according to your needs. And by doing so, you will be cloning each and every widget of this type you are using in your portal which will be a little hectic.

 

Regards,

Manan

View solution in original post

12 REPLIES 12

Hi,  out of  the box  widget css can't be editable if you want to do any customization clone the OOB widget and do commit your customization's and and replace the OOB widget to cloned widget.

 

and if you want widget specific CSS my previous reply will help you.

 

 

Thanks,Naveen

Manan Raval
Giga Expert

Hi,

 

You can go to the that particular widget instance. In that you can modify the bootstrap color. Please find in below screenshot:

find_real_file.png

But I want to remove the existing background color and input some other color in widget header background.

Hi,

With the step provided and is OOB, you can make the color either red(Danger), blue(Primary), orange(Warning), green(Success), Light blue(Info).

OR you can add panel-heading class in the CSS of the widget instance as shown in the screenshot.

find_real_file.png

If you want things other than these, you need to clone the widget, provide some id to the div tag holding the header and provide CSS to it according to your needs. And by doing so, you will be cloning each and every widget of this type you are using in your portal which will be a little hectic.

 

Regards,

Manan

SNOW46
Tera Contributor

Hi Manan,

 

I have came up with one similar type of requirement that I need to change the color of the text inside the box.

Previously I changed the color for the widget heading in the custom widget css as below.

find_real_file.png

Now I want to change the color for the text i.e., Incident Number and the fields below number as below marked in red box.

find_real_file.png

I am bit confused on the CSS part so need your expertise on the same.

 

 

Thanks..