Santa Clara University

How to create or edit the Quick Links element in CommonSpot

1. To begin, you must be in "Author Mode."

2. Click to add a new element and choose "Content Well" -> "Quick Links." (note: you can use the Quick Links element in the right column also.)

3. Click on the Pencil above the new Quick Links bar and choose "Edit Link Bar..."

4. A new window will open displaying the existing links and the option to add a new link. This is the LinkBar window. To add a new link, click the text indicating to do so.

5. Type in the label for the link as it will appear in the Quick Links menu. Then click next.

6. Next following the linking instructions in the How to Link in CommonSpot Guide.

Additional Options in the LinkBar Window

7. To edit an existing link, in the LinkBar window click the "pencil" next to the desired link and choose "Edit Link."

8. Follow the above steps to change the information as needed.

Note: The links will appear on the Quick Links menu in the same order as seen on the LinkBar window.

9. To change the order of the existing links, click the "pencil" next to the desired link and choose the appropriate option:

• Move link up
• Move link down
• Move link to top
• Move link to bottom

Note: In order to move a link several places up or down, this process will need to be completed multiple times.

10. To prevent needless moving, to insert a new link within an existing group of links, click the "pencil" next to the link directly above or below the desired position, and choose "Insert new link above" or "Insert new link below."

11. Finally to delete a link, click the "pencil" next to the desired link and choose "Delete link."

12. Submit the changes for publication and click the appropriate button to close the window.

Custom Rendering Options

This element uses a custom render handler that will display a list of links. When a link is selected from the list, the user is automatically sent to the destination without having to click a submit button. This depends on Javascript being enabled in the client browser in order to work; if Javascript is disabled, a submit button will be displayed so that users can still get to the quick link destination.

The Quick Links display can be modified by changing a setting for the custom render handler. The background and text color for the select list can be switched from clear (white) to any of the colors in the SCU styles. Here's how to change the colors:

1. After adding the Quick Links element and setting your links, click the Element Properties icon (the one with three horizontal lines) next to the element.
2. Select the "custom render handler" item in the properties list (the "ada compliant" rendering should be checked).
3. Click "next" and select a color.

In the first example below, the color selection is "none". In the example used in the right column, the color selection is "teal". Other options include red, blue, gray, darkgray, khaki, and yellow.