Creating and change themes on jasperserver 4.7

[olliveira]

Hi guys,

I am new on Jasper world, someone knows how to create themes for jasperserver and change it?

 

Regards

[aleeg-csg]

Hi olliveira,

There are two pre-requisites to theming JasperReports:

1. You must have administrator permissions
2. You must be familiar with CSS (Cascading Style Sheets)

To give you a simple overview, a theme is simply a folder in the repository that contains CSS and image files. Each theme is stored in its own folder and is known by the name of the folder. For example, if you go to the repository and look in the Themes folder, you will see two folders: default and pods_summer. These are the two themes that ship with JasperReports: the Default theme is in the "default" folder, and the Pods Summer theme is in the "pods_summer" folder.

The default theme cannot be modified. Therefore, to have your own custom theme, you would need to add a folder with your theme's name to the Themes folder. Within your theme's folder would be the css and image files for your custom theme.

There are a couple ways to create your own custom theme. Which one you use depends on how customized you will make your theme.

Many custom themes have minimal changes such as a custom logo and modified colors. This would be a simple theme change, and you would start by creating a css file called overrides_custom.css. It is important that the file has this name because JasperReports is set up so that style rules in this file will override the same rules in other files. This is an efficient way of custom styling because it allows you to easily change any number of rules, and manage them all in a single file.

1. Create all your custom style rules in overrides_custom.css
2. Create any new images that will be overriding images in the default theme
3. In JasperReports, click View > Repository in the main menu
4. Right-click on the Themes folder and select Add Folder
5. Name the folder with the name of your theme (it is preferable to use underscores instead of spaces in the name to avoid potential problems)
6. Right-click on your new theme folder and select Add Resource > File > CSS
7. Browse to the overrides_custom.css that you created, enter "overrides_custom.css" as the Name and Resource ID,
8. Click Submit.

You would repeat the relevant steps if you need to add an images folder to your theme, and put image files inside that images folder.

If you are interested in more extensive theming, I'll be happy to give you that information.

Anna Leeg
User Experience Designer
Jaspersoft
 

[cjasper]

Hi @aleeg Thanks for your answer but i have a question regarding this line "The default theme cannot be modified. " at the starting of second paragraph. is the new modification not going to work even if we replace the css.

Why iam asking this question is because I want to change the shape of the Export button (present in the ViewReport.jsp) I am changing the css of button .css (button capsule mutton up last).but the change is not visible in jasperserver.

[cjasper]

I got the solution.

[aleeg-csg]

Glad to hear it, cjasper.

[frankee787]

@aleeg When we upload the "random-theme.zip" file using Upload Theme, where exactly does the ZIP file get uploaded to ?

[aleeg-csg]

The theme files are loaded directly into the JRS Repository database (the database will be postgresql, oracle, or whatever one you are using).