JSF最后添加自定义CSS [英] JSF add custom css last
问题描述
我试图覆盖某些组件库的css(PrimeFaces，BootsFaces)，但是无法最后导入我的自定义css.到目前为止，我已经尝试了各种方法，但是没有任何效果. 下面是主模板，我在其中导入了CSS.像这样导入，但是先于所有其他资源.之后，我列出了我进行过的其他尝试. 我可以想象，问题是我使用模板.
I'm trying to override some components libraries' css (PrimeFaces, BootsFaces), but can't manage to import my custom css last. I've tried various things that I found so far, but nothing worked. Below is the master template, where I import the css. Like that it is imported, but before all other resources. After that I list the other tries that I had. I can imagine, that that the problem is, that I use templates.
master.xhtml
master.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">Project Documents Tutorial</ui:insert></title>
<h:outputStylesheet name="css/projdocstut.css" />
</h:head>
<h:body>
<b:container>
<div id="header" class="header">
<b:row>
<b:column span="12">
<ui:insert name="header">
<ui:include src="top-menu.xhtml" />
<ui:include src="main-menu.xhtml" />
</ui:insert>
</b:column>
</b:row>
</div>
<div id="content" class="content">
<b:row>
<b:column span="12">
<ui:insert name="content">Standard Content</ui:insert>
</b:column>
</b:row>
</div>
<div id="footer" class="footer">
<b:row>
<b:column span="12">
<ui:insert name="footer">Standard Bottom</ui:insert>
</b:column>
</b:row>
</div>
</b:container>
</h:body>
</html>
我也尝试了以下方法.
I also tried the following.
1)在头部/正文中添加以下内容->结果:完全不导入
1) Adding the following in the head / body --> result: no import at all
<f:facet name="last">
<h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>
2)在head/body中添加以下内容:result->资源首先导入所有其他资源
2) Adding the following in the head / body: result--> resource is imported before all other resources
<f:facet name="last">
<h:outputStylesheet name="css/projdocstut.css" />
</f:facet>
3)在正文中添加以下内容:result->资源先于所有其他资源导入
3) Adding following to the body: result --> resource is imported before all other resources
<h:outputStylesheet name="css/projdocstut.css" />
使用模板的index.xhtml:
The index.xhtml which uses the template:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="WEB-INF/templates/master.xhtml">
<ui:define name="content">
Custom Content
</ui:define>
</ui:composition>
</html>
推荐答案
Bootsfaces处理此 ，方法是允许您在<h:outputStylesheet>标记中定义位置"属性.
Bootsfaces handles this issue by allowing you to define a "position" attribute in the <h:outputStylesheet> tag.
<h:head>
...
<h:outputStylesheet name="css/style.css" position="last"/>
</h:head>
这篇关于JSF最后添加自定义CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
