theme support

Moving From Hale/Prudence to Sherman/Hale 2015

So what's different if you're converting a Hale or Prudence site to Sherman or Hale 2015? Here's a few quick points:

UC Slideshow

UC Slideshow does not work with Sherman, Hale 2015, or any other Cornerstone based theme. You will need to replace any slideshow you had on the old site. 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 Sherman and Hale 2015 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.

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.

Converting User Profiles to UC People

The University User Profiles plugin continues to work, and will be supported for existing sites. However, it will not be available in newly made sites, or any site that uses any theme released after Hale 2015. Sites that wish to upgrade to a newer theme will need to convert their UUP content to UC People.

  1. Follow the instructions for Importing Users to UC People. This will create a “person” for every public user.
  2. Create a People Page to replace each User-List and User-Table page that you had used previously.
  3. If you created profile pages for each user, you want to find those within Pages and then either change their status to ‘draft’ or delete them. This is just to avoid duplicate entries for each person.
  4. Fix any broken links to profile pages, replacing them with the new links to each person.

UC People

UC People is a plugin developed by the UITS Web & Mobile Services team. It registers a custom post type of People that appears in the left navigation of the WordPress dashboard.

In combination with new page templates available to Cornerstone-based themes, this plugin provides an easy way to organize and display people.

UC People is available to sites using Cornerstone-based themes, namely Sherman and Hale 2015.

Examples:

http://polisci.uconn.edu/people/faculty/

http://dpp.uconn.edu/faculty-research/faculty-staff/faculty/

http://provost.uconn.edu/our-team/

http://president.uconn.edu/home/our-team/

http://envpolicy.uconn.edu/directory/

http://cap.uconn.edu/staff/

Creating People

To create a person, on the left side navigation on your dashboard go to People > New Person. All fields other than the person's name are optional.

If you used the University User Profiles plugin previously, we have a guide on how to migrate from UUP to UC People. If you have a number of people entered as users, you can also perform a one-time import of users to UC People.

Groups and Tags

People can be organized in two ways, with groups and tags.  These can be managed in the dashboard by selecting 'People' and then choosing either the 'Groups' or 'Tags' options.

Groups

Groups act much like post categories, and can be nested hierarchically. For example, a group might be "Faculty" with nested subgroups of "Adjunct" and "Associate". Groups are useful when creating a page of people, as one feature there is to show people separated by their group assignments.

Tags

Tags are just like the tags used by blog posts. They can also be used to organize people, but do not have the option of being hierarchically nested. For example, a single person might be tagged with "Molecular Modeling", "Nanotechnology", and "Polymers". Later, it would then be possible to display all people in the site with the tag "Polymers".

Creating a “People Page”

One of the features of UC People is a new page template that becomes available. This page template has a lot of great tools to help filter and sort which people you want to display.

To begin, start by creating a new page. On the right, in a box labeled 'Page Attributes', set the 'Template' option to "People". You will notice that below the normal visual editor area for content, there will be a number of new form controls in a box labeled 'People Page'.

Layout

This controls the layout of how the people will be displayed. The Grid option makes a grid of people, with multiple people for each row. This is a great option if you have a lot of images, and want to focus on those.

The Table option has only one person per row, but has a lot more room for details like phone number or email address. This is a great option if you have no images, or want to focus the page more on being a resource to contact people.

Specific People

By default, a people page displays all people in the site. You can see them listed in the left column of this section. However, if you only want to display the information of a few people, you can click on those people in the left column, and they will appear in the right column. Then, the page will only display the people in the right column.

This collection of people can then be further filtered down by the Specific Groups and Specific Tags options.

To return a page to displaying all people, delete all the people in the right column.

Specific Groups & Tags

Choose one or more groups, and only people that belong to the selected group OR any other selected group will appear. This allows you to create one people page for faculty, and another for staff, for example.

Choose one or more tags, and only people that belong to the selected tag OR to any of the other selected tags will appear. This allows you to create a people page of only the people tagged with "Chemistry" for example.

If both Specific Groups and Specific Tags are in use, only people that belong to one of the groups AND have one of the specific tags will appear.

Break Into Groups

When selected, this option will display people broken out into groups ordered alphabetically on the group name. For instance, you could select "Chemistry" as the tag, enable this option, and then the people page would display a list for "Adjunct Faculty", and another for "Associate Faculty".

Information to Display

On each People page, you can choose just how much information you wish to display. Any fields left unchecked will simply be left out. Note: In order to display properly, the person's image should be at least 335px wide.

Viewing a Single Person

Once a person has been published, they are available to be linked to through menus, manual links, or a People Page.

In the Menus section, you will see a new box appear along site pages called 'People'. You will need to select this box, but can then add people into navigation menus the same way you would pages.

Ordering People

By default, people will be ordered alphabetically by first name.

This default ordering can be manipulated by altering the Order attribute of each person.

Order of a person
The Order Attribute

For example, if Abdul, Bogdan, and Carol are all set at order 0, they appear in alphabetical order by last name.

  • Carol Gordon
  • Abdul Kazeem
  • Bogdan Stanek

What's really happening behind the scenes though, is more like this:

  1. Order=0
    1. Carol Gordon
    2. Abdul Kazeem
    3. Bogdan Stanek
  2. Order=1
    1. None.

