So, I've been looking for solutions to this for over an hour. I've checked path issues. I've checked syntax. I can't find any inherent issues. I'm sure it's an issue with the "link" tag since an internal stylesheet works just peachy. I am using a dynamic web project with Eclipse if that helps.
Here is the stylesheet (master.css):
#CHARSET "ISO-8859-1";
body{
background-color: #000000;
color: green;
}
And here is the the .xhtml file (main.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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<link type="text/css" rel="stylesheet" href="master.css"/>
</h:head>
<h:body>
<div style="border-width: 2px;
border-color: blue; border-style: solid;">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width: 2px;
border-color: green; border-style: solid;">
<ui:insert name="content">
<ui:include src="body.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width: 2px;
border-color: red; border-style: solid;">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Here is the Hierarchy
I've also confirmed via the Windows File System that they are in the same directory.
Thank you for all of your help!
Since your CSS under the same parent as your main.xhtml file, try placing a forward-slash in your href attribute in your <link> tag. So:
<link type="text/css" rel="stylesheet" href="/master.css" />
Related
I am trying to build a template with common header/footer.
for some reason,my other pages are not showing the template
My pages:
layout/layout.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta charset="ISO-8859-1"/>
<title>Test</title>
<link href="../stylesheet/template.css" rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<div id="templateHearderDiv" class="templateHearder">
<h1> Test logo</h1>
</div>
<div id="content" class="contentBody">
<ui:insert name="content">
default content
</ui:insert>
</div>
<div id="templateFooterDiv" class="templateFooter">
<p> 2016-2017. All Rights Reserved</p>
</div>
</h:body>
</h:html>
CSS, stylesheet/template.css
#CHARSET "ISO-8859-1";
* { margin:0; padding:0; }
.templateHearder{
background: #FFCF75;
height: 10%;
}
.contentBody{
}
.templateFooter{
height: 10%;
background: #FFCF75;
}
.contentBody{
margin-left: 20%;
margin-right: 20%;
}
.logoFont{
font-family: "Impact";
padding-top: 10px;
}
home.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout/layout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
</ui:composition>
home.xhtml is my welcome page, when i see that page the template is not shown.
Any clue?
The problem was servlet mappings in web.xml.
Understanding their significance.
We need default servlet handler(depends on the server).
The default servlet helps listing out directories,static resources etc.
I missed default servlet mappings and for that reason the template was not loaded.
Basically, I have a set of prime faces commandButtons in a primeFaces toolBar, and I am trying to set the background color of the buttons using an external style sheet to no avail. it does work to add in-line styling saying 'style="background-color:blue;"'. Any help is appreciated thank you.
html Code:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link type="text/css" rel="stylesheet"
href="../resources/css/homePage.css" />
</h:head>
<h:body>
<div class="headline">
<h1 align="center">Web Project Example</h1>
</div>
<h:form enctype="multipart/form-data">
<p:toolbar>
<f:facet name="left">
<p:commandButton value="About Me" />
<p:commandButton value="Current Projects" />
</f:facet>
<f:facet name="right">
<p:commandButton value="Example 3" />
<p:commandButton value="Example 4" />
</f:facet>
</p:toolbar>
</h:form>
<p>Example text</p>
</h:body>
</html>
Style sheet:
body {
margin:0px;
}
.headline {
float:left;
width:100%;
background-color:black;
color:white;
}
.ui-toolbar {
background-color:black;
border:none;
color:white;
}
.ui-button {
background-color:blue;
}
Your own stylesheet has to be included last (after Primefaces includes its own styles dynamically) in order to override the standards, so try
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../resources/css/homePage.css" />
</f:facet>
</h:head>
If it does'ent work try putting it inside <body> instead.
I use primefaces for create submenu, but popup panels of submenu is out of corner od browser (not same x/left position).
my out put:
and firebug console is this, if change two tag solve my problem.
my code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>IGNORED</title>
</head>
<body>
<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>
<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>
</html>
I try change style in page by tag
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>IGNORED</title>
<style type="text/css">
submenu .ui-menu-child{
left: -60px !important;
width: 8.5em !important;
}
.submenu > ul{
left: -60px !important;
width: 8.5em !important;
}
.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
left: -60px !important;
width: 8.5em !important;
}
.submenu .ui-menu-child{background: blue !important; }
</style>
</head>
<body>
<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>
<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>
</html>
but not work . and show allways mistake in show popup menu panels.
my answer how can change this position in panel by change style from page or load css in xhtml page.
only style have to write in tag in . after change code to that is work good .
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>IGNORED</title>
<f:facet name="">
<style type="text/css">
submenu .ui-menu-child{
left: -60px !important;
width: 8.5em !important;
}
.submenu > ul{
left: -60px !important;
width: 8.5em !important;
}
.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
left: -60px !important;
width: 8.5em !important;
}
.submenu .ui-menu-child{background: blue !important; }
</style>
</f:facet>
</h:head>
<h:body>
<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>
<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
Try changing value of width with 'inherit'..Maybe it will work.
Also can you paste your code on jsfiddle. So it will be easy to edit and debug.
I'm working on a project using JSF/Facelets and a Style Sheet in order to decorate my view JSF. I want to put some graphical components (e.g : "h:inputText" and "h:commandButton" tags) in the content of my view XHTML, but this couldn't be achieved and i don't know why ! The only parts that appear are the header and the footer of my template "Template.html".
Anyway, here's my "styles.css" :
body { width: 750px; }
#header
{
width: 100%;
font-size: 36px;
font-weight: bold;
line-height: 48px;
background-color: navy;
color: white;
}
#footer
{
width: 100%;
font-weight: bold;
background-color: navy;
color: white;
}
And this is the main template "Template.html" including "Header.html" and "Footer.html", where i put my "styles.css" using the tag :
<!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputStylesheet name="css/styles.css" />
</h:head>
<h:body>
<h:panelGroup id="page" layout="block">
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="Header.html" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="container" layout="block">
<h:panelGroup id="content" layout="block">
<ui:insert name="content"></ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="Footer.html" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
Anf finally here's my "Main.xhtml" which include the template "Template.html" :
<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
<ui:define name="content">
<h:form>
<h:inputText title="inputText"></h:inputText>
<h:commandButton value="OK"></h:commandButton>
</h:form>
</ui:define>
</h:body>
</ui:composition>
Thanks in advance :)
you've defined a h:body inside your composition which looks off.
Here is a link to a similar question.
how-to-include-another-xhtml-in-xhtml-using-jsf-2-0-facelets
I'm working on a project using JSF/Facelets. I want to do some CSS changes on my View XHTML, but nothing happen when i deploy my web application in my Tomcat Server. I've tried many tricks but i've got the same result.
Anyway, here's my "styles.css" :
body { width: 750px; }
#header
{
width: 100%;
font-size: 36px;
font-weight: bold;
line-height: 48px;
background-color: navy;
color: white;
}
#footer
{
width: 100%;
font-weight: bold;
background-color: navy;
color: white;
}
And this is the main template "Template.html" including "Header.html" and "Footer.html", where i put my "styles.css" using the tag :
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<h:outputStylesheet name="css/styles.css" />
<!-- i've also tried this one, using the "library" attribute -->
<!--
<h:outputStylesheet library="css" name="styles.css" />
-->
</head>
<h:body>
<h:panelGroup id="page" layout="block">
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="Header.html" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="container" layout="block">
<h:panelGroup id="content" layout="block">
<ui:insert name="content">CONTENT</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="Footer.html" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
Anf finally here's my "Main.xhtml" which include the template "Template.html" :
<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
<ui:define name="content">
<h:form>
<h:inputText title="inputText"></h:inputText>
<h:commandButton value="OK"></h:commandButton>
</h:form>
</ui:define>
</h:body>
</ui:composition>
Thanks in advance :)
The <h:outputStylesheet> (and <h:outputScript>) requires a <h:head>, but you've there a <head>. Fix it accordingly.
<h:head>
<h:outputStylesheet name="css/styles.css" />
</h:head>
Further, you need to ensure that the css/styles.css file is been placed in the /resources subfolder of the public webcontent.
WebContent
|-- resources
| `-- css
| `-- styles.css
:
As to your attempt to use the library attribute, be careful with this, using library="css" isn't entirely correct in this context. See also: What is the JSF resource library for and how should it be used?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" under h:head section that you did not add