# Styling

This topic covers the styling feature in FlexPivotSlicer.

## Content

FlexPivotSlicer provides various options that allows you to customize the appearance of the slicer and its elements. You can customize the appearance of the control by using [Styles](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.C1FlexPivotSlicer.Styles.html) property of the [C1FlexPivotSlicer](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.C1FlexPivotSlicer.html) class. The **Style** property is of [SlicerStyles](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.Styles.SlicerStyles.html) type which provides several properties to handle the styling of the control and the control elements.

![FlexPivotSlicer Styling](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/slicergif_overview.gif)

## Style FlexPivotSlicer

The FlexPivotSlicer allows you to use the [Common](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.Styles.SlicerStyles.Common.html) property which can be used to customize the overall appearance of the Slicer control. The **Common** property is of [ICommonStyle](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.Styles.ICommonStyle.html) type which is implemented by the [CommonStyle](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.Styles.CommonStyle.html) class. Other than this, you can set the background and foreground color of the FlexPivotSlicer control by using the **BackColor** and **ForeColor** properties respectively.

Use the following code snippet to customize the appearance of the FlexPivotSlicer control.

```vbnet
'Styling the FlexPivotSlicer control
c1FlexPivotSlicer.Styles.Common.Padding = New C1.Framework.Thickness(10)
c1FlexPivotSlicer.Styles.Common.CheckListPadding = New C1.Framework.Thickness(5)
c1FlexPivotSlicer.Styles.Common.BackColor = Color.FromArgb(204, 236, 245)
```

```csharp
//Styling the FlexPivotSlicer control
c1FlexPivotSlicer.Styles.Common.Padding = new C1.Framework.Thickness(10);
c1FlexPivotSlicer.Styles.Common.CheckListPadding = new C1.Framework.Thickness(5);
c1FlexPivotSlicer.Styles.Common.BackColor = Color.FromArgb(204, 236, 245);
```

## Style Header

To customize the appearance of the FlexPivotSlicer header, you can use the [Header](/componentone/api/win/online-flexpivot/dotnet-framework-api/C1.Win.FlexPivot.Slicer.4.8/C1.Win.FlexPivot.Styles.SlicerStyles.Header.html) property.

The following code snippet showcases the use of the **Header** property to customize the font, border, button, and alignment of the FlexPivotSlicer Header.

```vbnet
'Styling the control's header
c1FlexPivotSlicer.Styles.Header.Font = New Font("Calibri", 10, FontStyle.Bold)
c1FlexPivotSlicer.Styles.Header.ForeColor = Color.DarkBlue
c1FlexPivotSlicer.Styles.Header.Border = New C1.Framework.Thickness(2)
c1FlexPivotSlicer.Styles.Header.Button.Hot.BackColor = Color.LightBlue
c1FlexPivotSlicer.Styles.Header.Button.HotPressed.BackColor = Color.LightCyan
c1FlexPivotSlicer.Styles.Header.Button.Corners = New C1.Framework.Corners(2)
c1FlexPivotSlicer.Styles.Header.Images.SortAscending = Properties.Resources.sortAsc
c1FlexPivotSlicer.Styles.Header.HorizontalAlignment = C1.Framework.Alignment.Center
```

```csharp
//Styling the control's header
c1FlexPivotSlicer.Styles.Header.Font = new Font("Calibri",10,FontStyle.Bold);
c1FlexPivotSlicer.Styles.Header.ForeColor = Color.DarkBlue;
c1FlexPivotSlicer.Styles.Header.Border = new C1.Framework.Thickness(2);
c1FlexPivotSlicer.Styles.Header.Button.Hot.BackColor = Color.LightBlue;
c1FlexPivotSlicer.Styles.Header.Button.HotPressed.BackColor = Color.LightCyan;
c1FlexPivotSlicer.Styles.Header.Button.Corners = new C1.Framework.Corners(2);
c1FlexPivotSlicer.Styles.Header.Images.SortAscending = Properties.Resources.sortAsc;
c1FlexPivotSlicer.Styles.Header.HorizontalAlignment = C1.Framework.Alignment.Center;
```

## Style CheckList

To customize the appearance of the of list that appears in the FlexPivotSlicer control, you can use the **Checklist** property which is of the type **CheckListStyles** class.

```vbnet
'Styling the checklist
c1FlexPivotSlicer.Styles.CheckList.Font = New Font("Calibri", 10, FontStyle.Italic)
c1FlexPivotSlicer.Styles.CheckList.UnfocusedSelected.ForeColor = Color.LightYellow
c1FlexPivotSlicer.Styles.CheckList.Header.ForeColor = Color.White
c1FlexPivotSlicer.Styles.CheckList.Header.BackColor = Color.LightGray
c1FlexPivotSlicer.Styles.CheckList.Hot.BackColor = Color.LightCyan
```

```csharp
//Styling the checklist
c1FlexPivotSlicer.Styles.CheckList.Font= new Font("Calibri", 10, FontStyle.Italic);
c1FlexPivotSlicer.Styles.CheckList.UnfocusedSelected.ForeColor = Color.LightYellow;
c1FlexPivotSlicer.Styles.CheckList.Header.ForeColor = Color.White;
c1FlexPivotSlicer.Styles.CheckList.Header.BackColor = Color.LightGray;
c1FlexPivotSlicer.Styles.CheckList.Hot.BackColor = Color.LightCyan; 
c1FlexPivotSlicer.Styles.CheckList.HotSelected.BackColor = Color.LightPink;
```