Re-skinning UI

Owned by Travis Foxley (Deactivated)
Last updated: Aug 10, 2016
3 min read

Creating a new page

When creating a new page it is recommended that you use the kul:page tag. This tag will handle a lot of the updates for you, such as, inserting the new header and side navigation. An example new page could look like this:

<%@ include file="/kr/WEB-INF/jsp/tldHeader.jsp"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<kul:page docTitle="Doc Title Goes Here" transactionalDocument="false" openNav="false" renderInnerDiv="true">
  <div class="main-panel">
    <div class="headerarea-small">
      <h1>My Main Panel</h1>
    </div>
    The content for the panel goes here.
  </div>
</kul:page>

 

CSS Classes

To achieve the new look and feel kuali.css was abandoned and new CSS files were created. This gave it a clean break away from the old look and feel and made it easy to introduce new CSS file(s) without having to deal with conflicts and overrides that were going to occur. Bootstrap is also being used for styling and some interactions. Some HTML markup required modification but much of the change was done with CSS. Below is an annotated screenshot of a financial document that points out the markup/CSS classes utilized to achieve the look and feel. (HTML markup shown does not cover all necessary markup but rather points out HTML markup with significant CSS classes.)

 

Compared to the old interface:

 

An updated lookup:

 

A common form layout:

Buttons

Buttons are no longer images with text embedded so they are more flexible and reusable. For buttons with images/icons we use glyphicons and font awesome. There are several classes that modify the style of the button.

Standard button (class="btn btn-default")

Standard Button

 

Button with background and icon (class="btn btn-green skinny")

 

Button with no background and icon (class="btn clean")

 

Here are some examples for creating buttons using JSP tags (html:html-button is most useful when you want something other than text on your button, like an icon that comes from font awesome or glyphicons; otherwise, html:submit is a great solution):

<html:html-button 
	property="methodToCall.addAdvanceDeposit" 
	alt="Add an Advance Deposit" 
	title="Add an Advance Deposit" 
	styleClass="btn btn-green skinny" 
	value="Add" 
	innerHTML="<span class=\"fa fa-plus\"></span>"/>
 
<html:submit 
	property="methodToCall.search" 
	value="Search" 
	styleClass="btn btn-default" 
	alt="Search" 
	title="Search" />

Global Buttons

In the example above (Transfer of funds), there are global buttons at the bottom of the document. In many cases, you might want the buttons to also be pinned to the bottom of the window and have them move down as you scroll keeping them visible at all times. To accomplish this there is a tag that will add javascript to the page. The bodySelector is optional and defaults to "div.inquiry". The value for the bodySelector is a jQuery selector that will select the container that holds the main content of the document (main-panels).

<kul:stickyGlobalButtons bodySelector="div#page-content"/>