Skip directly to searchSkip directly to the site navigationSkip directly to the page's main content

Data Admin System Documentation - User Interface Customization

This page provides an overview on how to customize the look and feel of the website. The main activities include updating/modifying the following items:
The following sections provide more detailed information about the activity and gives some samples of what might be changed. Also note that this page only deals with user interface customization. Please see the Configuration page for detailed information on how to configure the application.

Cascading Style Sheets (CSS)

CSS files contain properties that control the formatting of the IBIS-PH pages. These properties include foreground and background colors, widths, positions of items on the page, font style and sizes, mouse over pointers, margins, padding/spacing, borders, and various other HTML presentation related properties.
Typical CSS items changed:
  • Widths, margins, and paddings of the BODY, TABLEs, DIVs and SPANs
  • Foreground and background colors of the BODY, DIVs and SPANs, TABLEs/cells, links etc.
  • Any alignment properties like center align BODY and container's DIV to have an auto left and right margin width etc.

IMPORTANT NOTE: The system's page HTML elements are coded for the specific class names defined within these CSS files. To change the class names would require changing all of the JSP file's HTML elements.

Site Specific JSPs

The CSS properties control the properties or attributes of the HTML elements while the JSPs control creation of the HTML elements and the page structure. There are six site specific JSPs that could be modified (_head.jsp, _menu.jsp, _header.jsp, _footer.jsp, error/_site_specific_header.jsp, and error/_site_specific_options.jsp). The header graphic does NOT contain anything that is specific to Utah so if the user's name and date are okay, and the color scheme is okay then the only real file that needs to be modified is the footer. The _footer.jsp contains links to Utah sites. These links should be changed to whatever is desired. The left menu could be replaced but the core code should be left intact with only the HTML elements being changed. However, it is highly recommended that all JSPs be left as is other than the _footer.jsp and the error/_site_specific*.jsp files.

There are two site specific error JSP pages that need to be updated. The first is the "jsp/error/_site_specific_header.jsp" which needs to have its header and banner HTML code changed. The second is the "jsp/error/_site_specific_options.jsp" file which contains the HTML code which gives site specific options on who to contact and what options are available when a user requests a page that results in an unexpected error.

Graphics - Banners, Headers, Buttons

Even though this is an intranet application (private) a deployer might want to use their own banner/header graphics and menu graphics. This can include other graphics like standard buttons, department logos etc. These files can be put on another web server and referenced or copied into the applications image directory. In either case the image referencing is done within the JSP file(s).

Site Navigation

Site navigation is determined and built by a Java controller with the available requests for that user being put in their HTTP session object. The JSP then reads those data records and builds the menu accordingly. As such, the core code contained within the _menu.jsp should be utilized. The HTML elements and structure may be changed but the core logic needs to remain - otherwise the application will not work.