Jump to content
Changes to the Jaspersoft community edition download ×
  • How to change the icon of the export button


    asimkin
    • Version: v6.1 Product: JasperReports® Server

    Issue Description:

    A customer wants to change the icon of the export button after the report is generated.


    Resolution:

    JasperReports Server allows creating and using custom theme to customize looks and styles. 

    Tthe Export button icons are stored in imagesviewer_toolbar_buttons_sprite.png file of the default theme which is a sprite file. 

    In order to use a custom icon you can copy the sprite file to a custom one and modify it per your requirements. Please note the sprite contains other button icons (Save, Undo, Redo etc) 

    Then, you should create a new theme in JasperReports Server and upload the custom sprite file into it. 

    If you don't want to use the sprite file, you can use your custom button icon file. In this case, you have to define the button image in overrides_custom.css file of a custom theme like: 

    [toc]
    #designer .toolbar #export .icon { background: url("images/your_icon.png"); } #designer .toolbar #export.over .icon, #designer .toolbar #export.pressed .icon { background: url("images/your_icon_for_pressed_button.png"); } #designer .toolbar #export.button[disabled] .icon { background: url("images/your_icon_for_disabled_button.png"); } 
    

    The solution tested with JasperReports Server v.6.1.

    Customized_Export_Icon.png.bd73688cd6fed0fefd5af2c3bb780c5e.png

    Please find attached export of the custom theme with the customized Export icon.


    Reference:

    JapserReports Server Ultimate Guide, 'Changing the UI with Themes' chapter

    Ref. Case #00066387

    custom_theme.zip


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...