Introduction to CMS
This presentation is the property of its rightful owner.
Sponsored Links
1 / 56

Introduction to CMS PowerPoint PPT Presentation


  • 114 Views
  • Uploaded on
  • Presentation posted in: General

Introduction to CMS. EMILY McMULLIN SR. SOLUTION CONSULTANT ServiceNow. Agenda. Design Examples Where to start? Architecture Configuration Additional resources. Content Management System (CMS) Design.

Download Presentation

Introduction to CMS

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introduction to cms

Introduction to CMS

EMILY McMULLIN

SR. SOLUTION CONSULTANT

ServiceNow


Agenda

Agenda

  • Design Examples

  • Where to start?

  • Architecture

  • Configuration

  • Additional resources


Content management system cms design

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

CMS Examples – full site redesign


Where do i start account settings cms administration

Where do I start? Account Settings  CMS Administration


Case study servicenow website

Case Study – ServiceNow website

http://wiki.servicenow.com/index.php?title=Tutorial_-_Building_Our_Website_in_CMS#7._Footer


Architecture

Architecture


Cms architecture

CMS Architecture

  • Sites

  • Pages

  • Content Blocks

  • Various Style Elements


Cms architecture sites

CMS Architecture – Sites

  • Base URL / Suffix

  • Base Pages

    • Home

    • Login

    • Search

  • Default Layout

  • Default Theme


Site example

Site Example


Cms architecture pages

CMS Architecture – Pages

  • Suffix

  • Page Layout

  • Page Theme

  • Frame-based Configuration


Page example

Page Example


Cms architecture content blocks

CMS Architecture – Content Blocks

  • Blocks

    • Headers / Footers

    • Menus

    • Lists

    • Static HTML

  • Specialty Content

    • Flash Movies

    • Iframes

    • Content Links


Content block header footer

Content Block – Header/ Footer


Content block menu

Content Block - Menu


Content block list

Content Block - List


Content block iframe

Content Block - iFrame


How does that work again

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

Configuration


Introduction to cms

Site


Edit page

Edit Page


Configuring the header

Configuring the Header

Logo height - 40-50 pixels


Modify css properties office of information technology

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 Menu Content – Portal – Block Menu


Modify horizontal block menu css

Modify Horizontal Block Menu CSS

Found 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_transparenta.cms_menu_block_item

    • Computers and Hardware

    • Mobile….


Modify background image on blocks

Modify Background Image on blocks

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


Modify background image on blocks1

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 menu

Add New Menu Item to Order Things menu

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

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

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

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

Part 4 – Add iFrame to Page

  • Edit Page

  • Remove Order Hardware

  • Add Order Furniture and Decor

  • Organize blocks accordingly


Part 5 create menu option

Part 5 – Create Menu Option

  • Add Order Furniture and Decor to Order Things header menu


Modify footer static html using editor

Modify Footer – Static HTML using editor


Helpful resources

Helpful Resources

  • Firefox 14 – comes with “Inspect Element”


Servicenow search group

ServiceNow search group


Helpful resources1

Helpful Resources

  • Service Now CMS Administration Site

  • http://wiki.servicenow.com/index.php?title=Book:Content_Management

  • Mozilla Add in – Pixlr Grabber – Edit images


Introduction to cms

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

Exercise 2 – Part 2 – Modify Footer

  • Define Footer (Static HTML)

  • Use WYSIWYG controls


Exercise 3 add new menu item to order things menu

Exercise 3 – Add New Menu Item to Order Things menu

In 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

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

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

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

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

Exercise 3 – Part 5 – Create Menu Option

  • Add Order Furniture and Decor to Order Things header menu


Exercise 3 part 6 test result

Exercise 3 – Part 6 – Test Result


Exercise 4 update k12 portal order splash menu

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

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

Exercise 4 – Part 2 – Enter menu section detail

  • Enter the Menu Section details


Exercise 5 update k12 portal block menu

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

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

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

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

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

CMS Architecture – Page Style Elements


Css resources

CSS Resources


  • Login