Menu
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>
423
asked Jan 28 '26 22:01
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With