Ext - CSS/Theme Guidelines - Ext JS

All,

The themes that are provided are kewl, but I'd like to incorporate a color scheme that I have on the website that i manage for a non-profit....

I'd like to know if there are any guidelines and/or docs that describe the best way of creating a custom Ext color theme?

And/or for those that have created an Ext theme, what is the best way of going about it????

Any help is greatly appreciated!!

Thanks in Advance!!

# 2   03-08-2007, 08:44 PM

For going about it, I have done the following: - Use the default theme and full css as references: other themes have (had) holes in them in terms of what widgets are provided, etc. I always found default easiest to reference. Your starting place might be looking through the CSS file and the directory. I use Safari a lot, so opening examples and viewing activity (to see what images loaded) and the DOM (to see the structure of the elements created with JavaScript) combined with studying what has been done was my true start. Oh, and then looking at the other themes to see what they are changing. - Sketch. On paper... just like you would with any design project. - I like to work in Illustrator, others might disagree here, but I have always enjoyed UI work in Illustrator. What got me in the habit is an immediate plus if there are clients involved: vector work can be scaled up -- 11"x17" presentation boards of UI components tend to get favorable responses. I start by bringing in screenshots of default UI components on a locked layer and drawing my work on layers on top -- I find this helps keep what I am imagining somewhat in line with the existing default style sheets (which lets me focus on being creative instead of big changes to things that are pretty good to begin with) - I bring the work from Illustrator into Photoshop and, referencing the files in the resources folder, build sprites. These get saved in a new folder mirroring the directory structure of the default resources folder and the file names match. - At this point, I make some obvious changes to the default CSS and globally replace the folder path. I know that I still have a lot to do with CSS, but I am pretty eager to see things, so I save the file as a CSS for my theme and modify one of Jack's examples to load my theme CSS -- it won't look right (at all), but I can start go get a feel for how things will look, and that keeps me going. - After that it is just spending time working through the CSS for my theme to get things done.

# 3   03-08-2007, 08:46 PM

Start with the theme that is closest to the one your going to create. (aero, gray, vista) copy the resources/css/ytheme-[themename].css file to a new name, ie: ytheme-kickbutt.css copy the resources/images/[themename] folder to a new folder name, in my example above its 'kickbutt' then include your new theme css file in your page and start the editing fun! I havent found any docs on the styles, but jacks new element inspector (Ctrl-Shift-Home) helps allot in figuring out what styles do what.