Results 1 to 5 of 5

Thread: Themes and CSS documentation?

  1. #1

    Post Themes and CSS documentation?

    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?

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    I always start by inspecting with firebug.

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The concept is called CSS sprites: Use a single image and only display fragments of it in different places.

    e.g. explained here.

  4. #4

    Thumbs up

    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!

    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

    Thanks!

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •