CSS Change Title Background Color of a Dialogue Box

1.1 Requirement

In previewing a template using FineReport, the background color of the title bar of a hyperlink dialogue box defaults to blue.

If the background color in blue does not match the overall system color, you may want to change the background color. Here are some steps you may follow, as shown in the figure below:

1.2 Solution

Set CSS style to change background color of the title bar of a dialogue box.

2.1 Create a CSS file

1) Create a new CSS file and name it “test.css”. Input the following CSS codes:

.fr-core-window-header{background:#466377 !important;}

2）Copy test.css to the directory under %FR_HOME%\webapps\webroot\help\css.

2.2 Configure report settings

Settings for common reports and dashboards are different. 

2.2.1 Common report

Click [Template]＞[Web Attributes] ＞[Reference CSS]. Select the file “test.css” and click [Add], as shown in the figure below:

2.2.2 Dashboard

In the right-hand pane, select body and create an After Initialization event. In the pop-up window, input JavaScript codes. Take the steps as shown in the figure below:

Input the following JavaScript codes:

var link = '<link rel="stylesheet" type="text/css" href="' + FR.server + '/help/css/test.css">';$("head").append(link);

Note

Type the absolute path of the CSS file after href. 

2.3 Preview

2.3.1 Common report

Save the template and click [Preview]. The preview effect is shown as below:

2.3.2 Dashboard

Save the template and click [Preview]. The preview effect is shown as below:

3.1 Common report

Change Background Color of the Title Bar of a Dialogue Box1.cpt

3.2 Dashboard

Change Background Color of the Title Bar of a Dialogue Box2.frm

3.3 CSS file

test.css