JSF最后添加自定义css_Css_Templates_Jsf_Primefaces

JSF最后添加自定义css

css templates jsf primefaces

JSF最后添加自定义css,css,templates,jsf,primefaces,Css,Templates,Jsf,Primefaces,我试图覆盖一些组件库的css（PrimeFaces、BootsFaces），但最后无法导入自定义css。到目前为止，我已经尝试了各种各样的方法，但都没有效果。下面是主模板，我在其中导入css。就像这样，它是导入的，但在所有其他资源之前。之后，我列出了我的其他尝试。我可以想象，问题是，我使用模板 master.xhtml <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

我试图覆盖一些组件库的css（PrimeFaces、BootsFaces），但最后无法导入自定义css。到目前为止，我已经尝试了各种各样的方法，但都没有效果。下面是主模板，我在其中导入css。就像这样，它是导入的，但在所有其他资源之前。之后，我列出了我的其他尝试。我可以想象，问题是，我使用模板

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>


项目文档教程
标准含量
标准底

我还尝试了以下方法

1）在头/体-->结果中添加以下内容：完全不导入

<f:facet name="last">
    <h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>

2）在头/体中添加以下内容：结果-->资源在导入所有其他资源之前导入

<f:facet name="last">
        <h:outputStylesheet name="css/projdocstut.css" />
    </f:facet>

<h:outputStylesheet name="css/projdocstut.css" />

3）将以下内容添加到正文中：结果-->资源先于所有其他资源导入

<f:facet name="last">
        <h:outputStylesheet name="css/projdocstut.css" />
    </f:facet>

<h:outputStylesheet name="css/projdocstut.css" />

使用模板的index.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">

    <ui:composition template="WEB-INF/templates/master.xhtml">    
            <ui:define name="content">
              Custom Content
            </ui:define>
    </ui:composition>

</html>


自定义内容

Bootsfaces通过允许您在

标记中定义“位置”属性来处理此问题

<h:head>
  ...
  <h:outputStylesheet name="css/style.css" position="last"/>
</h:head>

...

我认为2号是正确的。也许你是css特殊性的受害者（如果你不知道，请仔细阅读），你可以在css中的一些行后面加上“！important；”来测试。该文件或css文件不在正确的位置webapp\resources\css。同时将名称空间更改为xmlns:ui=“”和xmlns:f=“”对不起，我不知道这些“；”是从哪里来的这有帮助吗，特别是PrimeFaces部分。@Jaqen H'ghar:css在呈现的HTML中被引用，所以这不是问题所在。问题是，它是在JSF组件提供程序（Primefaces、Bootsfaces）提供的所有其他css文件之前导入的。根本原因是什么？你用的是Mojarra还是MyFaces？不管怎样，“2”应该真的适合你（只有放在头上，而不是身体上），假设你的脸是“普通”的。也许BootsFaces在这个问题中起了作用，但我无法从头顶上判断，因为我没有实际操作经验。您最好尝试在scratchpad项目中用一个和另一个的最小配置重现这个问题。谦虚要求我补充一点，此功能的灵感来自PrimeFaces。我不确定他们是否仍然支持它，但看看它过去是如何工作的。