Changing Dialog Boxes

This documentation is an older version of JasperReports Server Ultimate Guide. View the latest documentation.

The containers.css file supports several subclasses of dialog boxes. The dialog.overlay and dialog.overlay.widget classes are used for free-standing dialog boxes. The dialog.inlay class is used for some special dialog boxes, usually dialog boxes that are integrated into the page where they appear, such as the login box on the login screen.

To change the background color for dialog boxes:

Create a new theme or modify an existing one.

If necessary, copy the overrides_custom.css file from the default theme to the main folder of your theme.

Download overrides.css from your theme and open the downloaded file in a text editor.

4. To identify the properties you want to modify, open the containers.css file from the default theme in another window of the text editor, and find the .dialog section.

Copy the CSS you want to modify from containers.css and paste it in your overrides.css.

Modify the overrides_custom.css file. To change the background, add rules such as the following:

.dialog.overlay .header {    background: #663300 !important;}							.dialog.overlay {    background-color: #CC9966;}.dialog .sub.header {    background-color: #CC9966;}.dialog.inlay {    background-color: #CC9966;}[/code]

Upload overrides.css to your chosen location.

Activate your new theme, then click your browser’s Refresh button.

js-SaveSchedule-custom_162x94.png.7efffc999bbfb0066593e0445da7fdbf.png

Customization of dialog box using themes

To limit the scope of a customization to a specific dialog box, used the ID of the dialog box. For example, to change the background of the #standardConfirm dialog box displayed when a user is required to confirm an action such as deletion, use code such as the following:

#standardConfirm.dialog.overlay {    background-color: red;}[/code]

js-Customization-ConfirmDialog_310x84.png.edc76a1c524979baf19f7517b205cca2.png

Customization of specific dialog box using themes

You can find the IDs for common dialog boxes in the Dialogs section of the UI Sample Galleries. See the JasperReports Server Administrator Guide for more information.

Changing Font and Color for Input Controls

Some input controls allow you to choose from a list of options. You can customize the font and color of this list by overriding the .sList properties in the pageSpecific.css file.

To modify input controls:

Create a new theme or modify an existing one.

If necessary, copy overrides.css file from the default theme to the main folder of your theme.

Download overrides.css from your theme and open the downloaded file in a text editor.

4. Open the pageSpecific.css file from the default theme in another window of the text editor, find the .sList section, and select the CSS you want to modify.

Copy the CSS you want to modify from pageSpecific.css and paste it in your overrides.css.

6. Make your desired modifications to overrides.css. For example, the following changes set the font color to #B8860B and the font style to serif, and set the background color when an item is selected to #8b4513:

.sList {/* fonts */  font-family:serif;  color: #B8860B;}.sList li.active,   .mSelect-svList > .active .mSelect-svList-button {  background-color: #8b4513;}[/code]

Upload overrides.css to your chosen location.

Activate your new theme, then click your browser’s Refresh button.

JasperReports Server can display the input controls form in a pop-up window (the default), in a separate page, in a separate column, or at the top of the report page. The overrides you make show in all reports with input controls.