CSS structures

23 Jan 20251 minute to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the Dashboard Layout panel header

Use the following CSS to customize the Dashboard Layout panel header.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
    color: #754131;
    background-color: #c9e2f7;
    text-align: center;
}

Customizing the Dashboard Layout panel content

Use the following CSS to customize the Dashboard Layout panel content.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
    background-color: #c9e2f7;
    padding: 50px;
}

Customizing the Dashboard Layout panel resize icon

Use the following CSS to customize the Dashboard Layout resize icon.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{
    color: #0378d5;
    font-size: 30px;
    height: 20px;
    width: 20px;
}

Customizing the Dashboard Layout panel background

Use the following CSS to customize the Dashboard Layout panel background.

.e-dashboardlayout.e-control.e-responsive {
    background: #b3d3ed;
}

NOTE

You can refer to our ASP.NET Core Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Dashboard Layout example to know how to present and manipulate data.