How can I change the background-color of a HTML widget in the Service Portal

[davo]

I need to change the background colour of a HTML widget but for the life of me I can not.  Well I can while inspecting the page with the element.style but I can't find the name to set in the css

//This is the HTML widget that I want to change the background-color to white or anything else:
.x4e36391f4fdd1b0021a168d18110c7bd .style {
background-color: #e25c39;
}

// This is the Icon Link widget that we can set the background-color but they want the above style

.xa264c2d74f115b0021a168d18110c728 .icon-link-background-default {
background-color: #e25c39;
}

Thanks in advance guys

Dave

[nathanfirth · Accepted solution]

In your HTML widget code, why not wrap the content in a div with a class that you style in the theme CSS.

For example:

<div class="bg-primary custom-button">
<i class="fa fa-bomb"></i>
<h1>IT</h1>
</div>

I used the "bg-primary" class, as this will automatically apply a background color, but you could use the "custom-button" class to apply any custom CSS.

I would not recommend applying the CSS to the Instance or Widget sys_id class, like you're doing in your example above.

-----------------
Nathan Firth
Founder and ServiceNow Architect
NewRocket, Inc.
nathan.firth@newrocket.com
http://serviceportal.io
http://newrocket.com

[benjamin_alldri]

There's a few ways you can accomplish it.

In the Portal Designer (https://<instance>.service-now.com/$spd.do#/page/select), where you've actually included the widget, you have the ability to specify a CSS class to attach to the widget container. This is accomplished by:

1. Highlighting the container that is around the widget and going into the edit screen (the pencil icon at the top right).
2. In there, there's a field called "CSS class". Add a class name of your choosing (something specific to your project, eg. projxx-classname is better as you're guaranteed not to overwrite any other code).
3. Then add the CSS rules by adding it to the CSS field in the portal properties screen (Edit Portal Properties button at the topmost right).

Another way is to physically edit your widget.

1. In the widget editor (https://<instance>.service-now.com/sp_config?id=widget_editor&sys_id=<sys_id>), open the widget.
2. In the HTML pane, apply a class in the top outermost HTML element (usually a div) with a unique name as above, by way of something like <div class="projxx-classname" ...
3. In the CSS pane, write the CSS rule to match the class you've specified.
4. Save it.

I personally prefer method 2 because it's widget-specific, whereas method 1 is only container-specific. Basically, you're just trying to insert a CSS identifier into the document somehow, so any way you can do that will work. Some are just neater than others!