This site requires JavaScript to be enabled
Welcome|
Recent searches
IE BUMPER
Home >
Information Technology >
IT Professional Services >
ServiceNow >
KB0012412

Content Editing Style Guide and Tutorial

Number of views : 73
Article Number : KB0012412
Published on : 2021-05-06
Last modified : 2021-05-06 13:48:08
Knowledge Base : ServiceNow - Public Self Help

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:

  1. one
  2. two
  3. three

Source code:

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

Bulleted List:

  • one
  • two
  • three

Source code:

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

Back to top


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 highlight

e.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>

Back to top


Follow the instructions below to create a "Table of Contents" style list of "jump-to" location links within your article:

  1. 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")
  2. 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
  3. 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>
  4. Close the "Source Code" box and scroll to the top of the article edit page
  5. 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)
  6. 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


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>

Back to top


Table Style

Column 1 Columns 2 & 3 (merged)
Row 1a Row 1b Row 1c
Row 2a Row 2b Row 2c
Row 3a Row 3b Row 2c

Source code:

<table>
<thead>
<tr><th><strong>Column 1</strong></th>
<th colspan="2"><strong>Columns 2 & 3 (merged)</strong></th></tr>
</thead><tbody>
<tr>
<td>Row 1a</td>
<td>Row 1b</td>
<td>Row 1c</td>
</tr>
<tr>
<td>Row 2a</td>
<td>Row 2b</td>
<td>Row 2c</td>
</tr>
<tr>
<td>Row 3a</td>
<td>Row 3b</td>
<td>Row 2c</td>
</tr>
</tbody>
</table>

Back to top


Add a Header Row

  1. Insert a table by clicking on the table icon  and highlight the first row:
  3. Click on the table icon again and select "Row"
  5. From the "Row" sub-menu, select "Row properties"
  7. From the properties pop-up menu, select the drop-down next to "Row" and select "Header", click OK

Back to top


Merged Cells

To combine multiple cells spanning different columns and/or rows, follow the instructions below:

  1. Insert a table by clicking on the table icon  and highlight the cells you wish to merge/combine:
  3. Click on the table icon again and select "Cell" > "Merge cells"

Back to top


Add Attachments to an Article

  1. Navigate to the edit page for an article you would like to add an attachment to, or create a new article (instructions listed above)
  2. On the top right side of the edit page, click on the "paperclip" attachment icon 
  4. (Far left paperclip image, next to the "question mark" icon)
  5. 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
  7. To add multiple attachments, create another "Choose Files" button by clicking on the "Add Another Attachment" button

Back to top

 

  1. Find your file in the "Current file attachments:" list in the "Attachments" pop-up box
  3. 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
  5. 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"

Back to top

 

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.

Service Details
Service [Service Name]
Owner(s) [Owner Names]
Related Site(s) [Resource Links]
Eligible Users Former/Current/Future Staff
Former/Current/Future Students
Former/Current/Future Faculty
Users with [...] Entitlement

To add the Service Details header to a knowledge article, follow the instructions below:

  1. Copy the source code shown below
  2. Create a new knowledge article
  3. Within the Text editor click on the source code button 
  4. 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>
  5. Click the "OK" button on the source code panel and edit the Service Details content within the Text editor
  6. 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:

<table width="100%">
<tbody>
<tr>
<td style="width: 60%; vertical-align: middle; align: center;">
<img style="display: block; margin-left: auto; margin-right: auto;" 
src="/sys_attachment.do?sys_id=107b54814f4fd24031eb7bcd0210c7f4"
align="baseline" /></td>
<td style="width: 40%; vertical-align: middle;">
<table width="100%" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr><th style="text-align: center;" colspan="2">
<strong>Service Details</strong></th></tr>
<tr>
<td><strong>Service</strong></td>
<td>[Service Name]</td>
</tr>
<tr>
<td><strong>Owner(s)</strong></td>
<td>[Owner Names]</td>
</tr>
<tr>
<td><strong>Related Site(s)</strong></td>
<td>[Resource Links]</td>
</tr>
<tr>
<td><strong>Eligible Users</strong></td>
<td>Former/Current/Future Staff<br />
Former/Current/Future Students<br />
Former/Current/Future Faculty<br />
Users with [...] Entitlement</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p></p>

Back to top


Publishing Articles 

For more information go to the Self-Approving Published Knowledge Articles page. 

Back to top



Was this useful?
Thank You! Your feedback has been submitted.

Feedback