Style Sheet
The style sheets offer the possibility to customize the design of the report. The StyleBeckhoff.css StyleSheet serves as a template.This can be copied, renamed and customized. The name of the style sheet must then be specified in the corresponding configuration file.
Basically, all HTML objects contained in an HTML report can be individualized in the custom style sheet.
The following CSS objects are frequently used and are ideal for customization:
CSS element | Description |
|---|---|
html | The html element refers to the entire report. |
h1 | Main heading of the header in the report |
h3 | Subheading of the header in the report; heading of a data object |
The following CSS classes are used to design data objects:
CSS class | Description |
|---|---|
reporting-header | Class for the header of the report. |
reaporting-header img | Class for the icon on the top right of the header. |
reporting-header table | The header is tabular and can be customized via this class. |
|
|
reporting-body | Class for the content of the report. |
reporting-body caption | The headings of the data objects are located in a Caption element. |
reporting-body valuetable | Class for a data table in the report. |
reporting-body valuepair | Class for a collection from key-value pairs in the report. |
reporting-body infotable | Class for the additional information and analysis or recording information from the manual report. |
reporting-body figure | Class for images, such as charts from the scope in the report. |
reporting-body img | This class contains the actual image. It is located in the figure element. |