Thought so, I would use a different CSS file (you can try @import in you skin if you want it to stay with the skin). In the meantime, maybe file an enhancement to have "-icon" styles that start with a class selector, ".", ignored.
On Mon, Feb 22, 2010 at 1:10 AM, Elmar Kretzer <[email protected]> wrote: > I tried with different variations: > > .ui-icon{ color: red;} > .ui--icon{ color: red;} > .tr-icon{color: red;} > .uiicon{ color: red;} > .ui{ color: red;} > > these classes will result in: > > ui-icon, ui--icon, tr-icon, .uiicon, .ui{ > color: red; > } > > Andrew, it seems like you are right, and the -icon is the reason. > I rechecked the skinning doc and found the following lines: > > http://myfaces.apache.org/trinidad/devguide/skinning.html#Icon_skinning_keys >> All icon skin keys end with '-icon' or 'Icon:alias'. icons do not get >> generated to the CSS-2 stylesheet. Instead they get registered with the Skin >> object and the renderer uses the icon when it is rendering. It will use your >> skinned icon if you have skinned it. Otherwise, it will use the base skin's >> icon. Note that CSS-syntax like pseudo-classes (:hover, etc) and descendent >> selectors and composite class selectors do not work with icon selectors. > > Sadly, it seems like there is no other option than keeping > the stylesheets for jQuery UI in a separate css file. > Or is there any other possibility to avoid this handling? > > Elmar > > > Am 19.02.2010 um 19:02 schrieb Andrew Robinson: > >> I know jQuery uses "ui-icon" so you don't have a choice in the name, >> but could you test to see if not using the "-icon" ending is the >> reason for the problem? I believe Trinidad skins treat style names >> ending with icon specially, so that could be the reason. >> >> -A >> >> On Fri, Feb 19, 2010 at 9:44 AM, Elmar Kretzer <[email protected]> >> wrote: >>> Hi all, >>> >>> i just stumbled across some weird issues, while using jQuery UI in Trinidad. >>> I added jQuery UI style classes - but they get corrupted. >>> >>> Could anyone try just to add in skin file: >>> >>> .ui-icon{ display: block; text-indent: -99999px; overflow: hidden; >>> background-repeat: no-repeat; } >>> >>> In my Trinidad "compiled" CSS file, the dot is missing and therefore the >>> rule gets ignored. >>> >>> ui-icon >>> {display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat} >>> >>> >>> Thanks in advance for any information! >>> >>> Have a nice weekend >>> Elmar >>> >>> >>> >>> Env: >>> Trinidad 1.2.13 >>> MyFaces 1.2.6 >>> Tomcat 6.018 >>> Java 6 >>> Mac OS >>> >>> >>> >>> >>> >>> >>> >>> >> > >
