Selected skin and it's CSS

[monkeyden]

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

[monkeyden]

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.

[monkeyden]

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.