---
title: "How to change background color of Ext.Msg.alert Sencha touch"  
description: "How to change background color of Ext.Msg.alert Sencha touch"  
author: "Samuel Fernandes"  
published: 2013-06-03  
updated: 2013-06-03  
canonical: https://www.mindstick.com/forum/975/how-to-change-background-color-of-ext-msg-alert-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 1 minute  

---

# How to change background color of Ext.Msg.alert Sencha touch

Hi,\
I want to change the [background color](https://www.mindstick.com/forum/12937/how-to-style-togglebutton-so-that-the-background-color-is-white) of alert [message](https://www.mindstick.com/forum/12802/show-confirmation-message-yes-or-no-in-asp-dot-net) box in [Sencha Touch](https://www.mindstick.com/interview/23004/define-class-system-of-sencha-touch) but I don’t have any idea about it. By [default](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources) Sencha Touch shows the black background color of [alert box](https://www.mindstick.com/forum/117/problem-in-displaying-alert-box-in-asp-dot-net) 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](https://www.mindstick.com/forum/34385/add-custom-css-in-razor-view) class with alert [dialog box](https://www.mindstick.com/forum/34699/create-alert-dialog-box-in-android) 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. \

## Replies

### Reply by AVADHESH PATEL

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.


---

Original Source: https://www.mindstick.com/forum/975/how-to-change-background-color-of-ext-msg-alert-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.