The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Use the following CSS to customize the dialog header properties.
.e-dialog .e-dlg-header {
color: green;
font-size: 20px;
font-weight: normal;
}Use the following CSS to customize the dialog content properties.
.e-dialog .e-dlg-content {
color: red;
font-size: 10px;
font-weight: normal;
line-height: normal;
}Use the following CSS to customize the modal dialog overlay.
.e-dlg-overlay {
background-color: slategray;
opacity: 0.6;
}Use the following CSS to customize the dialog resize icon.
/* To change the icon content */
.e-dialog .e-south-east::before, .e-dialog .e-south-west::before {
content: '\f047';
}
/* To set the icon pack */
.e-dialog .e-resize-handle {
font: normal normal normal 14px/1 FontAwesome;
}The above CSS demonstration uses the font awesome icon.
Use the following CSS to customize the dialog close button.
/* To specify font size and color */
.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
font-size: 12px;
color: red;
}Use the following CSS to customize the dialog footer button.
/* To specify font color, background color and border color */
.e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {
background-color: transparent;
border-color: transparent;
color: blue;
}