How do I create a simple color widget

The Matrix
Tera Contributor

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.

SiddharamTaka1_0-1709142351066.png

 

2 REPLIES 2

Sohithanjan G
Kilo Sage
Kilo Sage

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 !!

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

Hi @The Matrix 

 

Mark my answer as Accepted as Solution & helpful if it suffices your requirement. It will help other too !! 

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)