How To Change Ext.carousel.Indicator Color In Sencha Touch

In Sencha Touch version 2.0, there is currently no way to modify the color of an active or inactive indicator of Ext.carousel.Indicator.

To do so, you will have to go to the app.css file located in resources/css/ in your project folder.

Look for keywords that have the substring carousel in it.

If your carousel does not use any ui setting specifically, you can modify the section that has the dark theme since that is its default.

Look for .x-carousel-indicator-dark span.

There is a value background-color: rgba(0, 0, 0, 0.1);

Change the values as you like. The first 3 parameters are its RGB (red, green, blue) values while the 4th parameter is its alpha value. Think of the alpha value as its transparency equivalent. 1 being clear while 0 being transparent.

The CSS code below that is .x-carousel-indicator-dark span.x-carousel-indicator-active which indicates the color value for its active state.

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *