- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 08:44 AM
All,
Good afternoon. Our client has requested that we change the default asterisk color from red to blue. This red to blue asterisk color change must apply to all forms that have required fields.
I navigated to System Properties >> CSS and updated the value of the "Mandatory field status indicator color (unpopulated):" from #cc0000 (red) to #0000ff (blue).
After saving my changes, the asterisk still appears red and not blue.
To ensure my changes were made, I navigated to sys_properties.list and found the "css.label.mandatory.background.color", and verified that the value was indeed changed to #0000ff.
We are on the Helsinki release. Is there another place where the value need to be updated to make the red asterisk for required fields turn blue?
Thank you.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 12:22 PM
ANSWER TIME!
Right now I'm just shaking my head at the answer provided by the ServiceNow support. Here's a copy of what they provided my coworker:
Worked with ServiceNow support on that one. What I was told is that the CSS module settings no longer are used on the latest versions of the UI. Initially I was told the UI no longer supports that change (was given a potential way to script it but also told upgrades could be an issue if I did it), but when I pressed them they came up with a solution to add an entry to the system properties (sys_properties) table. The steps were:
1) Navigate to system_properties.list in the filter navigator.
2) Search for entry css.$color-negative. It's probably not there, if so create a new one with this name. Type is String and value is the hex code of the color you want, I used #0000ff.
3) Save and it takes effect immediately.
Not too obvious and the support person didn't know about it at first...so far as I can tell that isn't documented anywhere. Who knows what other css variables are out there. But, it's probably reasonably safe from upgrade issues since it is not defined explicitly by default.
Fun times...as an FYI, here's what was created to make the asterisk appear blue:
davidd., tagging you on this answer. Cheers and thanks again for your help sir.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 08:50 AM
Sounds like the browser is caching the old color. Try the following which may help.
- try a different browser
- flush the cache (h t t p s://youInstanceName.service-now.com/cache.do
- close and re-open your browser
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 08:55 AM
David,
I've flushed my browser and tried other browsers without success. Just wondering if that color value is stored somewhere else. Also noticed that the value of the mandatory field status indicator when populated is a pinkish color:
When viewing any form with a populated required field, the color isn't pinkish, it's gray:
That's what's leading me to wonder if these color options are stored elsewhere.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 10:57 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-22-2017 11:25 AM
Thanks David. I'm still looking too and found other posts about ServiceNow reading values from a css page called heisenberg_all.css found at the following location:
h t t p s: //<yourSNinstance>/styles/heisenberg/heisenberg_all.css
If you view the above css file, you'll see the line you referenced:
/* line 18, sass/custom/_inputs.scss */
.required-marker:before {
font-family: "retina_icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
color: #f95050;
padding: 0 8px;
}
Now I'm looking to see what and how this CSS file can be updated.
Thanks again for your help. If I find anything, I'll post here.
