In this blog we are going to discuss how to apply customization on Cross Tab header rows , header columns, rows font size, rows font color, rows font style, column font size, column font color, column font style on a report which has been created using Helical Insight Community Reporting method.
To apply the customization for table, open Helical Insight Reports CE and go to dashboard Layout. There are two sections which will appear. One is “HTML” and another one is “CSS”.
In the HTML section we will have to provide divisions to render the reports and for parameters.
Note: We are assuming that you have already created the report. Please refer to other blogs in order to learn how to do that.
In the CSS section will provide actual customization for cross tab. So first look into “Cross Tab Columns background, font size, font weight”
Provide below code in the CSS section for Cross tab column background.
.orb-gray .orb .header-col { background : #AED1F1; font-size: 12px; font-weight:bold; }
Please refer the below image where to apply CSS in the Helical Insight application.
Report Output:
Provide below CSS for Rows background, font size, font color, font family.
table thead tr{ background : #AED1F1; } th{ font-weight : bold; font-size: 16px; color :black; text-align :center; }
Report Output:
If you want to change the body background and text-color for cross tab put the below code in CSS section.
orb-gray .orb .header-row{ background : #D5E8F7; font-size: 11px; font-weight:bold; } .orb-gray .orb .cell{ background : #D5E8F7; color: black; }
Report Output:
To change the background color for buttons which are shown left side marked location in image use the below CSS code.
CSS:
.orb-gray .orb .fld-btn{ background-color: #AED1F1; color : black; } td{ background: #D5E8F7; }
Report Output:
In case if you have any queries please get us at support@helicalinsight.com