2 Replies Latest reply on Apr 13, 2009 2:32 AM by Monkey Den

    Selected skin and it's CSS

    Monkey Den Master

      Using 3.0.3GA and Seam 2.1.1.

      I have an app which has a skin selector dropdown. I'd like to use the selected skins stylesheet to style some other stuff.

      For example, I'd like to implement alternating row colors using the color pallet of the selected skin using the style classes generalBackgroundColor and additionalBackgroundColor. Is there anyway to do this?

      I have this:

      <rich:dataTable value="#{myLeaguesAction.leagues}" var="league" rowClasses="generalBackgroundColor, additionalBackgroundColor">
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Name" />
       </f:facet>
       <h:outputText value="#{league.name}" />
       </rich:column>
       </rich:dataTable>


      But the rows are not styled.

      Thanks

        • 1. Re: Selected skin and it's CSS
          Monkey Den Master

          Incidentally, I'd also like to get access to the background images you use for the dataTable, togglePanel. etc. headers. I have some interactive interface components which don't need to be in JSF, so I'm using pure jQuery for them. I'd like to dynamically specify styles for those components as well.

          • 2. Re: Selected skin and it's CSS
            Monkey Den Master

            As it turns out, this is much easier when you read all the documentation. :)

            I was easily able to reuse the RF styles with my non-JSF jQuery accordion menu by referencing them in my xcss file. Here is the jQuery control I used:

            http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

            I had to assign two different style classes (header, item) to the top and second level links, to differentiate them.

            <u:selector name="#mainMenu li a.header:link, #mainMenu li a.header:visited, #mainMenu li a.header:active">
             <u:style name="background-image">
             <f:resource f:key="org.richfaces.renderkit.html.gradientimages.HeaderGradientImage"/>
             </u:style>
             <u:style name="background-repeat" value="repeat-x" />
             <u:style name="border-color" skin="headerBackgroundColor"/>
             <u:style name="color" skin="headerTextColor"/>
             <u:style name="font-weight" value="bold"/>
             <u:style name="background-color" skin="headerBackgroundColor"/>
             </u:selector>
            
             <u:selector name="#mainMenu li a.item:link, #mainMenu li a.item:visited, #mainMenu li a.item:active">
             <u:style name="font-size" skin="generalSizeFont"/>
             <u:style name="color" skin="controlTextColor"/>
             <u:style name="background-color" skin="additionalBackgroundColor"/>
             </u:selector>


            Using this method, the accordion control is skinned (and updated) according to the skin the user selected from the dropdown.