View Full Version : Themes and CSS documentation?

16 Jun 2009, 4:29 PM
Hello Im triying to make theme for my actual ExtJS (3.0) proyect, how ever Im seen some problems to understand how the interface is rendered by the ExtJS.

Is there any documentation about what class changes X or Y settings? in the x-theme-blue.css file? Im tring to guess all settings but is hard because many of them are nested inside others, and those are also manybe not very well "named" like ... .x-btn-group-mr is for a button group but what does the MR ? Im guessing the R is Right but M?

Also I got some confusion of how does the library renders buttons because, Seen the .gif files I got huge empty buttons (with the corresponding cornes, and also i see the call for the background of the corners and buttons in the CSS, but seen the result is not according with the corresponding GIF, meaninng that in some place the GIF is repositioned, to CUT some specificareas of it, and then render in the button, but how to know where?, what dimensions are been cutted from X,Y, width, height? what if I want a bigger/smaller corner size?

continue with the button example:
the CSS define the button cornes, margins, and background calling only one GIF that is:
/resources/images/default/button/btn.gif ... only referenced as background, not position or display areas.... zooming that gif, you can see three small balls, and some color lines (im guessing that those are the corners and the button states margins and background colors, but if this sole GIF defines all the buttons, what are the cutting areas, where are defined?

Any way is there any doc about this?

17 Jun 2009, 4:42 AM
I always start by inspecting with firebug.

17 Jun 2009, 5:04 AM
The concept is called CSS sprites: Use a single image and only display fragments of it in different places.

e.g. explained here (http://css-tricks.com/css-sprites/).

21 Jun 2009, 4:53 PM
CONDOR: Im aware of the concept of loading 1 sprite and change the position of it .. but...
JGARCIA: thanks that was helpfull .. but..

... what I mean, is that I need to use a tool, like fire bug to investigate object by object in the layout, to discover (and in no a very easy way too) what it affects and what not... and I was looking for some documentation where any one can find all the CSS structure as ExtJS generate it and use.

Something like the API documentation but for the CSS!

If there's nothing maybe is a good Idea to start one! :D

Also I find the ext-all.css file very REDUNDANT because many styles are defined two, tree or even more times in the same setting, but as any one know only the last one is used by the browser so whats the point to define it so may times....

A cleanup of the CSS style maybe be a good, tip to make ExtJS even load faster


21 Jun 2009, 10:19 PM
I'll admit that the ext-all.css does contain some unneeded style rules (left over from previous Ext versions), but I don't think there is any redundancy.

Could you post an example of redundant styling?

ps. And I don't mean the rule duplication caused by the notheme/theme split in Ext 3.