I have two flags defined in my site (false_negative_flag
and false_negative_flag_passed
). Each flag has different Flag link text.
In views, I have two displays. I have a flag link in each of these views, one with the first flag, the other with the second one. The link text shows correctly on both displays. I wanted to have images instead of the link text so I added the following css:
.flag-wrapper.{false_negative_flag} a.flag-action {
background: url(http://.../files/failed.png) no-repeat center center;
border:none;
width: 18px;
height: 18px;
margin-left: 0px;
float: left;
color: transparent;
text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag} a.unflag-action {
background: url(http://.../files/passed.png) no-repeat center center;
border:none;
width: 18px;
height: 18px;
margin-left: 0px;
float: left;
color: transparent;
text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag_passed} a.flag-action {
background: url(http://.../files/passed.png) no-repeat center center;
border:none;
width: 18px;
height: 18px;
margin-left: 0px;
float: left;
color: transparent;
text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag_passed} a.unflag-action {
background: url(http://.../files/warning.png) no-repeat center center;
border:none;
width: 18px;
height: 18px;
margin-left: 0px;
float: left;
color: transparent;
text-indent:-9999em;
}
There are 3 different images I use but in my views I always see the passed
and warning
ones (the last two entries of the css). Is there any error in my css?
NOTE: I'm using the displays in Panels, don't know if it's relevant.
EDIT after first answer: I got the css I'm using from the link in this answer. I simply duplicated and in the second part I added the second flag machine name. The problem is that now it ignores the first two blocks of the css.
Thanks!