View Full Version : Attaching CSS for iconCls and Other Classes

24 Mar 2010, 9:12 AM
Forgive me if I've overlooked something obvious, but I can't figure out how to link a CSS document to a project. Is that possible?

I'd like to view button icons that I've set with the iconCls property, either in the designer, or when I click the preview button. Is there a way to do that?



31 Mar 2010, 9:12 AM
I would like to know this as well. Anyone have any ideas?

31 Mar 2010, 9:21 AM
This is not possible at the moment. Any suggestions/feedback of how you'd like it to work in terms of interface are welcomed.

31 Mar 2010, 11:55 AM
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:

.icon-smiley: url(../images/smiley.png);

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.

Hope this helps,

31 Mar 2010, 7:24 PM
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.

31 Mar 2010, 9:34 PM
In terms of user interface, I would like to see the css implemented similar to how the Components tree is now. There could be another tab in the east region called CSS. You could initiate the loading / adding external references here. Once loaded, you could move them up or down like components. This does the obvious thing, dictating which styles are overridden. I would like a checkbox next to each reference that indicates whether the styles in the file are active or not. This could help greatly in debugging if you suspect an errant override.

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! :)

6 Apr 2010, 11:46 PM
heck, I just want to use my own Ext Theme CSS!

Yes, there may be a bunch of 'challenges', but at least is it possible to select a custom theme?

Yes, I've created my own theme and am using the "ext-all-notheme.css" and then including my own "theme.css"...and my theme does change some border sizes.

8 Apr 2010, 2:46 AM
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)

14 Apr 2010, 1:13 AM
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.