What's New In The WCMS Template

March 15, 2011 - Matt Carter

When we started recreating the UNM Template in the WCMS we found a few areas where we could make some changes. The idea was to add some more advanced features to the template that would become global elements on webpages.

The Toolbar

The first thing we did was to consolidate the top toolbar into a single row that did not take up a lot of space on the page.

Top Toolbar

The toolbar contains some of the most used links from the main UNM homepage.

  • A link to the UNM homepage
  • UNM A-Z - The departmental listing page
  • StudentInfo and FastInfo - online help for students, faculty, staff, etc.
  • myUNM - The UNM web portal
  • Directory - The searchable directory of students, faculty, and staff
  • more... (The Drop Panel. See more details on this below.)
  • UNM Search box

The Drop Panel

Browsers that support JavaScript will see the "more" link in the toolbar. This is a new feature of the template that contains various links to commonly used applications, current weather, LoboAlerts access, and UNM's social media sites. When you click the link a panel will drop down from the top of your browser window.

Drop Panel

The idea behind this drop down panel is to provide a quick set of links from any UNM webpage that will allow a user to jump to other websites they might need. We will adjust the content of the "drop panel" as we better understand how people use it.

The Expandable Menu

We have made some minor changes to the expandable menu found in the left column of many UNM websites. The previous version of this menu had a small usability issue related to the expandable menu items. If you click on the icon that identified a section of the menu it would not open that section, it required you to click the menu title. The new version fixes that problem and makes the entire menu item clickable.

Share This

We have added a couple icons to the bottom right of each page in the WCMS template. In this area you will find a Share This link and a Print link.

Share and Print Links

Share This Popup

The print link is simply a shortcut to the browsers print function. The Share This link is the more interesting of the two. By clicking the link a small pop-up will appear on the page allowing you to select from some common social networking and link sharing sites. Clicking on one of the items in the pop-up will take you to the appropriate site to share the information on the current page.

The links in the Share This pop-up include:

JavaScript

The template comes with a few JavaScript features loaded automatically. The "drop panel" and "share this" elements mentioned above are 2 visual comments you can see right away. In addition to these items we are including the latest versions of jQuery and jQuery UI in the template. If you make use of either of these libraries you do not need to load them in your pages as the template takes care of it for you. You can load additional jQuery plugins to your site to add more features if needed.

We also load a small bit of JavaScript that is used in conjunction with the LoboAlerts system. This script allows for an alert bar to appear at the top of the page when appropriate. See my previous post "Add LoboAlerts To Your Website" for more info about the LoboAlert Bar.

It should be noted that the jQuery components that are used in the template will function in noConflict mode. This will allow anyone using other JavaScript libraries that might use the $ alias to continue to use those libraries in conjunction with jQuery. For more information please read "Using jQuery with Other Libraries".