sherman

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
}