Skip to main content

How do I change the appearance of my Klip?

Updated

You can use the Properties panel in the Klip Editor to change the look of your visualization. The options that are available to you on the Properties panel depend on the selected components or sub-components.

Changing the color

You can change the color of parts of your components and sub-components using the Properties panel. For example, you can alter properties like Stage Color for Funnel Charts and Series Color for Bar/Line and Scatter/Bubble Charts.

Select colors by clicking the drop-down arrow as shown in the image below. You also have the option to use the Custom field by typing in an HTML color code.

Changing the size

You can change the size of parts of your components and sub-components using the Properties panel.For example, you can alter properties like Font Size for text, Height of Sparkline components, and Size of charts like Bar/Line.

To change the size, click the drop-down menu and select a size as shown in the image below. You also have the option of using a custom size by selecting Custom and typing in a custom size in pixels. 

Adding prefixes and suffixes

Use the Prefix and Suffix properties to add text before and after a set of values. This is especially helpful if you want to add symbols to your data as shown in the image below. You can customize the display of the Prefix and Suffix independently by clicking the paint bucket icon (where you can apply bold, italics, and color). This property is available for the following components: Label,  Value Pair, Table, Sparkline, and Gauge. 

Adding custom CSS to Klips

If you have custom theming options enabled for your account, you can customize Label, Value Pair, Image, Button, and Table components using custom CSS.

  1. Add a class to the stylesheet you want to use in Klipfolio. Try out this sample stylesheet. 
  2. Upload the stylesheet to your account using the steps found here.
  3. In the Klip Editor, click Advanced Tools > View Klip Source Code to open the source code editing window.
  4. Reference the class name in your stylesheet by using: customCSSClass in the Klip Source Code.
  5. Save and Exit your Klip to see the style applied to your component.

For example, add the following code to a stylesheet and upload it to Klipfolio for a Label component:

.label_top {
margin-top: 2px;
margin-left: 0px;
margin-bottom: 5px !important;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
color: #108699 !important;
}

In the Klip Source Code of the Label component, reference the label_top class by typing  "customCSSClass": "label_top" . Save your Klip to see the following result:

Related articles