Custom CSS style sheets in non-CMS pages

One of my favorite things about doing ServiceNow work at Crossfuze is the opportunity to collaborate with our customers to come up with unique ways to solve problems. I’m usually brought in to train and teach, but there’s not a client I’ve worked with that hasn’t taught me a few things as well. A couple of weeks ago, a ServiceNow administrator at one of our clients, Shannon Thurston, came up with a great idea for building a common CSS stylesheet for all of their knowledge articles. This idea can be used throughout the system, and is pretty simple to implement. In this article I’ll show you how to leverage custom CSS stylesheets in non-CMS pages in ServiceNow.

KB Style Sheet

The first step to making this work is to define your style sheet as shown in the screenshot above. What I’ve done is obviously just an example and you can customize this however you want. Style sheets can be defined under the ‘Content Management’ application in your left navigation toolbar.

Next, right-click the style sheet record header and copy the sys_id value. You’ll need the sys_id in order to tell the system which style sheet to use.

Now comes the tricky part. You need to determine where to add the link to your style sheet. In the knowledge base example, there are a couple of options. The first is simply to place the following html tag into your article text field while in the HTML code view (where the ‘href’ attribute includes the sys_id for your CMSstyle sheet record).

Shannon’s idea was to leverage the ‘kb_view_custom’ UI macro to include the style sheet link in one place for all articles. You can do this by creating or modifying the ‘kb_view_custom’ UI macro under ‘System UI -> UI macros’ to include the same code as shown above (where the ‘href’ attribute includes the sys_id for your CMS style sheet record).

Here’s one example of what this might look like…

Styled KB Article

Date Posted:

December 3, 2012

Share This:


  1. Chris Hann December 3, 2012 at 3:03 pm

    Nice post…this is really useful when needing to apply consistent corporate styles to the Knowledge Base.

    One thing to note…I’ve run into issues when using something like `5b2281fb87e130005736b4c329434dfb.cssdbx` as the URL for the Style Sheet. When the Style Sheet is modified browsers continue to use a stale version in their cache, rather than downloading the new version. I get around this by including the Updated value as a URL Parameter, that way the URL changes and the client re-downloads the Style Sheet.

    I’ve put a quick write-up together on how I do this with a custom UI Macro here:

    • Mark Stanger December 3, 2012 at 3:10 pm

      Thanks Chris! That’s good information to know.

  2. Akeel Nazir January 29, 2013 at 4:35 am

    Hi Mark,

    You could store the themes/CSS in another custom table which will have just a large text field and get CSS from this custom table and applying it for instance on a UI page.

    Here is a snippet.

    var gr=new GlideRecord('u_custom_themes');

    var status = 'No record found in Dashboard Themes table';

    while ( {
    var theme_css = gr.u_css;

  3. Ash October 15, 2013 at 4:49 am

    Hi Mark,

    How can we fix the header of related list?

  4. Valérie Gallot April 3, 2014 at 8:28 am

    Hi Mark,
    Thank you for sharing that.
    I just need to customize the default styles that are proposed by TinyMCE editor (header 1, header 2, address, paragraph, preformatted)… or define new styles if it is a better approach…
    The idea is to facilitate the article writers’ job (Knowledge management).
    If I create my own style sheet as you describe, and add the href by default as the text value for a new article, will the TinyMCE editor propose these styles in the toolbar?

    • Mark Stanger April 3, 2014 at 8:33 am

      What the TinyMCE editor does cannot be changed, but if it’s adding HTML tags and you have CSS styles set up for those tags then the CSS will apply to that tag.

  5. Jim Marchant August 26, 2014 at 4:56 pm

    When I add the href to a KB article in the HTML source editor, after saving it strips out the “?” character at the end of the link, rendering it useless.
    We’re on Dublin.

    • Mark Stanger August 26, 2014 at 5:03 pm

      You can always put it in the ‘kb_view_custom’ macro and use it globally. Aside from that, I think you’ll probably need to contact ServiceNow to see why the editor is stripping those characters out.

      • Jim Marchant August 27, 2014 at 10:09 am

        I came up with an alternative/workaround:
        Saved the URL of the stylesheet and used it as the href instead. The editor stripped out the first part of the URL, leaving

        The question marks embedded in this string are not stripped and it works … sorta.
        Now my obstacle appears to be the caching. Drat, will have to enlist a javascripter. :-)

      • Jim Marchant August 27, 2014 at 12:50 pm

        here’s the link href, without open/close brackets:
        link href=”/″ rel=”stylesheet” type=”text/css”

  6. Robert Polickoski May 4, 2015 at 9:06 am

    It would appear that the HTML Editor in Knowledge Base and the Service Request Description will not save any or <g:call) tags.
    So it seems this solution is no longer valid for Eureka.

Comments are closed.




Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.