Prudence 2018 was a theme released in January 2018 as a part of Aurora Update 11. Similar to Hale 2015, Prudence 2018 adapted the Prudence design and kept the powerful features of Sherman. A child of the Cornerstone theme, Prudence 2018 will continue to benefit from all new features added to Aurora for years to come.
Guides
Accordion Styling
Posted on by Kelly Cosgrove
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 (Appearance>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.
Moving From Hale/Prudence to Sherman/Hale 2015/Prudence 2018
Posted on by Kelly Cosgrove
So what's different if you're converting a Hale or Prudence site to Sherman, Hale 2015, or Prudence 2018? Here's a few quick points:
UC Slideshow
UC Slideshow does not work with the newer Cornerstone based themes. 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 the new themes 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.
Prudence
Posted on by Kelly Cosgrove
Released in February 2014, Prudence is a child theme of Hale. It is named after Prudence Crandall, the state heroine of Connecticut.

Hale
Posted on by Kelly Cosgrove
Hale was the default theme for all new sites on Aurora from July 2013 – August 2014. It is named after Nathan Hale, the state hero of Connecticut.

Migrating From Other WordPress Servers
Posted on by Cerrigione, Christopher
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.
Migrating From Dreamweaver
Posted on by Cerrigione, Christopher
There is no automated method of converting existing content from Dreamweaver template based sites into Aurora. Our research with tools and with writing our own scripts showed that so much work was needed to clean up the content manually that there was no point to trying automated solutions. Our recommendation, and the method we used as well, is to manually copy and paste the content into new pages.
Migrating HTML Files Onto Aurora
To migrate your HTML files onto Aurora, see the guide on manually migrating websites.
Aurora vs. Dreamweaver
From 2002 – 2013, UConn relied heavily on the use of Dreamweaver templates to manage website content. For those of you accustomed to working with Dreamweaver templates, there are some changes you should be aware of.
- Automatic Backups – Each and every time you hit Publish or Update, Aurora will save a new copy of the page or post you're working on. You can revert to older copies yourself. This means if you accidentally erase a page, you can always go back to a previous version.
- Drag & Drop Navigation – In Dreamweaver, adding, removing, or renaming navigation items was technically challenging and time consuming. Now, you can rearrange your navigation in a simple interface.
- No Setup – With Aurora you don't have to configure software with server addresses, port numbers, or other various settings. All you need is a web browser and an internet connection.
- Multiple Webmasters – Aurora has a lot of features to support multiple people working on the same site, even at the same time. It will warn you if you try to edit a page someone else is working on. You can create users that can only edit certain pages, or whose work always has to be reviewed before being published.
- File and Image Uploading – In the past, this used to require a lot of moving files around into specific folders to get them to appear in Dreamweaver, or setting up a WebDAV client. In Aurora, you simply click 'Add Media' when working on a page, and you can select any file on your computer to upload to the site.
- Scheduled Updates – If you need a site change to happen at a specific date and time, you can now just set a timer. The new page, or changes to a current page, won't appear until the appointed hour.
- Online Drafts – If you're working on a new page, and want some feedback before it appears publicly, save it as a draft. Send the preview link to colleagues without the worry of it appearing on the main site yet.
- Dynamic Homepages – Add news posts, an events calendar, and a photo slideshow, and control them all yourself.
- Limited Coding Ability – In Dreamweaver, you had direct access to all code of the page. In Aurora, that access is limited. There is still a Text/HTML view for those that want to write some code by hand, but for those who want truly custom layouts and displays, please read more about Themes and Plugins.
- Limited Layout & Color Choices – Aurora is limited to the looks and layouts available under the "Themes" menu item. UITS will be adding more options to this main theme over time, and those interested may want to look into custom themes under Themes and Plugins.
Cornerstone
Posted on by Kelly Cosgrove
Cornerstone is not a theme that is generally available to Aurora users. Rather, it was designed to be a starting point or a parent theme for all future themes produced by the UITS Web Development Lab. It is also made available to registered Aurora developers. This page is meant to help those developers in using Cornerstone for their own projects.
Built for Developers
Cornerstone was designed from the ground up to be developer-focused. It’s based on the the WordPress _s (‘underscores’) theme mixed with Bootstrap 3. The design philosophy is to enable and turn on every feature we can think of in Cornerstone, and then child themes will need to unregister the features they don’t support. For example, Cornerstone can support header images, background images, and background colors. However, we may not want those features turned on when the site is being administered by someone less familiar with University Brand standards or web accessibility policies regarding color and contrast.
Themes Using Cornerstone
The following is a list a child themes that already use Cornerstone. These themes were developed at the Web Development Lab and best show how versatile Cornerstone is.
- Harriet Beecher Stowe 2020
- Prudence 2018
- Sherman
- Hale 2015
- Writing Center
- (we’ll add more here over time)
Creating Your Own Theme
Cornerstone is a bare-bones theme created to be developed upon. It is possible to create your own theme built upon cornerstones structure. We welcome you to play with the sources files.
Cornerstone Child Theme Starter Kit
The Cornerstone Child Theme Starter Kit is available to help developers get a new project running quickly. You can access it on GitHub.


Child Theming with SASS
Posted on by Kelly Cosgrove
Cornerstone is built with SASS, and if you build your child theme with SASS, you’ll be shocked at how fast you can make a ton of changes. Though you are able to use CSS, Cornerstone was optimized for SASS.
Initial Child Theme Setup
To begin you must create the basic file structure like any other WordPress child theme. Below is an example. UITS has already compiled a starter kit for you in your sandbox.
Your Cornerstone Starter kit should consist of:
- javascripts
- min
- starterkit.min.js
- starterkit.js
- min
- sass
- variables.scss (SASS variables are located here)
- css
- variables.css
- screenshot.jpg
- functions.php
- README.md
- style.css
- style.scss (This is the ideal place to do style changes)
Understanding SASS
The SASS variables available to you come from three possible documents. Cornerstone registers a large number of new variables mostly pertaining to navigation and widgets.

Sherman, a child theme built with SASS, can redefine any of the variable in Bootstrap or Cornerstone before they are compiled. Rather than wrestling with a dizzying number of selectors and tracking down every single place a single color or font may be referenced, you can edit a few variables and be 80% complete with your redesign. It’s fantastic!
Using a Compiler
In order to make changes, you will have to edit style.scss using the SASS variables. You will also need a SASS compiler. A common one is PREPROS.

Editing variables.scss
Once you have a general understanding of the variables and the file structure you can start editing variables.scss. This file contains listed default variables from both Bootstrap and Cornerstone. A change is simple: search for your target tag and change the attribute to whatever you would like it to be.

Example
To change the default link color for the navigation bar you would have to scroll down to the “$navbar” variables and make the changes you would like.



Editing style.scss
In order to edit the style of your theme you will need to edit it using SASS in style.scss. Variables do not go in style.scss.
Example
Below is an example of how you can change the style of your theme’s master header.



Child Theming with CSS
Posted on by Kelly Cosgrove
Cornerstone was built with SASS, but you can still develop with normal CSS.
Don’t use @import in your CSS file, or your site will break in IE8.
Instead, add this to your functions.php file:
<?php function link_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_uri() ); } add_action('wp_enqueue_scripts', 'link_parent_theme_style'); ?>
Typically, a child theme will @import the css of the parent theme. Bootstrap 3, the framework which Cornerstone is based on, offers very limited support for Internet Explorer 8. By default, a Bootstrap 3 site in IE8 will render the mobile view. One column of content, and the collapse mobile navigation.
Being that IE8 accounts for a sizable (~7%) of traffic on Aurora, Cornerstone makes use of respond.js, which uses javascript to mimic media queries for IE8. However, respond.js will not work on anything loaded via @import. So this alternate method is required.