It seems a rather tricky thing, as we mentioned in another post aconran.
Ideally I would imagine just a "manage external css files" button or menu item where we could add/remove external files from a list.
The same CSS files might be used not only to provide iconCls classes, but could also include any CSS that you want to override. If those CSS files are simply included in the background after your seemingly built-in css, the overrides should work.
The tricky part is preventing the included CSS files from overwriting the css used by the designer for its purposes.. a modification to any class might make the CONFIG button which is elegantly placed next to certain elements for picking a store or layout to display improperly or stop working.
The other tricky part is making the paths in the css file resolve properly, such as:
Especially considering that users probably would not like to have to maintain two seperate css/image collections ... one for their site, and one for designer, in relative sync.
But, that being said, I think a "manage external css" button/item would be the best we could hope for.
As you've suspected this is a little more challenging than just allowing users to link in external css and refresh that css.
We could either download and parse the entire css, add an additional selector which scopes it to the center canvas element and/or we could modify webkit so that these specific files linked in only apply to a particular element. It's not an easy problem and there are many other features/bugs that we'd like to address before getting to this.
That being said, it's a good suggestion and I like it. We'll try to get it in there.
Once the files are loaded / referenced, I would like the ability to easily select them from within the Component Config. The cls, ctCls, and so on should present a list of all the styles the Designer is aware of.
Doing all this without breaking the internal workings of the Designer does sound challenging. GL - I hope you succeed!
I think that the icon css support could simply be provided by supporting icon management.
Load icons from a folder then generate on the fly the css rules that user could make use of.
These rules would then appear in a drop down utilizing icon-combo for instant preview.
This shouldn't be too hard to add. All the user would need to do is point to a folder containing the icons and provide the relative path that would be used when generating the CSS file for image urls.
The icon class names would map directly to icon file names (with an optional prefix). On top of that it would be nice if designer could generated on the fly GIF images and a special CSS style sheet for IE6 to make use of gif files (if user is using png files for the icons)
One suggestion for the CSS iconCls, if we could specify the location of the css file in the preference at least the mockup html file could be constructed with the reference of the css and quickly we could at least see there the iconCls. This solution can be very quickly implemented and would be very useful even if it is not totally WYSIWYG.