OU Campus Training

Part 2

2

Login to OU Campus To get started you need to login to OU Campus. While work on your website just use the page last updated date located

in the footer:

This will take you to the OU Campus Login Screen to enter your username and password

Advanced Functionalities Part 2 training will go over the advanced functionalities offered by OU Campus. We will go over four topics today:

1. Widgets

2. Assets

3. Snippets

4. Gadgets and Dashboard

3

Widgets

A Widget is a piece of content that has formatting built in that can be inserted in the right sidebar of one page, multiple

pages, or all webpages in the section. Widgets allow you to single source information and make updates in one location.

Use a widget when you have one piece of content/information that you wanted repeated on multiple pages.

Example

Contact Us information in the right sidebar of the Web Support website (http://www.unco.edu/web-support)

Create a Widget

To create a new Widget, follow these steps:

1. Open widgets folder

2. Select the green New button

3. Select a widget from the New Content modal

4. Name widget and click Create

a. Remember – Filenames are always all lower case with dashes anywhere a space would typically be

5. To add content to a widget, select the green Side Region button or the orange MultiEdit button

a. The edit button will vary depending on the widget you have selected

6. Click Save

7. Publish the Widget

Insert a Widget

There are two ways to insert a widget:

• Page Properties > Parameters

• _props.pcf file: The _props.pcf is automatically created with every subsection and controls multiple components of

an entire section and its’ webpages. It is the only file that does not need to be published.

4

Page Parameters

Insert a Widget via the Page Parameters if you want it to display on a specific page. To insert a widget just follow these

instructions:

1. Open webpage you want widget inserted on

2. Check-out the webpage (make the lightbulb yellow)

3. Select Properties in the Page Actions toolbar to access the Page Parameters

4. Scroll to the bottom of Parameters webpage to Sidebar Content

a. Make sure the Right Sidebar Region is toggled on

b. Browse to the widgets folder and select Widget

5. Select Save

6. Publish webpage

_Props.pcf

Insert a Widget via the _prop.pcf file if you want the widget to display on all webpages of a specific section. To do so just

follow these instructions:

1. Open the _props.pcf file

2. Check-out the file (make the lightbulb yellow)

3. Select Properties to access the Parameters

4. Scroll to the Widgets portion and browse to the widgets folder and select the widget

5

5. Select Save

6. The _props.pcf file does not need to be published but webpages affected by the Parameters do

a. Don’t forget to double check that the right sidebar option is toggled on for those webpages

Widget Tips

• The order of the widgets in the _props.pcf file and/or the Page Parameters determine the order of the widgets on

the webpage

o Widgets inserted via the Page Parameters will always display above widgets inserted via the _props.pcf file.

• Don’t forget to turn on the right sidebar on every page that should display a widget. If the right sidebar isn’t toggled

on users will not be able to see the widget or its’ content.

• When you edit and republish a widget it updates on all webpages it is inserted on (you do not have to republish the

individual webpages)

Assets

An asset allows you to create and manage reusable content in one location and place that content on an unlimited

number of pages within any editable region. When an asset is edited/updated and publish the corresponding webpages

are also republished.

Example

An evaluation form link that is placed on multiple webpages but the Qualtrics URL changes each semester.

Create an Asset

To create and/or edit an asset hover over Content in the Global Navigation toolbar and select Assets from the drop-

down and follow the instructions below:

1. Select the New button

2. Select Web Content

6

3. Fill out Asset Info fields

a. Name: All lowercase, insert a dash anywhere you would normally insert a space

b. Description: Something to help people know what that asset would be used for

c. Tags: Make it easier to find the asset in the asset library

d. Access Settings

i. Access Group: People who are able to edit the asset

ii. Available To: People who are able to insert the asset on their webpages

e. Content

4. Click create

5. Publish the Asset

Insert Asset

To insert an asset just follow these instructions:

1. Navigate to the webpage you want to insert the asset on

2. Open an editable content region

7

3. Click the Insert Asset icon in the JustEdit Toolbar

4. Find and select the asset from the Asset list

5. Select Insert

6. Click Save and Exit and republish webpage

Image Gallery Assets

Image galleries are created as an asset and inserted in the editable content region of designated webpages. You can

learn more about image galleries in the Web Style Guide: http://www.unco.edu/web-

support/webstyleguide/components/galleries.aspx

The type of image gallery displayed on the page is set in the Page Parameters via the Gallery Type dropdown under Row

and Content Modifications. There are four types of image galleries:

• Sliding images only

• Sliding images with thumbnails

• Sliding images with captions

• Content slider: This image gallery is a snippet (page 10)

Create an Image Gallery

1. Navigate to the Asset library via the Global Navigation toolbar

2. Select the New button and select Image Gallery from the Asset options modal

8

3. Fill out the image gallery webpage

a. Name gallery

b. Add description

c. Add tags

d. Set Access settings

e. Leave gallery options portion as is and click Create

4. The images panel will display below Gallery options, click +Add to select images from your desktop

9

5. Drag and drop images to reorder them as well as add captions and alt tag descriptions

6. Click Save and publish image gallery

Insert Image Gallery

See “Insert Asset” on page 7

Image Gallery Tips

• Use images with the same aspect ratio

• Resize images before creating the image gallery

• All image must be under 300K in file size

• Think about where the gallery will be inserted…3 or 4 columns rows are too narrow to properly display image

galleries in high quality

Video

Videos are inserted in editable content regions using the Insert Video icon. All you need is the video URL. Just follow

these instructions:

1. Open editable content region

2. Click the Insert Video icon

3. Paste URL in the Source Field and click OK

10

When in an editable content region, the video preview will not render properly. However, after you click Save & Exit the

video will display the preview and expand (or shrink) to the width of the column it’s inserted in.

Snippets

Snippets are a type of editable content in OU Campus used to organize and format content within an editable content

region.

When you insert a snippet in an editable content region you will see a table. After you add content and save the changes

the table will be stripped and the formatting will automatically populate on the webpage because the Snippet code has

become a part of the webpage’s html

Snippets are a great alternative to formatting needs not met by the Properties > Parameters (see pt. 1 handout)

You can learn more about Snippets in the Web Style Guide: http://www.unco.edu/web-

support/webstyleguide/components/snippets.aspx

Insert a Snippet

To insert a Snippet on your webpage just follow these instructions:

1. Open editable content region

2. Select the Insert Snippet icon in the JustEdit Toolbar

3. Select a Snippet from the Snippets list and click Insert

11

4. Enter content into appropriate regions

5. Click Save and Exit

6. Publish (or republish) webpage

Snippet Tips

• The phrase “Press enter to add more content…” does not need to be deleted

• Do not change, add or manipulate the blue portions of a Snippet table

• You can insert a Snippet inside a Snippet

• To add additional snippet rows hit tab on your keyboard or right click and select Row > Insert Row Before or Row >

Insert Row After

• To delete Snippet rows right click and select Row > Delete Row

Profile Pages

• A Profile Page is the biography page for an individual faculty or staff member

• Profile List Page: The preformatted list of all faculty and staff members created when a Profile List Snippet is

inserted

• Profile Group: Assign individuals to a profile group in order to separate them into categories on the Profile List Page.

Just assign each group a unique profile group number between 1 and 5.

Learn more about Profile Pages on the Web Support site: http://www.unco.edu/web-support/resources/ou-

campus/pages/profile-pages/

Requirements and Standards

Learn more about Profile Page Standards and Requirements on the Web Support Site: http://www.unco.edu/web-

support/resources/ou-campus/pages/profile-pages/profile-page-example.aspx

The following regions are required by the Provosts office:

• Education (do not included date for degree awarded)

• Academic/Professional Experience

• Publications

12

• Research

The following regions are optional for Faculty members:

• Awards and Honors

• Other Experience

Additional Formatting Standards:

• List only the most relevant or recent 4-5 items

• PDF format of CV/Resume can be available for full information

Create New Profile Page

All profile pages much be created in the same section as the profile listing page (aka: index.pcf) with the profile list

snippet inserted on it (see below)

1. Select the green New button and select New Profile Page

2. Fill out new Profile Page modal information

a. Filename: Lastname-firstname

b. Enter first and last name

i. If you want to add degree, insert a comma after the last name and add credentials

c. Fill out remaining fields

i. All are optional so pick and choose as you see fit

3. Click Create

13

4. On resulting page select Properties > Parameters (make sure the lightbulb is yellow before selection Properties). The

Parameters control:

a. Title and Metadata details

b. Optional Additional Regions

c. Dynamic Profile Page Listing Options: These are the values that will impact how the profile displays on the

Profile Listing Page

i. Show in Profile List: If this option is toggled on the faculty/staff member will display on the Profile

Listing Page

14

ii. Add Link to Profile List: If this option is toggled on (or to Alternate URL) there will be a link that says

“Read More about John Smith”

iii. Alternate Link field allows you to have the Read More about link go to an already existing profile

page

iv. Set Profile Group

v. Select Sort Value

vi. Add optional additional text

d. Right Sidebar Content

5. Anytime you make changes to the Page Parameters click Save

6. Select the orange MultiEdit button to:

a. Add image (profile images must be sized 160X160)

b. Update contact information

c. Add (or remove) Mailing address

d. Upload vita

e. Toggle on/off any editable content regions

7. Any time you make changes to the MutilEdit fields click Save

8. Publish profile page

Profile Page Tips

Remember there are two places to edit Profile Pages:

1. Properties > Parameters

2. MultiEdit

Profile Listing Page

The Profile Listing Page is the webpage that displays the list of your faculty and staff members. This list is automatically

generated and formatted using the Profile List Snippet. The snippet creates a list of all faculty and staff based on their

profile page settings and information. See example below:

15

Create a Profile Listing Page

To create a profile listing page just follow the instructions below:

1. Open index.pcf webpage of the faculty subsection you have created

2. Open the editable content region

3. Select the Insert Snippet Icon (page 10)

4. Click Insert

5. Set the number of columns (1-3) and Profile Group (1-5)

a. Each profile group requires its own Profile List Snippet

6. Select Save and Exit

7. Publish Profile Listing Page (aka: index.pcf webpage of the faculty and/or staff sub section)

16

Gadgets

Gadgets are “little programs” that provide additional functionalities and/or shortcuts to additional tools available in OU

Campus. Some gadgets are content-specific, meaning they are only available when you view a webpage or are already

inside an editable content region.

You, as a user, are able to choose which gadgets to display (or hide) in your gadgets sidebar or one your OU Campus

Dashboard.

Display (or hide) Gadgets in Sidebar

To pick and choose which gadgets display in your gadgets sidebar just follow the instructions below:

1. Select the Gadgets icon in the upper right-hand corner this will open the gadgets sidebar

2. Click on the gear icon to select your gadgets

3. Place a checkmark in the box to the left of the gadgets you want to utilize

4. Click Save

Experiment with all the gadgets…you might find some are useful!

Display (or hide) Gadgets on your Dashboard

To configure your Dashboard Gadgets, follow the instructions below:

1. Select Dashboard in the Global Navigation Toolbar

17

2. Select Configure Dashboard

3. Place a checkmark in the box to the left of the gadgets you want to utilize

4. Click Save

Web Communications suggests utilizing the Check-in Gadget…it will make checking in all pages checked out to you easy!

Additional Training Topics

• OU Campus Blogs

• Forms

• Contributors

Getting Help

• Submit any requests for help via the Request Help Gadget (see pt. 1 handout)

• Refer to the to the Web Support Site (http://www.unco.edu/web-support) and Web Style Guide

(http://www.unco.edu/web-support/webstyleguide/) for more information on self-help instructions and formatting

tips/tricks.