Bah, nvm that, I didn't try all combination, I found the good one. I'll have
to document that.
Thanks for the help!
~ Simon
On 8/24/06, Simon Lessard <[EMAIL PROTECTED]> wrote:
Hmmm, here is what get generated i nthe CSS for me with the new panelBox;
.af_panelBox_dark .af_panelBox_content, .x4k .x4v,
.af_panelBox_dark.p_AFRtl .af_panelBox_content, .x4k.p_AFRtl .x4v
{padding-top:8px}
.af_panelBox_dark .af_panelBox_header, .x4k .x4u,
.af_panelBox_dark.p_AFRtl .af_panelBox_header, .x4k.p_AFRtl .x4u
{border-bottom:2px solid white;font-size:16pt}
.af_panelBox_dark .af_panelBox_top, .x4k .x4m
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/Top.gif');background-repeat:repeat-x}
.af_panelBox_dark .af_panelBox_start, .x4k .x4o
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/Start.gif');background-repeat:repeat-y}
.af_panelBox_dark .af_panelBox_bottom, .x4k .x4r
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/Bottom.gif');background-repeat:repeat-x}
.af_panelBox_dark .af_panelBox_end, .x4k .x4p
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/End.gif');background-repeat:repeat-y}
.af_panelBox_dark .af_panelBox_top-start, .x4k .x4l
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/TopStartCorner.gif');height:8px;width:8px}
.af_panelBox_dark .af_panelBox_top-end, .x4k .x4n
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/TopEndCorner.gif');height:8px;width:8px}
.af_panelBox_dark .af_panelBox_bottom-start, .x4k .x4q
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/BottomStartCorner.gif');height:8px;width:8px}
.af_panelBox_dark .af_panelBox_bottom-end, .x4k .x4s
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/BottomEndCorner.gif');height:8px;width:8px}
.af_panelBox_dark.p_AFRtl .af_panelBox_body, .x4k.p_AFRtl .x4t
{background-color:rgb(72, 54, 188);color:black}
.af_panelBox_dark.p_AFRtl .af_panelBox_top, .x4k.p_AFRtl .x4m
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/TopRtl.gif');background-repeat:repeat-x}
.af_panelBox_dark.p_AFRtl .af_panelBox_start, .x4k.p_AFRtl .x4o
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/StartRtl.gif');background-repeat:repeat-y}
.af_panelBox_dark.p_AFRtl .af_panelBox_bottom, .x4k.p_AFRtl .x4r
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/BottomRtl.gif');background-repeat:repeat-x}
.af_panelBox_dark.p_AFRtl .af_panelBox_end, .x4k.p_AFRtl .x4p
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/EndRtl.gif');background-repeat:repeat-y}
.af_panelBox_dark.p_AFRtl .af_panelBox_top-start, .x4k.p_AFRtl .x4l
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/TopStartCornerRtl.gif');height:8px;width:8px}
.af_panelBox_dark.p_AFRtl .af_panelBox_top-end, .x4k.p_AFRtl .x4n
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/TopEndCornerRtl.gif');height:8px;width:8px}
.af_panelBox_dark.p_AFRtl .af_panelBox_bottom-start,.x4k.p_AFRtl .x4q
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/BottomStartCornerRtl.gif');height:8px;width:8px}
.af_panelBox_dark.p_AFRtl .af_panelBox_bottom-end, .x4k.p_AFRtl .x4s
{background-image:url('/TrinidadDemo-MenuModel-context-root/skins/panelBox/skin_images/BottomEndCornerRtl.gif');height:8px;width:8px}
There's that new .p_AFRtl thingy coming from pseudo-classes interception I
guess.
Generated HTML is:
<table class="x4k" summary=
"" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td
class="x4n"></td>
<td class=
"x4m"></td>
<td class="x4l"></
td>
</tr>
<tr>
<td class=
"x4p"></td>
<td class="x4t">
<
table summary="" border="0" cellpadding="0" cellspacing="0">
<
tbody>
<tr>
<td class="x4u"
>Title</td>
</tr>
<tr>
<td
class="x4v">
<!-- Start: org.apache.myfaces.trinidad.Output["_id10"] -->
Some test content text inside a panelBox component with
background='dark'
</td>
</tr>
</tbody>
</table
>
</td>
<td class="x4o"></
td>
</tr>
<tr>
<td class=
"x4s"></td>
<td class="x4r"></
td>
<td class="x4q"></td>
</
tr>
</tbody>
</table>
I tried the following in the skin's CSS
af|panelBox::dark:rtl af|panelBox::top
{
background-image: url(skin_images/TopRtl.gif);
background-repeat: repeat-x;
}
af|panelBox::dark af|panelBox::top:rtl
{
background-image: url(skin_images/TopRtl.gif);
background-repeat: repeat-x;
}
af|panelBox::dark:rtl af|panelBox::top:rtl
{
background-image: url(skin_images/TopRtl.gif);
background-repeat: repeat-x;
}
I also tried writing p_AFRtl class on the root panelBox element, then it become
dependant on the entry order in the CSS file.
Also, I assume that class exists only because of the recent navigationPanel
changes so that must not be right.
Do you see anything wrong I'm doing without digging in the code?
Thanks,
~ Simon
On 8/24/06, Simon Lessard <[EMAIL PROTECTED]> wrote:
>
> Thanks you very much Jeanne, I'll check it.
>
>
> On 8/24/06, Jeanne Waldman < [EMAIL PROTECTED]> wrote:
> >
> > I tried this and it works for me. There is a demo of it in the purple
> > skin's css file.
> > af|inputText::content:rtl
> > {
> > color: red;
> > }
> >
> > If you set the browser to be a rtl language and run the inputText
> > demo,
> > you'll see the content's text is red.
> >
> > - Jeanne
> >
> > Jeanne Waldman wrote:
> >
> > > Hi Simon,
> > >
> > > Appending :rtl should work. There's a chance that this broke
> > recently.
> > > I'll have to double check. I'll make this high priority.
> > >
> > > - Jeanne
> > >
> > >
> > > Simon Lessard wrote:
> > >
> > >> Hello all,
> > >>
> > >> Can anyone give me a really short course about RTL support we have
> > in
> > >> Trinidad? Basically, I thought I had to add :rtl to style classes
> > >> within the
> > >> renderer and the skin, but that's obviously not the case, :rtl to
> > >> selectors
> > >> seems to work only on icons. In the XSS it's 2 different
> > stylesheets,
> > >> but
> > >> how does it work with CSS skins?
> > >>
> > >> Currently I was able to have it work by adding p_AFRtl to generated
> > >> elements' style classes but that must not be the best way to
> > acheive it.
> > >>
> > >>
> > >> Regards,
> > >>
> > >> ~ Simon
> > >>
> > >
> > >
> >
> >
>
