Creating custom pod CSS styles | ClearPoint Strategy

Creating custom pod CSS styles

Admin Options

Feature available for Professional Plan and above

ClearPoint lets you customize the look of pods using CSS, which means you can change the look of pages in ClearPoint to match your organization’s branding and colors. This article shows how to create and use a CSS pod 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.


Creating a new pod style

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

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

3) Click on the ‘Pod Styles’ tab on the left.

4) Click on the plus button in the top right of the pop out to add a new pod style.

5) Enter a name for the style.

6) Enter information about the header (other than text) under ‘Header Style’. These properties might include background color (background-color), background image (background-image), border style width and color (border), or margin (margin).

  • This example uses “background-image: none; background-color: #F70008”

7) Enter information about the header text under ‘Header Text Style’. These properties might include size (font-size), font (font-family), color (color), or alignment (text-align).

  • This example uses “font-family: arial; font-weight: bold; color: white; font-size: 14px”

8) Enter information about the rest of the pod under ‘Border Style’. Any of the properties suggested for the Header and Header Text could also apply to the rest of the pod.

  • This example uses “background-color: white; color: black; border: 1px solid red”

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

10) Click ‘Save’.


Assign a style to a specific pod

1) On the detail page where the pod appears, click on ‘Edit Layout’ from the Edit dropdown menu. A new window will appear.

2) Click the ‘edit’ icon in the ‘Analysis’ pod.

3) From the new window, select a style from the ‘Custom Pod Style’ dropdown menu.

4) Click ‘Save’ on the new window and ‘Save’ on the Measure detail page edit window.

5) The ‘Analysis’ pod below uses the ‘Red Border’ style created in this example.