kirkfree

OK. Though actually its much improved on the first post….

Seems there’s an implementation difference between Safari on windows and OSX, unsurprisingly. Opera I suppose is unimportant, but IE8 is liklely to be around for ever. ??

None of them actually look bad though, so I can probably get on with trying to integrate Spun with Woocommerce. Are you aware of anybody having done that?

Andrew Nevins wrote:

How far did you get with that tutorial: https://demosthenes.info/blog/533/Sepiatoning-photographs-with-CSS3-&-SVG ?

Can’t see your post on the forum….

The tutorial is where I got the firefox fix from (see my style.css above), but the server doesn’t like .svg so I ended up putting the code directly in the .css. Firefox now works, pretty much, so I guess its fine. IE and Opera don’t work properly, and Safari works better on anything but a PC.

reopened, with status update” Still Robinson.ky
robinson.ky, the intention is that the link images are sepia-toned but go to colour when hovered.
This now works apparently perfectly for Windows in Chrome and Firefox, but not in:
IE – can’t get sepia working, just grayscale (and squares in IE8).
Safari and Opera – no fading at all, images remain full-colour.

On Mac OSX and apparently IOS, Android
it works fine in Chrome, Safari and Firefox.
images remain in full colour on Opera

Can’t help feeling I’ve got the precedence wrong in the spun-child styles.css. Here’s the relevant bit of style.css

/* WIP my version */
.blog .hentry a .attachment-post-thumbnail {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.35 0.35 0.35 0 0 0.25 0.25 0.25 0 0 0.15 0.15 0.15 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
    -webkit-filter: sepia(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
}

.blog .hentry a .attachment-post-thumbnail hover{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: alpha(opacity = 100);
}

As had the firefox one, probably a need for an FAQ on this theme as so many questions recur, with minor variations….

1. Don’t alter the main theme. If you can’t make a child theme then install a plug-in like PC Custom CSS.

2. Assume this is Firefox, as the symptom you report happened to me as well. I solved it today. Firefox wants to use an svg filter. If your server doesn’t allow it you have to hard code it. See this post:
https://www.ads-software.com/support/topic/greyscale-icons-wont-work-with-ff?replies=3

I’m using sepia instead of grayscale, like this:

.blog .hentry a .attachment-post-thumbnail {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’https://www.w3.org/2000/svg\’><filter id=\’sepia\’><feColorMatrix type=\’matrix\’ values=\’0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0\’/></filter></svg>#sepia”);
}

OK. The Firefox problem is identified by reference to this thread:
https://www.ads-software.com/support/topic/greyscale-icons-wont-work-with-ff?replies=3

and specifically hard-coding the svg filter within the stylesheet. That post, in turn, references this: https://stackoverflow.com/questions/13927286/css-filter-multiple-url-gain-blur-and-grayscale-at-the-same-time

So just IE, Opera and Safari to go then ??

Ran the page through the CSS validator and it alarms on some of the original css too.

It also looks like -moz-filter isn’t recognised either.

sleep on it….

yes.
Tried that, that’s where I got my sepia.svg from, and the non-hover css.

The only old browser is IE8 (dev machine is XP), FF, Opera and Safari are all freshly-downloaded.

I deactivated the custom-css plugin in favour of a child theme.

Andrew I can live with square boxes in ie, ?? but I will download one of the CSS3 plugins….