Home > DeveloperSection > Forums > How to change background color of Ext.Msg.alert Sencha touch
Samuel Fernandes
Samuel Fernandes

Total Post:154

Points:1082
Posted on    June-03-2013 2:51 AM

 Sencha Touch Sencha Touch 
Ratings:


 1 Reply(s)
 2622  View(s)
Rate this:
Hi,

I want to change the background color of alert message box in Sencha Touch but I don’t have any idea about it. By default Sencha Touch shows the black background color of alert box but I want to custom color. So please let me know what is correct way to perform this task?

Here I'm trying to add custom class with alert dialog box but it is not working.

CSS:

 .test{ Background-color: #d21c1c !important; }

Dialog code:

var dialog = Ext.Msg.alert("Custom alert box!"); 
dialog.getDialog().addClass('testcolor');

Thanks in advance. 



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-03-2013 9:15 AM

Hi Samuel,

Use below css classes to change MessageBox bg color and MessageBox text properties.

// To change messagebox background color

.x-msgbox
 {
    background-color: #fff;
 }

// To change messagebox text properties
 .x-msgbox-dark .x-msgbox-text {
    color: #000 !important;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

// To change messagebox title
.x-toolbar-dark .x-title {
    color:#000 !important;
    font-size: 20px !important;
    font-family: Helvetica, Arial, sans-serif;
}

It may be helpful for you.

Don't want to miss updates? Please click the below button!

Follow MindStick