Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field
Hi there,
Recently I noticed a Now Community question concerning changing the More information question mark icon on Catalog Items. Basically the question was can we clone and customize a Widget to achieve this? Yes you could, and no you shouldn't! Because I do come across a lot of situations where I see Widgets being cloned and customized for incorrect reasons, let's give a little bit more attention to this small question though important subject.
More information
The More information icon we are after, and which was mentioned in a Now Community question if it could be changed:
CSS
We could clone and customize the Widget concerned. Though seeing something like this, my first thought would actually be can we influence the presentation of the Widget? For example through Widget instance CSS, Portal Page specific CSS, Service Portal CSS Variables, etcetera. I also wrote an article related to this subject a while ago (Changing Service Portal widgets look and feel without cloning widgets). In this case, we will investigate influencing the presentation of the Widget through Widget instance CSS.
First thing would be finding out where the More information icon technically is located, and what the CSS element and its contents concerned is. Open any random Catalog Item in a Portal (it doesn't matter if it's Employee Center or Service Portal) which has at least one Variable with Show Help set to true, right mouse click and select from the context menu Inspect. Something like below should be visible when inspecting the More information icon:
On the top right, notice element .fa-question-circle:before. That's the CSS element we are after. Within that element, pay attention to the part concerning content: "\f059". That's the part we would like to influence to change the presentation of the Widget. If you would change this manually to any other value, you would directly see the effect. This is also a nice method to test any changes and possibilities quickly. For example change the value to content: "\f128", now a different (question mark) icon will be shown. Or try content: "\f129", now an i icon will be shown. Just play around with it to get a feeling for the possibilities.
Instance in Page Editor > CSS
To make the changes tested above permanent, we could add CSS to the CSS field of the Widget instance. Within the Catalog Item in the Portal, right mouse click within the Widget concerned, and from the modal select Instance in Page Editor. Here you will find the CSS field mentioned and where you can add the CSS element which we want to override including new content. Something like below would work:
.fa-question-circle:before {
content: "\f129"
}
Result
After saving the Widget Instance record, and refreshing the Catalog Item in the Portal would now resolve in:
The added CSS is immediately effective. You just changed the presentation of the Portal widget concerned, and without cloning and customizing any Widgets! While this is just a very short example, in a lot of cases cloning out-of-the-box Portal widgets just to influence the presentation is really unnecessary and the wrong thing to do.
---
And that's it actually. Hope you like it. If any questions or remarks, let me know!
| C |
If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful.
Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? |
Kind regards,
Mark Roethof
Independent ServiceNow Consultant
3x ServiceNow Developer MVP
3x ServiceNow Community MVP
---
