# Styling and Appearance

## Content

DashboardLayout allows you to customize its appearance along with the appearance of the child containers using **Styles** property. It returns an object of the class <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET Framework\u003c/a\u003e assemblies." data-popup-title="DashboardTheme" data-popup-theme="ui-tooltip-green qtip-green">DashboardTheme</span> which provides three different properties namely [Common](/componentone/docs/win/online-dashboardlayout/) referring to the [CommonStyle](/componentone/docs/win/online-dashboardlayout/) class and [ItemContainer](/componentone/docs/win/online-dashboardlayout/) referring to the [ItemContainerStyle](/componentone/docs/win/online-dashboardlayout/) class. These classes handle the styling of the DashboardLayout control and the child containers.

The following image shows the styling applied to the DashboardLayout, the child containers and the tool-icon.

![Dashboard styling](https://cdn.mescius.io/document-site-files/images/ff3fa73b-228c-4f10-9cc6-7c137f26176a/images/dashboardstyling.png)

### Container Styling

The appearance of the DashboardLayout control can be customized using the properties exposed by the **CommonStyle** class. The following code shows an example to style the DashboardLayout:

```csharp
DashboardTheme dashboardTheme = c1DashboardLayout1.Styles;
dashboardTheme.Common.Margins = new C1.Framework.Thickness(30,30,30,30);
dashboardTheme.Common.Padding = new C1.Framework.Thickness(20,20,20,20);
dashboardTheme.Common.BackColor = Color.Beige;
```

```vbnet
Dim dashboardTheme As DashboardTheme =  c1DashboardLayout1.Styles 
dashboardTheme.Common.Margins = New C1.Framework.Thickness(30,30,30,30)
dashboardTheme.Common.Padding = New C1.Framework.Thickness(20,20,20,20)
dashboardTheme.Common.BackColor = Color.Beige
```

### Item Container Styling

The appearance of the child containers or item containers can be changed using the properties exposed by the **ItemContainerStyle** class. The following code uses the properties of the **ItemContainerStyle** class to change the appearance of the child container:

```csharp
DashboardTheme dashboardTheme = c1DashboardLayout1.Styles;
dashboardTheme.ItemContainer.BackColor = Color.BlanchedAlmond;
dashboardTheme.ItemContainer.Hot.BackColor = Color.White;
dashboardTheme.ItemContainer.Margins = new C1.Framework.Thickness(10,10,10,10);
dashboardTheme.ItemContainer.Padding = new C1.Framework.Thickness(10,10,10,10);
```

```vbnet
Dim dashboardTheme As DashboardTheme =  c1DashboardLayout1.Styles 
dashboardTheme.ItemContainer.BackColor = Color.BlanchedAlmond
dashboardTheme.ItemContainer.Hot.BackColor = Color.White
dashboardTheme.ItemContainer.Margins = New C1.Framework.Thickness(10,10,10,10)
dashboardTheme.ItemContainer.Padding = New C1.Framework.Thickness(10,10,10,10)
```

In addition, DashboardLayout allows you to set a custom tool-icon image using [ToolIcon](/componentone/docs/win/online-dashboardlayout/) property of the **ItemContainerStyle** class. The property also allows you to change the color of tool-icon image. The following code illustrates how **ToolIcon** property can be used to set a custom tool-icon and change its color:

```csharp
DashboardTheme dashboardTheme = c1DashboardLayout1.Styles;
dashboardTheme.ItemContainer.ToolIcon = Image.FromFile(@"C:\ToolIcon.png");
dashboardTheme.ItemContainer.ToolIconColor = Color.BurlyWood;
```

```vbnet
Dim dashboardTheme As DashboardTheme =  c1DashboardLayout1.Styles 
dashboardTheme.ItemContainer.ToolIcon = Image.FromFile("C:\ToolIcon.png")
dashboardTheme.ItemContainer.ToolIconColor = Color.BurlyWood
```

>type=note
> **Note**: These properties can be applied to all the child containers so if you want to style a specific child container, you can use the following code snippet.
>
> ```auto
> ((Panel)(c1DashboardLayout1.Items[0].ItemContainer)).BackColor = Color.Purple;
> ```