How do you modify the CSS styling that is applied to a Knowledge article when viewed?


Out of Box, all Knowledge Base (KB) articles are rendered using the 'kb_view' UI Page. This record is accessible by going to the sys_ui_page table and searching for "kb_view". Make sure you clone the UI Page first before making any changes.

Open the record and within the HTML field, find the line that's commented "Common styles are loaded in the "Knowledge Common Styles" stylesheet"

Below that will be a <link> tag with an href pointing to the Style Sheet used by this UI Page. Remove this part from the link: ?v=${gs.getProperty('glide.builddate')}. Save your changes.

Now, go to the content_css table and find the Style Sheet labeled "Knowledge Common Styles". In here, change/add the CSS properties you require. Same as before, make sure you clone the Style Sheet before making changes. Once done, save and close. That's it!

If the changes do not take effect, try the following:

  • Clear the instance cache (cache.do)
  • Do a hard refresh on the kb_view page
    • CTRL + SHIFT + F5 if using Windows
    • cmd + SHIFT + R is using MacOS

It is important to note that these changes will only apply to the kb_view UI Page. You will not see the CSS applied when creating or editing a knowledge article from kb_knowledge.do.

*DISCLAIMER: This procedure requires modifications to be made to OOB content, which means this is a customization and therefore not supported by ServiceNow Support. Should the changes made here stop working or result in unexpected behavior, it is up to the customer to fix the issues.

*DISCLAIMER 2: When changes need to be made to OOB content, it is best practice to first create a copy of the original content and modify the clone. Leave the original files intact so they receive any future updates or have a backup in case the customizations stop working.

Additional Information

Community content: How to apply CSS to knowledge articles

Article Information

Last Updated:2020-09-08 02:42:19