This content has been marked as final.
Show 2 replies
-
1. Re: Selected skin and it's CSS
monkeyden Apr 12, 2009 8:53 PM (in response to 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.
-
2. Re: Selected skin and it's CSS
monkeyden Apr 13, 2009 2:32 AM (in response to 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.