我的网络应用为(e)css文件正常工作。
我有2张皮肤:
plainTxt=#006 plainBg=#FFF readonlyTxt=#003082 menuTxt=#0000A0
plainTxt=#FFF plainBg=#000 readonlyTxt=#D0D0D0 menuTxt=#000
颜色有效。
但现在我有以下问题:图片 对于每个皮肤我想要不同的图像。 我怎么做到的?我在任何ecss / skinning教程中都找不到。这不可能吗?
示例css:
#header h1 {
background-position:0 6px;
background-image: url("#{resource['image/header_1.png']}");
}
问题:对于普通皮肤,我想获取图片:'image / header_1.png' 对于我想要的黑白皮肤:'image / header_2.png' 我该怎么做呢。任何指针都很棒
我应该在资源servlet(或其他东西)中解决它吗? 或者我可能需要在maven插件中修复它?在那部分我更了解; - )
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>
答案 0 :(得分:0)
解决方案并不复杂,但并不令人满意。
我将资源文件的引用移动到了外观属性文件:
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;
...