Content Editing Style Guide and Tutorial
The information in this article can be used for knowledge articles, service pages, and any content in ServiceNow.
Contents
Editing Knowledge Articles
1. Open the ServiceNow fullfiller tool: https://ut.service-now.com/navpage.do
2. Type "Knowledge" into the filter field (top left)
3. Click Self-Service > Knowledge and select the base you want to work on
4. Use Search Articles to find the article you want to edit or click Create Content (upper right hand corner) to make a new article
Knowledge Style Options
All knowledge articles use the following styles and options:
Lists
For numbered or bulleted lists we recommend you use single-level lists (i.e. 1, 2, 3, etc.) by clicking on the relevant button in the editor
Use a numbered list for instructions/steps and use a bulleted list for unordered items or important information
Numbered List:
Source code:
|
Bulleted List:
Source code:
|
Emphasize Content
Note Highlight: (for important info, alerts, etc.) within the page's source code , find the
<p></p>
tags around the content you wish to highlight and edit the <p>
tag to say...<p class="alert alert-info"> [content] </p>
Other Highlight: (for content that needs to be emphasized but isn't very important, etc.) within the page's source code , find the
<p></p>
tags around the content you wish to highlight and edit the <p>
tag to say...<p class="well"> [content] </p>
Code Block: (for multiple lines of code) within the page's source code, add
<pre></pre>
tags around the code you wish to highlighte.g.
<pre><html><head> <title>Hello world</title> </head> <body> Hello World </body>
</pre>
If the block of code is very long, edit the <pre> tag to say...<pre class="pre-scrollable"> [code content] </pre>
Code Snippets: (for single lines of code) within the page's source code , add
<code></code>
tags around the code you wish to highlight
e.g. <code> [code content] </code>
"Jump-to" Location Bookmark Link
Follow the instructions below to create a "Table of Contents" style list of "jump-to" location links within your article:
- Find a "header" or phrase that you would like to create a "jump-to" link for (i.e. this article uses a location link to jump to each section header, as seen below for ""Back to top" Bookmark Link")
- Click on the "Source Code" button
within the article's edit page and find the "header" you would like to add a "jump-to" link for
- Within the left <p> tag, type the following
<p id="ID_name">Header Content</p>
(changing "ID_name" to be similar to the header's content)
- For example:
<p id="jump-to-link"><strong>"Jump-to" Location Bookmark Link</strong></p>
- For example:
- Close the "Source Code" box and scroll to the top of the article edit page
- At the top of the page, create a new link in your desired location by clicking on the link icon
and fill out the fields shown below (changing "#ID_name" to be the same as the "id" in the <p> tag you just added)
- Once the page is published, clicking on the "Jump-to" link at the top of your article will "jump" the web page's location to the section you designated via the ID name (an example of this can be seen at the top of this article)
"Back to top" Bookmark Link
Paste the code below in the "Source Code" box of an article to create a "Back to top" link that (when clicked) jumps a user back to the top of the article.
<p style="text-align: right;"><a href="#">Back to top<span class="glyphicon glyphicon-arrow-up"></span></a></p>
Table Style
|
||||||||||||
Source code:
|
Add a Header Row
- Insert a table by clicking on the table icon
and highlight the first row:
-
- Click on the table icon again and select "Row"
-
- From the "Row" sub-menu, select "Row properties"
-
- From the properties pop-up menu, select the drop-down next to "Row" and select "Header", click OK
-
Merged Cells
To combine multiple cells spanning different columns and/or rows, follow the instructions below:
- Insert a table by clicking on the table icon
and highlight the cells you wish to merge/combine:
-
- Click on the table icon again and select "Cell" > "Merge cells"
-
Add Attachments to an Article
- Navigate to the edit page for an article you would like to add an attachment to, or create a new article (instructions listed above)
- On the top right side of the edit page, click on the "paperclip" attachment icon
- (Far left paperclip image, next to the "question mark" icon)
- In the pop up box, click on the "Choose Files" button to find the document/image/file/etc. on your computer that you would like to attach to the article, then click the "Attach" button
- To add multiple attachments, create another "Choose Files" button by clicking on the "Add Another Attachment" button
Create a Download Link for an Attachment
- Find your file in the "Current file attachments:" list in the "Attachments" pop-up box
- Once you have found your attachment (i.e. via the name of the file), right-click on the "view" link to the right of the file's name and select "Copy link address" (or similar) from the right-click menu
- Click on the location in your article where you would like to place the download link, click on the link icon
and paste the attachment "view" link in the "URL:" box, then type what you would like the link to say in the "Text:" box and click "OK"
Service Details Layout
The Service Details Layout is used for internal IT knowledge articles and is not mandatory for Public Knowledge articles. General style guide starts below this section.
|
To add the Service Details header to a knowledge article, follow the instructions below:
- Copy the source code shown below
- Create a new knowledge article
- Within the Text editor click on the source code button
- Delete all default/pre-filled HTML code and paste the Service Details source code that you copied from below, from
<table width="100%">
to<p></p>
- Click the "OK" button on the source code panel and edit the Service Details content within the Text editor
- To easily change the Service Image, close out of the source code panel, click on the "Insert Service Image Here" picture in the Text editor, then insert a new image by clicking on the image button
Source code:
|
Publishing Articles
For more information go to the Self-Approving Published Knowledge Articles page.