Guides-Advanced

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
}

Table Sorter

Simply turn your table into a sortable table by adding the "tablesorter" class to your table tag.  The THEAD and TBODY tags also need to be present for the plugin to work - details and example below. 

  • Multi-column sorting : add “tablesorter” class to the required table
  • Disable sorting from particular column : add “sortless” class to the required TH column within THEAD tag.
  • Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
  • Cross-browser support : IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

IMPORTANT

  1. THEAD and TBODY tags are compulsory in the desired table, otherwise this plugin will not work.
  2. Add "tablesorter" class in the desired TABLE tag.
  3. For column heading, use TH tag within THEAD tag.
  4. If you want to exclude a particular column, add "sortless" class to that TH tag.

/*===== Example of Table Code =====*/

<table class="tablesorter" style= "cellspacing="0" cellpadding="0">
<thead>
<tr style="height: 24px; border: 1px solid #dad9c7;">
<th>Sortable Header 1</th>
<th>Sortable Header 2</th>
<th>Sortable Header 3</th>
<th class="sortless">This is a Non-Sortable Header</th>
</tr>
</thead>
<tbody>
/*===== Table Body Content Here =====*/
</tbody>
</table>

Cloning Posts with Page Builder

You can copy the layout and information from one Post or Page onto another as long as it was built using Page Builder. In fact, you can even clone a Post’s contents onto a Page and vice versa!

Steps

  1. Go to the Post or Page to which you want to copy another’s content
  2. Select Page Builder mode
    page-builder-1
  3. Click Layouts
  4. Depending on whether you’re copying information from a Post or a Page, click Clone: Pages or Clone: Posts, respectively
    page-builder-3
  5. Select the Page/Post you wish to copy and click Insert. Select whether you want to insert the contents after what’s currently on the Page/Post, before what’s currently on the Page/Post, or replace anything that’s currently on the page
    page-builder-4