PDA

View Full Version : Theming with CSS



agmona
27 Feb 2011, 1:52 PM
hey all...

Sorry for the dumb Q
I keep seeing in the samples all these complexed CSSs
and its difficult to believe they are made by "human"
is there some sort of designer that people are working with to get these CSS?
what is the preferred designer for creating CSS for sencha touch...?

kindest regards..

Alon

alexandra.ac
28 Feb 2011, 1:27 AM
Hi,

With Sencha Touch you are basically working with two css files:

- the first one is the default css file for Sencha Touch (this comes with the Sencha Touch sources);

- the second one is your custom css file for your app.

Now, to make your own design, you can:

- define your own classes - these basically go in the custom css file and are applied to the different elements by using the "cls" property (see documentation on Ext.Panel for example)

- overwrite some classes from Sencha Touch in your custom css (use Firebug to see how Sencha applies classes and to what elements)

- compile your own version of the Sencha Touch css file. This should be useful if you also want to minimize the file or use your own colors to theme the app. To answer your question, these complex css files are compiled and combined from different smaller files and create a theme.

See below some useful articles about theming:

http://www.vinylfox.com/custom-styling-a-sencha-touch-app/
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch