Creating ServiceNow CMS Sites

Tips and examples for creating ServiceNow CMS sites for your company.

Many CMS sites are designed similar to a company's intranet website.  Colors, layouts, and fonts from the company's website are all used to build a CMS site.  Other times a CMS site is built to hold new applications that have a easy layout to use.

Tips for learning CMS Development

Here are some tips for building your first CMS website with ServiceNow.

1. Build a standard website.  You might not have time to do this, but if possible build a few standard websites on the internet before starting ServiceNow CMS.  I had built at least 15 websites before starting a ServiceNow CMS project. Even a basic site can teach you basic css, html tables, links, and anchor tags.
2. "Adjust" a sandbox environment.  Go out to a ServiceNow sandbox environment and make all kinds of adjustments to prepare yourself for a first ServiceNow CMS site.
3. Use a new login id. when you are ready to build your first ServiceNow CMS site in a development instance, use a new login id so that you can easily find items you created.
4. Create a New Application.  In your ServiceNow Dev instance, create a new application to hold the new CMS site.  Applications are nice if you create a CMS site you dislike. You can delete the application and it will also delete all the CMS items you created.  Nice if you are experimenting with different CMS items.
5. Copy the OOB Employee Self-Service Site.  Don't adjust the OOB site that comes with a ServiceNow instance.  Click the "Copy Site" button on the site and leave the OOB site alone.  Be aware copying a site takes a while sometimes and also can timeout the screen, but does copy the site.  Copying a site allows you a way out if you create a site you want to delete later.
6. Use a short site name.  Don't name your new site a long name, like "Mike Awesome Site of 2014".  Keep it simple and short like initials of the company.  The page names have size limits and other issues with long site names.
7. Learn Login Rules.  Learn login rules and other tricks to manage multiple CMS sites.
8. Backup your site. Use an update set and backup your site to XML as needed.  You may need to delete the site or go back to previous version and you work through the development process.
9. Learn how to delete your site.  Deleting a site isn't as simple as deleting the main site.  You have delete all the related pages and records.   You can delete all the CMS files you created by deleting the application you made.  Otherwise using an new login id will help to identify all those records for deletion.

Example: Adding a Background to a CMS Site

This is the OOB CMS site that ServiceNow provides.  Let's add a background to it!

Step 1: Add Image

Add a background image called: snebackground.jpg.  This can be added in the "Images" in the Left Navigator.

Step 2: Switch Layout

Switch Portal Page to Layout: CMS 1 Column

I find this layout easier to manipulate than other layouts.

Step 3: Add Background

Adjust this Style Sheet: Gray CSS - Base

BODY {
background: url(snebackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: auto;
margin: 0px;
padding: 0px;
border: 0;
font-weight: normal;
font-family: Arial, Helvetica, Geneva, sans-serif;
}

Step 4: Make sections transparent

Adjust this Style Sheet: Gray CSS - Base

Add these items to the Style Sheet:

/****** Content Body Styles ****************
********************************************/

.cms_layout_table_1_column
{
background: transparent;
}

.cms_layout_container_1_column
{
background: transparent;
} 

.cms_layout_table
{
background: transparent;
}

Step 5: Give a background to Section Blocks

Adjust this Style Sheet: Gray CSS - Menu

div.cms_menu_section_blocks {
width: 260px;
height: 260px;
float: left;
border-style: solid;
margin: 0px 12px 12px 0px ;
border: 1px solid #e0e0e0;
padding: 10px;
background: #EEEEEE; 
}

Step 6: Remove Decorative Top and Bottom Border

Edit Portal Page: Portal

Now we don't have the borders, but still have that top border above the section blocks.

Step 6: Remove Top border

Adjust this Style Sheet: Gray CSS - Base

TD#dropzone0{
padding-bottom: 20px;
}

Now we have no white border.  However we should adjust the spacing of the blocks.

Step 6: Adjust Block Spacing

Adjust this Style Sheet: Gray CSS - Menu

/***** NOTE: DIV.cms_menu_section_blocks HAS MULTIPLE EXTENSIONS ***********/ 
DIV.cms_menu_section_blocks { /* controls the actual grid and style of the menu contained within each of the supermenus */
width: 260px;
height: 260px;
border: 1px solid #e0e0e0;
float: left;
margin: 0px 10px 12px 12px;
padding: 10px;
list-style-type: none;
list-style-image: none;
}

Step 7: Change Color of Navigation Bar

Edit Portal Page: Portal
Edit Header
Change Bottom Menu Row to #000

And so on, you can continue to adjust CMS sites to anything you might ever want.

Hope that helps,
Mike