Guides

Accordions

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordions. You will need to use the Page Builder editor.

Creating Accordions

In Page Builder, create one new Visual Editor widget for each item in the accordion. In each Visual Editor widget, click on Attributes and check the box under Accordion, so that it is enabled. Then, add the title and content. Note that the title of the visual editor becomes the accordion header, and clicking on the title will expand the item's content. So, each Visual Editor with Accordion enabled must contain a title in the Title field.

If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together and as a result, clicking on one item’s title will expand its content while collapsing all other items.

Styling Accordions

Accordions are easily to style using your site's Custom CSS. We have also put together a guide with several pre-made accordion styles along with CSS that you can copy and paste onto your own website.

Below is an example of an accordion menu.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat commodo elit sit amet mollis. Sed condimentum ipsum sed nulla malesuada sagittis. In mattis interdum dolor eget tempus. Morbi dapibus volutpat arcu, et finibus mi ultricies quis. Donec blandit sapien enim, ut volutpat tellus tempus aliquet. Sed at turpis lectus. Ut sed posuere leo, sit amet condimentum sem. Nam bibendum augue lacus, nec laoreet diam congue et. Suspendisse eget rhoncus magna, ac tincidunt orci. Nam porttitor gravida urna id feugiat. Nullam consequat vehicula tortor, id interdum ex luctus vitae. Nullam dignissim tortor nec molestie condimentum. Donec ante turpis, varius a interdum nec, lobortis venenatis nunc.

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit. Proin et lacus posuere, tincidunt elit quis, dapibus augue. Fusce placerat tempus efficitur. Etiam nec facilisis velit. Curabitur vulputate dolor ac metus sollicitudin, in commodo lacus aliquam. Sed risus dui, fringilla non ultricies non, pellentesque non enim. Vestibulum ut ornare nulla, non malesuada erat.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede.

Panel 3

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Maecenas vel finibus metus. Maecenas eu aliquam nunc. Sed eros nisl, ornare ut laoreet et, pulvinar vestibulum elit. Etiam ultricies pretium dignissim. Phasellus fringilla vestibulum erat, egestas faucibus purus congue ut. Aenean rhoncus maximus augue, quis bibendum velit laoreet et. Integer a consectetur enim. Sed cursus urna blandit dui elementum mollis. Praesent sit amet dolor imperdiet, cursus lacus id, venenatis urna. Aenean ac dolor lorem.

Here is what the edit screen of this page looks like:

easy-accordions-edit-screen

Note that only the second, third, and fourth Visual Editors have Accordion enabled.

Header Widget Area

A maximum of 2 widgets can be added to the right side of your header by going to Appearance > Widgets and adding widgets to the section labeled Header Content.

The maximum height of the section is 76px. Any content taller than 76px will be cut off.

All widgets are automatically floated to the right, so the first widget will always be to the far right and the second will stack to the left of it.

If you would like to add an image or  logo to the header area, there are two sizes that work best.

If you are using only 1 widget in the header, you have an available space of 565px x 76px available to work with.

max-header-widget-image-size-full

If you are using 2 widgets in the header, you have an available space of 282px x 76px available to work with.

max-header-widget-image-size-half

By default, the site search disappears from the header once a widget is added. If you would like to keep the search on your site you can add a search widget to the Header Content widget area to bring it back.

Page Hierarchy

Breadcrumbs are based on the hierarchy of the pages. First you need to have a parent page. Then on the child(ren) page(s), choose the parent page in the Parent drop-down menu in the Page Attributes section on the right-hand side, and Publish or Update the page(s).
Page Attributes Parent Dropdown

When you go to the screen that lists all your pages, you can see that hierarchy shown with the dash next to the child(ren) page(s). In the screenshot below, Other Custom Plugins page is the child of Plugins page.

Page Hierarchy

Once the Breadcrumbs option is set to be On in Appearance > Customize > Navigation Options > Breadcrumbs, the breadcrumbs will display on top of the child(ren) page(s).

Precrumbs can be added to the left of the Breadcrumbs to add links to other pages or parent sites. Go to Appearance > Menus, click on create a new menu, enter “Precrumbs” as the Menu Name, add menus items and click Save Menu.

precrumbs

The Precrumbs and Breadcrumbs are displaying on the top of the Other Custom Plugin page now.

Moving From Hale/Prudence to Sherman/Hale 2015

So what's different if you're converting a Hale or Prudence site to Sherman or Hale 2015? Here's a few quick points:

UC Slideshow

UC Slideshow does not work with Sherman, Hale 2015, or any other Cornerstone based theme. You will need to replace any slideshow you had on the old site. You can use the same images, but you'll have to load them up with Meta Slider.

