How to apply CSS to knowledge articles?

[filipwuyts]

Hi,

I'm trying to apply a custom CSS to the articles in our Knowledge Base. As per the procedure explained in Uploading and referencing CSS, I've created a style sheet in Content Management > Design > Style Sheets. I then inserted the link to my style sheet at the top of the article:

<link href="sys_id_of_stylesheet_record.cssdbx" rel="stylesheet" type="text/css"></link>

However, upon saving the article, this line is stripped and replaced with

<p>  </p>

I found a procedure to insert the CSS link in every knowledge article (Custom CSS style sheets in non-CMS pages - ServiceNow Guru ), but sadly, that didn't work either.

My instance is on Geneva.

Any help much appreciated!

Thanks in advance,

Filip

[Shahed Shah1 · Accepted solution]

Perhaps we should take a step back here and take a look at your requirements. Do you want the same style applied to all your KB Articles or are you looking at multiple styles?

I'm guessing you want to have a uniform look and feel for all your KB Articles. In which case what I'm giving you may be a bit overkill. What you could do is update the kb_view or kb_view_customer UI Pages, by adding a line such as this to the top:

<link href="stylesheet_sys_id.cssdbx" rel="stylesheet" type="text/css"></link>

In that ServiceNowGuru link, there's a question mark in the URL. You don't really need that. The above format should be good enough.

If you are hesitant in modifying the kb_view UI Page, there is a reference in the Wiki where customisations to this UI Page are preserved under a new UI Page called kb_view_customer when upgrading to Knowledge Management v3 (Migrating to Knowledge Management v3 - ServiceNow Wiki ). This may require some testing, but I'm wondering if this behaviour can be leveraged for you.

Unfortunately, what we are doing with Templates and Default values to "force" in styles are just hacks for HTML fields. If we could get near full-fledged support for WYSIWYG editing that would be absolutely lovely.

So, I would suggest you also raise an Enhancement Request on HI for styling support in HTML fields. If there's a lot of requests for this, it will certainly drum up interest with the ServiceNow Developers and, potentially, push them forward on this.

[filipwuyts]

Hi Shahid,

Thank you for your input and for thinking along with me. Your understanding of our requirements is correct: we want to apply a uniform style to all our KB articles.

I have changed the kb_view UI Page and removed the kb_knowledge template I made earlier. This works, although there are some minor issues, the most important one being how images show on screen (although the CSS specifies otherwise, they are not resized to match the browser's size).

I've asked my colleague who maintains the KB and who has set up the CSS in the first place, to have a look. Maybe it's just a CSS issue, although it's a bit weird that the image resizing works when the CSS code is in the article itself, but doesn't work when the CSS is called via the UI Page.

By the way: I'm doing all of this in my company's dev instance which is on Fuji; my initial tests were in my personal dev instance (Geneva).

Filip

[Shahed Shah1]

Hi Filip

Glad to hear that things are moving in the right direction. There is a possibility that other elements have styles referred to in the platform's base CSS, so the ordering of when stylesheets are called can have an impact (in addition to the cascading order).

It has been a long time since I've done a web development project, so this may no longer be true. However, you can use the browser's built in developer tools to inspect a particular element which will show what styles are being applied or overruled. If the base CSS is interfering you can raise the priority of a particular style by using ! important. Of course I'm taking a shot in the dark here as a lot of tinkering and testing will need to take place.

Just a quick word of caution here in case this cases issues for you in the future. Since your Dev environment is on Fuji, when upgrading to Geneva and you have modified the kb_view UI Page, this will get renamed to kb_view_customer and a new kb_view UI Page put in place of it. This and other surprises are documented in Knowledge Management v3 migration process.

All the best for your project. I hope it works out well for you.

Shahid

EDIT: Found this article which may be of use Cascade - CSS | MDN

[filipwuyts]

Hi Shahid,

Meanwhile our ServiceNow implementation partner has had a look at this. The solution you provided was indeed the right one - thanks!

The issue we had with part of the CSS not responding had to do with a few minor mistakes in the KB article's HTML code (typos in the tags) and the order in which the CSS's are loaded (ServiceNow "general" CSS, our own CSS).

Thank you for your input and assistance which helped us a great deal!

Filip

[davidbird]

For the love of Pete, I can't even find the "Content Management" page/link/menu/button.