sherman

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.

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.

Theme Color Customization

This CSS allows you to alter the various colors throughout your Sherman theme. Look for the snippet of code you need and copy/paste it in the Custom CSS section of your site. The color attribute supports values like red and blue as well as more fine-grained hex codes such as #ee6832 and #ffcc33. You can easily find a color’s hex value at http://www.colorpicker.com/.

Header

/* Background Color on Header - Primary */
#masthead {
background:red
}

/* Line Between UConn Header and Site Header - Secondary */
#uc-header {
border-bottom-color:green
}

Footer

/* Links - Primary */
#mega-footer .widget a {
color:red
}

/* Line Above Footer - Secondary */
#footers {
border-color:green
}

Mega Menu

/* Mega Menu Background Color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
background:linear-gradient(to bottom,black,black)
}

/* Mega Menu Header Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
color:red
}

/* Mega Menu Header Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
color:#fff
}

/* Mega Menu Subheader Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
color:#fff
}

/* Mega Menu Subheader Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item:hover > a.mega-menu-link {
color:red
}

/* Mega Submenu Background Color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
background-color:#000
}

/* Mega Submenu Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
color:#fff
}

/* Mega Submenu Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
color:red
}

Body

/* Headings - Secondary */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color:green!important
}

/* Widget Titles - Secondary */
.home #content .panel-grid .widget .widget-title {
color:green
}

/* Widget Titles - Secondary */
.home #content .widget .widget-title {
color:green
}

/* Main Page Links - Secondary  */
.home #content .panel-grid .widget a {
color:green
}

/* Subpage Links - Secondary */
.subpage .widget a {
color:green
}

/* Subpage Links - Secondary */
.entry-content a {
color:green
}

/* Subpage Visited Links - Primary */
.entry-content a:visited {
color:red
}

/* Sidebar Links - Secondary */
#page-sidebar .widget a {
color:green
}

/* Subpage Widget Titles - Secondary */
.subpage .widget .widget-title {
color:green
}

/* AZ Page Links - Secondary */
a.az-letter-page {
color:green
}

/* Events Calendar Date - Secondary */
.home #content .panel-grid .widget .uc-cal .uc-cal-item .uc-cal-event .uc-cal-event-date {
color:green!important
}

/* Events Calendar Title - Secondary */
#content .panel-grid .widget .uc-cal .uc-cal-event-title {
color:green!important
}