Navigation

The Primary Navigation menu needs to be set in Appearance > Menu; in Hale there was an option to set it in Appearance > Customize.

Bootstrap

If you had pages built with Bootstrap, you'll have to redo them because Sherman and Hale 2015 use Bootstrap 3.

User Profiles

User Profile Pages will need to have their page template reassigned. Go to pages, and use the checkboxes and the Bulk Action > Edit feature to do many of them at once.

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.

UUP Dev Guide

We designed the University User Profiles plugin to be very flexible for developers.

You will need to create a new page template as part of a custom or child theme, and add the PHP below.

Basic List

Add this PHP to a custom WordPress page template to start seeing all of the different fields. To hide certain fields, change their value from ‘true‘ to ‘false‘.


$args = array(
	'tags' => array(),
	'name' => true,
	'image' => true,
	'title' => true,
	'phone1' => true,
	'phone2' => true,
	'email' => true,
	'fax' => true,
	'officeLocation' => true,
	'officeHours' => true,
	'mailingAddress' => true
	);
list_all_public($args);

Using Tags to Filter Users

If you’d like to start listing only those users with a specific tag, add those tag words into the ‘tags’ array like so. This example will only display users that have the tag “faculty”.


$args = array(
	'tags' => array('faculty'),
	'name' => true,
	'image' => true,
	'title' => true,
	'phone1' => true,
	'phone2' => true,
	'email' => true,
	'fax' => true,
	'officeLocation' => true,
	'officeHours' => true,
	'mailingAddress' => true
	);
list_all_public($args);

You can add multiple tags to create more specific groupings. This example will only display users with the tags “faculty” and “associate”.


$args = array(
	'tags' => array('faculty', 'associate'),
	'name' => true,
	'image' => true,
	'title' => true,
	'phone1' => true,
	'phone2' => true,
	'email' => true,
	'fax' => true,
	'officeLocation' => true,
	'officeHours' => true,
	'mailingAddress' => true
	);
list_all_public($args);

University User Profiles

Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use UC People instead of University User Profiles.

University User Profiles is a plugin created by UITS to offer a better way to manage faculty and staff profiles for websites within Aurora.

Key Features

People Pages

Site Administrators can now create pages that display a number of users in a list or table view with portrait photos and contact details. Use Tags to only display users from certain groups.

Please note that users are displayed in a single list or table, alphabetically by last name. Alternate displays are possible, but may require a web developer to create a new page template for your site. See the UUP Dev Guide for details.

Profile Pages

A detailed profile page is created for each user. A person can always log in and update their own profile and Site Administrators can update any user’s profile.

Flexiblility

UUP has a powerful, flexible backend for developers looking to create child or custom themes within Aurora.

Setting Up

What you’ll need:

  • The NetID of every person you want to list.
  • The UConn email address of every person you want to list.
  • The First and Last Names of each person you want to list.

In the next steps, you’ll be using this information to register these people as Users on your site, and you’ll want at least this much information about each person before getting started.

First and foremost, you’ll want to have the users listed on your site. For more information on how to do this, refer to the Adding Users page.

Adding Names

  1. Go to Users > All Users and select the User’s NetID to edit their profile.
  2. Add First and Last Name
  3. Display name publicly as: Change the default NetID to the first and last name.

Adding University Profile Info

Visibility

By default all users are marked as ‘Private’, meaning they are not available to be displayed in the User List or User Table. Marking a user as ‘Public’ will allow them to be displayed. You can use Private to hide certain users. For example, you may want to mark a user Private if they are working on your site but are not considered a member of your group or team.

Tags

This is a powerful feature that can be used to create different types of user index pages. With tags you can create pages that will only display users with the “faculty” tag, or even only those users with both the “faculty” and “adjunct” tags. It’s very flexible but spelling matters, so be precise and consistent!

Image

For best results upload your images as squares: 300 pixels x 300 pixels. Uploading other sizes or shapes will still display as squares, but it may force some of the original image to be cropped out.

Everything Else

The fields Title, Phone 1, Phone 2, Fax, Office Location, Office Hours, and Mailing Address can hold any text information you feel is relevant to those fields. There is no required format.

Remember to save your information by selecting ‘Update User’.

uup-fields
An example of the User Info section

Adding Indexes of Users with Shortcodes

With shortcodes, you can quickly drop a few people into any page or post.

List View

[uc_uup layout="list"]

List view displays all public users in a list format. It shows their photo, name, phone1, email, mailing address, and website address.

Table View

[uc_uup layout="table"]

Table view displays all public users in a table. It shows their photo, name, title, phone1, email, office location, office hours, and courses.

