Introduction to CMS

EMILY McMULLINSR. SOLUTION CONSULTANTServiceNow

• Design Examples

• Where to start?

• Architecture

• Configuration

• Additional resources

Agenda

Content Management System (CMS) Design

• Rolling out the Content Management Systems doesn't mean you have to completely redesign your instance. In this session we will talk about the components of the CMS and what you can easily configure without engaging a host of HTML and design resources.

• DISCLAIMER – for site redesign – GET THE RESOURCES INVOLVED

CMS Examples – full site redesign

Where do I start? Account Settings CMS Administration

Case Study – ServiceNow websitehttp://wiki.servicenow.com/index.php?title=Tutorial_-_Building_Our_Website_in_CMS#7._Footer

Architecture

CMS Architecture

• Sites• Pages• Content Blocks• Various Style

Elements

CMS Architecture – Sites

• Base URL / Suffix• Base Pages

— Home— Login— Search

• Default Layout• Default Theme

Site Example

CMS Architecture – Pages

• Suffix• Page Layout• Page Theme• Frame-based

Configuration

Page Example

CMS Architecture – Content Blocks

• Blocks— Headers / Footers— Menus— Lists— Static HTML

• Specialty Content— Flash Movies— Iframes— Content Links

Various Page

Content Blocks

Content Block – Header/ Footer

Content Block - Menu

Content Block - List

Content Block - iFrame

How does that work again?

• Content blocks are defined based on templates headers, footers, iframes, menus

• The look and feel of a content block template is defined using jelly and css

• Content blocks are placed on a page using “edit page”

• Pages are referenced starting from the site level • Pages call other pages

Configuration

Site

Edit Page

Configuring the Header

Logo height - 40-50 pixels

Modify CSS properties “Office of Information Technology”

Found in CSS – Header (stylesheets)

• Positioning (padding)

• Color of Font

• Font Family

Modify Menu Content – Portal – Block Menu

Modify Horizontal Block Menu CSSFound in Menu Styles CSS

- font, color

• td.cms_menu_section_blocks_title — Order Things

• cms_menu_second_level_text— Browse the Service Catalog

• p.cms_menu_separator— Bottom border

• Picture – menu record

• TABLE.background_transparent a.cms_menu_block_item— Computers and Hardware— Mobile….

Modify Background Image on blocks

TIP: Use Pixlr Add on to modify image in leui of photoshop

Modify Background Image on blocks

• Modify Background image and save• Upload to Content System images• Modify CSS to reference new image

Add New Menu Item to Order Things menuEx. Steps to add the Furniture and Decor Service Request Category to the “Order Things” menu

Step 1 – Display and copy category GUID

Step 2 – Create IFrame

Step 3 – Create CMS page

Step 4 – Add IFrame to page using “Add Content”

Step 5 – Create menu option that calls page

Step 1 - Capture Category GUID• Find the Furniture and Decor Category in the Service

Catalog• Find and copy the category GUID

Step 2 – Create iFrame

• Use the Order Hardware iFrame as reference• Create an Order Furniture and Decor iFrame• Use the GUID copied in the previous step

Part 3 - Create Page• Copy the Portal – Order

Hardware page (example)

• Update Name and URL suffix to reflect Furniture and Decor

Part 4 – Add iFrame to Page• Edit Page• Remove Order

Hardware• Add Order

Furniture and Decor

• Organize blocks accordingly

Part 5 – Create Menu Option

• Add Order Furniture and Decor to Order Things header menu

Modify Footer – Static HTML using editor

Helpful Resources

• Firefox 14 – comes with “Inspect Element”

ServiceNow search group

Helpful Resources

• Service Now CMS Administration Site• http://wiki.servicenow.com/index.php?title=

Book:Content_Management• Mozilla Add in – Pixlr Grabber – Edit images

Demo

• Inspect Element• Header

— Logo, Title, Colored Bars— Title Font and Color

• Menu— Change Layout of Menu— Menu title and subtitle— Font Color— Menu Background Image

• Footer— Static Content

Exercise 2 – Part 2 – Modify Footer• Define Footer (Static HTML)• Use WYSIWYG controls

Exercise 3 – Add New Menu Item to Order Things menuIn this exercise we are going to add the Furniture and Decor Service Request Category to the K12 site “Order Things” menu

Step 1 – Display and copy category GUID

Step 2 – Create IFrame

Step 3 – Create CMS page in K12

Step 4 – Add IFrame to page using “Add Content”

Step 5 – Create menu option that calls page

Exercise 3 – Part 1 – Capture Category GUID• Find the Furniture and Decor Category in the Service

Catalog• Find and copy the category GUID

Exercise 3 – Part 2 – Create iFrame

• Use the Order Hardware iFrame as reference• Create an Order Furniture and Decor iFrame• Use the GUID copied in the previous step

Exercise 3 – Part 3 - Create Page• Copy the K12 – Portal –

Order Hardware page• Update Name and URL

suffix to reflect Furniture and Decor

Exercise 3 – Part 4 – Add iFrame to Page• Edit Page• Remove Order

Hardware• Add Order

Furniture and Decor

• Organize blocks accordingly

Exercise 3 – Part 5 – Create Menu Option

• Add Order Furniture and Decor to Order Things header menu

Exercise 3 – Part 6 – Test Result

Exercise 4 – Update K12 Portal - Order Splash Menu

• Add menu item to K12 Portal - Order Splash that points to the Furniture and Decor page

Exercise 4 – Part 1 - Add Menu item to Order Splash Menu

• Add a New Menu Section to K12 - Portal - Order Splash Menu

Exercise 4 – Part 2 – Enter menu section detail

• Enter the Menu Section details

Exercise 5 – Update K12 Portal - Block Menu

• Add menu item to K12 Portal –Block Menu that points to the Furniture and Decor page

Exercise 6 – Add new menu block for Business Services

• Add a new menu block on the main K12 portal that directs the user to Business Service content pages

Step 1 – Display and copy category GUIDs

Step 2 – Create iFrames

Step 3 – Create CMS Pages in K12 and add iFrames

Step 4 – Create menu structure

Step 5 – Enable Security on Menu Item

Exercise 6 – Step 3 – Create Pages and associate IFrames

• Create a new page for each category• Update each new page with iFrame

— Desktop Computing— Business

Applications— Communications

Services

Exercise 6 – Step 4 – Create Menu Structure

• Add Menu Section to Portal – Block Menu• Add Menu Items for

— Desktop Computing— Business

Applications— Communications

Services

Exercise 6 – Step 5 – Enable Security

• Add Security on the Communications Services Menu Item so only a user with the “facilities” role can view

CMS Architecture – Page Style Elements

Dropzones

Layouts

Look and formatting

Cascading Style Sheets (CSS)

Collections of CSS

Themes

CSS Resources

www.codeacademy.com

• Learn HTML and CSS basics

• Some limited courses currently available

• Earn badges for completing lessons

www.w3schools.com/css

• CSS tutorials• CSS reference

www.csszengarden.com

• Inspiration!• What can you do with

CSS alone? • All designs based on

one HTML file