How can I use CSS in Knowledge templates in Geneva?

[craigschotke]

In Fuji, we were able to use CSS in our Knowledge templates by referencing an external style sheet per the instructions here: Custom CSS style sheets in non-CMS pages - ServiceNow Guru.

This worked by inserting a line like this at the top of the HTML:

<link href="5b2281fb87e130005736b4c329434dfb.cssdbx?" rel="stylesheet" type="text/css" />

However, it looks like the text editor in Geneva strips out all link and style tags. Is there another way to use CSS? I don't want to have to do everything using inline styles. Or does anyone know what controls what gets stripped out of the editor and if that can be tweaked?

I saw the suggestions here about adding the CSS to kb_view or kb_view_customer, but as far as I understand that would only work when viewing the articles. I would like the CSS to also work when editing.

How to apply CSS to knowledge articles?

Thanks

[Manjul Katare]

Hi Craig,

There is one possible way to get your custom styles for KB is :

#1: Create a global UI script:

function includeCSSfile(href) {

      var head_node = document.getElementsByTagName('head')[0];

      var link_tag = document.createElement('link');

      link_tag.setAttribute('rel', 'stylesheet');

      link_tag.setAttribute('type', 'text/css');

      link_tag.setAttribute('href', href);

      head_node.appendChild(link_tag);

      console.log("I have added a custom CSS!!!!!!!!!!!!!");

}

includeCSSfile("5b2281fb87e130005736b4c329434dfb.cssdbx?");

Note: Styes cant be previewed here, they would apply at view mode.

#2: (If you like this to be applied on KB Form as well to preview)

Use above snippet and try to add the CSS on the iFrame ID "kb_knowledge.text_ifr" as the HTML editor is inside an iFrame, styles from step#1 would not apply directly.

Hope it helps!

-Manjul

[jamesallgire]

I have had success with just adding a <style> </style> tags at the top of the page when in the HTML editor on an article. Example below. I have found that if changes need made to the CSS you will want to make them in Notepad (or something similar) and then copy over before updating any CSS. Service Now seems to add extra code if you make any changes inside the style tag.

<style><!--

#content{

display:none;

}

#show:target#content {

display: inline-block;

}

#show:target#open {

display:none;

}

--></style>

<div id="show"> Click to expand contents. <a id="open" class=btn btn-default btn-sm" href="#show">Expand</a>

<div id="content">Text that will be expanded<a id="close" class="btn btn-default btn-sm" href="#hide">Close</a></div>

</div>

[craigschotke]

Thanks James. I was able to use <style> tags after changing the 'glide.translated_html.sanitize_all_fields' property to False. It still seems to strip out <link> tags though.