themes

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.

Homepage Customization in Sherman or Hale 2015

The homepages of Sherman and Hale 2015 are configured primarily in the Page Builder. On the homepage, click ‘Edit Page’. If you see the ‘Visual’, ‘Text’, and ‘Page Builder’ tabs on the top right of your page editing area, click ‘Page Builder’.  If you only see ‘Switch to Editor’ this means you’re already in Page Builder mode.

Page Builder View
View of editing screen in Page Builder mode – click to enlarge

Templates

There are a few different template options to choose from for the homepage that cooperate with Page Builder. Users can select Blank, Page Builder, or Page Builder – Cards. Each of these give the homepage a slightly different look, so it is best to try them all out and see which one fits best.

Note: Home and Default Template do NOT work with the Page Builder layout. They were used for the old style homepages that were customized under Appearance > Widgets.

Layouts

The page builder allows users to add different widgets in different areas of the page. To begin, click ‘Add Row’ at the top of the page editing area. Users can add as many rows as they would like. Before the row is added, the user can choose how many columns will be in that row and what percentage of the row each column will take up. There are many pre-made column ratios to choose from as well. Once the columns are set up, click ‘insert’ to officially insert the row into your homepage.

Home Page Builder Add New Row
Page Builder Add New Row screen – click to enlarge

If you roll your mouse over the wrench button above the top right corner of the row, you will see options to edit, duplicate, or delete it. You can move a row up or down by clicking and dragging the arrow button next to the wrench button.

Row Options

If you click to edit a row, you will see a screen similar to when you first added the row. However, in addition to editing the column number/sizes, you may also edit some row styles found on the right side of the screen.

Attributes

This section allows you to add a Row ID to your row or Row/Cell classes. In addition, you can add your own custom CSS to be applied to that specific row.

Layout

Here you can choose whether you want your row to have a bottom margin or padding. You can also choose a ‘gutter’ amount, which is the space between each column in the row. You can decide how much you want to stretch the row under ‘Row Layout’ and in which order you want each column to collapse for smaller screens under ‘Collapse Order’.

Design

Design allows you to choose a background color/image and a border color for your row.

Widgets

Each column on the Page Builder layout can hold 0, 1, or multiple widgets. To insert a widget, simply click ‘Add Widget’ and choose the widget you would like to add. Once a widget has been added, you can drag and drop it to the column you wish to place it in. If you roll your mouse over a widget you will see options to edit, duplicate, or delete it.

Widget Options

If you click to edit a widget, you will get a screen split into two sections. On the left side, you can edit the content of your widget. On the right side, you can edit the styles of your widget.

Attributes

This section allows you to add widget classes and custom css.

Layout

Here you can add padding around the widget.

Design

Design allows you to colors for different aspects of your widget including background, border, font, and links. In addition, you may also choose to add a background image to the widget here.

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.

Changing Themes

On WordPress, it’s easy to change themes for a website. Simply go to Appearance > Themes, and you can preview how your site might look in another theme.

Before you decide to switch to a different theme, there are some things you should keep in mind.

The Good News

Switching themes does not destroy any pages or content that you’ve created for your site. Moreover, switching themes is reversible; if you change it and don’t like it, you can switch back.

The Tricky Parts

Top Navigation

When you switch themes, it’s possible for your top navigation menu to break. This can be fixed by going to Appearance > Menus, finding your Top Nav menu, and checking the ‘Primary Menu‘ checkbox.

Homepage

Many themes have a custom homepage page template that may not exist in a new theme. For example, switching from Hale to Sherman may wipe out the homepage. However, the widgets that created those homepages aren’t gone. If you go to Appearance > Widgets and scroll down, you’ll see them in an area for ‘unassigned widgets‘. Drag them back up to the correct sidebars and your homepage will reform itself.

In the newer themes (Hale 2015 and Sherman), you can use Page Builder to build the homepage and sub pages.  See Homepage Customization tools.

Sidebars

Some themes have sidebars that are specific to them and changing themes will move any widgets within those sidebars to the ‘unassigned widgets‘ section in Appearance > Widgets. You may need to find a new place to keep that content.

Bootstrap Layouts & Special Elements

The older Hale and Prudence themes were built on the Bootstrap 2 framework. The newer Sherman and Hale 2015 themes are built with the Bootstrap 3 framework. If your site makes use of Bootstrap columns, buttons, or accordion menus, they may not work if you switch from a Bootstrap 2 theme to a Bootstrap 3 theme.  They will fall back to being simple single column layouts, links, or text sections until you change the code to comply with the version of Bootstrap that your new theme uses.

Hale 2015

hale 2015Hale 2015 was a theme released in August 2015 as a part of Aurora Update 9. The bold blue Sherman theme was released in the summer of 2014, and its advanced features and customization options proved very popular. However, a number of customers requested a theme with all the functionality of Sherman but with the softer tones of the original Hale theme that was released in 2013. Hale 2015 addresses this issue, adapting the popular Hale design and keeping the powerful features of Sherman. A child of the Cornerstone theme, Hale 2015 will continue to benefit from all new features added to Aurora for years to come.

Moving from Hale to Hale 2015

If your site currently uses the Hale theme, and you would like to switch to Hale 2015, there are a few things to keep in mind. First, review the guide to Changing Themes. In addition, note the following changes:

Homepage

The homepage options have changed dramatically. You should now build the homepage (and any other page) using Page Builder. See Homepage Customization tools.

Navigation Options

Hale 2015 has different navigation options that Hale. The 'bar' option is not present, and tabs in Hale 2015 use dropdowns for deeper linking.

Sherman

sherman

Sherman became the new default theme for all Aurora sites upon its release in August 2014. It features a number of enhancements over Hale, the previous default theme, including:

  • Page Builder for the homepage
  • Improved Typography and Design with more white space.
  • Improved features for accessibility. Specifically, removes styles from elements within tables, and scans pages for missing alt tags on images.

Sherman is a child theme of Cornerstone, and utilizes SASS to be as lightweight as possible. Its design is bold, yet clearly a product of the university. It is named after Roger Sherman, Connecticut’s representative to the Continental Congress, and one of the Founding Fathers.

Features

Link Flags

All links to external sites are marked with an icon.
All links to downloadable files like PDFs or DOCs are marked with an icon.

Accessibility Enhancements

Scans images for missing Alt tags, and adds an error message if one it missing.
Strips styles out of tables to discourage the use of tables for presentation layouts.

Accessibility

With Sherman, we’ve tried to improve our web accessibility with these features:

Skip Links

Visible only to screen readers, these links allow users to skip to the navigation or content.

Table Formatting

To discourage the practice of using html tables to layout pages, new styles have been put in place to remove all styles from any element in a table cell. Headings, paragraphs, bullet lists, and more all become plain black text.

Alt Tag Checker

Each image on a page is scanned, and if it’s missing an Alt tag, you’ll see the image grayed out, set to 50% opacity, and an error message will appear asking you to please add an Alt tag.

Resources

Examples

Find examples of sites using the Sherman theme at the top of the Live Sites with Default Template page.

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