Alex
Alex

Reputation: 113

How to change default background in Sencha Touch 2

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

Answers (2)

Gayathri Mohan
Gayathri Mohan

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

SachinGutte
SachinGutte

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

Related Questions