Introduction to CMS

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