So, if Bogdan's order number changes to "1", then first the list will display all of the 0's, and then all of the 1's, each in alphabetical order.

  1. Carol Gordon [0]
  2. Abdul Kazeem [0]
  3. Bogdan Stanek [1]

If we then change Abdul to a "1", we'll get this...

  1. Carol Gordon [0]
  2. Abdul Kazeem [1]
  3. Bogdan Stanek [1]

Using this field, it's possible to alter the default ordering of people in lists.

It is important to note that altering the order for a person will effect the order in which they are displayed in any list. If you're using more than one People page, this might be an issue.

Navigation Options

Cornerstone-based sites have options for different navigation styles. These options are:

  • Dropdowns
  • Multi-level Dropdown
  • Tabs
  • MaxMegaMenu

Support

These menu options are only applicable if you are using one of the following themes:

  • Sherman
  • Hale 2015

Changing Your Navigation Style

On the dashboard go to Appearance > Customize. On the left, there will be an option for Navigation Options. Within that space, you will see a dropdown menu with the options listed.

If you do not see this option, you either are not using a supported theme or you have enabled the Max Mega Menu plugin. You will need to disable MaxMegaMenu before other options are available because that plugin overrides all other options.

Dropdown

This option begins with a simple dropdown for the first to level of navigation, with additional pages being displayed in a left navigation bar. This was the default navigation for all Sherman sites from Summer 2014 – Aug 2015.

Multi-Level Dropdown

This option expands the dropdown menu, and removes the left navigation. Dropdowns will expand to the side forever. We recommend not using this option for navigation that has more than 3 levels of depth, as it can be difficult for users to navigate the options. Large sites should consider using the Tabbed option.

Tabs

In this option, the first two levels of the navigation are exposed in horizontal bars and all other levels are available through dropdown menus.

Sticky Navigation

When set to be On, the top navigation will always sticks to the top of the screen as visitors scroll down pages.

Breadcrumbs

Breadcrumbs are based off of Parent/Child page heirarchy. When set to be On, breadcrumbs navigation will show up on child(ren) pages. For more information view our breadcrumb guide.

Page Builder

The Site Origin Page Builder is a plugin that allows sites to create rows, columns, and insert widgets directly into a normal page. It is supported by the Sherman and Hale 2015 themes.

When creating or editing a post or page, click on the Page Builder tab next to the Visual and the Text tabs to enable Page Builder, where you can start adding rows, columns and then adding widgets to build the post or page. Page Builder gives unlimited flexibility for layout and widget functions on the posts or pages.

Page Builder

Glyphicons Guide

Glyphicons is a library of icons that can be added to links, headers, and buttons with a just bit of HTML. By adding classes to links, headings, or buttons, you can quickly draw attention to a section of your site.

Adding Glyphicons to Your Site

For sites using Cornerstone-based themes like Sherman and Hale 2015, site webmasters can add any of the glyphicons from Bootstrap 3. Go to the glyphicons website to search for glyphicons. When you find one you want to use, simply click on it and a code will appear for you to copy. Copy that code and paste it where you want the glyphicon to show up! It must be pasted in the text editor of the page's or post's edit screen.

Feel free to browse all the glyphicons on glyphicons.com. However, if you know what you're looking for, you can type keywords into the search bar at the top.

Example: up-arrow glyphicon

  1. Type "arrow" into the search bar
  2. Click on the desired icon and copy the HTML that appears

    The following is the full line of HTML that was copied:

    <span class="glyphicons glyphicons-arrow-up"></span>
  3. Paste that line of code into the text editor view of your page's edit screen:
Note: switching back to the visual editor after pasting a glyphicon code may result in the deletion of the code itself.

Styling Glyphicons

General

If you want to target all glyphicons on your site, you may do so using the .glyphicons class. For example, to change the size of all glyphicons to 24px, you would need to add the following to your Custom CSS:

.glyphicons{
font-size:24px;
}

Style by Type

To target only a specific type of glyphicon (such as the up arrow that was used in the previous example), you should do so using all of the classes that appear in its HTML code. For example, the code for the up arrow glyphicon is <span class="glyphicons glyphicons-arrow-up"></span>. The two classes that appear (separated by a space) are "glyphicons" and "glyphicons-arrow-up". Therefore, to target this glyphicon in our Custom CSS, we add a period before each class and remove the space inbetween:

.glyphicons.glyphicons-arrow-up{
font-size:24px;
}

Style by Instance

You can always add additional classes to certain glyphicons to get even more specific. For example, say I want to paste another up arrow glyphicon which I want to be blue, but I do not want the other one on this page to change its color. I can add a class "blue-glyphicon" which would result in the following HTML code:

<span class="glyphicons glyphicons-arrow-up blue-glyphicon"></span>

And I would target this glyphicon in my Custom CSS by adding the following CSS code:

.glyphicons.glyphicons-arrow-up.blue-glyphicon{
color:blue;
}

Now I will add the HTML to this page, resulting in a blue up arrow:

Hale and Prudence Themes

The Hale & Prudence themes were built with Bootstrap 2 and can therefore use any of the Bootstrap 2 Glyphicons. Add them using html like that shown below, swapping out the classes as described in the Bootstrap 2 website.

<i class="icon-search icon-white"></i>

Developers

Developers can make use of glyphicons in their custom themes by referencing to the centrally located global files available within their development sandboxes.