myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Elmar Kretzer <e.kret...@symentis.com>
Subject Re: [Trinidad] Skinning corrupts style class name (dot is missing)
Date Mon, 22 Feb 2010 08:10:08 GMT
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 <e.kretzer@symentis.com> 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
>> 
>> 
>> 
>> 
>> 
>> 
>> 
>> 
> 


Mime
View raw message