links

UC Slideshow

Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use Meta Slider instead of UC Slideshow.

UC Slideshow is a custom widget developed by UITS to create basic image slideshows for your homepage.

Setup

slideshow-setup-1

  • Log in and go to Appearance > Widgets.
  • Drag UC Slideshow into one of the Home sections.
  • Click the Save button.

Using UC Slideshow

Use the Add Images button to select up to 5 images from your media library. If you haven’t yet added the images to your media library, cancel. Look for Media > Add in the main system navigation, upload your images, and then return to Add Images.

Text

If you’d like text to appear with the image, fill in the ‘Caption‘ field.

Links

To add a link, paste a web address into the ‘UCS Link‘ field, and the entire image will be clickable. For example: http://aurora.uconn.edu/

Ordering

To change the order of the slides, click and drag the thumbnails along the bottom of the window.

Removing Slides

As you select an image, you’ll see a checkmark appear in the top right corner of the thumbnail. To remove the slide, click the checkmark again.

Additional Features

slideshow-setup-2

Effect

Choose what kind of animated transition will occur in between the slides.

Speed

This determines how much time each slide will remain on the screen before moving to the next.

Theme

This will influence how the display controls will look.

Formatting Your Images

If you don’t crop your images, they may not fit quite right into your slideshow.

Depending on which section you place your slideshow in, the maximum width and height will change. If you want a simple rule, just clip your images to the ‘Full Width’ measurements below. That will also give you the greatest degree of flexibility in deciding where to place things.

Homepage Column Type Width (px) Height (px)
Full Width* 1170 456
Two-Thirds width 770 300
Half width 570 221
Third width 370 144
Quarter width 270 105

* If you save it at this size, it will size down correctly to any of the other configurations. If you’re not sure what layout you want to use, sizing your photos to these dimensions is a good option.

Going Live

Before Going Live

Check Admin Email

Be sure to check the admin email for the account, which is listed under Settings > General > E-mail Address. This email is used for a number of purposes and is essential for any sites using the Gravity Forms plugin. The admin email receives all form results and notifications pertaining to Gravity Forms.

email address

Check for Broken Links

Go to your dashboard and check to see if there are any broken links. If there are, be sure to repair them before you go live.
Broken Links Page Screenshot

Accessibility Check

Every site should have contact information in an obvious place (footer, main navigation, homepage). Read through the Accessibility Guidelines and perform spot checks on any pages you think might be problematic.

Search Engine Visibility

From the dashboard, go to Settings > Reading. Make sure the Search Engine Visibility option is unchecked. If left checked, this will block Google and other search engines from listing your content in their search results.

Request Live Site Address

Submit the Go Live Request form. Once the change is made, you will be notified. Some will see the changes immediately, although it may take a few hours for everyone to see the new version of the site. You can reboot your computer to see the change immediately, or if you’re comfortable in the command line you can clear your DNS cache.

After Going Live

You will receive an email notifying you that the site is live.  Now you should complete the following items:

Check for Broken Links Again

Run Broken Link Checker

Depending on how you made your site, it’s possible that there could be broken links in the Navigation or Homepage after the site address changes. Run one more check to be sure everything is ok.

  1. Tools > Broken Links
  2. Click the Search button on the top right
  3. Leave all the fields blank, and click Search

Manually Check Any Widgets

The Broken Link checker doesn’t scan the contents of widgets like the visual editor and others. On your homepage and any other page that uses sidebars, check the links by clicking on them to make sure they work correctly.

Google Setup

Optional, but recommended.

Analytics

Aurora uses Google Analytics to track site-specific traffic information. If you are interested in site traffic statistics, please follow the instructions to set up Google Analytics for your website.

Crawling

Google will eventually find your site and index it. With Google Webmaster Tools, you can speed up the process. This requires Analytics to have already been setup on your site, so if you haven’t done that yet, do that now. While verifying your ownership, use alternative methods: Google Analytics. You may have to clear the site cache under Settings > WP Cache in order to properly verify.

Requesting a Google Crawl of your site

Remove Old Site

It’s always a good idea to deactivate the old site to prevent your visitors from accessing the old/incorrect information. Old sites can show up in Google search results even after you’ve moved your address to the new site.

To remove old sites from the UITS web2 or web9 servers, contact webdev@uconn.edu.
To remove old sites from other servers (Business, NEAG, Libraries, Law, Health, etc) please contact the administrator of that server.

UC Events Calendar

The UC Events Calendar Widget will display events from any account, or combination of accounts, from the main UConn Events Calendar.

