Creating custom table CSS styles | ClearPoint Strategy

Creating custom table CSS styles

Admin Options

Feature available for Professional Plan and above

ClearPoint lets you customize the look of summary report tables using CSS, which means you can match ClearPoint reports to your organization’s branding and colors. This article shows how to create and use a CSS table style.

Click here for an introduction to CSS.

Click here to learn the basics of CSS syntax.

Click here to view a list of all CSS properties. Some examples are suggested below.

Instructions

Creating a new table style

1) Click on ‘Admin Options’ from under ‘System Settings’.

2) Click on ‘Custom Styles’. A new window will appear.

 

3) Click on the ‘Table Styles’ tab.

4) Click on ‘Add Table Style’.

5) Enter a name for the style.

6) Enter information about the table as a whole under ‘Table Style’. These properties might include the border around the perimiter of the table (border), or background color (background-color).

  • This example uses “background-color:white;”

7) Enter information about the header and header text under ‘Header Style’. These properties might include font size (font-size), font (font-family), color (color), or alignment (text-align), in addition to the background and border properties listed in step 6.

  • This example uses “background-color: #FBCC0D; border-color: #FBCC0D; color: white;”

8) Enter information about the cells in the table under ‘Cell Style’. You’ll need to specify a border (border) in this section to get it to show around every cell rather than just the perimiter of the table. The same text properties listed in step 7 can be applied to the cell text as well.

  • This example uses “border: 1px solid #FBCC0D; color: #0A1032; font-style: italic;”

9) Select ‘Default Style’ to have this style appear on all summary layouts unless otherwise indicated.

10) Click ‘Save’.

Assign a style to a specific summary layout

1) Click the Edit icon on the summary report page. A new window will appear.

2) Click on the ‘Columns’ tab.

3) Check the box next to ‘Show Advanced Options’.

4) Scroll down to the bottom of the window to select a style from the ‘Table Style’ dropdown menu.

Note: The style of default layouts will always be the organizational default style (which you can set using step 9 above).

5) Each individual column’s table style can also be customized using the ‘Style’ dropdown under each column. If a table style is not selected for individual columns, they will take on the overall ‘Table Style’ set. 

The ‘Gold Tables’ style in this example is shown below.