Introduction to CMS
Download
1 / 56

Introduction to CMS - PowerPoint PPT Presentation


  • 149 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

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



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



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


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




ad