incubator-adffaces-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Sonja Löhr <sonjalo...@arcor.de>
Subject RE: Use of custom style sheets, af|navigationPane::tabs
Date Thu, 12 Oct 2006 06:23:19 GMT
 
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:dcausevic@navisite.com] 
> Sent: Mittwoch, 11. Oktober 2006 17:14
> To: adffaces-user@incubator.apache.org
> Cc: jeanne.waldman@oracle.com; simon.lessard.3@gmail.com; 
> Hulabula@gmx.de
> 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:dcausevic@navisite.com]
> Sent: Mon 10/9/2006 4:37 PM
> To: adffaces-user@incubator.apache.org
> 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: 'adffaces-user@incubator.apache.org'
> 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:jeanne.waldman@oracle.com] 
> Sent: Monday, October 02, 2006 7:37 PM
> To: adffaces-user@incubator.apache.org
> 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:simon.lessard.3@gmail.com] 
> >Sent: Monday, September 25, 2006 4:10 PM
> >To: adffaces-user@incubator.apache.org
> >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 <dcausevic@navisite.com> 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:simon.lessard.3@gmail.com]
> >>Sent: Monday, September 25, 2006 2:54 PM
> >>To: adffaces-user@incubator.apache.org
> >>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 <dcausevic@navisite.com> 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:simon.lessard.3@gmail.com]
> >>>Sent: Mon 9/25/2006 1:56 PM
> >>>To: adffaces-user@incubator.apache.org
> >>>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 <Hulabula@gmx.de> 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 <dcausevic@navisite.com> 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?
> >>>>>>
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>        
> >>>>
> >>>
> >>>      
> >>>
> >
> >  
> >
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 



Mime
View raw message