Changes to Themes

The look and feel of the JasperReports Server web interface has been redesigned to modernize the application's appearance. To accomplish this, markup and styles have been modified. As a result of these modifications, custom themes developed for the previous interface will need to be updated for the new interface.

The following table lists the changes made to the user interface and describes some of the steps necessary to update custom themes in overrides_custom.css. The main changes are in the banner, body, footer, and login page. The changes to the login page are extensive. Instead of attempting to update an existing login page, you should re-implement the login page in the new default theme.

For information on developing new themes, see the JasperReports Server Community Project Administrator Guide and the TIBCO JasperReports Server Ultimate Guide.

Updating Themes in JasperReports Server 6.1

Banner

.banner

Give custom value to height

containers.css

Default value:
height: 32px

Body

#frame

Set custom top and bottom values that position the body of the application between the banner and footer without overlap

containers.css

Default value:
top: 32px
bottom: 17px

This value needs to be equal to or greater than the height of .banner

The bottom position needs to be adjusted only if the height of the footer is changed

Banner
Logo

#logo

Give custom values to height and width that match the dimensions of your logo

Adjust margins around the logo if needed

theme.css

Default values:

height: 22px
width: 176px

margin-top: 6px
margin-right: 4px
margin-bottom: 0
margin-left: 8px

Banner
Main Navigation

.menu.primaryNav .wrap

Set height and line-height to 1px shorter than .banner

containers.css

height: 31px
line-height: 31px

Banner
Main Navigation Home icon

Set height to be the same as .banner

Set values for width and background-position to fit your image.

containers.css

height: 32px

width: 14px
background-position: 0 -164px
background-position: 0 -163px (IE8-9)

Banner
Main Navigation
Item arrow icon

Set height to your desired value, with the maximum value being the same height measurement as the .banner element.

Set background-position and width to a value that properly displays the default or your custom image.

containers.css

height: 32px

background-position: left -79px
width: 11px

Banner
Main Navigation
Item arrow icon

.menu.primaryNav .wrap.over
.menu.primaryNav .wrap.pressed

Set background-position to a value that properly displays the default or your custom image.

containers.css

background-position is not explicitly defined, the value is cascaded from .menu.primaryNav .node > .wrap > .icon

This only needs to be adjusted if you want a different color disclosure indicator for the pressed and over states of the main menu links

Banner
Search container

Set margin-top to desired value that will vertically center it within the banner.

controls.css

margin-top: 5px

Banner
Metadata

Set line-height to the desired value that will vertically center it within the banner.

themes.css

line-height: 20px

Footer

#frameFooter

Set height if you want it to be anything other than the default value.

containers.css

height: 17px

Re-implement in new theme.