the UB Content Management System
(UBCMS)
Support Website
Online training, help and support, UBCMS status and more.
ubcms.buffalo.edu
Training Feedback Survey
Activity 1: Log into the UBCMS Training Environment
1. Go to https://ubcms-training.buffalo.edu
• If you are logging in from off-campus, you must use VPN. 2. Enter the user name and password you were provided.
• Username for instructor-led training: userXX • Username for self-paced training: your ubitname 3. Click OK.
Activity 2: Exploring the Welcome Screen
After you login, you will see the Welcome Screen.
Websites
• Click the globe icon to go to the Websites console.
• Section of UBCMS where content authors create, edit and activate (publish) pages.
Digital Assets
• Click the camera icon to go to the Digital Assets Manager (DAM). • Allows users to add, access, update and share digital assets such
Activity 3: Exploring the Websites console
1. Click on the Websites icon on the Welcome Screen.
F
G
B
C
D E
A
The Websites console contains: A. Search
B. Shortcuts to the Websites console (globe icon) and the Digital Assets Manager (camera icon)
C. Commands Menu
• Options for creating, copying, deleting, moving, activating and deactivating pages.
D. Sign out and user preferences E. Help
F. Page Tree
• List of pages and folders showing the organization of websites in the UBCMS. This is similar to a site map on a website.
• Used to navigate through your site. • Parent and Child pages
• Child pages, sometimes called subpages, are pages that reside in a level below another page, referred to as the Parent page.
• A page can be both a Parent page to one or more Child pages, as well as a Child page to a Parent page.
G. Page List
Activity 4: Exploring Edit Mode
1. Navigate to your site in the Page Tree.
• For instructor-led training: Websites >Training XX • For self-paced training: Websites >spt >ubitname
2. Click once on the UB Events - Upcoming page in the Page List. This sets the focus of the browser.
3. Double-click on the UB Events - Upcoming page in the Page List. The page will open in Edit mode.
4. Wait for the Sidekick to load.
A
B
C
Edit mode contains: A. Content Finder
• View and search for images and documents in the Digital Assets Manager (DAM).
B. Page content
• Areas where you will add and edit content. C. Sidekick
Activity 5: Exploring the Sidekick
Sidekick tabs
Sidekick tabs, from left to right:
• Components: Displays available components
• Page: Change Page Properties and other page operations • Information: Audit Log and Permissions
• Versioning: Create or restore a version of a page • Workflow: Start a workflow (in development) Sections of the Components tab
The actual components available in the Sidekick will vary depending on the type of page being edited.
• Core Components (covered in this training) • Form Components
Buttons at the bottom of the Sidekick
Sidekick buttons, from left to right: • Edit: Edit the page
• Preview: Preview the page outside of Edit mode
• In Preview mode, the sidekick is minimized. Maximize the Sidekick to return to Edit mode.
• Design: Specialists only
• Websites: Open the Websites console • Reload: Refresh your webpage in Edit mode Moving the Sidekick
Click the top bar of the Sidekick and drag it to the new location. Minimizing and maximizing the Sidekick
Activity 6: Changing a Page Title
The page title appears in the top of the user’s browser window and in the automatically generated navigation links on your website.
(This is not the same as the page name, which is part of the page’s URL.) Make sure UB Events - Upcoming is opened in Edit mode.
1. Click the Page tab in the Sidekick. 2. Click Page Properties....
3. Click the Basic tab.
4. Change the text in the Title text field to Upcoming UB Events. 5. Click OK.
Activity 7: Active links in Edit Mode
If a hyperlink is clicked, the browser will leave the current page and go to the linked page.
Use caution when clicking directly on content in Edit mode. Text, images and video can all be hyperlinks.
1. Click on the UB’s Campuses link in the page navigation. The browser replaces the current page with the linked page. 2. Click the browser’s Back button to return to Upcoming UB
Events.
Entering and exiting Preview mode
3. Click on the Preview icon at the bottom of the Sidekick.
The Sidekick will minimize and the page will show what the end user will see.
4. Click the triangle icon in the top panel of the Sidekick.
Activity 8: Renaming a Page
The page name is part of the page’s URL.
(This is not the same as the page’s title, which appears in the top of the user’s browser window and in the automatically generated navigation links on your website.)
1. Click on Upcoming UB Events in the Page List. 2. Click the Move… button.
3. Type events in the Rename to field. 4. Click Move.
5. Click Yes to confirm the move.
Activity 9: Activating (publishing) a page
Activating a page requires Publisher privileges. Not all Authors will have Publisher privileges.
1. Open the Websites console by clicking the globe icon at the bottom of the Sidekick.
2. Click on the Upcoming UB Events page in the Page List. 3. Click Activate from the Commands Menu.
The Websites console will reflect that the page has been published, displaying information about who activated the content as well as the date and time it was activated.
To deactivate a page, click Deactivate from the top menu or right-click on the desired page and select Deactivate from the popup menu.
Colored icons are used to indicate page status: • Green = published
• Orange = just activated (publishing in process) • Blue = modified since last published
Activity 10: Creating a new page
1. Go to the Websites console.
2. Navigate to your website in the Page Tree.
• Instructor-led training: Websites > Training XX • Self-paced: Websites > spt > ubitname
3. Click New... in the Page List.
4. Type UB information in the Title field.
This will be the page’s title, which will appear in the navigation on the left sidebar, in the Title component at the top of your new page, and in a browser’s title bar and tab.
5. Type ub-information in the Name field.
If you leave the Name field blank, the UBCMS will use your page’s title to create a name that follows best practices for naming documents. Your page name will now be all lowercase characters with hyphens replacing any spaces or special characters.
6. Select Standard Page with Right Sidebar from the available templates (the list of templates will vary depending on context). 7. Click Create.
Your new page will appear at the bottom of the Page List.
Activity 11: Deleting Components
Moving the cursor over a component highlights the component. The highlight is represented by a light green box.
Clicking inside of a highlighted component will select the component. A dark green box represents the selection.
1. Double click the UB Information page in the Page List to open it for editing.
2. Right-click on the first component on the page and choose Delete from the pop-up menu.
3. Click Yes in the warning dialog box to confirm the deletion. 4. Delete the remaining components from the page. (SHIFT-click to
Activity 12: Undoing or redoing page edits
Use keyboard shortcuts to undo and redo changes that you have made to components while in Edit mode.
If a component on the content page is selected, such as a text component, the undo and redo command applies to the selected component.
Use the following keyboard shortcuts while the content frame of the page has focus:
• Undo: Ctrl-z (Windows) or Command-z (Mac) • Redo: Ctrl-y (Windows) or Command-y (Mac)
You can use undo and redo for the following types of page changes: • Adding, editing, removing and moving paragraphs
• In-place editing of paragraph content
• Adding, removing and changing files and images
• Adding, removing and changing annotations and sketches • Copying, cutting and pasting items within a page or across pages • Changes to Scaffold
• Adding and removing references
• Changing property values in component dialog boxes
The number of undo actions is limited to 20 changes, over 10 hours, but may be affected by your browser.
Best practice: create a version to protect a page before extensive
Activity 13: Adding a component to a page
Adding a component to a page
Right-click inside the box labeled Drag components or assets here, select
New… and then choose an available component. or
Drag and drop a component from the Sidekick onto the page. When the component is over an editable area, release the mouse button. The component is added to the page.
• You may place components above, below or between existing components.
• If a component is dragged over a non-editable area, the cursor displays a red circle with a line through it indicating that the component cannot be added to that area.
Component icons
When components are first added to a page, they are represented in one of two ways depending on their type:
• Placeholder Icon: Most of the basic components are represented with a blank, ‘placeholder’ icon.
• Menu Bar: A small gray menu bar, or ‘handle,’ appears in
Activity 14: Adding a Title component
H1 is used as the main title at the top of your page. H2 is for secondary or sub-headings. H3 is commonly used for headings within secondary headings. H4 can be used in the right sidebar.
Changes to the Title Component affect what is displayed on the page, but have no impact on the actual page title.
1. Click on the Components tab in the Sidekick.
2. Drag and drop a Title component from the Sidekick onto the page. By default, the Title component will use the page’s title (UB Information in this activity).
Activity 15: Adding an Intro Text Component
Intro text should be used to give an overview or synopsis of the page content. This style of text should be limited to the first paragraph of a section and not be used for an entire page of text. It can be bolded, linked and italicized.
1. Add an Intro Text component to the page.
2. Double-click the Intro Text component to edit the component. 3. Switch to Microsoft Word and copy the Intro Text from the provided
Activities document.
Activity 16: Adding and formatting text in a Body Text
component
Compose the main content of a page in this component.
Add a Title component
1. Add a Title component to the page.
2. Double-click the Title component to edit the settings. 3. Enter UB Alumni Move the World in the Title field.
4. Choose Heading 2 from the Type/Size dropdown menu. 5. Click OK.
Add a Body Text component
6. Add a Body Text component to the page.
7. Double-click the Body Text component to edit the component. 8. Switch to Microsoft Word and copy the UB Alumni Move the
World text from the provided Activities document.
9. Click in the Rich Text Editor in UBCMS and paste the text using keyboard shortcuts (Ctrl-v on Windows; Command-v on Mac). Bold text
10. Highlight 230,000 UB alumni in the Rich Text Editor. 11. Click the Bold button in the Rich Text Editor.
Italicize text
Activity 17: Adding a Call to Action component
Prompt visitors to click a link to act or learn more.
1. Add a Call to Action component to the page.
2. Double-click the Call to Action component to edit the settings. 3. In the Title field, change the default text to Visit the UB Alumni
Association website.
4. Enter http://alumni.buffalo.edu in the Link field. The http:// or https:// prefix is required for external links.
5. Click the Open in new window checkbox. 6. Choose Medium for Display Size.
7. Click OK.
Note: Due to browser security settings, links to non-secure websites (http://) will no longer load in a secure website (https://). This will affect most external links when viewed in the UBCMS author environment and also for any secure pages on your published site.
An easy solution and general best practice is to always use the Open in
new window setting when adding external links.
Activity 18: Creating a list in a Body Text component
Add a Title component
1. Add a Title component to the page.
2. Double-click the Title component to edit the settings. 3. Enter Discovery into Innovation in the Title field.
4. Choose Heading 2 from the Type/Size dropdown menu. 5. Click OK.
Add a Body Text component
6. Add a Body Text component to the page.
7. Double-click the Body Text component to edit the component. 8. Switch to Microsoft Word and copy the Discovery into Innovation
text from the provided Activities document.
9. Click in the Rich Text Editor in UBCMS and paste the text using keyboard shortcuts (Ctrl-v on Windows; Command-v on Mac). Create a bullet list
Add a Call to Action component
13. Add a Call to Action component to the page.
14. Double-click the Call to Action component to edit the settings. 15. In the Title field, change the default text to Learn more about
research at UB.
16. In the Link field, click on the magnifying glass icon to open the
Select Path dialog box.
17. Navigate to the Research at UB page on your website. 18. Click OK to close the Select Path dialog box.
19. Click the Open in new window checkbox. 20. Choose Medium for Display Size.
Activity 19: What is Alt Text?
Alt text (alternative text) provides a text equivalent for a non-text element (an image, for example) on a web page, and is legally required under ADA and NYS Section P08-005 mandates.
Why use alt text
• Helps make pages accessible to users with visual and certain cognitive disabilities who use screen readers.
• Allows users with browsers that don’t display images (or who have disabled image display) to understand the content and function of an image.
General guidelines on when to use alt text Use alt text when the image:
• Provides information required for comprehension of the page’s content
• Serves as a link (image is functional) • Indicates an action that must be taken
Solution: Use the alt text to describe the action needed, or the important information missing if the image cannot be seen. Alt text is not required when:
• Images are purely decorative
• Alt text would be redundant (a picture of a person where the name of the person appears next to the image as plain text) • Alt text would add unnecessary clutter
Solution: Select This image does not require alt text. In general, alt text should:
• Be accurate and equivalent • Be succinct
Activity 20: Adding a Photo component
Place an image on your page with the Photo component and then mark the photo with a caption. Use the caption built into the Photo component instead of the separate Caption Component.
1. Add a Photo component below the Intro Text on the page. 2. Double-click the Photo component to edit the settings. 3. Click on the Image tab.
4. Click on the Browse tab in the Content Finder. 5. Navigate to Content - Digital Assets - training. 6. Drag and drop northcampus.jpg to the Image tab. 7. Click on the Caption and Alt Tags tab.
8. Enter UB’s North Campus in the Alt Text field.
(see General guidelines on when to use alt text in Activity 19) Add a Caption, if necessary
9. Click on the Caption and Alt Tags tab.
10. Switch to Microsoft Word and copy the Photo Caption from the provided Activities document.
Activity 21: Moving a component
1. Click on the Intro Text component to select it.
2. Drag the dark green border of the Intro Text component until the component is below the Photo component.
3. Release the mouse button. Alternate Method
1. Right-click a component and choose Cut (or choose Copy to duplicate a component).
Activity 22: Adding a File Download component
Offer a file download to your webpage visitors with the File Download component. Use for MS Office documents, PDFs or large image files.
Add a Title component
1. Add a Title component to the page.
2. Double-click the Title component to edit the settings. 3. Enter Download More Information in the Title field. 4. Choose Heading 2 from the Type/Size dropdown menu. 5. Click OK.
Add a File Download component
6. Add a File Download component to the page.
7. Double-click the File Download component to edit the settings. 8. Enter UB Organization Chart (PDF) in the Link text field.
9. Click inside the File box to open the File Upload dialog box
• Instructor-led training: Desktop > UBCMS Training >
UB-org-chart.pdf
• Self-paced training: Navigate to where you downloaded and unzipped the training workshop files, and select the file
UB-org-chart.pdf.
10. Click Open. 11. Click OK.
Activity 23: Adding a Divider component
By default, the Divider is a dotted line, but it can also be used to add extra white space to the page.
1. Drag a Divider component from the Sidekick over the Download
more information Title component, wait for the title to shift down
(the cursor will display a green circle with a check mark), and release the mouse button.
Activity 24: Exploring Photo Component Options
Navigate to UB’s Campuses using the sidebar navigation. Formatting a Photo component using Flexible Height
1. Double-click the Image: Default Height Photo component edit the settings.
Formatting Photo components using Image size and Float options 5. Double-click the South Campus Photo component edit the
settings.
6. Click on the Image Properties tab.
7. Choose Small Landscape from the Image size dropdown menu. 8. Under Advanced, choose Left from the Float dropdown menu. 9. Click OK.
10. Double-click the North Campus Photo component to edit the settings.
11. Click on the Image Properties tab.
12. Choose Small Landscape from the Image size dropdown menu. 13. Under Advanced, choose Right from the Float dropdown menu. 14. Click OK.
Cropping an image
15. Double-click the Baird Point Photo component to edit the settings. 16. Click on the Image Properties tab.
17. Choose Medium Portrait from the Image size dropdown menu. 18. Under Advanced, choose Left from the Float dropdown menu. 19. Click OK. Note that the image is not centered.
20. Double-click the Baird Point Photo component to edit the settings. 21. Click on the Image tab.
22. Click the Crop button.
23. Drag the corners of the bounding box so that the columns in the image are centered in the crop box. Drag inside of the bounding box to reposition the crop.
Activity 25: Adding a Shared Content Reference
component
Display content from another page within the UBCMS.
Navigate to UB Information using the sidebar navigation. 1. Add a Shared Content Reference component to the page. 2. Double-click the Shared Content Reference component to edit
the settings.
3. Click on the Share Reference Component tab.
4. Click on the magnifying glass icon in the Reference Path field to open the Select Path dialog box.
• Instructor-led training: Websites > Shared Content
>Training > Facts and Figures
• Self-paced training: Navigate to Websites > Shared Content-
> spt > ubitname > Facts and Figures
5. Click OK to close the Select Path dialog box. 6. Click OK.
7. Wait for instructor to change the shared content. (See note below for Self-Paced Training)
Note: For Self-Paced Training, you will need to mimic this yourself.
1. Once the shared content appears on your page, move your mouse near the upper right of the Shared Content Reference component box and click on the Source of … link that appears. This should load that shared content into a new tab.
2. Change the title of the shared content. 3. Click the tab for the UB Information page.
4. Refresh the page and notice that the title has changed. Note: Information about creating shared content can be found at http://ubcms.buffalo.edu/help/using-shared-content.html
Activity 26: Adding an On This Page component
On This Page automatically displays all title headings on a page as anchor links in a list. Clicking on an item in the list jumps you down to that content on the same page.
Navigate to UB Information using the sidebar navigation. 1. Add an On This Page component near the top of the page. 2. Double-click the On This Page component to edit the settings. 3. Choose Heading 2 (normal) for Heading Level.
Activity 27: Adding a Callout component to the right
sidebar
Highlight important text on your page, such as time-sensitve dates, tips on a particular process, or a specific warning.
1. Add a Sidebar Components > Callout component to the right sidebar on the page.
2. Double-click the Callout component to edit the settings. 3. Enter UB and SUNY in the Headline field.
4. Switch to Microsoft Word and copy the UB and SUNY text from the provided Activities document.
5. Click in the Text field in UBCMS and paste the text using keyboard shortcuts (Ctrl-v on Windows; Command-v on Mac).
6. Choose a Color scheme. 7. Choose an Icon, if necessary. 8. Click OK.
Activity 28: Adding a Video (YouTube) component
Display a YouTube video on your page in a custom player.
Navigate to Our Buildings using the sidebar navigation. 1. Add a Video (YouTube) component to the page.
2. Double-click the Video (YouTube) component to edit the settings. 3. Click in the YouTube Video Link field.
4. Switch to Microsoft Word and copy the URL under YouTube Video
URL from the provided Activities document.
5. Click in the Rich Text Editor in UBCMS and paste the URL in the
YouTube Video Link field using keyboard shortcuts (Ctrl-v on
Windows; Command-v on Mac). 6. Click OK.
To edit the Video (YouTube) component’s settings after a URL has been added, right-click on the gray bar at the bottom of the component and choose Edit.
Recommended settings • NOT Auto Play
• Allow Full Screen Mode • NOT Include Related Videos • NOT Loop
Activity 29: Create a list of child pages using the List
Builder component (Child Pages)
Create a wide variety of lists, teasers or an entire reveal of other pages and shared content that can be set up manually or automated by the UBCMS.
1. Add a List Builder component to the page.
2. Double-click the List Builder component to edit the settings. 3. Choose Child pages from the Build list using dropdown menu. 4. A new tab will be created. Leave the Parent page field empty. 5. Click on the List tab.
Activity 30: Create a fixed list using the List Builder
component (Fixed List)
Build a list with selected choices. Fixed list requires you to manually add any additional pages to the list.
1. Add a List Builder component to the page.
2. Double-click the List Builder component to edit the settings. 3. Choose Fixed list from the Build list using dropdown menu. 4. Click the plus sign to add a field.
5. Click the magnifying glass icon in the new field to open the Select
Path dialog box.
6. Navigate to Our Buildings > Alumni Arena on your website. 7. Click OK to close the Select Path dialog box.
8. Click the plus sign to add a field.
9. Click the magnifying glass icon in the new field to open the Select
Path dialog box.
10. Navigate to Research at UB > Natural Sciences Complex on your website.
11. Click OK to close the Select Path dialog box. 12. Click the plus sign to add a field.
13. Click the magnifying glass icon in the new field to open the Select
Path dialog box.
14. Navigate to Our Campuses > Ellicott Complex on your website. 15. Click OK to close the Select Path dialog box.
16. Click on the List tab.
Activity 31: Reordering pages
1. Go to the Websites console.
2. Navigate to your website in the Page Tree.
3. Drag and drop the UB Information page icon above Upcoming UB
Events in the Page List.
4. Enter Edit mode for the UB Information page. UB Information appears first in the navigation links on the left side of the page.
Activity 32: Deleting a page
Deactivate the page to be sure that it is removed from the publisher. 1. Go to the Websites console.
2. Navigate to your website in the Page Tree. 3. Click on Research at UB in the Page List.
4. Choose Deactivate from the Commands Menu. 5. Click Yes in the Deactivate Page warning dialog box. 6. Choose Delete from the Commands Menu.
7. Click Yes in the Delete Page warning dialog box.
8. If the page is referenced (being used) by another page on your site, a second dialog box will appear with three options:
Activity 33: Adding an image to the Digital Assets Manager
Filenames should not have spaces, underscores or special characters, such as ( ) ! @ # $ % ^ & * .
1. Go to the Websites console.
2. Go to Digital Assets Manager (click on the camera icon located above the Commands Menu).
• Instructor-led training: Digital Assets > Training XX • Self-paced training: Digital Assets > spt > ubitname 3. Click the arrow next to New... in the Page List and choose New
File... from the dropdown menu.
4. Click Browse....
• Instructor-led training: Desktop > UBCMS Training > select an image file
• Self-paced training: Navigate to where you downloaded and unzipped the training workshop files, and select an image file 5. Click Save/Open.
