The TIBCO Jaspersoft logo is white on a transparent border and is displayed on the blue background of the default theme. Make sure your logo is visible on this background. You can also change the background color to match your logo, as explained in Changing Colors and Fonts. There are two ways to change the logo in CSS:
| • | If your logo is roughly the same size or has the same dimensions as the TIBCO Jaspersoft logo, replace the logo file. The TIBCO Jaspersoft logo is 115 pixels wide by 20 pixels high. |
| • | If your logo cannot be resized or has different dimensions, change the CSS to load your own logo file. |
You can also change the favicon:
| • | To change the favicon, replace the favicon file. The favicon is 16 pixels wide by 16 pixels high and is saved as a .ico file. |
In addition to the logo and favicon, there are other customizations you can do to change the branding of the server. See Editing decorator.jsp for Rebranding.
Replacing the Files
One way to replace the logo and/or favicon is to create a file with the same file name as the file that is provided with the server. When you create a theme with this file in the same path as the logo or favicon file, it is displayed instead. This is the easiest customization.
To replace the logo and/or favicon file with your own:
| 1. | Create a new theme or modify an existing one. |
| 2. | If necessary, add a folder named images to the theme. |
| 3. | To replace the logo, convert your logo or image to the PNG format and save it with the filename logo.png. Then copy the new logo.png to the images folder. |
| 4. | To replace the favicon, convert your favicon to the ICO format and save it with the filename favicon.png. Then copy the new favicon.png to the images folder. |
| 5. | Upload and activate the new theme to the chosen location, then click your browser’s Refresh button. |
Your logo appears in the top-left corner of every page:
|  |
| MyCompany Logo on Home Page |
Modifying the CSS File
Another way to replace the logo is to use your own files and modify the CSS files in the theme so that they reference them. This creates a new filename and path. Use this procedure if your logo cannot be resized to fit in the same space, or if the dimensions of your logo have a different ratio. The Jaspersoft logo is 20 pixels high by 115 pixels wide.
To modify the CSS file to use your own logo file:
| 1. | Create a new theme or modify an existing one. In this theme, you can place your image file in any folder structure you want. |
| 2. | If necessary, copy the overrides_custom.css file from the default theme to the main folder of your theme. |
| 3. | Edit the overrides_custom.css file and add rules such as the following. In this example, the logo is a file called MyCompanyLogo.png in a folder called MyImages and is 40px x 230px. Adjust all pixel values based on the size of your image: |
| | The IDs and classes that are used in the CSS are dependent on the JSP source code for the server. To find out which IDs and property values are used, you need to look at the JSP files. Alternatively, you can inspect the HTML and CSS returned by the server in a browser tool such as Firebug. For more information, see the JasperReports Server Administrator Guide. |
| 4. | Upload and activate the new theme with your images and CSS file, then click your browser’s Refresh button. |
Recommended Comments
There are no comments to display.