1 / 56

Introduction to CMS

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

darcie
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to CMS EMILY McMULLIN SR. SOLUTION CONSULTANT ServiceNow

  2. Agenda • Design Examples • Where to start? • Architecture • Configuration • Additional resources

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

  4. CMS Examples – full site redesign

  5. Where do I start? Account Settings  CMS Administration

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

  7. Architecture

  8. CMS Architecture • Sites • Pages • Content Blocks • Various Style Elements

  9. CMS Architecture – Sites • Base URL / Suffix • Base Pages • Home • Login • Search • Default Layout • Default Theme

  10. Site Example

  11. CMS Architecture – Pages • Suffix • Page Layout • Page Theme • Frame-based Configuration

  12. Page Example

  13. CMS Architecture – Content Blocks • Blocks • Headers / Footers • Menus • Lists • Static HTML • Specialty Content • Flash Movies • Iframes • Content Links

  14. Content Block – Header/ Footer

  15. Content Block - Menu

  16. Content Block - List

  17. Content Block - iFrame

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

  19. Configuration

  20. Site

  21. Edit Page

  22. Configuring the Header Logo height - 40-50 pixels

  23. Modify CSS properties “Office of Information Technology” Found in CSS – Header (stylesheets) • Positioning (padding) • Color of Font • Font Family

  24. Modify Menu Content – Portal – Block Menu

  25. 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….

  26. Modify Background Image on blocks TIP: Use Pixlr Add on to modify image in leui of photoshop

  27. Modify Background Image on blocks • Modify Background image and save • Upload to Content System images • Modify CSS to reference new image

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

  29. Step 1 - Capture Category GUID • Find the Furniture and Decor Category in the Service Catalog • Find and copy the category GUID

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

  31. Part 3 - Create Page • Copy the Portal – Order Hardware page (example) • Update Name and URL suffix to reflect Furniture and Decor

  32. Part 4 – Add iFrame to Page • Edit Page • Remove Order Hardware • Add Order Furniture and Decor • Organize blocks accordingly

  33. Part 5 – Create Menu Option • Add Order Furniture and Decor to Order Things header menu

  34. Modify Footer – Static HTML using editor

  35. Helpful Resources • Firefox 14 – comes with “Inspect Element”

  36. ServiceNow search group

  37. Helpful Resources • Service Now CMS Administration Site • http://wiki.servicenow.com/index.php?title=Book:Content_Management • Mozilla Add in – Pixlr Grabber – Edit images

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

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

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

  41. Exercise 3 – Part 1 – Capture Category GUID • Find the Furniture and Decor Category in the Service Catalog • Find and copy the category GUID

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

  43. Exercise 3 – Part 3 - Create Page • Copy the K12 – Portal – Order Hardware page • Update Name and URL suffix to reflect Furniture and Decor

  44. Exercise 3 – Part 4 – Add iFrame to Page • Edit Page • Remove Order Hardware • Add Order Furniture and Decor • Organize blocks accordingly

  45. Exercise 3 – Part 5 – Create Menu Option • Add Order Furniture and Decor to Order Things header menu

  46. Exercise 3 – Part 6 – Test Result

  47. Exercise 4 – Update K12 Portal - Order Splash Menu • Add menu item to K12 Portal - Order Splash that points to the Furniture and Decor page

  48. Exercise 4 – Part 1 - Add Menu item to Order Splash Menu • Add a New Menu Section to K12 - Portal - Order Splash Menu

  49. Exercise 4 – Part 2 – Enter menu section detail • Enter the Menu Section details

  50. Exercise 5 – Update K12 Portal - Block Menu • Add menu item to K12 Portal –Block Menu that points to the Furniture and Decor page

More Related