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 Administrator Guide and the JasperReports Server Ultimate Guide.
| Element | Classname and Modifications | File | Notes |
|---|---|---|---|
|
Banner |
.banner |
containers.css |
Default value: |
|
Body |
#frame |
containers.css |
Default value: 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 Adjust margins around the logo if needed |
theme.css |
Default values: height: 22px margin-top: 6px |
|
Banner |
.menu.primaryNav .wrap |
containers.css |
height: 31px |
|
Banner |
.menu.primaryNav #main_home .wrap > .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 |
|
Banner |
.menu.primaryNav .node > .wrap > .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 |
|
Banner |
.menu.primaryNav .wrap.over
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 |
#globalSearch.searchLockup
Set margin-top to desired value that will vertically center it within the banner. |
controls.css |
margin-top: 5px |
|
Banner |
#metalinks li
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 |
| Login page |
Re-implement in new theme. |
||
