Download - Introduction to CMS
![Page 1: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/1.jpg)
Introduction to CMS
EMILY McMULLINSR. SOLUTION CONSULTANTServiceNow
![Page 2: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/2.jpg)
• Design Examples
• Where to start?
• Architecture
• Configuration
• Additional resources
Agenda
![Page 3: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/4.jpg)
CMS Examples – full site redesign
![Page 5: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/5.jpg)
Where do I start? Account Settings CMS Administration
![Page 6: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/6.jpg)
Case Study – ServiceNow websitehttp://wiki.servicenow.com/index.php?title=Tutorial_-_Building_Our_Website_in_CMS#7._Footer
![Page 7: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/7.jpg)
Architecture
![Page 8: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/8.jpg)
CMS Architecture
• Sites• Pages• Content Blocks• Various Style
Elements
![Page 9: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/9.jpg)
CMS Architecture – Sites
• Base URL / Suffix• Base Pages
— Home— Login— Search
• Default Layout• Default Theme
![Page 10: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/10.jpg)
Site Example
![Page 11: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/11.jpg)
CMS Architecture – Pages
• Suffix• Page Layout• Page Theme• Frame-based
Configuration
![Page 12: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/12.jpg)
Page Example
![Page 13: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/13.jpg)
CMS Architecture – Content Blocks
• Blocks— Headers / Footers— Menus— Lists— Static HTML
• Specialty Content— Flash Movies— Iframes— Content Links
![Page 14: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/14.jpg)
Various Page
Content Blocks
Content Block – Header/ Footer
![Page 15: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/15.jpg)
Content Block - Menu
![Page 16: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/16.jpg)
Content Block - List
![Page 17: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/17.jpg)
Content Block - iFrame
![Page 18: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/19.jpg)
Configuration
![Page 20: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/20.jpg)
Site
![Page 21: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/21.jpg)
Edit Page
![Page 22: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/22.jpg)
Configuring the Header
Logo height - 40-50 pixels
![Page 23: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/23.jpg)
Modify CSS properties “Office of Information Technology”
Found in CSS – Header (stylesheets)
• Positioning (padding)
• Color of Font
• Font Family
![Page 24: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/24.jpg)
Modify Menu Content – Portal – Block Menu
![Page 25: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/25.jpg)
Modify Horizontal Block Menu CSSFound 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_transparent a.cms_menu_block_item— Computers and Hardware— Mobile….
![Page 26: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/26.jpg)
Modify Background Image on blocks
TIP: Use Pixlr Add on to modify image in leui of photoshop
![Page 27: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/27.jpg)
Modify Background Image on blocks
• Modify Background image and save• Upload to Content System images• Modify CSS to reference new image
![Page 28: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/28.jpg)
Add New Menu Item to Order Things menuEx. 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
![Page 29: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/29.jpg)
Step 1 - Capture Category GUID• Find the Furniture and Decor Category in the Service
Catalog• Find and copy the category GUID
![Page 30: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/31.jpg)
Part 3 - Create Page• Copy the Portal – Order
Hardware page (example)
• Update Name and URL suffix to reflect Furniture and Decor
![Page 32: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/32.jpg)
Part 4 – Add iFrame to Page• Edit Page• Remove Order
Hardware• Add Order
Furniture and Decor
• Organize blocks accordingly
![Page 33: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/33.jpg)
Part 5 – Create Menu Option
• Add Order Furniture and Decor to Order Things header menu
![Page 34: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/34.jpg)
Modify Footer – Static HTML using editor
![Page 35: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/35.jpg)
Helpful Resources
• Firefox 14 – comes with “Inspect Element”
![Page 36: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/36.jpg)
ServiceNow search group
![Page 37: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/37.jpg)
Helpful Resources
• Service Now CMS Administration Site• http://wiki.servicenow.com/index.php?title=
Book:Content_Management• Mozilla Add in – Pixlr Grabber – Edit images
![Page 38: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/39.jpg)
Exercise 2 – Part 2 – Modify Footer• Define Footer (Static HTML)• Use WYSIWYG controls
![Page 40: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/40.jpg)
Exercise 3 – Add New Menu Item to Order Things menuIn 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
![Page 41: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/41.jpg)
Exercise 3 – Part 1 – Capture Category GUID• Find the Furniture and Decor Category in the Service
Catalog• Find and copy the category GUID
![Page 42: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/42.jpg)
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
![Page 43: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/43.jpg)
Exercise 3 – Part 3 - Create Page• Copy the K12 – Portal –
Order Hardware page• Update Name and URL
suffix to reflect Furniture and Decor
![Page 44: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/44.jpg)
Exercise 3 – Part 4 – Add iFrame to Page• Edit Page• Remove Order
Hardware• Add Order
Furniture and Decor
• Organize blocks accordingly
![Page 45: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/45.jpg)
Exercise 3 – Part 5 – Create Menu Option
• Add Order Furniture and Decor to Order Things header menu
![Page 46: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/46.jpg)
Exercise 3 – Part 6 – Test Result
![Page 47: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/47.jpg)
Exercise 4 – Update K12 Portal - Order Splash Menu
• Add menu item to K12 Portal - Order Splash that points to the Furniture and Decor page
![Page 48: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/48.jpg)
Exercise 4 – Part 1 - Add Menu item to Order Splash Menu
• Add a New Menu Section to K12 - Portal - Order Splash Menu
![Page 49: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/49.jpg)
Exercise 4 – Part 2 – Enter menu section detail
• Enter the Menu Section details
![Page 50: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/50.jpg)
Exercise 5 – Update K12 Portal - Block Menu
• Add menu item to K12 Portal –Block Menu that points to the Furniture and Decor page
![Page 51: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/51.jpg)
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
![Page 52: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/52.jpg)
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
![Page 53: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/53.jpg)
Exercise 6 – Step 4 – Create Menu Structure
• Add Menu Section to Portal – Block Menu• Add Menu Items for
— Desktop Computing— Business
Applications— Communications
Services
![Page 54: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/54.jpg)
Exercise 6 – Step 5 – Enable Security
• Add Security on the Communications Services Menu Item so only a user with the “facilities” role can view
![Page 55: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/55.jpg)
CMS Architecture – Page Style Elements
Dropzones
Layouts
Look and formatting
Cascading Style Sheets (CSS)
Collections of CSS
Themes
![Page 56: Introduction to CMS](https://reader034.vdocuments.us/reader034/viewer/2022050809/56815aa3550346895dc82da9/html5/thumbnails/56.jpg)
CSS Resources
www.codeacademy.com
• Learn HTML and CSS basics
• Some limited courses currently available
• Earn badges for completing lessons
www.w3schools.com/css
• CSS tutorials• CSS reference
www.csszengarden.com
• Inspiration!• What can you do with
CSS alone? • All designs based on
one HTML file