ScaleNine

I thought I’d put together some solid instructions for installing the ScaleNine themes since the link I have on the homepage seemed to be a little vague and there are recurring questions regarding the topic. Please forgive the lack of screenshots, my Flex Builder trial ran out and I’ve switched to using the free Flex 2 SDK.

Installing any of the ScaleNine themes is pretty easy depending on it’s use and on your knowledge of Flex 2. Either way, it is still pretty easy. There is also a slight difference in installing a pure CSS theme and a graphical theme.

Installing a CSS Theme

Download and unzip the provided source files. Usually it will contain a CSS file and maybe a background image. You can drop these files anywhere in your Flex Project folder. Now, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS.

It’s that easy. Once installed you can change the CSS to suit your needs or make style changes in your MXML to alter the installed CSS theme for certain components.

If things don’t seem to be working you can always refer to the source of the CSS themes on the ScaleNine homepage.

Installing a Graphical Theme

Installing one of the ScaleNine graphical themes is pretty much the same as the instructions above. The only difference is that your dealing with another asset, a SWF.

When you unzip the provided source files you should see a SWF, CSS file, and a background image inside a style folder. Drop that folder into the top level of your Flex Project. Then, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS. You may also see what look to be purple boxes (embedded SWF symbols) if you’re in the Design View.

If you put the provided CSS file in one place and the SWF in another, that’s where things change a little. In the CSS file there is a path defined for the SWF file. So, if you move the SWF file just do a “Find and Replace” in the CSS and switch the old path to the new location of the SWF file.

As a side note, if you’re using the ThemeSwapper source or doing any Runtime CSS stuff, make sure you right click on any CSS files and select “Compile CSS to SWF”. Otherwise you’ll get an error stating that a specified SWF can’t be found.

Hope this information helps. For more information using external style sheets check out these links:

Applying CSS Styles to components , Using external Style Sheets , Graphical Skinning

This entry was posted on Saturday, February 24th, 2007 at 8:05 pm and is filed under general, how-to, notices. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.