In Portal i want to modify the back ground color of the widget which is in the below image
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-11-2024 06:29 PM
Hi,
In Portal I want to modify the back ground color of the widget which is in the below image
Please hep me out i want to modify that background color of Password Reset and Request a service in service portal.
Thanks,
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-11-2024 08:08 PM - edited 01-11-2024 08:11 PM
Hi @kranthi2 ,
Those are icon link widget mostly used OOTB.
In order to change the color u need to clone the widget update the respective css code n then later use custom widget which u have cloned in both the places.
This u need to do only when icon link widget is used OOTB only.if it's already customised then in the css of that widget u will find some code related to background. Plz update accordingly
Attaching screenshot for reference.
Thanks,
Danish
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-11-2024 08:27 PM
Hi,
Press Ctrl+Right click on the widget
Click on Instance in page editor
Paste below to the CSS section and save it
a.circle_icon {
background-color: green;
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-11-2024 09:04 PM
Hi there,
This might help you in the future for similar portal questions:
- 2020-05-18 - Article - Changing Service Portal widgets look and feel without cloning widgets
Kind regards,
Mark Roethof
Independent ServiceNow Consultant
10x ServiceNow MVP
---
~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-11-2024 09:04 PM
Hi @kranthi2
Follow these steps :
Clone the widget: Clone the widget that you want to modify. This will allow you to make changes without affecting the original widget.
Add a custom class name: Add a custom class name to the parent div or the element that you want to change the background color of. This will help you target the specific element in CSS.
Define a class in CSS: Add a class definition in the CSS file of the portal. Use the custom class name that you added in the previous step to target the specific element. Set the background color property to the desired color value.
Add the cloned widget to the page: Add the cloned widget to the page where you want to display it. Remove the original widget if necessary.
Reference :
How to change the Widgets BackgroundPlease Mark this as Helpful/Accepted if this solves your query.
Thanks& Regards
Deepak Sharma