Richfaces custom skinning images

Question

My web app got normal skinng working for (e)css files.

I got 2 skins:

• Normal

plainTxt=#006
plainBg=#FFF
readonlyTxt=#003082
menuTxt=#0000A0

• blackwhite

plainTxt=#FFF
plainBg=#000
readonlyTxt=#D0D0D0
menuTxt=#000

The colors work.

But now i have the following issue: images For each skin i want different images. How do i get that? That i can't find in any ecss/skinning tutorial. Is it not possible?

Example css:

#header h1 {
    background-position:0 6px;
    background-image: url("#{resource['image/header_1.png']}");
}

Question: For the normal skin i would like to get the image: 'image/header_1.png' For the blackwhite skin i would like: 'image/header_2.png' How do i do this. Any pointers at all would be great

Should i solve it in the resource servlet (or something)? or do i maybe need to fix it in the maven plugin? Of that part i understand even less ;-)

Part of the pom.xml

<plugin>
        <groupId>org.richfaces.cdk</groupId>
        <artifactId>maven-richfaces-resources-plugin</artifactId>
        <version>4.3.7.Final</version>
        <executions>
          <execution>
            <id>process-resources</id>
            <goals>
              <goal>process</goal>
            </goals>
            <configuration>
              <staticResourceMappingFile>D:\workspace\MyProject\target\classes/META-INF/richfaces/custom-packedcompressed-resource-mappings.properties</staticResourceMappingFile>
              <resourcesOutputDir>D:\workspace\MyProject\target\classes/META-INF/resources/org.richfaces.staticResource/4.3.7.Final/PackedCompressed/</resourcesOutputDir>
              <staticResourcePrefix>org.richfaces.staticResource/4.3.7.Final/PackedCompressed/</staticResourcePrefix>
              <pack>true</pack>
              <compress>true</compress>
              <excludedFiles>
                <exclude>^javax.faces</exclude>
                <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
                <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
                <exclude>^jquery\.js$</exclude>
              </excludedFiles>
              <webRoot>D:\workspace\MyProject/src/main/webapp</webRoot>
            </configuration>
          </execution>
        </executions>
        <dependencies>
          <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.5</version>
            <scope>compile</scope>
          </dependency>
        </dependencies>
        <configuration>
          <skins>
            <skin>normal</skin>
            <skin>blackwhite</skin>
          </skins>
          <excludedFiles>
            <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
            <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
            <exclude>^jquery.js$</exclude>
          </excludedFiles>
          <includedContentTypes>
            <include>application/javascript</include>
            <include>text/css</include>
            <include>image/.+</include>
          </includedContentTypes>
          <fileNameMappings>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.(png|gif|jpg))$</name>
              <value>org.richfaces.ckeditor.images/$1</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.css)$</name>
              <value>org.richfaces.ckeditor.css/$1</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.(js))$</name>
              <value>org.richfaces.ckeditor.js/$1</value>
            </property>
            <property>
              <name>^.+/([^/]+\.(png|gif|jpg))$</name>
              <value>org.richfaces.images/$1</value>
            </property>
            <property>
              <name>^.+/([^/]+\.css)$</name>
              <value>org.richfaces.css/$1</value>
            </property>
          </fileNameMappings>
        </configuration>
      </plugin>

Answer 1

The solution was not complicated but not satisfying.

I moved the reference of the resource file to the skin property file:

custom.ecss :

...
.btn-accept{
    height:22px;
    width:47px;
    background: '#{richSkin.okBtnImg}';
}
...

default.skin.properties :

....
okBtnImg=url("#{resource['image/button/okBtnImg.png']}") no-repeat 0 0 !important;
...

custom.skin.properties :

....
okBtnImg=url("#{resource['image/customSkin/button/okBtnImg.png']}") no-repeat 0 0 !important;
...