Maybe you'd like have a look at my style definitions below. It is not much
more than a CSS'ed copy of base.xss with the images exchanged. You are
explicitly defining an <tr:navigationPane> in your page? I'm asking because
with <tr:page> it does not (yet) work since <tr:page> uses the older style
selectors, which I also defined.
Good luck!
sonja
af|navigationPane::tabs-inactive af|navigationPane::tabs-start{
background-image:url('images/tab1-start-deselected.gif');
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-start{
background-image: url('images/tab1-bot-deselected.gif');
}
af|navigationPane::tabs-inactive
af|navigationPane::tabs-bottom-start-content{
background-image:none;
}
af|navigationPane::tabs-inactive
af|navigationPane::tabs-start-join-from-active{
background-image:url('images/tab1-start-join-selected-to-deselected.gif');
}
af|navigationPane::tabs-inactive
af|navigationPane::tabs-start-join-from-inactive{
background-image:url('images/tab1-start-join-deselected-to-deselected.gif');
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-mid{
background-image:url('images/tab1-mid-deselected.gif');
color:#ffffff;
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-mid a{
color:#ffffff;
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-mid {
background-image:url('images/tab1-bot-deselected.gif');
}
af|navigationPane::tabs-inactive
af|navigationPane::tabs-end-join-to-inactive{
background-image:url('images/tab1-end-join-deselected-to-deselected.gif');
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-end{
background-image:url('images/tab1-end-deselected.gif');
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-end{
background-image:url('images/tab1-bot-deselected.gif');
}
af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-end-join{
background-image:url('images/tab1-bot-deselected.gif');
}
af|navigationPane::tabs-inactive
af|navigationPane::tabs-bottom-end-content{
background-image:none;
}
af|navigationPane::tabs-active af|navigationPane::tabs-start {
background-image:url('images/tab1-start-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-start-join {
background-image:url('images/tab1-start-join-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-start-join {
background-image:url('images/tab1-start-join-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start {
background-image:url('images/tab1-bot-mid-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start-content
{
background-image:url('images/tab1-bot-start-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-mid {
background-image:url('images/tab1-mid-selected.gif');
font-weight:bold;
color:#585955;
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-mid {
background-image:url('images/tab1-bot-mid-selected.gif');
}
af|navigationPane::tabs-active
af|navigationPane::tabs-end-join-to-inactive{
background-image:url('images/tab1-end-join-selected-to-deselected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-end{
background-image:url('images/tab1-end-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end{
background-image:url('images/tab1-bot-mid-selected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end-join{
background-image:url('images/tab1-bot-deselected.gif');
}
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end-content{
background-image:url('images/tab1-bot-end-selected.gif');
}
> -----Original Message-----
> From: Causevic, Dzenan [mailto:[EMAIL PROTECTED]
> Sent: Mittwoch, 11. Oktober 2006 17:14
> To: [email protected]
> Cc: [EMAIL PROTECTED]; [EMAIL PROTECTED];
> [EMAIL PROTECTED]
> Subject: FW: Use of custom style sheets, af|navigationPane::tabs
>
>
> Now, I can get everything to work correctly except for the
> background images used in the tabs.
> Even though I set "background-image: none" the default system
> provided image is still being displayed.
> I cleared cache, I even rebooted machine (getting desperate)
> but I still can't get my custom images to be displayed.
>
> This is how my blueSkin.css looks like:
>
> /* navigationPane */
> /* -------------- */
> af|navigationPane::tabs
> {
> height: 150px;
> overflow: hidden;
> }
>
> af|navigationPane::tabs-active, af|navigationPane::tabs-inactive
> {
> background-color: ghostwhite;
> }
>
> af|navigationPane::tabs-start, af|navigationPane::tabs-mid,
> af|af|navigationPane::tabs-end, af|navigationPane::tabs-start-join,
> af|af|navigationPane::tabs-start-join-from-active,
> af|af|navigationPane::tabs-start-join-from-inactive,
> af|af|navigationPane::tabs-end-join-to-inactive
> {
> height: 70px;
> }
>
> af|navigationPane::tabs-start
> {
> width: 55px;
> /*background-image: url(/images/btnStart.gif);*/
> background-image: none;
> background-repeat: none;
> border: solid 1px orange;
> }
>
> af|navigationPane::tabs-mid
> {
> border: solid 1px darkorchid;
> vertical-align: middle;
> padding-left: 10px;
> padding-right: 10px;
> }
>
> af|navigationPane::tabs-mid a
> {
> color: red;
> font-size: 12pt;
> font-family: serif;
> font-weight: bold;
> text-decoration: none;
> border: solid 1px orange;
> }
>
> af|navigationPane::tabs-end
> {
> width: 13px;
> background-image: url(/images/btnEnd.gif);
> border: solid 1px gold;
> }
>
> af|navigationPane::tabs-start-join,
> af|af|navigationPane::tabs-start-join-from-active,
> af|af|navigationPane::tabs-start-join-from-inactive
> {
> border: solid 1px hotpink;
> }
>
> af|navigationPane::tabs-end-join-to-inactive
> {
> border: solid 1px gold;
> }
>
> af|navigationPane::tabs-bottom-start,
> af|af|navigationPane::tabs-bottom-mid,
> af|af|navigationPane::tabs-bottom-end,
> af|af|navigationPane::tabs-bottom-end-join
> {
> height: 25px;
> background-image: url(/images/btnBottom-bg.gif);
> background-repeat: repeat-x;
> border: solid 1px lime;
> }
>
> af|navigationPane::tabs-bottom-start-content,
> af|af|navigationPane::tabs-bottom-mid-content,
> af|af|navigationPane::tabs-bottom-end-content
> {
> background-image: none;
> background-repeat: no-repeat;
> }
>
> and this is the actuall JSF code for the tabs section (file
> is being included from the header.jsp):
>
> <f:subview id="navTags">
> <tr:navigationPane hint="tabs">
> <tr:commandNavigationItem text="Home" action="guide"/>
> <tr:commandNavigationItem text="Code of Conduct"
> action="guide.page"/>
> <tr:commandNavigationItem text="Personal Info"
> action="guide.breadCrumbs" selected="true" />
> <tr:commandNavigationItem text="More Info"
> action="guide.commandNavigationItem"/>
> <tr:commandNavigationItem text="Confidentia"
> action="guide.panelPage"/>
> </tr:navigationPane>
> </f:subview>
>
>
> -----Original Message-----
> From: Causevic, Dzenan [mailto:[EMAIL PROTECTED]
> Sent: Mon 10/9/2006 4:37 PM
> To: [email protected]
> Subject: FW: Use of custom style sheets, af|navigationPane::tabs
>
> Is there any documentation on how to define af|navigationPane::tabs
> elements as CSS classes? There is a whole family that refers to
> af|navigationPane::tabs however I can not find any
> documentation for it.
> Please help
>
> Dzenan Causevic
> Software Web Developer
> NaviSite, Inc.
> Syracuse, NY
> (315) 453-2912 x5346
>
> -----Original Message-----
> From: Causevic, Dzenan
> Sent: Tuesday, October 03, 2006 10:00 AM
> To: '[email protected]'
> Subject: RE: Use of custom style sheets
>
> I think that's exactly the case. I discovered that all the class
> definitions for my tabs are coming from navigationPane object
> and not by
> the Tab object itself. The reason why I never used navigationPane
> definitions in the first place is because it did not even exist in the
> current documentation which I was following. I started adding
> navigationPane class definitions to my style sheet and I am
> looking into
> it now. I will provide you with a feedback on how it all went in a
> couple of weeks (I have been reassigned on a different project in the
> meantime for some urgent matters so I practically stoped working on
> Trinidad project)
>
> As soon as I resume my work I will provide you with the feedback on
> this. Thanks.
>
> Dzenan Causevic
> Software Web Developer
> NaviSite, Inc.
> Syracuse, NY
> (315) 453-2912 x5346
> -----Original Message-----
> From: Jeanne Waldman [mailto:[EMAIL PROTECTED]
> Sent: Monday, October 02, 2006 7:37 PM
> To: [email protected]
> Subject: Re: Use of custom style sheets
>
> It looks like the skinning css file (
>
> /seekerreg/adf/styles/cache/blue-
> desktop-unknown-version-en-gecko.css)
>
> is getting generated, which is good.
> Maybe you didn't define the styles for the tabs correctly? Or there
> could very well be a bug. I think there have been
> changes in the tabbed renderer, and maybe the tabbed skinning keys
> documentation has not been updated, which is bad.
>
> Can you send some of your tab skinning keys and definitions?
>
> Can you try to skin the inputText component to see if that works?
> Try putting this in your skin file
> af|inputText::content {background-color:purple}
> Then run a demo with inputText in it (and the skin-family set
> to blue,
> of course)
>
> - Jeanne
>
>
> Causevic, Dzenan wrote:
>
> >I did clear the cache also. I know that happens sometimes. I need to
> >read the documentation I guess a little bit deeper. I don't
> know which
> >part I am still missing
> >
> >Dzenan Causevic
> >Software Web Developer
> >NaviSite, Inc.
> >Syracuse, NY
> >(315) 453-2912 x5346
> >
> >-----Original Message-----
> >From: Simon Lessard [mailto:[EMAIL PROTECTED]
> >Sent: Monday, September 25, 2006 4:10 PM
> >To: [email protected]
> >Subject: Re: Use of custom style sheets
> >
> >Then it should be the one used. So, simple question, did you
> clear your
> >cache? You must clear it almost everytime while working on your skin.
> >
> >
> >Regards,
> >
> >~ Simon
> >
> >On 9/25/06, Causevic, Dzenan <[EMAIL PROTECTED]> wrote:
> >
> >
> >>Yes I did. It's there.
> >>
> >>Dzenan Causevic
> >>Software Web Developer
> >>NaviSite, Inc.
> >>Syracuse, NY
> >>(315) 453-2912 x5346
> >>
> >>-----Original Message-----
> >>From: Simon Lessard [mailto:[EMAIL PROTECTED]
> >>Sent: Monday, September 25, 2006 2:54 PM
> >>To: [email protected]
> >>Subject: Re: Use of custom style sheets
> >>
> >>Hello Dzenan,
> >>
> >>No, you should be able to palce the CSS anywhere, /adf/styles/cache
> >>
> >>
> >will
> >
> >
> >>get
> >>generated automatically. Did you try to enter the CSS url in your
> >>browser to
> >>see if the stylesheet can be found?
> >>
> >>
> >>Regards,
> >>
> >>~ Simon
> >>
> >>On 9/25/06, Causevic, Dzenan <[EMAIL PROTECTED]> wrote:
> >>
> >>
> >>>I did make those changes but still no success. I am still getting
> >>>
> >>>
> >>default
> >>
> >>
> >>>look.
> >>>This is the excerpt from the source file:
> >>>
> >>><link rel="stylesheet" charset="UTF-8" type="text/css"
> >>>href="/seekerreg/adf/styles/cache/blue-
> >>>desktop-unknown-version-en-gecko.css"><script>var
> >>>
> >>>
> >>_AdfWindowOpenError='A
> >>
> >>
> >>>popup window blocker has been detected in your browser. Popup
> >>>
> >>>
> >blockers
> >
> >
> >>>interfere with the operation of this application. Please disable
> >>>
> >>>
> >your
> >
> >
> >>popup
> >>
> >>
> >>>blocker or allow popups from this site.';</script><script
> >>>src="/seekerreg/adf/jsLibs/Common11-m7.js
> >>>"></script><script>_defaultTZ()</script>
> >>> <link href="/seekerreg/stylesheet/stylesheet.css"
> >>>rel="stylesheet">
> >>> </head>
> >>>
> >>>Can blueSkin.css be placed in web/stylesheet directory where the
> >>>
> >>>
> >>custom
> >>
> >>
> >>>sheet resides, or does it have to go to some type of
> >>>
> >>>
> >>web/adf/styles/cache
> >>
> >>
> >>>like what we get above?
> >>>
> >>>-----Original Message-----
> >>>From: Simon Lessard [mailto:[EMAIL PROTECTED]
> >>>Sent: Mon 9/25/2006 1:56 PM
> >>>To: [email protected]
> >>>Subject: Re: Use of custom style sheets
> >>>
> >>>Ugh...
> >>>
> >>>I'll have to test that, the first form should work just as well.
> >>>
> >>>On 9/25/06, HulaBula <[EMAIL PROTECTED]> wrote:
> >>>
> >>>
> >>>>Does it work now? I ran into a similar problem and now figured out
> >>>>
> >>>>
> >>that
> >>
> >>
> >>>>the config-parser treats
> >>>><family>
> >>>> blue
> >>>></family>
> >>>>
> >>>>different to
> >>>>
> >>>><family>blue</family> (<-- which will work)
> >>>>
> >>>>You can see that behaviour if you step-debug through
> >>>>CoreRenderingContext.java. (linebreaks are not trimmed)
> >>>>
> >>>>greets!
> >>>>
> >>>>clemens
> >>>>
> >>>>Simon Lessard wrote:
> >>>>
> >>>>
> >>>>>You must specify the skin-family in trinidad.config.xml to
> >>>>>
> >>>>>
> >value:
> >
> >
> >>>blue.
> >>>
> >>>
> >>>>>On 9/25/06, Causevic, Dzenan <[EMAIL PROTECTED]> wrote:
> >>>>>
> >>>>>
> >>>>>>I am a beginner to Trinidad components and I have a simple
> >>>>>>
> >>>>>>
> >>question
> >>
> >>
> >>>>>>regarding the use of style sheets.
> >>>>>>I am getting default look for tab components, however my page
> >>>>>>
> >>>>>>
> >is
> >
> >
> >>>>>>using my
> >>>>>>own style sheet and now I need to get these tabs to use the
> >>>>>>
> >>>>>>
> >same
> >
> >
> >>>>>>colors as
> >>>>>>the rest of the page.
> >>>>>>
> >>>>>>The documenation is not so clear, that's why I am posting here
> >>>>>>
> >>>>>>
> >>for
> >>
> >>
> >>>>help.
> >>>>
> >>>>
> >>>>>>I created WEB-INF/trinidad-config.xml file and added following
> >>>>>>directive:
> >>>>>><skin-family>blueSkin</skin-family>
> >>>>>>Then I created WEB-INF/trinidad-skins.xml like this:
> >>>>>><skins xmlns="http://myfaces.apache.org/trinidad/skin";>
> >>>>>> <skin>
> >>>>>> <id>
> >>>>>> blue.desktop
> >>>>>> </id>
> >>>>>> <family>
> >>>>>> blue
> >>>>>> </family>
> >>>>>> <render-kit-id>
> >>>>>> org.apache.myfaces.trinidad.desktop
> >>>>>> </render-kit-id>
> >>>>>> <style-sheet-name>
> >>>>>> stylesheet/blueSkin.css
> >>>>>> </style-sheet-name>
> >>>>>> </skin>
> >>>>>></skins>
> >>>>>>
> >>>>>>Finally I placed blueSkin.css (the one from the demo page) in
> >>>>>>
> >>>>>>
> >my
> >
> >
> >>>>>>web/stylesheet directory.
> >>>>>>
> >>>>>>However I still get a default look for my tabs. What am I still
> >>>>>>
> >>>>>>
> >>>missing
> >>>
> >>>
> >>>>>>here?
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>
> >>>>
> >>>
> >>>
> >>>
> >
> >
> >
>
>
>
>
>
>
>
>
>
>
>
>
>
