Change Embedded Help page/content font color

[Ryan74]

Any way to change the Embedded Help -> Help Content font color?

We themed our servicenow instance to use a lighter background for the navigation and help menu and now we're finding some embedded help articles are unable to be read because the font color is white.

I tried going into the source code editor of the Content field but there is no way to change the font color from there. Where is the CSS of the classes and id's that are determining what color these embedded help article's font color are set to?

[Ryan74]

Looks like its controlled by the, $color-white: #ffffff

CSS value on the base theme... sigh. Which is also used everywhere else on ServiceNow

I used a temporary orange color to test,

And it looks like all of the OOB embedded help content's are not able to be edited to remove the HTML tags that are using the $color-white value in the CSS. What can we do? We want to leverage the embedded help but this is unusable if we're using a lighter background on our navigation panels....

[Tony DiRienzo · Accepted solution]

I would say the real issue is that ".help-content li" is not being properly overridden by the style overrides.  The issue is not really with the $color-white SASS variable, but rather that ".help-conent" has its color value set to use $color-white and ".help-content li" has its color value set to "inherit" when they should instead be honoring the style overrides.

Unless there is another undocumented style override that needs to be set, this is incorrect behavior (probably a development oversight), and should probably be reported on the HI portal with the "Something is broken" option so that it can be fixed.  It is NOT a request for enhancement, since this is not correct behavior and it is unusable as is.

[Tony DiRienzo]

Hi Ryan,

I recently found a workaround for this and thought I would share it in case you were still looking for a solution.

You can use a global UI Script to update CSS via javascript.  In your case, the following would work, just update it to include your custom theme in addition to the Clean theme:

(function() {

	// If the preference is not set, fall back on System theme as default
	var theme = getPreference("glide.css.theme.ui16") || "system";
	var cssText = "";

	// "Clean" theme specific style rules
	if (theme === "7547a6e0673102008dd992a557415af1") { 
		// Fix readability issue in embedded help
		cssText += " .help-content li { color: #595959; }";
	}

/* 
  The code from here onward is mostly the same as gsft_main.createStyleSheet() 
  The main difference is the use of getTopWindow() to get the outer frame
  instead of adding the <style> tag to the inner frame. 
*/ 
	var head = getTopWindow().document.getElementsByTagName("head")[0];

	var rules = document.createElement("style");
	rules.setAttribute("type", "text/css");
	rules.setAttribute("id", "cssInjector");

	if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
		head.appendChild(rules);
		var ss = rules.styleSheet;
		ss.cssText = cssText;
	} else {
		try{
			rules.appendChild(document.createTextNode(cssText));
		}catch(e){
			rules.cssText = cssText;
		}
		head.appendChild(rules);
	}

})();