Hi Charlie, the question is simple enough, but I'm afraid the answer isn't ;) I'm going to assume you haven't looked into qooxdoo's theming system yet - if you have, you can probably skip to the bottom of this message.
In qooxdoo, widgets have an "appearance" property. This is listed in the API viewer: http://demo.qooxdoo.org/current/apiviewer/#qx.ui.window.Window~appearance Clicking the plus icon will display the initial value, "window". This is the widget's appearance ID. qx.ui.window.Window is a composite widget with several sub-widgets or "child controls". "captionbar" is the one you're looking for: http://demo.qooxdoo.org/current/apiviewer/#qx.ui.window.Window~captionbar This gives you the appearance ID for the caption bar inside the window: "window/captionbar". You can search for this string in the Appearance theme used by your application - by default, that would be (in the qooxdoo SDK) framework/source/class/qx/theme/modern/Appearance.js. This code returns the name of the *decoration* to be used for the caption bar depending on the widget's state (active/inactive) and whether or not CSS gradients are supported by the client. The possible return values are: "window-captionbar-active" "window-captionbar-inactive" "window-captionbar-active-css" "window-captionbar-inactive-css" These are defined in the Decoration theme (framework/source/class/qx/theme/modern/Decoration.js). The "non-css" versions of these decorations are fairly complex - they use a base image that is cut into pieces by qooxdoo's toolchain to achieve the rounded corners. For now, let's just look at the gradient variants, e.g. "window-captionbar-active-css". The decoration theme entry defines a map with a "style" key which is another map with the keys "gradientStart" and "gradientEnd". Their values include the name of an entry in the Color theme (Color.js), e.g. "window-caption-active-start". This, finally, is where the actual color value is defined. So, armed with this knowledge, you could: 1) Override the existing Color theme entries by adding keys with the same names to your application's custom color theme (source/class/<custom>/theme/Color.js), which extends the framework's color theme. This would probably be OK since those color definitions are only used for window caption bars. Other color theme entries are used by multiple decorations so you could get ugly side effects. 2) Define custom Color, Decoration and Appearance theme entries (inheriting from the framework classes as needed), then apply the new appearance ID to the window instance after it's created by calling window.setAppearance. 3) Define a custom theme as in 2) but also create a new Window widget inheriting from qx.ui.window.Window that applies a custom appearance ID to its caption bar child control. This is the cleanest solution since it keeps the theming details separate from the application code. I hope this sheds some light on things without shattering your impression of qooxdoo being less bloated than the competition. ;) Regards, Daniel On 12/12/2011 02:36 PM, Charlie White wrote: > I have what I think should be a simple question. I have only been using > qooxdoo for a day or two and I am evaluating it in comparison to ext-js. I > like the structure and the documentation of qooxdoo better and it certainly > seems less bloated. My question is this: > > How can I change the dark blue gradient in the header of my theme which > inherits this from qx.theme.Modern? I can't find any documentation on the > property names for the properties of a window. I have tried to go into my > Color.js in my theme subdirectory and guess at the name of it, like "header" > or "background-dark", "background-application" etc but nothing works. Is > there a reference somewhere that shows a window and annotates the properties? > The central issue is that I am using a transparent png for the company logo > on the top of the window and it looks awful on dark blue gradient. I would > like to change it to white. Any help would be appreciated. > > -- Charlie > > > ------------------------------------------------------------------------------ > Learn Windows Azure Live! Tuesday, Dec 13, 2011 > Microsoft is holding a special Learn Windows Azure training event for > developers. It will provide a great way to learn Windows Azure and what it > provides. You can attend the event by watching it streamed LIVE online. > Learn more at http://p.sf.net/sfu/ms-windowsazure > _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > ------------------------------------------------------------------------------ Learn Windows Azure Live! Tuesday, Dec 13, 2011 Microsoft is holding a special Learn Windows Azure training event for developers. It will provide a great way to learn Windows Azure and what it provides. You can attend the event by watching it streamed LIVE online. Learn more at http://p.sf.net/sfu/ms-windowsazure _______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
