Yes, yes... I got it finally, thanx a lot! What I was missing is exactly this portion of class definitions that you included below. I forgot every element can both be active and inactive. Thank you Sonja, it was a great help
Dzenan Causevic Software Web Developer NaviSite, Inc. Syracuse, NY (315) 453-2912 x5346 -----Original Message----- From: Sonja Löhr [mailto:[EMAIL PROTECTED] Sent: Thursday, October 12, 2006 2:23 AM To: [email protected] Subject: RE: Use of custom style sheets, af|navigationPane::tabs 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? > >>>>>> > >>>>>> > >>>>>> > >>>>>> > >>>> > >>>> > >>> > >>> > >>> > > > > > > > > > > > > > > > > > > >
