Are your knowledge articles putting people to sleep?

Does your company suffer from boring information fatigue? Is it hard to make it through knowledge base articles without falling asleep?

Well let’s fix that! Let’s give those boring old articles a breath of fresh air, a new lease on life and make them enjoyable to read.

Using custom HTML/CSS can be difficult for non-technical authors. I present this information as just a reference for what is possible.

So the first thing we need to cover is how to get new styles into your boring, drab knowledge article.

Its actually quite simple, first we need to head over to Content Management -> Style Sheets and create a new style sheet.

[us_single_image image=”17504″ onclick=”lightbox” animate=”fade”]

Now that we’ve create our style sheet, it’s time to add it to our article. All we need to do is grab the sys_id of the style sheet and then we can link it.

[us_single_image image=”17508″ onclick=”lightbox” animate=”fade”]

Let’s head over to Knowledge -> All and open any article. If it’s published, then you’ll need to Checkout the article first. Once you have an article that can be edited, let’s click the <> icon in the tool bar.

[us_single_image image=”17510″ onclick=”lightbox” animate=”fade”]

You’ll be presented with the RAW HTML code for the knowledge article, and this is where all the magic happens.

At the top we want to add a line of code to tell the page to use a custom style sheet.

It should look something like this:

[us_single_image image=”17511″ onclick=”lightbox” animate=”fade”]

If you try with a different tag other than the <p> you may notice that it will revert to a tag anyway. This should be fine, they don’t add height unless they come with text in them or  . The link tag is considered blank because it’s rendered as html syntax, not text.

So now we have access to our custom style sheet, what can we do? We add some pizazz! Let’s make this article more useable, less dry and more interactive.

I’m using this article as a guide for some ideas about creating a better knowledge article.

But let’s start with headers, that includes, in this guide, h1, h2, h3 which should cover most commonly used <h> tags used.

For this to work, I’m using Google Fonts (Alfa Block), your company may have other design requirements, in which case you can use a base64 encoded method to add your font.

Google fonts, gives you the script to add to your web page, just copy that and add it to the knowledge article like so.

Now we update our style sheet as so:

Refresh your article, and it should look something like this.

[us_single_image image=”17512″ onclick=”lightbox” animate=”fade”]

At Cask, we know how to streamline business.

We understand that the world moves fast, but information moves faster. You need data in a hurry, and company-wide automation is the answer. If your business can’t keep pace, we can guide you through a strategic transformation to optimize your operational efficiency.

That’s why we are proud to partner with ServiceNow to provide the solutions to move from manual tasks and paper deliverables to digital applications for managing your business.