---
title: "How to change font color and size of \"Titlebar\" in Sencha Touch?"  
description: "How to change font color and size of \"Titlebar\" in Sencha Touch?"  
author: "Aaron Douglas"  
published: 2013-06-10  
updated: 2013-08-06  
canonical: https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# How to change font color and size of "Titlebar" in Sencha Touch?

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances),\
I'm try to change font [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) and [size](https://www.mindstick.com/forum/159799/how-can-you-manage-the-size-of-mdf-and-ldf-files) of **Titlebar** in [Sencha Touch](https://www.mindstick.com/interview/23004/define-class-system-of-sencha-touch). How to do this?Please help!Thanks in advance.

## Replies

### Reply by Anonymous User

Hi Mr. Douglas,**Sencha Touch** provides a rich property (**property name - cls**) to change font color, font-size etc. You can simply create your **CSS** class and just add with control property **CLS** it will made changes in control. \
You can simply drag and drop titlebar from toolbox to view inspector if you are using Sencha Architect but if are not using Sencha Architect then you can simply add the following line of code in your application:3

```
  Ext.create('Ext.Panel', {            fullscreen: true,            styleHtmlContent: true,            items: [{                xtype: 'titlebar',                docked: 'top',                title: 'Panel title',                items: [{                    xtype: 'button',                    align: 'left',		      cls: 'your_custom_css_class_forTitleBar',                    iconCls: 'arrow_left',                    iconMask: true,                    ui: 'plain',                    handler: function () {                        Ext.Msg.alert('You clicked the left button');                    } // handler                }, {                    xtype: 'button',                    align: 'right',		    cls: 'your_custom_css_class_forbutton',                    iconCls: 'arrow_right',                    iconMask: true,                    ui: 'plain',                    handler: function () {                        Ext.Msg.alert('You clicked the right button');                    } // handler                }] // items            }, {                html: 'This is the body of the panel'            }] // items        }); // create()
```

\
Mark as answer if this solution will resolve your problem. Thanks!!


---

Original Source: https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch

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