Stylesheet values not getting applied from xcss

[dilsent]

I am actually trying to create a custom xcss file and apply it within my jsf page .The link http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c=loadStyle

was helpful.But when i tried changing one of the css element (additionalBackgroundColor) value for class rsLabel e.g in my skin properties

<u:selector name=".rsLabel">
<u:style name="color" skin="headerTextColor" />
<u:style name="background-color" skin="additionalBackgroundColor" />
</u:selector>

The change doesn't seem to get applied on my jsf page.


Any help will be highly appreciated.

Thanks in advance

[sergeysmirnov]

I am not quite understand what works and what does not based on your post.

[dilsent]

Thanks for replying.I am actually trying to customize the example indicated in the link you sent me earlier

http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c=loadStyle

I wanted to refer my skin properties file through the xcss file. Though my jsf page is able to refer to this stylesheet,but when I try chnaging any of the attribute values in my skin properties

eg.additionalbackgroundcolor

The xcss is not applying these changes. I have a feeling that the function



<u:selector name=".rsLabel">
<u:style name="color" skin="headerTextColor" />
<u:style name="background-color" skin="additionalBackgroundColor" />
</u:selector>

is not rendering it.Could there be any issue with the namespace reference

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


I am not able to figure this out..Spent three days on this.

Your help will be appreciated.

Thanks

[sergeysmirnov]

You just repeated what you say previously. It is not an info I am waiting from you.
1. How do you refer to xcss file from the page (real code snippet)?
2. What the html (jsf) element you apply rsLabel class to (real code snippet)?
3. does the pure css rules (declared not with selector) works?

[dilsent]

Hi

Sorry about that. Here is the code


The Jsf page

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="stylesheet/main.xcss" />

<h:form>

<rich:panel>



<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="rsButton1" 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>

</rich:panel>
</h:form>

</ui:composition>



The main.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:solid;

}

.rsLabel {

font-size: 12px;

}



]]></f:verbatim>


<u:selector name=".rsLabel">
<u:style name="color" skin="headerTextColor" />
<u:style name="background-color" skin="additionalBackgroundColor" />


</u:selector>

</f:template>


The Skin file


#Colors

additionalBackgroundColor=#ECF4FE

shadowBackgroundColor=#000000
shadowOpacity=1

panelBorderColor=\#FFFFFF

generalBackgroundColor=\#FFFFFF
subBorderColor=#ffffff

tabBackgroundColor=#C6DEFF
tabDisabledTextColor=#8DB7F3

trimColor=#D6E6FB

tipBackgroundColor=\#FAE6B0
tipBorderColor=\#E5973E

selectControlColor=#E79A00


I am trying to apply a background color for the 'Name' and 'Job' labels. When i apply it using the selector as above the color doesn't apply.But if i
hard code the value in the rsLabel class within the verbatim,it applys the color.

Thanks

[ronanker]

the issue is : <a4j:loadStyle src="stylesheet/main.xcss" />

should be :
<a4j:loadStyle src="resource:///org/mycompany/stylesheet/main.xcss" />
or :
<a4j:loadStyle src="resource:///main.xcss" />

and when deploying you can place the file "main.xcss" at the root of classpath... for exemple : WEB-INF/classes/main.xcss