You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Elmar Kretzer <e....@symentis.com> on 2010/02/19 17:44:52 UTC

[Trinidad] Skinning corrupts style class name (dot is missing)

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

Re: [Trinidad] Skinning corrupts style class name (dot is missing)

Posted by Andrew Robinson <an...@gmail.com>.
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 <e....@symentis.com> 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 <e....@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
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>
>
>

Re: [Trinidad] Skinning corrupts style class name (dot is missing)

Posted by Elmar Kretzer <e....@symentis.com>.
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....@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
>> 
>> 
>> 
>> 
>> 
>> 
>> 
>> 
>

Re: [Trinidad] Skinning corrupts style class name (dot is missing)

Posted by Andrew Robinson <an...@gmail.com>.
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....@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
>
>
>
>
>
>
>
>