View Full Version : Question regarding changing colors in carousel

19 Jun 2011, 10:29 PM
I recently encountered a problem with changing the colors of my card in carousel. I can change the color of the background in the html file but the color remains the same for all the cards.

This is the html code.

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="Resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="Resources/sencha-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>

body {
background-color: #FF6677;
.card {
text-align: center;
background-color: #DD1177;

.x-phone .card {
padding: 15px;
font-size: 36px;

.card p {
font-size: 24px;
line-height: 30px;

.x-phone .card p {
font-size: 16px;
line-height: 18px;

heres the code for the java.

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({

defaults: {
cls: 'card'
items: [{
html:'Digital Electronics 1'

title: 'Tab 1',
html: '2T1'

title: 'Tab 2',
html: '2'
style: "background-color: #FF6677; color: white;",
title: 'Tab 3',
html: '3'
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
defaults: {
flex: 1
items: [carousel1]


I inserted the style: background-color: but it doesnt seem to change the color of the card. Is it a problem with my coding?