How do I create a simple color widget
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-28-2024 09:40 AM
Hi Team,
How do I create a simple color widget like below screenshot which has some text on it in white color font and it should autofit to any Container layout on portal.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-01-2024 06:49 AM - edited 03-01-2024 06:51 AM
Hi @The Matrix ,
To create a simple color widget with text in white font that auto-fits to any container layout in ServicePortal, you can use HTML and CSS. Here's an example of how you can achieve this:
HTML (Widget HTML Template):
<div class="color-widget"> <p class="widget-text">Your Text Here</p> </div>
CSS (Widget CSS):
.color-widget {
background-color: #3498db; /* Change the background color to the desired color */
color: #ffffff; /* White font color */
padding: 10px; /* Adjust padding as needed */
border-radius: 5px; /* Add rounded corners */
box-sizing: border-box; /* Ensure padding and border are included in width/height */
width: 100%; /* Widget auto-fits to the container */
}
.widget-text {
margin: 0; /* Remove default margin */
}
This code will create a color widget with a background color of #3498db (a shade of blue) and white text inside. The widget will auto-fit to any container it is placed in on the portal. You can adjust the background color, font color, padding, border-radius, and other CSS properties as needed to customize the appearance of your widget.
To use this widget, create a new widget in ServiceNow, paste the HTML and CSS code into the appropriate fields, and save the widget. Then, you can add this widget to any container layout in your ServicePortal.
Please my answer as Accepted as Solution & hit helpful if it suffices your requirement. It will help other mates too !!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-01-2024 07:10 AM
Hi @The Matrix
Mark my answer as Accepted as Solution & helpful if it suffices your requirement. It will help other too !!