Search results

Style and Appearance in ASP.NET MVC Toolbar control

20 Apr 2021 / 1 minute to read

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

Customizing Toolbar

Use the following CSS to customize the Toolbar.

Copied to clipboard
.e-toolbar {
    border: 5px solid rgb(173, 255, 47);
}

Customizing the Toolbar items

Use the following CSS to customize the items of Toolbar.

Copied to clipboard
 .e-toolbar .e-toolbar-item {
    background: #add8e6;
    border: 1px solid #5a70cc;
}

Use the following CSS to customize the button in the items of Toolbar.

Copied to clipboard
.e-toolbar .e-tbar-btn {
    background: #add8e6;
    border: 1px solid #5a70cc;
}

Customizing Toolbar’s item icon

Use the following CSS to customize the item icon of Toolbar control.

Copied to clipboard
.e-toolbar .e-tbar-btn .e-icons {
    background: #185655;
    color: #d7f9d4;
}

Customizing the hover state of Toolbar control

Use the following CSS to customize the toolbar item when hovering.

Copied to clipboard
.e-toolbar .e-tbar-btn:hover {
    background: #c0e3a1;
    border: 1px solid green;
}

Customizing selected item of Toolbar control

Use the following CSS to customize the selected toolbar item.

Copied to clipboard
.e-toolbar .e-tbar-btn:focus {
    background: #add8e6;
    border: 1px solid #5a70cc;
}