5 Replies Latest reply on Apr 17, 2008 5:59 AM by Kerdudou Ronan

    Stylesheet values not getting applied from xcss

    senthil sathya Newbie

      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


        • 1. Re: Stylesheet values not getting applied from xcss
          Sergey Smirnov Master

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

          • 2. Re: Stylesheet values not getting applied from xcss
            senthil sathya Newbie

            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

            • 3. Re: Stylesheet values not getting applied from xcss
              Sergey Smirnov Master

              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?

              • 4. Re: Stylesheet values not getting applied from xcss
                senthil sathya Newbie

                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


                • 5. Re: Stylesheet values not getting applied from xcss
                  Kerdudou Ronan Apprentice

                  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