Reputation: 113
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
Upvotes: 1
Views: 4357
Reputation: 2962
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..
Upvotes: 0
Reputation: 7055
There's one css var defined to change default background color. It's $page-bg-color
.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee
. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss
itself.
You'd need to define your own *.scss
file and compile it. In this *.scss
file, you can override almost every css property. In your case, set $page-bg-color:#whatever
and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
Upvotes: 2