Jump to content
  • This documentation is an older version of JasperReports Server Upgrade Guide. View the latest documentation.

    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 TIBCO JasperReports Server Administrator Guide and the TIBCO JasperReports Server Ultimate Guide.

    Updating Themes in JasperReports Server 6.1

    Element Classname and Modifications File Notes

    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

    .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
    background-position: 0 -164px
    background-position: 0 -163px (IE8-9)

    Banner
    Main Navigation
    Item arrow icon

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

    #globalSearch.searchLockup

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

    controls.css

    margin-top: 5px

    Banner
    Metadata

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

     


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...