Styling old Service Portal widgets on Employee Center

[Mark Roethof]

Hi there,

When working on Employee Center (Pro), you will notice that there are styling inconsistencies on several Service Portal widgets. Some of the inconsistencies are (minor) ones on new Employee Center widgets, and some of the inconsistencies are on old Service Portal widgets. You could raise a ServiceNow Support case for this, though you will get a response like "you can submit an enhancement request by raising an Idea on the Idea portal". Well, we all know where that leads to 😞.

So what can we come up with ourselves to solve these inconsistencies? In this article I'll focus on one of the old Service Portal widgets.

Old Service Portal widget

One of the old Service Portal widgets which is also in use on Employee Center, is the Related Catalog Item widget. There was no new Employe Center widget introduced for this one.

Notice the header has a different background color, there's a border visible on the entire widget and the shading is missing. And if you are pixel perfect you could find more like the diver, spacing, font size, etcetera.

Cloning Service Portal widgets

There could be several reasons for cloning and editing Service Portal widgets. Do be aware though, this has consequences. For example the Service Portal widget becomes locked in time, so it won’t benefit from any enhancements or bug fixes applied to the original widget by ServiceNow as versions upgrade. You clone it, you own it!

Applying CSS

If changing Service Portal widgets only concerns styling, in a lot of cases this can be achieved without cloning and editing the widget. How this can be achieved? By applying CSS. For example applying CSS within the Widget Instance, applying CSS Page specific CSS, or applying a CSS Include on the Service Portal Theme record. 

Instance Specific CSS

Using the browser inspector, we could investigate how the page is built, which styles are applied, etcetera. To investigate the Related Catalog Item widget, right-mouse click on the Related Item header and select "Inspect".

Sometimes you do have to play around a bit, to find the right CSS elements, though in this case immediately the header is selected and on the styles, the background color is mentioned. Knowing this, we can solve the first bits of the inconsistent styling.

For this Service Portal widget, we could use the CSS field on the Widget Instance. The quickest method to access this is to Ctrl + right-mouse click on the Related Catalog Item widget and select "Instance in Page editor". In the CSS field, we could apply the code found under the styles when inspecting the browser and just apply the values we are after.

.panel-default > .panel-heading {
  background-color: transparent;
}

Next bit would be the border which is visible on the entire widget and the missing shading. Using the browser inspector the same way as before, the right CSS element is not immediately selected. Playing around a bit (actually only selecting one level higher), the entire widget lights up and on the styles, the border is mentioned.

Similar like the background color, we could apply the code found under the styles when inspecting the browser and just apply the values we are after.

.b {
  border: 0;
}

.panel {
  box-shadow: $sp-panel-box-shadow;
}

Recap

With these few small bits of CSS, we gave the Related Item widget a more consistent style with Employee Center. As mentioned, if you are pixel perfect you might find more inconsistencies. Though you can all tackle them with the method shared in this article. 

---

Hope you like it. If any questions or remarks, let me know!

C	If this helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more Articles, Blogs, Videos, Podcasts, Share projects which I shared/participated in? - 250+ Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Kind regards,

Mark Roethof

Freelance ServiceNow Consultant
3x ServiceNow Developer MVP

3x ServiceNow Community MVP

---

LinkedIn

[Laszlo Balla]

Very valuable article!

One mere tip to add: you can actually change the CSS values in the dev console of the browser, to verify how the changes would actually look like before applying CSS anywhere in ServiceNow. If you mess it up, you can always just  “reset” by reloading the page 🙂

[tomashrobarik]

Just be careful with those selectors. For example the b class is a utility class meant to apply the border. With your styling you are actually removing that border from all over the place, which may have some undesired consequences. The same applies to the panel class. If you wanna just apply those styles only to the widget itself I would suggest to prefix all selectors with it's class, e.g. in this case v806f40990fab2300b7b2c8337a767e6f. It's still sad that even with the employee center the code quality of the widgets is very low and they are still inconsistent.