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.
Related
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" />
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 using:
primefaces 3.4
tomcat7
using custom primefaces theme (dark-hive)
firefox 16.0.2, IE8
I am trying put p:menu to website:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
>
<body>
<ui:composition>
<h:form>
<p:menu >
<p:submenu label="TESTING" icon="ui-icon-disk">
<p:menuitem value="TEST" outcome="/jsp/home" icon="ui-icon-star"/>
<p:menuitem value="List" outcome="/jsp/rip/home2" />
<p:menuitem value="ExcelTEst" outcome="/jsp/excelTest" />
</p:submenu>
</p:menu>
</h:form>
</ui:composition>
</body>
</html>
In this example icon ui-icon-star jumps to submenu Testing left upper coner. Also this happens for all icons, which I add for menuitems.
As for icon ui-icon-disk, it doesn't show up.
I tried several other examples.
This worked:
<p:panelMenu style="width:200px">
<p:submenu label="Navigations" >
<p:submenu label="Links" icon="ui-icon-extlink">
<p:submenu label="PrimeFaces" icon="ui-icon-heart">
<p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon-home" />
<p:menuitem value="Docs" url="http://www.primefaces.org/documentation.html" icon="ui-icon-document" />
<p:menuitem value="Download" url="http://www.primefaces.org/downloads.html" icon="ui-icon-arrowthick-1-s" />
<p:menuitem value="Support" url="http://www.primefaces.org/support.html" icon="ui-icon-wrench" />
</p:submenu>
</p:submenu>
<p:menuitem value="Mobile" icon="ui-icon-signal"/>
</p:submenu>
</p:panelMenu>
Can someone say, what's wrong? Why p:menu doesn't work as expected?
That's not the right solution, just fix in your custom theme css:
.ui-menu .ui-icon
position: absolute; /* remove this line */
top: .2em;
left: .2em;
}
to
.ui-menu .ui-icon
top: .2em;
left: .2em;
}
SOLVED
Removed theme from ThemeRoller and took theme from Primefaces. It worked.
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