Hiding Information

If you would like to encourage people to email your users rather than call, add “phone1” to the hide_fields:

[uc_uup hide_fields='phone1' layout='table']

You can also hide more than one field by separating the values with commas. If you wanted to hide both the phone number and the email address:

[uc_uup hide_fields='phone1, email' layout='table']

The fields that can be hidden are name, image, title, phone1, email, mailingAddress, officeLocation, officeHours, and courses.

Using Tags to Show Select Users

Users can be entered with tags which can be used to mix and match any combination or subset of your users.

For example, if you tagged a number of your users with the word “faculty” you could then bring up a list of all “faculty” users with:

[uc_uup tags='faculty'  layout='list']

You can also use more than one tag and only display users that have all of those tags. For example, you could create a list of users that have the tags “faculty” and “adjunct” with:

[uc_uup tags='faculty, adjunct'  layout='table']

You can add as many tags as you want to sort your users in as many ways as you can think of.

Combinations

You can, of course, combine tags and hide_fields to create different combinations.

[uc_uup tags='faculty, adjunct' hide_fields='title, officeLocation' layout='table']

Creating an Index of Users with Page Templates (Deprecated)

This is another method to create a page with a list of your users.

Update (July 2014): This method is still available in the themes Hale and Prudence, but it is highly recommended that users pursue the shortcode method outlined above. Future themes will no longer use these page templates.

  1. Go to Pages > Add New
  2. Title your page whatever you like.
  3. Write any content that you would like to appear above your user index in the main content area.
  4. On the right, under Page Attributes, change the Template from Default Template to either User List or User Table.
    page-templates
  5. Optionally, you can also filter the results by one or more tags. To do this, scroll to the very top of the screen and look for the ‘screen options‘ tag. Check the box for ‘Custom Fields‘. If you scroll back down, you’ll see the Custom Fields box appear under the main content area. Click the ‘Enter new‘ link just above the Add Custom Field button. On the left, under Name, enter “userTags”. On the right, enter the tags you would like to limit this index to, separated by commas.
    custom-fields

This page will display the user’s photo if any was added, and a few key pieces of contact information. If you want to use the tags feature, you can make multiple User List or User Table pages, each with different tags, and sort people based on a number of criteria.

Making User Profiles

If you would like to have a more detailed page for one or more of your users, you will want to create a some profile pages.

  1. Go to Pages > Add New
  2. Title your page whatever you like. This is an opportunity for you to add things like a middle name or initial, Dr., Ph.D., Jr., Sr., or other name modifications that won’t appear in an index page.
  3. Enter whatever additional content you’d like in the main content area. This can include a personal statement, a C.V., areas of research, publications, or anything else you’d like.
  4. On the right under Page Attributes, change the Template menu to User Profile.
  5. Once you make this change, a new box will appear beneath the main content area titled ‘Profile User‘. Change this menu to the name of the person you wish to associate with this profile. This will create a link on the index page and bring in their information from their profile. If you don’t see the Profile User box after changing the page template, scroll to the very top of the page and look for the Screen Options tab in the top right corner. Click that and make sure that the Profile User option is checked.

This person will now be linked from the User List or Table you created, and their info will be loaded into a left sidebar.

Homepage Customization in Hale or Prudence

Layout and Other Theme Options

Go to Appearance > Themes and select the Customize link. From here, you have the following options:

Site Title & Tagline

Here, you can change the name of your site as it appears in the top bar. The tagline is not currently used in the system.

Template Options

Here, you can choose what kind of homepage layout you’d like, and choose to include a School, or College in your top bar.

Navigation

Here, you can choose which Menu will appear as the main navigation for the site. You can probably leave it as is. To edit your navigation, see the Navigation guide.

Static Front Page

If you’d like to switch from a traditional site layout to a blog, select “Your latest posts”.
After you’ve finished customizing, hit save in to top right corner of the side panel, and those changes will appear on the site.

Homepage Content

Go to Appearance > Widgets. From here, you have the following:

Available Widgets

This is the library, the repository of possible widgets you can use in your site. To add widgets to the Sidebar, or a Home section, drag it in. The change happens immediately. Some widgets will need to to have some settings configured before they work fully.

Widgets Page
Widgets Screen

Inactive Widgets

Located below Active Widgets, you can use this to “save” a widget and it’s settings. If you switch themes, some of your widgets may end up here.

Sidebar

Widgets placed in the Sidebar will appear on the “News” page, the search results page, the archives page, and pages that use the ‘Default w/Sidebar’ page template.

Home1-Home5

These sections correspond to the different areas of a homepage layout. They will always start form the top left, and then wrap down to a second line.