Page Comparison

...

<%@ 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>

Image RemovedImage Added

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. 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.)

Image Added

Image Added

Buttons

Buttons have a consistent look and feel. They are no longer images with text on them 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.)

Image Removed

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

Image Added

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

Image Added

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

Image Added

Here are some examples for creating buttons using existing jsp tags:

<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" />