plugins

Accordion Styling

If you enable easy accordions on a page or post, you may wish to style them differently from their default CSS. Below are a few different style options with code that you can add to your custom CSS.

Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Sleek Accordions

Code

.accordion .panel {
border:0 solid transparent
}

.accordion .panel-default > .panel-heading {
background:none;
padding:5px;
border-bottom:2px solid #0f4786
}

.accordion h4.panel-title a:before {
font-family:'Glyphicons Halflings';
content:"\e259";
font-size:10px;
padding-right:5px
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
text-decoration:none;
font-size:18px;
font-weight:700
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Modern Accordions

Code

.accordion .panel-default > .panel-heading {
background:linear-gradient(#eaeaea,#fff);
border-radius:6px
}

.accordion.panel-group .panel {
border-radius:6px
}

.accordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top:0 solid transparent
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
font-size:20px;
text-decoration:none
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Statement Accordions

Code

.accordion .panel {
border:3px solid #000
}

.accordion .panel-title {
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:2px
}

.accordion .panel-default > .panel-heading {
background:#fff
}

.subpage .accordion .panel-title a {
color:#000;
text-decoration:none
}

.panel-group .panel-heading + .panel-collapse > .panel-body,.panel-group .panel-heading + .panel-collapse > .list-group {
border-width:0
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Bold Accordions

Code

.accordion .panel-heading{
border-radius:0;
}

.accordion .panel:first-child,.accordion .panel:first-child .panel-heading {
border-top-left-radius:6px;
border-top-right-radius:6px
}

.accordion .panel:last-child,.accordion .panel:last-child .panel-body {
border-bottom-left-radius:6px;
border-bottom-right-radius:6px
}

.accordion .panel + .panel {
margin:0;
border-top-width:0
}

.accordion .panel .panel-heading {
background:#0f4786
}

.accordion .panel-default .panel-body {
background:#5589C3;
color:#fff
}

.subpage .widget .accordion .panel-heading a,.subpage .widget .accordion .panel-heading a:hover,.subpage .widget .accordion .panel-heading a:active {
color:#fff;
font-size:14px;
text-decoration:none
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Embedding Documents

Aurora allows you to embed documents into your pages or posts. This can be especially useful for those documents that tend to automatically download when clicked on, such as those of type .doc or .ppt. Below is a complete list of document types supported by this plugin:

  • Microsoft Word (docx, docm, dotm, dotx)
  • Microsoft Excel (xlsx, xlsb, xls, xlsm)
  • Microsoft PowerPoint (pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm)
  • Adobe Portable Document Format (pdf)
  • Text files (txt)
  • TIFF Images (tif, tiff)
  • Adobe Illustrator (ai)
  • Scalable Vector Graphics (svg)

Embed DocumentOn the edit screen of a post or page, you can embed a document by clicking the Add Document button that appears above the content editor. Then click Upload Document, and you will be able to either choose an existing file or upload a new file.

 

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.

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.

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.

Migrating From Other WordPress Servers

For those of you that have been using WordPress elsewhere, there are a few key distinctions you need know about the Aurora server.

Multisite

Aurora is a multisite installation of WordPress, modeled after WordPress.com. Each site has it's own tables, but they are in one database, and share the same library of plugins and themes.

Plugins

Plugins are controlled at the Network level in Aurora. The addition of any new plugins to the network is decided on by the Aurora Governance Committee, and spelled out in the Wishlist.

Themes

Similar to plugins, Themes are also controlled at the network level. Custom themes are permitted, but must pass a Code Audit process before being allowed on production.

Themes and Plugins

Themes

UConn currently has four central themes as well as a number of custom themes and child themes created for specific UConn sites.

Plugins

To ensure the security and stability of Aurora, plugins are limited to set number determined by the Aurora Governance Committee. Plugins do get added regularly, but must be thoroughly tested and reviewed for compatibility with existing plugins.

Custom Themes and Plugins

Custom development is allowed for the Aurora WordPress server, but each plugin and theme, as well as any update, will have to go through Code Audit before being allowed in the system. Contact webdev@uconn.edu if you're interested in starting a custom project to get a development environment, and to be added to the developer contact lists. You may also want to look at our Live Sites with Custom/Child Themes.

Additional Links

Custom CSS

With the Custom CSS Tool, Site Admins are able to write their own CSS to modify aspects of any template.

This tool is located within Appearance > Custom CSS.

For security purposes, all CSS is sanitized before being allowed onto the site. Once you hit update, you will notice that the formatting may change. That is the sanitizer CSSTidy at work.

You can revert to the previous version of your custom CSS by clicking the Revert to previous version link that appears underneath the editor.

Allowed CSS

The following CSS selectors, values, and properties will work in the Custom CSS plugin.

Default CSS

Additional CSS

Selectors

:before
:after
area
article
audio
section
aside
base
bdi
body
canvas
command
datalist
details
dialog
embed
footer
figure
figcaption
head
header
hgroup
html
keygen
link
main
map
mark
meta
meter
nav
output
progress
rp
rt
ruby
source
style
summary
time
title
track
video
wbr

Properties

align-content
align-items
align-self
background-clip
background-origin
bottom
border-radius
border-image
box-shadow
box-sizing
color
content
display
filter
flex-grow
flex
flex-direction
flex-flow
font-size-adjust
font-stretch
justify-content
left
min-height
min-width
opacity
order
overflow
overflow-x
overflow-y
position
right
tab-size
text-align-last
text-justify
text-overflow
text-shadow
top
visibility
word-break
word-wrap
z-index

Values

src
rgba()
!important

If your site needs to use CSS properties not listed here, look into custom theming.

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.

Server Cache

Normally pages and posts are cached on the server for faster loading times. This can lead to several-minute delays before your content appears to the public. If a change needs to happen immediately, such as fixing wrong information, you can use this tool to manually delete the cache and force the update through faster.

Clearing Cache

In some instances when changes are made to an individual page or the homepage, they can only be seen if the user is logged into the site. A visitor who is not logged in will not be able to see the changes. If this occurs, the cache needs to be emptied. The Performance plugin allows you to empty all caches. To do so:

  1. Log into the site (you must be an Administrator)
  2. Click on the Performance link on the top of your screen and select, ‘Empty All Caches’

performance screen shot

Clear Cache on Individual Pages

Purge cache

  1. Edit the page
  2. Within the Publish module, click on 'Purge from cache'

Another way to clear the cache on a page is within the All Pages list. Simply click 'Purge from cache' from the link menu below the desired page.

Purge page