CMS Technical Guide

Homepage

 

The following instructions guide you through the steps to manage the elements on the included homepage template. If a custom template was created, then separate instructions will be provided by your USF CMS liaison at the time of training. To learn more about the different homepage options read the Homepage Specs page.

Homepage Elements

Feature

Call to Action Boxes

Text Navigation

Widgets

Social Media 

 

Feature 

To select type of Feature (large or small image; large or small rotator; small video)

 1. Click Properties button in the page options at the top of the homepage. 

2. Select type of feature from the "Feature Media Type" drop down menu (video is only available when Feature Media Size is set to small).

3. Select size of feature from the "Feature Media Size" drop down menu.

4. Select layout of feature from the "Feature Media Layout" drop down menu (this option is only available when Feature Media Size is set to small).

5. Select mobile layout of feature from the "Feature Media Mobile Layout" drop down menu (this option is only available when Feature Media Size is set to small).

6. Navigate to and select the desired sidebar widget from the "Feature Media Sidebar Widget" text field (this option is only available when Feature Media Size is set to small).

feature media form

7. Click Save.

8. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

To change homepage static image (large or small), small video, or rotator (large or small)

Prepare all images PRIOR to uploading in the USF CMS by following these guidelines:

• Open the image in Photoshop, or a similar image-editing program.

• Change the image's resolution to be 72 ppi.

• Crop the image to the correct dimensions

– Small Photo/Rotator: 660 pixels by 371 pixels

– Large Photo/Rotator: 1000 pixels by 371 pixels

• Save the image as a jpg using Save for Web for optimization. – Adjust the Quality slider and aim to reduce the image's file size while maintaining graphic quality.

. Click the orange MultiEdit button at the top of the screen and do one of the following:

multi-edit button

 

 

1a. For a large or small image, complete the form under "Feature Image".

feature image form

1b. For a small video, enter in the video URL under "Feature Video".

feature video form

 1c. For a large or small rotator, complete the "Feature Rotator Settings" area on the form. Auto-rotation should be set as "No" for accessibility compliance.

feature rotary settings

 Then complete the form fields and upload images for each rotating item.

display order feature form

2. Click Save.

3. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to Top

To Change Call to Action Boxes

1. From the top (Home) directory, click the widget folder.

2. Click on your unit's folder and select your Call to Action widget (when creating a new Call to Action widget, please use "cta" in the filename along with the subject matter. For example, cta-find-your-major).

3. Click the orange MultiEdit button at the top of the screen.

4. Complete/Edit the form fields and choose the icon for each item (you must have four items in order to use the Call to Action option).

5. Click Save.

6. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

A list of icons currently available is located in Section 5 of this guide. To request a new Call to Action icon to be created, please contact your liaison.

What Call to Action icons are already available?

Departments/units throughout the campus can use any of the icons already created. If you would like to request a custom icon, please contact your liaison.  

About Us Icon

icon-info

Alert Icon

icon-alert

Home Icon

icon-home

be safe

icon-be-safe

Book Icon

icon-book

Bull Sync Icon

icon-bullsync

Calculator Icon

icon-calculator

Camera Icon

icon-camera

Cog Icon

icon-cog

Compass Icon

icon-compass

Cap Icon

icon-cap

E icon

icon-e

Icon Clipboard

icon-clipboard

Envelope Icon

icon-envelope 

Express Icon

icon-express 

Gift Icon

icon-gift 

Handshake Icon

icon-handshake 

Home Icon

icon-home

Laptop Icon

icon-laptop

Lock Circle Icon

icon-lock-circle 

Message Icon

icon-message 

Paper Icon

icon-paper

Person Icon

icon-person-plain

Person Tie Icon

icon-person

Question Mark Icon

icon-question-mark 

Research Icon

icon-research 

Safe Icon

icon-safe

Icon Signature Program

icon-signature-program 

Students Icon

icon-students

Video Icons

icon-video

Wireless Icon

icon-wireless 

Wrench Icon

icon-wrench 

 

 

 

To change Text Navigation

1. From the top (Home) directory, click the widget folder.

2. Click on your unit's folder and select your Text Navigation widget (when creating a new Text Navigation widget, please use "text-navigation" in the filename.

3. Click the orange MultiEdit button at the top of the screen.

4. Complete the Text Navigation portion of the form.

5. Click Save.

6. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to Top

To change an existing Widget

1. From the top (Home) directory, click the widget folder.

2. Click on your unit's folder.

3. Check out the widget that you want to edit.

4. Select the Multi Edit button.

 5. Make all appropriate changes.

6. Click Save.

7. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

To select a Widget to use on your homepage

1. Click the Properties button in the page options at the top of the homepage (index.pcf file).

2. Click the document icon, navigate to and click on the widget you wish to use. You may also enter in the path manually. Widgets need to be created and published prior to selecting them here.

widget homepage

3. Click Save.

4. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

To create a new Widget

If your site has not gone live yet, please contact your CMS Liaison to create new widgets for you. Once your site has launched, follow these steps:

1. From the top (Home) directory, click the widget folder.

2. Click on your unit's folder.

3. Click either the New button or the arrow. Clicking the arrow will provide a quick look at which widgets are available, while clicking the New button will provide a larger view.

widget dropdown selection

4. Select the type of widget you want to create.

5. Complete all required information, following all instructions.

6. Click Create.

7. Click the MultiEdit button.

8. Make all appropriate changes.

9. Click Save.

10. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to Top

Social Media

To change existing networks and links

For sites created PRIOR to August 15, 2016

1. Click the Priorities button in the page options at the top of the homepage (index.pcf file). 

2 Under the "Social Media" section, select, select/deselect the social networks you wish to include/remove. 

social media options

 

3. Enter in corresponding URLs in "Social Network URLs" section. 

social media URL form

4. You can also Show or Hide the Social Media icons from this screen. Simply select Show or Hide from "Show Social Media" drop down menu.

5. Click Save.

6. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

For sites created AFTER August 15, 2016

1. Navigate to your homepage directory and select the "_props.pcf" file. Click on the "Properties" button in the page options at the top of the page.

2. Under the "Social Media" section, select/deselect the social networks you wish to include/ remove.

3. Enter in corresponding URLs in "Social Network URLs" section.

4. You can also Show or Hide the Social Media icons from this screen. Simply select Show or Hide from "Show Social Media" drop down menu.

5. Click Save.

6. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to Top