a4j:loadStyle is similar to the standard style tag with src attribute, but it allows to load a style sheet file from alternative sources like a jar file.

src attribute defines the context relative path to the style sheet file. Instead of html style tag it's not required to have a prefix in your application. The leading slash in the path means the root of the web context.

You can use "resource://" prefix to access the file using RichFaces resource framework. For example, if your css file is located inside the jar file and has a full path there: /org/mycompany/assets/css/common.css, you can point to it with:

Richfaces allows to have a dynamically generated css file based on RichFaces skinnability feature. xcss is an XML formated css with some additional extensions. The following example shows how the look-n-feel of non-RichFaces components might be changed based on the selected skin. The panel with the form elements consists only of non-Richfaces component, but it is sensitive to the current skin.

Style demo

Applying Skin on non-RichFaces Components

DeepMarineBlueSkyJapanCherry

Name:
Job:

You have just entered:

Name:

Job:

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <a4j:loadStyle src="resource:///org/richfaces/demo/ajaxSamples/rspanel.xcss" />
    <h:form>
    
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Applying Skin on non-RichFaces Components"/>
            </f:facet>

            <div id="padding" style="padding: 20px">
            <h:commandLink value="DeepMarine">
                <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
            </h:commandLink>
            <rich:spacer width="20" />
            <h:commandLink value="BlueSky" >
                <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
            </h:commandLink>
            <rich:spacer width="20" />
            <h:commandLink value="JapanCherry" >
                <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
            </h:commandLink>

            <rich:separator height="1"  style="padding:10px 0" />

            <h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250" columns="2">
                <h:outputText styleClass="rsLabel" value="Name:" />
                <h:inputText  styleClass="rsInput"  value="#{userBean.name}" />
                
                <h:outputText styleClass="rsLabel" value="Job:" />
                <h:inputText  styleClass="rsInput"  value="#{userBean.job}" />
                
                <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>
            <h:panelGrid id="out" columns="1">

            <rich:spacer height="10"/>
            <h:outputText value="You have just entered:"/>
            <h:outputText value=""/>
            <h:outputText value="Name: #{userBean.name}" />
            <h:outputText value="Job: #{userBean.job}" />
            </h:panelGrid>
            </div>
        </rich:panel>
    </h:form>

</ui:composition>

<<Hide Source

HideView rspanel.xcss file

<?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>

<<Hide Source