slide1
Download
Skip this Video
Download Presentation
Introduction to CMS

Loading in 2 Seconds...

play fullscreen
1 / 56

Introduction to CMS - PowerPoint PPT Presentation


  • 156 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to CMS' - darcie


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
slide1

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
case study servicenow website
Case Study – ServiceNow website

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

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
cms architecture pages
CMS Architecture – Pages
  • Suffix
  • Page Layout
  • Page Theme
  • Frame-based Configuration
cms architecture content blocks
CMS Architecture – Content Blocks
  • Blocks
    • Headers / Footers
    • Menus
    • Lists
    • Static HTML
  • Specialty Content
    • Flash Movies
    • Iframes
    • Content Links
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
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 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
helpful resources
Helpful Resources
  • Firefox 14 – comes with “Inspect Element”
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
slide38
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 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 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
ad