There is one minor issue. See below the Firebug style listing. In my
listing, I have disabled the background image by -tr-inhibit:
background-image; but it does not take effect. Is this a bug in trinidad or
I did something wrong?
thanks
Bill
.t_topMenu af|navigationPane::tabs-inactive af|navigationPane::tabs-mid {
-tr-inhibit: background-image;
background-color: #E8f6CA;
border-top: 1px solid #528917;
color: #528917;
}
.t_topMenu .af_navigationPane_tabs-inactive
.af_navigationPane_tabs-mid {residential-deskt...
(line 243)
background-color:#E8F6CA;
border-top:1px solid #528917;
color:#528917;
}
.af_navigationPane_tabs-inactive .af_navigationPane_tabs-mid
{residential-deskt...
(line 83)
background-image:url(/tcp-web/adf/images/tab3-mid-deselected.gif);
color:#000000;
}
On Tue, Feb 5, 2008 at 11:54 AM, Scott O'Bryan <[EMAIL PROTECTED]> wrote:
> My way works if you are "embedding" one navigation pane in the other.
> The example I gave would be for the "second" navigation pane, the first
> would use the normal styling.
>
> Simons works if you don't mind adding a style class.
>
> Zigc Junk wrote:
> > Tried again. Yes, the first syntax works.
> >
> > Thanks a lot
> >
> > Bill
> >
> > On Tue, Feb 5, 2008 at 11:20 AM, Simon Lessard
> > <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>> wrote:
> >
> > Hmmm, the first synthax should work just fine... can you check the
> > generated CSS to see how the selector was reduced?
> >
> >
> > On Feb 5, 2008 12:16 PM, Zigc Junk <[EMAIL PROTECTED]
> > <mailto:[EMAIL PROTECTED]>> wrote:
> >
> > Just tried both syntax and it does not seem to work. Below is
> > the html code from Firebug. Note that I changed MyClass to
> > t_topMenu. Do you know why?
> >
> > thanks
> >
> > Bill
> >
> > <div class="t_topMenu af_navigationPane_tabs">
> > <table class="" cellspacing="0" cellpadding="0" border="0"
> style="display:
> > inline;" summary="">
> > </table>
> > <table class="" cellspacing="0" cellpadding="0" border="0"
> style="display:
> > inline;" summary="">
> > <tbody style="display: inline;">
> > <tr>
> > <td>
> > <table class="af_navigationPane_tabs-inactive" cellspacing="0"
> cellpadding="0" border="0" summary="">
> > <tbody>
> > <tr>
> > <td class="af_navigationPane_tabs-start-join-from-active"/>
> > </tr>
> > <tr>
> > <td class="af_navigationPane_tabs-bottom-end">
> > <div class="af_navigationPane_tabs-bottom-mid-content"/>
> > </td>
> > </tr>
> > </tbody>
> > </table>
> > </td>
> > <td>
> > <table class="af_navigationPane_tabs-inactive" cellspacing="0"
> cellpadding="0" border="0" summary="">
> > <tbody>
> > <tr>
> > <td class="af_navigationPane_tabs-mid">
> > <a id="j_id_id50:j_id_id54"
> onclick="submitForm('rootForm',1,{source:'j_id_id50:j_id_id54'});return
> > false;" href="#" name="j_id_id50:j_id_id54">Bills</a>
> > </td>
> > </tr>
> > <tr>
> > <td class="af_navigationPane_tabs-bottom-mid">
> > <div class="af_navigationPane_tabs-bottom-mid-content"/>
> > </td>
> > </tr>
> > </tbody>
> > </table>
> > </td>
> > <td>
> > </td>
> > </tr>
> > </tbody>
> > </table>
> >
> >
> > On Tue, Feb 5, 2008 at 11:01 AM, Simon Lessard
> > <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>>
> > wrote:
> >
> > Hello Bill,
> >
> > The following should work:
> >
> > <tr:navigationPane hint="tabs" styleClass="MyClass">
> >
> > <tr:commandNavigationItem text="Home" />
> > <tr:commandNavigationItem text="Bills" />
> > <tr:commandNavigationItem text="Service History" />
> > </tr:navigationPane>
> >
> > .MyClass af|navigationPane::tabs-inactive
> > af|navigationPane::tabs-mid A
> > {
> > font-weight: bold;
> > }
> >
> > or
> >
> > af|navigationPane.MyClass::tabs-inactive
> > af|navigationPane::tabs-mid A
> > {
> > font-weight: bold;
> > }
> >
> > The best way to know on what element the style class
> > should be put is by using Firebug.
> >
> >
> > Regards,
> >
> > ~ Simon
> >
> >
> >
> > On Feb 5, 2008 11:55 AM, Zigc Junk <[EMAIL PROTECTED]
> > <mailto:[EMAIL PROTECTED]>> wrote:
> >
> > Can you be more specific? Assume that I have the
> > following navigationPane, how can I create a skin that
> > is ONLY applied to this navigationPane.
> >
> > <tr:navigationPane hint="tabs">
> > <tr:commandNavigationItem text="Home" />
> > <tr:commandNavigationItem text="Bills" />
> > <tr:commandNavigationItem text="Service
> > History" />
> > </tr:navigationPane>
> >
> > Here is one piece of the skin I created
> > af|navigationPane::tabs-inactive
> > af|navigationPane::tabs-mid A {
> > font-weight: bold;
> > }
> >
> > Thanks
> >
> > Bill
> >
> >
> >
> >
> > On Feb 5, 2008 10:33 AM, Scott O'Bryan
> > <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>>
> wrote:
> >
> > Zigc Junk wrote:
> > > I am trying to skin the navigationPane. Since I
> > have two
> > > navigationPane (tabs) instances (one top menu
> > and one secondary menu),
> > > I want to put a different skin on each of them.
> > It seems to me that
> > > there is no way of doing that. I can only create
> > one skin which will
> > > be applied to all navigationPane instances. Does
> > anyone know how to do
> > > this?
> > >
> > > thanks
> > >
> > > Bill
> > Use a compound key. If the second navigation pane
> > is embedded in the
> > first one, the key for the second pane might look
> > something like this:
> >
> > af|navigationPane-tabs::tab:selected
> > af|navigationPane-tabs::tab-content
> >
> >
> >
> >
> >
> >
> >
>
>
