4 Replies Latest reply on Oct 19, 2009 8:41 AM by Ilya Shaikovsky

    Is it possible to write and use a custom .xcss file for skin

    Asfak Mahamud Newbie


      Hi

      I've created my own (...).skin.properties file and added it to the WEB-INF/lib and got changes in the skin. But I found this has very limited (may be I am wrong) properties that do not cover all my requirements.

      I've also tried plug-n-skin feature and also got changes in the skin. But this feature needs a long task to like building template, adding files, building jar and so on.

      So

      Question 1: Is there any feature so that I can write a single .xcss file and use it? I do not want to use plug-n-skin feature. If it is possible then where will I keep my file?

      Question 2: Is there any feature so that I can override any existing .xcss file (say extend.xcss) and will keep in the build path? My program will read my file before reading from the jar. If it is possible then where will I keep my file?

      Please let me know soon.

        • 1. Re: Is it possible to write and use a custom .xcss file for
          Nick Belaevski Master

          Hello,

          I've created my own (...).skin.properties file and added it to the WEB-INF/lib and got changes in the skin. But I found this has very limited (may be I am wrong) properties that do not cover all my requirements.

          If you add more information on the requirements, then this can be clarified.

          Question 1: Is there any feature so that I can write a single .xcss file and use it? I do not want to use plug-n-skin feature. If it is possible then where will I keep my file?

          Yes, that's what P'n'S is based on, special "generalStylesheet" skin parameter - http://anonsvn.jboss.org/repos/richfaces/branches/community/3.3.X/samples/laguna/src/main/resources/META-INF/skins/laguna.skin.properties. Note that you'll have to register *.xcss in resources-config.xml file.

          Question 2: Is there any feature so that I can override any existing .xcss file (say extend.xcss) and will keep in the build path? My program will read my file before reading from the jar. If it is possible then where will I keep my file?

          You can create your own version of ResourceBuilder: that will search resources in custom locations or as a very simple just put them in classpath before the main RF resources under the same names.

          • 2. Re: Is it possible to write and use a custom .xcss file for
            Asfak Mahamud Newbie

            I followed the first suggestion I have kept myDefinedSkin.skin.properties file in src folder. The content of the myDefinedSkin.skin.properties is

            baseSkin=NULL
            gradientType=plain
            generalStyleSheet=resource:///META-INF/skins/styles.xcss
            


            And I kept the styles.xcss file in WebContent/META-INF/skins

            The content is

            <?xml version="1.0" encoding="UTF-8"?>
            <f:template xmlns="http://www.w3.org/1999/xhtml"
             xmlns:f="http:/jsf.exadel.com/template"
             xmlns:u="http:/jsf.exadel.com/template/util">
            
             ------- --------------- ---------
             ------------- ---------------- ---------------
            
             <u:selector name="input[type='submit'], input[type='button']">
             <u:style name="padding" value="1px 4px"/>
             <u:style name="background-image">
             <f:resource f:key="org.richfaces.renderkit.images.TabGradientB"/>
             </u:style>
             <u:style name="border" value="1px solid #FEFEFE"/>
             <u:style name="outline" value="1px solid"/>
             <u:style name="outline-color" skin="panelBorderColor"/>
             <u:style name="color" skin="controlTextColor"/>
             </u:selector>
            
             ------------ ------------ ----------------
             --------------- -------------- ----------------
            
            </f:template>
            
            
            



            when my program is run I get css for

            <h:commandButton like the following


            
            //This is from unknown place
            input[type="submit"], input[type="button"] {
            background-image:url(/yourview/a4j/g/3_2_2.SR1org.richfaces.renderkit.html.GradientA/DATB/eAF79urt8fNXmAAXoQUq);
            border:1px solid #D4CFC7;
            color:#000000;
            font-weight:bold;
            padding:1px 4px;
            }
            
            
            
            //This is from styles.xcss
            input[type="submit"], input[type="button"] {
            
            //Unknown css overrides these background-image, border, color, padding
            
            background-image:url(/yourview/a4j/g/3_2_2.SR1org.richfaces.renderkit.images.TabGradientB/DATB/eAH7!!!!1XuPmQAZqwWW);
            
            border:1px solid #FEFEFE;
            color:#000000;
            outline-color:#C4C0B9;
            outline-style:solid;
            outline-width:1px;
            padding:1px 4px;
            }
            



            When my program is run I see that
            org.richfaces.renderkit.images.TabGradientB


            is overriden by

            background-image:url(/yourview/a4j/g/3_2_2.SR1org.richfaces.renderkit.html.GradientA/DATB/eAF79urt8fNXmAAXoQUq);
            


            along with many other attributes overriden also.


            Question 1: Where will I change so that my css will not be overriden by anything else?



            • 3. Re: Is it possible to write and use a custom .xcss file for
              Asfak Mahamud Newbie

              Fragment of my web.xml related to Skinning is given below

              
               <context-param>
               <param-name>org.richfaces.SKIN</param-name>
               <param-value>myDefinedSkin</param-value>
               </context-param>
              
               <context-param>
               <param-name>org.richfaces.CONTROL_SKINNING</param-name>
               <param-value>enable</param-value>
              </context-param>
              
               <context-param>
               <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
               <param-value>enable</param-value>
              </context-param>
              
              


              • 4. Re: Is it possible to write and use a custom .xcss file for
                Ilya Shaikovsky Master

                turn standard components skinning of by using:

                 <context-param>
                 <param-name>org.richfaces.CONTROL_SKINNING</param-name>
                 <param-value>disable</param-value>
                 </context-param>