Note that the widget marked Calendar is a WordPress default widget that displays a calendar of posts, and is unrelated to the UConn Events Calendar plugin.

To find the widget, log in and go to Appearance > Widgets. Then, drag UC Events Calendar into a Home section.

How to Use

RSS Feed

Paste the link to an RSS feed from the calendar into this section. You can follow the link next to the text field to create an RSS feed.

Events

This is the number of upcoming events that will appear.

Style

UConn Calendar, as text.
Text will give you the dates and titles of events in a simple text format.
UConn Calendar, with Icons
Icons will place each date in a block, and also include the start time for each event.

calendar-widget-options

Shortcodes

You can embed either a list of Upcoming events or a full Month view of events on any post or page using a shortcode.

Calendar Number

The calendar number is the last number in the web address when viewing a specific calendar on events.uconn.edu.

screenshot
When viewing the UConn Master Calendar, the number is “42”
screenshot
Here on the Benton Museum Calendar, the number is “99”

Embed an Upcoming List

Use this shortcode but replace the ‘cal’ number with that of your own calendar. You can the maximum amount of events that appear by changing the number next to ‘limit‘.

[uc_cal view="upcoming" cal="42" limit="10"]

Embed a Month View

Copy and paste the code below into your page and replace the cal number “42” for your calendar’s number. As an example, take a look at the current month of Aurora Training Calendar.

[uc_cal view="month" cal="42" limit="10"]

Multiple Calendars

You can show events from multiple calendars by entering a comma separated list of calendars’ numbers.

[uc_cal view="month" cal="141, 42" limit="10"]

Limitations

You can only have one calendar shortcode on a page. Any additional shortcodes you add will be ignored by the system.

Link to the Current Month of Your Calendar

To link to the current month, week or day of your calendar, you should follow the format below.

http://events.uconn.edu/current/[month|week|day]/[Calendar Number].

For example, http://events.uconn.edu/current/month/42 takes you to the current month view of the UConn Master Calendar.

Private Sites

An entire site can be set to private. This is ideal for an Intranet of a large school or department. The Site Admin can do this by going to Settings > Reading : Site Visibility.

Having a private site will limit the access to the site/pages within the site. However, any images, documents, or other media on the site will not be private. It is possible for users to share the links of those items directly, with no login required. This feature is appropriate for sites that wish to limit access to certain content, but do not require things to be secure in a more rigorous sense.

Keep in mind that these sites do not meet legal standards for security.

Editing Your Top Navigation Menu

  1. On your dashboard, go to Appearance > Menus.
  2. Locate the drop down menu towards the top of the page labeled 'Select a menu to edit' and select 'Top Nav'.
  3. Drag and drop to reorder the navigation items.

Creating a Dropdown Menu

To make a dropdown menu, first create a placeholder menu item.

dropdown-parent

The URL should be a pound sign, and the Label can be whatever you'd like to call this group of pages.

Home Link

The one menu item that won't appear in your menu is the "Home" link. It's inserted into the page for you, and will always be the first item.

Sticky Navigation

Sticky Navigation will "stick" your top navigation menu to the top of the browser window when your site's header scrolls out of view. To enable this, go to Appearance > Customize > Navigation Options > Sticky Navigation and under Sticky Navigation, select the On radio button.

Private Pages

Private options

To make a single page private in an otherwise public site, simply edit the Visibility attribute of the page, located within the Publish block on the top right when editing a page.

Making a page private will:

  • Remove the page from the Navigation
  • Remove the page from any WordPress Menus
  • Remove the page from your site’s A-Z Template
  • Require a NetID SSO Login before viewing

Having a private page will limit the access to that page. However, any images, documents, or other media on the page will not be private. It is possible for users to access the links of those items directly, with no login required. This feature is appropriate for sites that wish to limit access to certain content, but do not require things to be secure in a more rigorous sense.

Keep in mind that these pages do not meet legal standards for security.

 

Linking to Private Pages

Private pages are removed from all navigation and menus. If you wish to link to them somewhere on your site, you will need to either create links to these pages manually with copy and paste or create a page having the List Private Pages template.

List Private Pages Template

This template displays all the private child pages of the current page.

