0

I am writing a Primefaces Code where I am overwriting the .ui-icon-circle-triangle-e as follows

.ui-icon-circle-triangle-e{
                background-image: url("#{resource['image/add-sign.png']}")!important;
                background-position: 0px 0px;   
}

so as to change the icon of my Rowtoggler. But this also changes the icon .ui-icon-circle-triangle-e(next) on Calender.

I need to keep the user defined icon for rowtoggler but get the primefaces icon for Calender. Could Anyone Help?Image of modified Rowtoggler

Siddharth.Singh
  • 76
  • 11
  • Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) – Kukeltje Oct 14 '15 at 16:31
  • The duplicate must have been shown by stackoverflow when creating this question. Did you notice that? – Kukeltje Oct 14 '15 at 16:31
  • @Kukeltje I don't think it's duplicate, OP succeeded in overriding PrimeFaces style but he did it everywhere and don't want to be global (in `p:calendar` it looks like). The thing he need is more specific css selector imo. – Geinmachi Oct 14 '15 at 16:33
  • Geinmachi : I think you got it right. I have overwritten the CSS, but it is getting applied everywhere on the page. I do not want that to happen. Is there any way I could exclude that CSS to be applied particularly for the calender. – Siddharth.Singh Oct 14 '15 at 16:37
  • You want this style to be applied on a calendar or to be excluded there? – Geinmachi Oct 14 '15 at 16:45
  • I want it to be excluded for the calendar. – Siddharth.Singh Oct 14 '15 at 16:53
  • Then I'll enhance the other post a little since it all is about specificity, but then http://stackoverflow.com/questions/18296269/how-to-override-primefaces-default-css is a 10000% duplicate. – Kukeltje Oct 14 '15 at 17:46
  • And it is not that you want to exclude it for the calendar, it is that you **only** want it to be applied to the rowtoggler. BIG difference!!! – Kukeltje Oct 14 '15 at 17:47
  • I tried the link that you have suggested. But if I do that rowtoggler as well as calendar both have the inline CSS rather than rowtoggler having user-defined CSS. A bit complicated issue I think!! – Siddharth.Singh Oct 14 '15 at 18:06
  • No, it is all basic css. Give the datatable a specific class and use that in your selector. It will **not** apply to the calendar then. Unless the calendar is in the rowexpansion, but then makeyour selector so specific it does only applies up to the rowtoggler. Honestly all basic css. Just read the links about specificity in the Q I referred to in my first comment. – Kukeltje Oct 14 '15 at 18:15

1 Answers1

0

You must make your selector more specific. Try to contain the section you want to change the rowToggler icon in. You can do it Like this:

#newRowToggler .ui-icon-circle-triangle-e{
    background-image: url("#{resource['image/add-sign.png']}")!important;
    background-position: 0px 0px;   
}

Now it wil only change the rowToggler under the DOM element with the id: newRowToggler.

But I don't know what you mean by .ui-icon-circle-triangle-e(next). Is there a pseudo selector named 'next', which I don't know nothing about?

Emre Türkiş
  • 992
  • 9
  • 23
  • The 'next' refers to the button in the calendar (the tooltip is 'next') If OP would have know about these kinds of pseudoselectors knowledge about making selectors more specific would have been present to. And your answer is only partly good since it still fails for a calendar IN a rowexpansion as can be read in the original 'duplicate' I referred to. – Kukeltje Oct 15 '15 at 10:51
  • you can always set style classes to expanded rows, with the above semantic, it should work also for a calendar IN a rowexpansion. and I didn't take a look at the duplicate by the way. – Emre Türkiş Oct 15 '15 at 14:57
  • What I meant was that if there is a calendar in the rowexpansion, the OP would have the same problem that this icon is also overridden. You should not need to add some additional class to the rowexpansion to prevent the nested calendar to also use the new icon – Kukeltje Oct 15 '15 at 15:37