I have problem with <p:commandLink>. I want make hover effect but I can't load image to <p:graphicImage> via CSS.
CSS:
.accountEditBtn {
background-image:
url('#{request.contextPath}/resources/image/pencil_black.png');
}
JSF:
<p:commandLink
update="#form"
actionListener="#{someBean.someListener}">
<h:graphicImage styleClass="accountEditBtn" />
</p:commandLink>
I see empty rectangle with border.
But when I add alt to graphicImage, I get image over text from alt...
Where my mistake?
Thank you.
p.s. typing error - classType -> styleClass
try using styleClass instead of <h:graphicImage>
<p:commandLink
styleClass="accountEditBtn"
update="#form"
actionListener="#{someBean.someListener}"/>
try this class
.accountEditBtn { background-image: url('../resources/image/pencil_black.png'); }
B.T.W
isn't is should be images ? or it is image (folder name)
take a look at this as well.. in case you want commandButton with image: PrimeFaces icons
Why don't you use
<p:commandButton ... icon="yourbuttonstyleclass"/>
and in css
.yourbuttonstyleclass {
background-image: url('../images/yourimage.png') !important;
}
Related
I am using PF v. 5.3.5 and JSF v. 2.2.8.
<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree">
<p:treeNode icon="">
My CSS class is below:
.ui-treenode-icon{
background: url("#{node.leafIcon}") no-repeat top !important;
}
I see the same icon in each treeNode that it is not desired. This icon is for the final treeNode in the tree.
However, I want to iterate trough them that each treeNode has his own icon.
NOTE The size of tree is different on each environment and it is created dynamically.
How can I do this, please?
Please, see current PF version here.
The desired Icefaces version is here.
Thanks in advance.
In the Api-Documentation (http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml -> Documentation Tab) it says you could do it like this:
<p: tree value="#{bean.root}" var="doc">
<p:treeNode type="mp3" icon="ui-icon ui-icon-video">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="document" icon="ui-icon ui-icon-image-document">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:Tree>
So in the backing Bean you have to give the Node a name, which will be the p:treeNode type. So as far as I understand
TreeNode mp3 = new TreeNode("mp3", "some music");
would do the linking for
<p:treeNode type="mp3" ... />
Let me know if it helped.
Cheers
kyhu :)
SOLVED without css
I solved by inserting a h:graphicImage inside treeNode without facet. it now as I needed and how it was done in the previous version.
<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree"
selectionMode="checkbox">
<p:treeNode>
<h:graphicImage value="#{node.leafIcon}" />
<h:outputText value="#{node.text}" />
</p:treeNode>
</p:tree>
Having different values for each element with one CSS class is not possible. You would have to create a class for each icon, like so:
my-treenode-icon-1 {
background: url("/resources/img/treenode/icon-1.jpg") no-repeat top !important;
}
my-treenode-icon-2 {
background: url("/resources/img/treenode/icon-2.jpg") no-repeat top !important;
}
and then in iteration use icon name instead of path (if you have a path in database you can slice last part of it and take only the image name which will be class name).
<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree">
<p:treeNode icon="my-treenode-#{node.iconName}">
In p:button in need add my own image(any image which i want to include).
`<p:button icon="ui-icon-star" title="Icon Only">
</p:button>
`Can i add like this
<p:button icon=""/images/someimage.png"" title="Icon Only">
</p:button>`
The icon attribute of <p:button> needs a CSS class, you can not give it a image path. Example:
PrimeFaces button:
<p:button icon="my-icon" />
CSS:
.my-icon {
background-image: url("images/myicon.png");
}
I am working on improving/polishing my primefaces ConfirmDialog but I cant seem to put some nice image on it or improve some of its looks. Also I cant seem to find some documentation on how to use its attributes, I have downloaded the primefaces user manual, but it seem to be missing some things.
Here is my code.
<p:confirmDialog header="Confirm" severity="alert" closeOnEscape="true" widgetVar="confirmationDialog" showEffect="fold" >
<f:facet name="message">
<h:outputText value="Are you sure all details
are correct and proceed in creating the Account?" />
</f:facet>
<p:commandButton value="Yes" actionListener="#{marketingPersonController.create}"
oncomplete="confirmationDialog.hide()" icon="ui-icon-check"
update="propertyPanel accountPanel marketingPersonPanel">
<f:ajax rendered="propertyPanel accountPanel marketingPersonPanel"/>
</p:commandButton>
<p:commandButton value="No" onclick="confirmationDialog.hide()" type="button"
icon="ui-icon-close"/>
</p:confirmDialog>
Here is a screenshot
I cant seem to remove the small ! icon there, if I put severity none, it still shows up a wierd "^" image. I want to completely change the icon and somehow modify some of its look.
Also, I tried having this css. Still its not working.
.ui-dialog-content p span {
background-image: url('path to image here')
no-repeat !important;
}
Am I doing something wrong? And if you have a complete primefaces documentation, that would also help. Thanks
You have 2 possibilities :
You can directly replace the icon overriding the Primefaces CSS like this :
CSS
.ui-icon.ui-confirm-dialog-severity {
background-position: 0 0 !important;
background-image: url('PATH TO IMAGE HERE') !important;
}
or you could do it like this : Inside the component which trigger the dialog :
XHTML
<p:confirm header="HEADER" message="MESSAGE" icon="ui-icon-alert" />
Example Here : http://www.primefaces.org/showcase/ui/confirmDialog.jsf
CSS
.ui-icon.ui-confirm-dialog-severity.ui-icon-alert {
background-position: 0 0 !important;
background-image: url('PATH TO IMAGE HERE') !important;
}
I have this link :
</td>
and I want to change the image when the user over the link I tested :
#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}
but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))
when I use the background-image without hover like that :
it doesn't appear :
#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}
NB : I generated the page with photoshop
do you have any idea
You can completely remove the img because you add the efect via CSS on the a tag.
HTML
CSS
.image_link{
display:block;
width:800px;
height:600px;
background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}
.image_link:hover {
display:block;
width:800px;
height:600px;
background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}
JSFiddle.
Note that you must add dispay:block/inline-block to the a
I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.
You should also use a self closing tag /> for your image. The tag is open the way that you posted it.
#planification
{
background: url(images_cartographie/cartographie3_03.gif)
}
#planification:hover
{
background: url(images_cartographie/new_image_goes_here.gif)
}
<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>
I want to implement JSF button with image and custom label. I tested this code:
<h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
.avesettings {
background-image: url('../images/small.png');
}
This is the result:
I also tested this second code:
<h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
I get this result with no label:
Can you help me to create JSF button with background image and custom label defined as button attribute?
The first method that you have used styleClass="avesettings" i.e., using CSS style is the only possible way to do it since if you specify the image attribute, the input element will become an image.
See also documentation
So your best bet would be to use advanced styling techniques for the buttons, refer to these articles for that:
http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
http://www.tyssendesign.com.au/articles/css/styling-form-buttons/
The following JSF/CSS should solve your problem:
JSF (the same as in your first example):
<h:commandButton id="savesettings" styleClass="avesettings" value="Save Settings" action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
CSS (adapted):
.avesettings {
background: url('../images/small.png') no-repeat;
cursor: pointer;
width: 126px;
height: 41px;
border: none;
}
Width and height of the css must be the width and height of your image. I also have the css in an external css file, not direct in the JSF template.
Did you try the "image" attribute of he commandButton tag?
One way to implement this is to load the image as jsf resource in your style sheet:
<style type="text/css">
.imageButton
{
background-image:url(#{resource['images/button.png']});
}
</style>
Then set the relevant commandButton styleClass in the xhtml:
<h:commandButton value="Submit" styleClass="imageButton" action="#{...}"/>
Put the file button.png under your resources folder i.e. resources/images/button.png and make sure your resources folder is located next to your WEB-INF folder
Or if you want the image to display as an icon next to the text in the commandButton then you can play around with css a little:
.imageButton
{
padding: ...
border: ...
color: ...
background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]
}