PDA

View Full Version : Question regarding changing colors in carousel



dracos1337
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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<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>

<style>
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;
}
</style>
</head>
<body></body>
</html>


heres the code for the java.

Ext.setup({
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?