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

[asfak.mahamud]

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.

[nbelaevski]

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.

[asfak.mahamud]

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?

[asfak.mahamud]

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>

[ilya_shaikovsky]

turn standard components skinning of by using:

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