Image Custom CSS

[Christian_S]

I want to make an image blackandwhite by CSS. Now I am trying to get a custom css work.

I made a CSS-class which works if i put it on the "img" type.

To get it work on the specific Image-Widget I need the correct selectors to reach the img.

Is there a documentation anywhere which selectors are available on which widget, therefore I don't have to go vie webdebugger and try all combinations?

.img_blackwhite .widget-image {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

But when I apply "img_blackwhite" as custom class on my image-widget it doesn't work. Are the selectors correct?

I also realized in the webdebugger that my style class is not applied anywhere. It was added to the dom under "mashup-styles" but not added to any element in the dom.

Can you help here?

Thanks in advance

[Christian_S · Accepted solution]

I found my solution...

It seems to be not allowed to use an underscore in the styleclass name. After removing it the styling worked as intended.

.imgblackwhite {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}