Clever Geek Handbook

Right images Change icons from p: rowEditor

I want to change icons from <p:rowEditor>

. Not ui-icon-pencil, but ui-icon-check and ui-icon-close.

My CSS

.ui-icon-check {
    background-image: url(../images/success_icon_16x16.png) !important; 
}
.ui-icon-close {
    background-image: url(../images/cancel.png) !important;
}

But when I edit some line, I cannot see the icon.

Any idea? thanks Tim

+3


source to share


2 answers


This is most likely because your CSS classes are not overriding the jQuery UI css stylesheet. This is because your stylesheet is being placed in the tag <head>

before the jQuery UI stylesheet is declared.

Essentially, the jQuery UI stylesheet overrides your stylesheet.



The easiest way to ensure that your stylesheet overrides other declared styles is to place your stylesheet in instead <h:body>

. If <h:outputStylesheet>

there isn't an attribute that allows you to order how it appears in the document compared to other objects found in the newer version of JSF, then this is the only way I can think of.

+1


source


I had a similar problem, I could override everything except the pencil icons, check and close. the problem with me was height and width. So I had to override this.



 .ui-icon-pencil {
  background-image: url(../images/pencil.png) !important;
  height: 20px;
  width:20px;
 }
0


source






More articles:


All Articles