Building your knowledge base is easy when you have put thought and structure into using templates. If you know there are a series of Knowledge article types that will follow the same look and feel, templates can be your best friends. All you have to do is plug and play. At Knowledge15, as well as in this special interest group, I have noticed that there has been a need to see what others have used for templates.
Here is the Resource Page template code:
We use our resource pages to bring together links from all of our support self-service properties at ServiceNow. It gives our customers a sense of the content we have available for them, without them having to bounce around Google or between properties. Here is an example of what our Email Resources page looks like.
<p>
<style><!--
p {
font-family: Omnes-pro, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 14px;
//font-weight: bold;
//text-decoration: underline;
margin-top:5px;
margin-bottom:5px;
}
table{
max-width:800px;
}
td {
vertical-align:top;
}
ul
{
// list-style-image:url("<link-to-image>");
list-style-type: none;
padding: 0;
margin: 0;
}
li
{
font-size: 13px;
color: #646464;
line-height: 21px;
// background-image: url("<link-to-image>");
background-image: url("16x16-document.pngx");
background-size:10px 10px;
background-repeat: no-repeat;
background-position: 0 .7em;
padding-top: .3em;
padding-left: 1.2em;
}
li.soon {
// background-image: url("<imageurl>");
background-image: url("soon-doc.pngx");
color: #cccccc;
}
li.star {
// background-image: url("<imageurl>");
background-image: url("star.gifx");
}
li.pdf {
// background-image: url("<link-to-image>");
background-image: url("pdf.pngx");
}
li.link {
// background-image: url("<link-to-image>");
background-image: url("link.gifx");
}
li.zip {
background-image: url("ZipFile.gifx");
background-size:20px 20px;
}
a:link {
color:#646464;
text-decoration:none;
}
a:visited {
color:#646464;
}
a:hover {
color:#D1232B;
text-decoration:underline;
}
.mainPage {
width: 100%;
}
.newsItem {
font-size: 14px;
line-height: 21px;
}
.sectionHeader {
// font-family: Omnes-pro, Arial, Verdana, sans-serif;
font-size: 20px;
line-height: 21px;
}
div.blockHeader {
margin-top:0px;
padding-left:5px;
padding-right:5px;
font-size: 20px;
line-height: 42px;
font-weight: ;
color:#D1232B;
background-image: url;
background-repeat: no-repeat;
background-position: right;
}
div.blockHeader:hover {
background:dddddd;
background-repeat: no-repeat;
background-position: right;
}
.blockImage {
width:50px;
height:50px;
}
.blockComment {
padding-left:5px;
padding-right:5px;
font-size: 13px;
line-height: 16px;
color:#646464;
}
.blockContent {
padding-left:5px;
padding-right:5px;
}
.blockDiv {
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
margin-left:5px;
margin-right:5px;
padding-top:8px;
padding-left:8px;
padding-right:8px;
width:530;
height:180;
background: linear-gradient(#f7f7f7, #fafafa);
border-top-right-radius:16px;
border-bottom-left-radius:16px;
}
.title {
color: #D1232B;
font-weight:;
font-size:28px;
}
.innerTable{
background-color:transparent;
}
div.margin{
padding: 10px 40px 10px 30px;
}
--></style>
</p>
<div class="margin"><br />
<table>
<tbody>
<tr>
<td><img style="align: baseline;" title="" src="/<yourlogolocation>" align="bottom" border="" hspace="" vspace="" /></td>
<td><span class="title" style="color: #646464;">| [Topic] Resources </span></td>
</tr>
</tbody>
</table>
<!--ARTICLE TITLE AND IMAGE: END--> <!--SPACE
--> <br /><br />
<p><span style="font-size: 10pt; font-family: arial, helvetica, sans-serif;">This article is a quick reference guide to the Knowledge Base articles and additional support resources that cover common [topic here] issues and topics. </span></p>
<p> </p>
<!--SPACE
--> <!-- HORIZONTAL LINE: START-->
<table style="height: 40px;" width="100%" cellspacing="0" cellpadding="1">
<tbody>
<tr>
<td bgcolor="#D1232B" height="3"> </td>
</tr>
<tr>
<td bgcolor="#646464" height="3"> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table style="height: 953px;" width="1217">
<tbody>
<tr>
<td class="blockDiv" style="width: 45%;">
<div class="blockHeader">1. P<span>roduct Documentation: [Topic] resources </span></div>
<div class="blockComment">ServiceNow Production Documentation provides helpful information on the [topic]. Check out the links below for the most popular articles.</div>
<div class="blockComment"><span style="font-size: 13px; line-height: 16px;"> </span></div>
<div class="blockComment">
<table class="innerTable" style="height: 223px;" width="501">
<tbody>
<tr>
<td style="width: 100px;" valign="top" width="100">
<p><img style="align: baseline;" title="" src="/<yourimage>" alt="" width="109" height="109" align="bottom" border="" hspace="" vspace="" /></p>
</td>
<td valign="top">
<ul>
<li>Notifications on HI</li>
<li>Key Contact Notifications</li>
<li>Configuring Email</li>
<li>Managing Company Contacts</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="width: 2%;"> </td>
<td class="blockDiv">
<div class="blockHeader">2. Knowledge: Troubleshooting [topic] issues</div>
<div class="blockComment"><span> </span></div>
<div class="blockComment"><span>[Topic] issues can be caused by a wide variety of factors. For more information and troubleshooting help, check out the articles below. <em>Some </em></span></div>
<div class="blockComment"><span><em>links may require you to log in to HI.</em> <br /></span></div>
<div class="blockComment"> </div>
<div class="blockComment">
<table class="innerTable" style="height: 223px;" width="501">
<tbody>
<tr>
<td style="width: 100px;" valign="top" width="100">
<p><img style="align: baseline;" title="" src="/<yourimage>" alt="" align="bottom" border="" hspace="" vspace="" /></p>
</td>
<td valign="top">
<ul>
<li>Subscribing, unsubscribing, and filtering: HI Notifications</li>
<li>Email Resources landing page</li>
<li>Troubleshooting email notifications</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 4%;"> </td>
<td style="width: 45%;">
<p class="blockHeader"> </p>
</td>
</tr>
<tr>
<td class="blockDiv">
<div class="blockHeader">3. Video: [Topic] video tutorials</div>
<div class="blockComment">For our very popular video tutorials on many common UI issues, visit these links.</div>
<div class="blockComment"> </div>
<div class="blockComment"> </div>
<div class="blockContent">
<table class="innerTable" style="height: 251px;" width="525">
<tbody>
<tr>
<td valign="top" width="100">
<p><img style="align: baseline;" title="" src="/<yourimage>" alt="" align="bottom" border="" hspace="" vspace="" /></p>
</td>
<td valign="top">
<ul>
<li></li>
<li>Part One: Verifying Email Sending Configuration</li>
<li>Part Two: Verifying Email Sending Configuration</li>
<li>Part Three: Verifying Inbound Email User and Incident Creation Settings</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td> </td>
<td class="blockDiv">
<div class="blockHeader">4. Community: Answers to [topic] questions</div>
<div class="blockComment">There are many blogs, discussions, threads, and answers to your [topic] questions in the Community. Here are some of the most popular. <em>Some links may require you to log in to the Community.</em></div>
<div class="blockComment"> </div>
<div class="blockContent">
<table class="innerTable" style="height: 265px;" width="516">
<tbody>
<tr>
<td valign="top" width="100">
<p><img style="align: baseline;" title="" src="/<yourimage>" alt="" width="118" height="118" align="bottom" border="" hspace="" vspace="" /></p>
</td>
<td valign="top">
<ul>
<li>Mandatory Notifications</li>
<li>Fields in Email Notification</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 45%;"> </td>
<td> </td>
<td>
<div> </div>
</td>
</tr>
<tr></tr>
<tr>
<td style="width: 45%;"> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
</div>
I have provided the code for two of the other common templates we use. I've changed some reference links throughout, and made some text placeholder, so you'll need to alter for your environment as necessary.
See our other templates that we use in the ServiceNow Knowledge Base:
