CMS Technical Guide

General Website Information

 

WYSIWYG Editor

The WYSIWYG Editor contains all the tools necessary to edit text pages (WYSIWYG Editor is not configured for Info Section pages).The available tools found in the toolbar will depend on the site and page con guration. Some tools may not be available based on permission levels. The WYSIWYG Editor includes basic editing functions, such as those found in Microsoft Word® (cut, copy, undo, redo, bulleted list, numbered list, indent, etc.).This document will review some other common functions.

WYSIWYG Editor


  Save

The Save icon allows the user to save the changes that have been made to the page. Using the Save icon will also close the WYSIWYG Editor and take the user to a preview of the page. If the user desires to save-in-place while continuing to edit, simply use the keyboard shortcut (CTRL+S for Windows and CMD+S for Mac).

Back to Top 

Revert to Last Saved

The Revert to Last Saved icon will undo all changes and revert the content in the editable region to its original state.

Back to Top

Auto-Draft

The lifesaver icon is the Auto-Draft feature. Once a user begins entering in content within the editable region, the Auto-Draft creates a backup on the local workstation in the browser's cache or Internet les approximately every minute.The backup is available for up to 24 hours, but it is contingent on the user's browser settings.

If the browser shuts down unexpectedly, Internet connectivity is lost prior to the content being saved, or even power is lost, content can be retrieved by following the steps below:

1. Open the same browser where the editing was occurring on the same workstation that was being used prior (e.g. if the page was being edited in Mozilla Firefox when the connection was lost, the Auto-Draft retrieval must be completed in Firefox as well, and on the same local system).

2. Navigate to the page that was being edited.

3. Access USF CMS via the DirectEdit link and log in.

4. Click into the editable region that was being edited prior to the loss of connection.

5. Before entering any content into the page, click on the Auto-Draft icon. 

6. Click OK on the pop-up

auto-save pop up

Back to Top

 

Inserting Links

Links are created by highlighting text to be made into a link and clicking on the Insert/Edit Link icon. The Insert/Edit Link icon will not appear until the text or image to be hyperlinked is selected. Links can point to external websites, not maintained in the USF CMS, or other pages within the USF CMS.The Insert/Edit Link icon can also be used to create links to les, such as PDFs.

To insert a link:

1. Highlight the text that will be made into a link 

2. Click on the Insert/Edit Link icon.

3. Enter the link.

   a. If linking to a page outside of the UCM CMS, simply include the URL to the external page in the Link URL field. 

insert link pop up

 

b. If linking to a page or file within the USF CMS:

    i. Click on the browse button. 

insert link browse button to CMS

    ii. Find the file to which the link should be created. If the desired page is not in the selected directory, use the breadcrumbs at the   top of the page and the folders within the window to navigate to the desired page. 

browse CMS window

   iii. Click on the file you wish to link to.

   iv. Click Insert

As a general rule of thumb, when inserting a link to another page on USF's main website or your site, the link should open in the same window. When inserting a link to a page outside of USF, or to a PDF, doc, or other similar le, the page should open in a new window.This selection is made in the eld labeled "Target."

• Linking to pages within USF's website: Open in This Window/Frame

• Linking to pages on another site or binary les: Open in New Window (_blank)

insert link pop up with target drop down

 

To edit a link that has been inserted on a page, simply click on the link, and then click on the Insert/ Edit Link icon. Follow the steps outlined above to modify the link.To delete a link, click on the link, and click the Unlink icon. 

Dependency Manager

When Dependency Manager is activated, it is important to browse for the appropriate page, as described above, in order to ensure that the link will be updated if the target page or directory is moved or renamed.

When inserting a link using Dependency Manager, instead of the URL appearing in the "Link URL" eld, a Dependency tag will be seen. The target URL will appear directly underneath the "Link URL" eld.

dependency tag pop up

 Dependency Manager currently manages links to other pages in the USF CMS account, which may be different subsites of USF. However, it does not manage links to external websites, such as CNN, nor binary les, such as PDFs and images.

Back to Top

Anchor Links

Anchors can be thought of as a bookmark on a page and allows users to jump to a speci c location on that page with just a click. For example, a FAQ page may use anchor links to move users to an answer when a certain question is clicked. View UCM's Logo Usage page to see anchor links in action.

To create an anchor:

1. Position the cursor where the anchor should be placed or select the text or image. 

2. Click the Insert/Edit Anchor icon.

3. In the Anchor Name field, enter the name for the anchor.

insert anchor pop up

 More than one anchor can be added to a page, but each should have a unique name. Names should be as short as possible and use lowercase letters. Numbers can be used, but they cannot start with a number.

4. Click Insert.

To link to an anchor:

1. After creating the anchor, select the text that will link to it. 

2. Clinck on the Insert/Edit Link icon.

3. Select the appropriate anchor from the Anchors drop down menu. and click Insert.

insert anchor link pop up window

 To modify an existing anchor:

1. Click the existing anchor shown in the editing area

2. Click the Anchor icon on the toolbar.

3. The Insert/Edit Anchor dialog shows the existing text for the author. 

4. Make the modification on the text and click Update.

Back to Top

Format Menu (Heading Styles)

The format drop down allows for a pre-determined style to be applied to text by selecting an element from the list. All formatting is defned by the templates themselves and cannot be modified by users.

The following elements are available for use:

• Paragraph

• Heading 3

• Heading 4

• Heading 5

• Heading 6

The "Address" and "Preformatted" elements that appear in the drop down menu are currently not valid.

Heading 1 (h1) and heading 2 (h2) are used within the CMS templates and cannot be used by end-users. Headings 3-6 (h3, h4, h5, h6) are available for use with a text page using the WYSIWYG editor. An example of each style can be found on the USF Brand site.

Please use heading styles for structure of content only and not for design purposes. This helps make your content more accessible and navigable. 

Note: The formatting may not appear correctly while looking at it in the WYSIWYG Editor. Please do not try to manipulate it as the CMS will automatically style it when saved and published.

To apply an element from the Format drop-down:

1. Place the cursor within an existing block of text, on a blank line, or select the text. 

2. Click the Format drop down 

3. Scroll to find the element and click it. This applies the choice. 

To remove or change the applied format: 

1. Place the cursor within an existing block of text, on a blank line, or select the text. 

2. The applied format is shown. 

3. Click the currently applied format to deselect it or choose a different element. 

  Images 

The images icon should only be utilized after adding the Callout-image or Image Grid Snippet.

Media (Video)

The Insert/Edit Embedded Media tool allows users to embed a YouTube video on a text page. Currently, YouTube videos are the only accepted format.

To add a YouTube video:

1. Place the cursor at the location on the page where the video should be displayed.

2. Click on the Insert/Edit Embedded Media icon in the WYSIWYG toolbar.

3. Paste the file's URL into the File/URL box. Enter ONLY this information. Do not remove, add, or change any other information on any other tabs. The CMS is configured to format the video automatically upon saving and publishing. Any modification could cause the design of the templates to break.

You can use either the full YouTube URL from the address bar of your browser or the "Share" URL.

4. Click Insert.

yellow box media stand in

 Note: A yellow box will appear in the WYSIWYG Editor and not the video itself. Please do not try to manipulate it as the CMS will automatically display it in the correct format when the page is saved and published.

Back to Top

Line Break

A line break can be used to begin a new line of text without hitting the Enter or Return key. This is typically used if you want lines of text to appear directly underneath each other without the appearance of a space in between.

Back to Top

Special Characters

Insert Special Character icon allows the use of a copyright symbol, registered trademark, etc. The Select Special Character modal provides a selection of 200 special characters from which to choose. Hover or use the left and right keyboard arrows to navigate the selection. Click on the icon of the character to insert it into the page. Right click the symbol and choose Copy Link from the shortcut menu to copy it to the clipboard, which allows the symbol to be repeatedly pasted on a page.

Back to Top

Snippets

Snippets are blocks of content created and maintained by UCM to allow the use of special design elements on a text page.

Inserting a Callout Image on a Text Page

Prepare all images PRIOR to uploading in the USF CMS according to these specifications (if your image cannot be cropped to these exact sizes, then make sure they match the width measurement):

Callout – Large

• jpg file • measure 720 pixels W x 405 pixels H

• 72 dpi • when saving your photo from Photoshop, use "save for web" option Callout – Medium

• jpg file • measure 320 pixels W x 213 pixels H

• 72 dpi • when saving your photo from Photoshop, use "save for web" option Callout – Small

• jpg file • measure 100 pixels W x 100 pixels H • 72 dpi

• when saving your photo from Photoshop, use "save for web" option

Callout – Medium

• jpg file

• measure 320 pixels W x 213 pixels H

• 72 dpi

• when saving your photo from Photoshop, use "save for web" option

To insert an image:

Use the return/enter key to create a new paragraph where you would like the image to be located.

1. Click on the Snippet icon in the WYSIWYG toolbar.

2. Select "Callout – Image" from the category dropdown.

3. Select the appropriate callout from the snippet dropdown.

callout snippet menu

 

 Selecting a callout with a caption will allow you to edit text that appears beneath the callout image. This text will display in a pre-determined style once the page has been published and cannot be changed in the WYSIWYG editor. "Right" and "Left" indicate the placement of the callout in the text. Please do not try to move or manipulate the caption as the CMS will automatically style it when saved.

4. Click Insert

snippet box

 Note: The callout will appear in a table within the WYSIWYG Editor. This is for ease of editing and the table will not appear on your site. Please do not try to move or manipulate the table as the CMS will apply the correct styles when saved.

5. Click on the gray placeholder image within the table to replace it with your own photo (white boxes will appear around the image once it has been selected).

6. Click the Image icon in the WYSIWYG Editor.

7. Select the location of your image. Once your image is selected, fill out description text for the image. This description is required for accessibility compliance.

8. Click Update.

If you have selected a callout image with a caption, then edit that text as needed.

9. Click Save icon in WYSIWYG Editor.

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

To remove a callout image from the page:

1. Right click inside the table.

2. Select the "Delete Table" option from the menu.

Inserting an Image Grid on a Text Page

Prepare all images PRIOR to uploading in the USF CMS according to these specifications if you would like the image to fill the maximum space (the width is required, the height should scale proportionally).

Two-column Grid

• jpg file

• measure 355 pixels wide

• 72 dpi

• when saving your photo from Photoshop, use "save for web" option

Three-column Grid (Default)

• jpg file

• measure 230 pixels wide

• 72 dpi • when saving your photo from Photoshop, use "save for web" option Four-column Grid

• jpg file • measure 170 pixels wide

• 72 dpi • when saving your photo from Photoshop, use "save for web" option

To insert an image grid (deviation from these instructions may break the responsive design of the templates):

1. Place the cursor within the WYSIWYG on an empty line where the grid should go.

2. Click the Snippet icon in the toolbar.

3. Select "Media" from the Category drop down menu. Then select "Image Grid" from the Snippet drop down menu.

insert image grid pop up

 

4. Click Insert.

image grid snippet

 

Note: The image grid will appear in a table within the WYSIWYG Editor. This is for ease of editing and the table will not appear on your site. Please do not try to move or manipulate the table as the CMS will apply the correct styles when saved.

5. Indicate how many images you would to display within a row, the options being 2, 3, or 4. The CMS will automatically create additional rows of images on your published page if the number of images you add exceeds the "images per row" that you've chosen (for example, if you choose 3 images per row, and add 4 images to the snippet, your published page will show one row of 3 images, and a second row with 1 image). To add additional images, rightclick within the table and select "Insert Row After." You'll only need to use one single image grid snippet.

6. Click on the gray placeholder image within the table to replace it with your own photo (white boxes will appear around the image once it has been selected).

7. Click the Image icon in the WYSIWYG Editor.

8. Select the location of your image. Once your image is selected, fill out description text for the image. This description is required for accessibility compliance.

9. Click Update.

10. Edit captions, if applicable. You may delete the filler text if captions are not needed.

11. Click Save icon in WYSIWYG Editor.

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

To remove an image from the page:

1. Right click inside the table.

2. Select "Delete Row" option from the menu.

To remove an image grid from the page:

1. Right click inside the table.

2. Select the "Delete Table" option from the menu.

Inserting a Table on a Text Page

Please follow each of these steps for creating tables in the CMS. Deviation from these instructions may break the responsive design of the templates.

1. Open up the WYSIWYG for the page you want to add a table to.

2. Place the cursor within the WYSIWYG on an empty line where the table should go.

Note: Make sure to have an extra space underneath your table before inserting. Otherwise, you won't be able to add any text underneath it if you need to.

3. Click the Snippet icon in the toolbar.

4. Select "Tables" from the Category drop down menu.

Then select the type of table you would like to use (previews of the styles can be found on the next page).

• Bordered and Striped

• Bordered

• Striped

• Default (Lined)

5. Click Insert. Your table will appear with filler text in it. You many edit that text and add rows or columns as needed.

Note: The table may not appear correctly while looking at it in the WYSIWYG Editor. Please do not try to manipulate it as the CMS will automatically style it when saved and published.

6. Click Save icon in WYSIWYG Editor.

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

Table Styling Options

Bordered and Striped

bordered and striped table

Bordered

bordered table

Striped

striped table

Default (Lined) 

default table

 Inserting a Toggle Section on a Text Page 

Toggles can be used to hide a piece of content until a line of text is clicked. Please follow each of these steps for adding toggle sections. Deviation from these instructions may break the responsive design of the templates.

1. Place the cursor within the WYSIWYG on an empty line where the section should go.

2. Click the Snippet icon in the toolbar.

3. Select "Toggle" from the Category drop down menu. Then select "Toggle Section" from the Snippet drop down menu

4. Click Insert.

Note: The toggle section will appear in a table within the WYSIWYG Editor. This is for ease of editing and the table will not appear on your site. Please do not try to move or manipulate the table as the CMS will apply the correct styles when saved.

5. Enter the toggle text and the toggle content. The text is the main headline or question. The content is the text that appears when the section is expanded.

6. Repeat steps 2 - 5 for as many sections as are needed. Then click Save icon in WYSIWYG Editor.

On the preview screen, you will see the toggle text with a plus sign. Once that text is clicked, the symbol will change to a minus sign and the expanded text will appear underneath.

Closed

image of closed toggle

 Expanded 

extended toggle

 Back to Top