richfaces style to non richfaces components
ajanz May 28, 2008 8:32 AMhi,
i want to add richfaces style to non richfaces components, like shown on
http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf
but i can't get it work.
my page is
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <a4j:loadStyle src="rspanel.css" /> <html> <head> <title>Styletest</title> <a4j:loadStyle src="rspanel.css" /> </head> <body> <h:form> <rich:panel > <h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250" columns="2"> <h:outputText styleClass="rsLabel" value="Name:" /> <h:inputText styleClass="rsInput" value="" /> <h:outputText styleClass="rsLabel" value="Job:" /> <h:inputText styleClass="rsInput" value="" /> <h:panelGroup/> <h:commandButton styleClass="rsButton" value="Submit"> <a4j:support disableDefault="true" event="onclick" reRender="out" /> </h:commandButton> <f:facet name="footer"> </f:facet> </h:panelGrid> </rich:panel> </h:form> </body> </html>
the css file is located in the same directory as the jsp.
its contents is
<?xml version="1.0" encoding="UTF-8"?> <f:template xmlns:f="http:/jsf.exadel.com/template" xmlns:u="http:/jsf.exadel.com/template/util" xmlns="http://www.w3.org/1999/xhtml" > <f:verbatim><![CDATA[ .rsPanel { border-width:1px; border-style:solid; padding:10px; background-position : top left; background-repeat : repeat-x; } .rsInput { border-style:solid; border-width:1px; } .rsButton { border-width:2px; border-style:outset; } .rsLabel { font-size: 12px; } ]]></f:verbatim> <u:selector name=".rsPanel"> <u:style name="border-color" skin="panelBorderColor" /> <u:style name="background-color" skin="headerBackgroundColor" /> <u:style name="background-image" > <f:resource f:key="org.richfaces.renderkit.html.GradientA"/> </u:style> </u:selector> <u:selector name=".rsInput"> <u:style name="background-color" skin="additionalBackgroundColor" /> </u:selector> <u:selector name=".rsButton"> <u:style name="background-image" value="none" /> <u:style name="background-color" skin="additionalBackgroundColor" /> <u:style name="border-color" skin="panelBorderColor" /> </u:selector> <u:selector name=".rsLabel"> <u:style name="color" skin="headerTextColor" /> </u:selector> <u:style name="color" skin="headerTextColor" /> </f:template>
what am i doing wrong?