One way to use this template effectively:

  1. Create a new page; you can call it “My Private Pages”
  2. On the right under Page Attributes, change ‘Template‘ to ‘List Private Pages
  3. Now go to Pages > All Pages
  4. Select a number of pages you wish to be made private
  5. Use the Bulk Actions menu item, edit the pages and change ‘Parent‘ to ‘My Private Pages
  6. Go to Pages and then to the page “My Private Pages”
  7. Select View Page, and then copy the web address from the browser
  8. Log back into the dashboard, and go to Appearance > Menus
  9. Select the ‘Footer‘ menu
  10. Add a Custom Link to your menu
  11. Paste the URL to “My Private Pages” into the field, and name it “Intranet” or “Staff Only”
  12. Save the menu

Now, you’ll have a small intranet section of your larger site, conveniently linked in the footer of every page.

Create an Anchor

An anchor is a link that brings you to a specific section of a page. To create an anchor, follow these steps using the visual editor:

  1. Click on the location you want your link to be redirected to.
  2. Click on the Insert dropdown from the menu at the top of the visual editor, then click Anchor.
  3. Type a name for your anchor – keep it lowercase, no spaces or special characters.
  4. Click on OK.
  5. Then go to the location where you want the hyperlink, highlight text.
  6. Click on the Paperclip Icon, then Insert link.
  7. In the URL box, type a # followed by your anchor name.
  8. Click on Add Link.

 

Color Picker

The color picker on paletton.com allows you to pick colors that will compliment each other.

There are also a number of color picker browser extensions that can make it easy to grab HEX color codes from webpages. A popular one is ColorZilla which is available on Chrome and Firefox. In addition to grabbing individual colors, ColorZilla can display a palette of all the colors present on a page and generate CSS gradients.

Accessibility

Accessibility compliance is broken into three tiers, 'A', 'AA', and 'AAA'. Our central themes are all built to adhere to the required level 'A' compliance. Contrast rules are necessary for the higher 'AA' level of compliance.

That said, if you'd like to increase the contrast of the link color, you can open the Appearance > Custom CSS tool, and add in the following code:

.content a { color: blue;}

Use a contrast checker to check accessibility.

Accessibility

All University websites are required to be compliant with the Americans with Disabilities Act, Section 508 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications).

While Aurora’s central themes are tested and kept accessible by UITS web developers, individual webmasters are responsible for keeping the content of their pages and sites accessible as well.

Quick Tips to Keep Your Pages Accessible

Use Good Alt Tags

Alt tags for images help make a site more accessible. WordPress will use the file name of an image as the Alt tag, but this is likely not going to be good enough to pass an accessibility review. A good alt tag briefly describes the content of an image.

No Table Layouts

Layouts of rows and columns should be done with Bootstrap code, not HTML Tables. Besides being inaccessible, HTML tables will also break your pages in mobile views! Tables should only be used when the content in a cell is defined by what row and column it belongs to.

Avoid ‘Click Here’ Links

Avoid ‘Click Here’ and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it will help with your Google search rankings. For example, “For more information about our admissions process click here” could be better as “More information about our admissions process“.

Use Headings

Use headings to organize your page content. For example, this page uses Heading 2 (h2) and Heading 3 (h3) tags. “Quick Tips to Keep Your Pages Accessible” is a Heading 2, and “Use Headings” is a Heading 3. Besides bringing in a larger font and adding white space, these headings are great for accessibility. They allow impaired users to skip through the heading tags the same way you would visually scan a page for headlines. Heading 3 would be a subsection within an Heading 2 section. You can add headings to a by going to Format > Formats > Headings or by using the keyboard shortcut (Control + 2, Control + 3, etc. on Windows, Command + 2, Command + 3, etc. on Mac). Headings help your site to look great, be more accessible, and they will really help your search engine rankings.

Watch Color Contrast

Be careful with color contrast. You will be able to change the color of your page text or upload images with text. Remember that users may have forms of color blindness or weaker eyesight. In the Resources section below, there are ways to measure the contrast levels with some websites or apps. In general, don’t put red text on a green background, or yellow text on a white background. Make sure your text is clearly legible.

Contact Information

Be sure to have contact information clearly visible on the website (homepage, main navigation, or footer), providing the ability to request alternate versions of inaccessible material to viewers with disabilities.

Resources

Please note that while these tools will help issues, many aspects of web accessibility require a degree of judgement. For example, a tool can detect if you're missing an Alt tag for an image, but it won't be able to figure out if an Alt tag accurately describes the image.

Tool Description Instructions
WAVE A website that scans a single page of your site. After scanning, click the Flag icon, then change the filter to Section 508.
Web Accessibility Toolbar A browser extension for Internet Explorer that allows you to quickly run scans on any webpage.  
Accessibility Evaluation Toolbar A browser extension for Firefox that allows you to quickly run scans on any webpage.