To provide an example of theme customizations, the sample data installed with JasperReports Server includes two alternate themes: pods_summer and jasper_dark. Each theme makes many changes to the default appearance, mostly a new color scheme. You can activate a theme to see its effect, and you can download its files to see how it works.

Like most small-scale customizations, the pods_summer theme uses a single overrides_custom.css file and several image files. The image files have the same names as those in the default theme, so when the theme is activated, they automatically replace the default images.

Just as an example of the CSS involved in modifying a theme, some of the customizations that appear in “Appearance of the Sample Theme pods_summer” are:

Sprites are image files that contain multiple images. The CSS rules that reference them give a vertical and horizontal offset for reading an individual image from the file. For some buttons and bars, the sprite contains a long image to accommodate any width, and an end cap to be placed at the desired width. For icon sprites, the images often reflect the various icon states, such as enabled, disabled, mouse-over, and pressed.

When customizing the theme images, having multiple images in one file is helpful because it allows you to work with many related images together in an image editor, instead of dealing with numerous files. For example, you can easily change the color hue for all buttons in a sprite file at the same time.