There is a possibility to make changes in the look and feel of a message box or a tooltip. You can either create a new CSS class or use a CSS class that DHTMLX library provides.
To use a new CSS class you need to take the following steps:
<style>
.my_first_class {
/*some styles*/
}
.my_second_class {
/*some styles*/
}
</style>
dhx.message({
css:"my_first_class my_second_class"
});
For example:
<style>
.custom-class .dhx_message__text {
font-size: 16px;
}
.custom-class .dhx_message__icon {
color: red;
}
</style>
dhx.message({
text: "Here is dhtmlxMessage",
icon: "dxi dxi-close",
css: "custom-class"
});
Related sample: Message. Message Custom Styles
Related sample: Message. Alert Custom Styles
Related sample: Message. Confirm Custom Styles
The DHTMLX library provides a set of CSS classes that you can apply to change appearance of a message box or a tooltip.
dhx.message({
css:"dhx_widget--bg_gray"
});
dhx_widget--bg_white | Sets white background to a widget |
dhx_widget--bg_gray | Sets gray background to a widget |
dhx_widget--bordered | Sets borders on all sides of a widget |
dhx_widget--border_top | Sets a border on the top side of a widget |
dhx_widget--border_bottom | Sets a border on the bottom side of a widget |
dhx_widget--border_left | Sets a border on the left side of a widget |
dhx_widget--border_right | Sets a border on the right side of a widget |
dhx_widget--border-shadow | Adds a shadow border to a widget |
dhx_widget--no-border_top | Removes the top border of a widget |
dhx_widget--no-border_bottom | Removes the bottom border of a widget |
dhx_widget--no-border_right | Removes the right border of a widget |
dhx_widget--no-border_left | Removes the left border of a widget |