ScaleNine

I don’t know if it’s because of all the Apollo sample application screenshots floating around, but several people have been asking for a “dark” CSS theme. Maybe it’s just ’cause “dark” UIs look nice. Hmmm, maybe an Adobe Lightroom Theme is in order.

Anyhow, you can check out the Shadow CSS Theme, download the CSS or test it out using the following source in the mx:Style tag of your Application’s MXML:

http://try.scalenine.com/shadow/shadow.css

Second in my pure CSS theme series is Minty. It’s almost like a Flex interpretation of a Junior Mints box. A preview and download link can be found on the homepage.

Or try Minty by using http://try.scalenine.com/minty/minty.css in the source attribute of the mx:Style tag in your Flex 2 app MXML.

Things are getting busy for me lately and it seems it’s going to be for a bit. Rather than let ScaleNine sit idle I thought I’d create a series of pure CSS themes for Flex 2. They’re quick to make and can be just as effective for a quick theme solution.

Moxy is the first in the series and took nothing but some time with the Flex 2 Style Explorer (some CSS tweaking required) and a search for the background image at stock.xchng.

Try Moxy by using http://try.scalenine.com/moxy/moxy.css in the source attribute of the mx:Style tag in your Flex 2 app MXML.

In case you haven’t seen the sample themes that come with Flex 2, look in the Flex SDK 2 > frameworks > themes folder of the Flex install folder (at least that’s where it is on my Mac ) for themes called Ice, Smoke, Institutional, Wooden and others.

I just finished up a theme based on the soon to be released Yahoo Messenger for Windows Vista. I know a lot of Mac users are anxious to see a release for Mac OS X. Maybe this will give them something to play with to sooth their tempered selves even though you can’t actually chat with this.

There’s a couple item renderers for the buddy list and the message display. Those two areas are also populated using XML.

You can download the theme, it’s source and the FLA from the homepage. Or, try the theme using the following url in your Flex 2 Application’s mx:Style tag:

The FLAs for all the themes (all 3 of them) are now available for download from the homepage. A couple of them could probably use a little cleaning up. I’m going to try to make the FLAs for all future themes as well and hopefully people will let me know what they’re able to do with them.

I encourage the sharing of any themes that may develop out of the FLAs I make available.

I set up a quick system to allow ScaleNine themes to be used in Flex without having to download the source files from the homepage. Simply copy one of the following urls and paste it into the source attribute of a mx:Style tag in your working MXML under the Application tag. However, If you decide on using one of the themes I would suggest downloading the source for the theme you settled on and load it into your Flex project. A couple of weird things happen if you don’t do that, like disappearing images.

Obsidian Theme: http://try.scalenine.com/obsidian/obsidian.css

iTunes 7 Theme: http://try.scalenine.com/itunes7/jukebox.css

WMP 11 Theme: http://try.scalenine.com/wmp11/wmp11.css

Moxy CSS Theme: http://try.scalenine.com/moxy/moxy.css

Minty CSS Theme: http://try.scalenine.com/minty/minty.css

Shadow CSS Theme: http://try.scalenine.com/shadow/shadow.css

Darkroom Theme: http://try.scalenine.com/darkroom/darkroom.css

Vista Blue Theme: http://try.scalenine.com/vistaBlue/vistaBlue.css

Note: You must run/compile your project to see the theme get applied. It would be nice to see the theme change a project right inside Flex Builder rather than having to compile/run it. Maybe in a future release.

Based on Rich Tretola’s example mentioned in my last post, I created a Theme Swapper app using the Flex 2.0.1 runtime CSS feature. It swaps between three of the graphical themes I created (Obsidian, iTunes 7, and WMP 11 themes).

See it here: http://scalenine.com/samples/themeSwapper/themeSwap.html or view the source.

I finished the Windows Media Player 11 Theme for Flex 2. You can see it in action or download the source zip file. Alternate background, button, combo box and control bar skins were created for different needs/applications (ie. content areas versus button bars). I included the MXML file as a reference and notes in the zipped source file.

Click here to learn how you can try this theme without downloading any files.

Click here to learn how to use this theme without downloading any files.