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;
}
Related
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 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'>]
}
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;
}
i have a HyperLink on my site that is displaying an image instead of text. what i would like is for it to swap to another image on mouse-over using css. so far, i've come up with this:
<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"
NavigateUrl="~/Default.asp" CssClass="homeHover" />
my css:
.homeHover { }
.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
.homeHover:Hover { background: url(../images/home_hover.gif) no-repeat; }
well, that does nothing. i don't know css well enough to figure this out. help please. also, i've been asked not to use javascript. i got it working using javascript but i need it to work using css. (or i suppose if i could get this to work programmatically would be okay too but... not sure about that. ) thanks.
Try this:
a.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
a.homeHover:hover { background: url(../images/home_hover.gif) no-repeat; }
The :<state> selector in CSS is what is known as a pseudoclass. Pseudoclasses are special selectors that can match an element based on things like behaviours or relative positions.