I’m toying with creating a custom RichFaces page theme per the instructions here. I’ve run the Maven commands and it creates my initial page template, along with a .xcss file where I’m supposed to place my stylesheet properties. I would like, however, to include several different CSS files in my page theme, rather than define them in one huge file. It would make it much easier if I could include, for example, the 960.css file in its own file so that the CSS code is easier to read and edit.
I notice that the instructions talk about how to reference an image file in the XCSS file by using this tag:
<f:resource f:key="/org/richfaces/docs/renderkit/html/images/img01.gif" />
Is there a similar mechanism for including more than one .xcss file in my page theme? I tried simply using:
<f:resource f:key="/org/richfaces/docs/renderkit/html/css/960.css" />
However, I get an XML parsing error, so I’m clearly doing something wrong. Is there a better way to include multiple CSS files in my page theme project and then reference them in the page theme itself?
For anyone else who is struggling with this problem, it appears as though the
<h:styles />tag (xmlns:h=”http://jsf.exadel.com/header”) is designed to solve this very problem. Place your .xcss files under your renderkit/html directory in your theme, and then reference them using relative paths. i.e.<h:styles>css/myothercss.xcss</h:styles>