9 Replies Latest reply on May 29, 2008 11:52 AM by Sascha Janz

    richfaces style to non richfaces components

    Sascha Janz Master

      hi,

      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?