- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-05-2018 05:39 AM
Hi All,
I want to change the widget header color in Service Portal.
can anyone suggest me on the same.
The one above marked in red I want to change the color of the background.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-05-2018 09:59 PM
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.
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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-05-2018 06:03 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-05-2018 08:19 AM
Hello Naveen,
The way you said I know it. But I want to change the default bootstrap which is selected the color to bit deep grey or some other color code.
Please suggest.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-05-2018 10:28 AM
Hi,
if you want to do widget specific css Chanhges use the css Box over there and do your customizations..
FYI....
follow this link:
https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/widget-css.html
please make it helpful/correct if it helps.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-06-2018 03:02 AM
Hello Naveen,
Can you suggest me how to apply the changes in CSS for the OOB Default Bootstrap.
How to use the code for defining color for the panel heading.