JSF add custom css last

Question

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

<?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) 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) 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) Adding following to the body: result --> resource is imported before all other resources

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

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>

I would say no 2 is correct. Maybe you are the victim of css specificity (read up on that if you don't know), you can test by putting " !important;" after some lines in the css. That or the css file is not in the right place, webapp\resources\css. Also change namespace to xmlns:ui="http://xmlns.jcp.org/jsf/facelets" and xmlns:f="http://xmlns.jcp.org/jsf/core" — Jaqen H'ghar, May 17 '16 at 17:36
Is this helpful? http://stackoverflow.com/q/8367421, specifically PrimeFaces part. — BalusC, May 17 '16 at 20:05
@Jaqen H'ghar: The css is referenced in the rendered HTML, so that's not the issue. Problem ist, that it is imported before all other css files that are provided by the JSF component providers (Primefaces, Bootsfaces). — manban, May 18 '16 at 08:15
@BalusC: Thanks for the link. I already tried the suggestion to activate the JSF Headrenderer like described in order to avoid Primefaces to mess up the order. But I get a java.lang.IllegalStateException for the faces-config which says, that it is "Unable to create a new instance of 'com.sun.faces.renderkit.html_basic.HeadRenderer'. I actually don't know what to do at this point. — manban, May 18 '16 at 08:19
What's the root cause? Are you using Mojarra or MyFaces? Anyway, #2 should really work for you (only when placed in head, not body), assuming "plain" PrimeFaces. Perhaps BootsFaces plays a role in the problem, can't tell from top of head as I don't have hands on experience with it. You'd better try reproducing the problem in a scratchpad project with most minimal configurations of the one and other. — BalusC, May 18 '16 at 08:21
I've stumbled upon the same issue. [This answer](https://stackoverflow.com/a/8774997/5483217) helped me. Especially the first paragraph about putting `h:outputStylesheet` into `h:body` and not into `h:head`. — toKrause, Mar 05 '18 at 09:27

score 1 · Answer 1 · edited Jun 29 '18 at 18:36

1

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>

edited Jun 29 '18 at 18:36

BalusC

1,082,665
372
3,610
3,555

answered Jun 28 '18 at 00:54

Marco

73
8

1

Modesty requires me to add that this feature has been inspired by PrimeFaces. I'm not sure they still support it, but have a look [here](https://www.mkyong.com/jsf2/primefaces/how-to-override-primefaces-css/) to learn how it used to work. – Stephan Rauh Jun 29 '18 at 17:14

JSF add custom css last

1 Answers1

Linked