WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Inconsistent spun with FF, IE, Chrome, Opera, Safari (12 posts)

  1. kirkfree
    Member
    Posted 1 year ago #

    Playing with the 'spun' theme and stretching my css knowledge beyond breaking point :) robinson.ky
    The intention is that the link images are sepia-toned but go to colour when hovered. This works (apparently) perfectly in Chrome, but not in:
    IE8 - still grayscale (and squares - but I've found the fix for that).
    FF21 - circles are invisible until hover.
    Safari and Opera - no fading at all, images remain full-colour.

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

    .blog .hentry a .attachment-post-thumbnail {
    -webkit-filter: sepia(1);
    -webkit-filter: sepia(100%); -moz-filter: sepia(100%);
    -ms-filter: sepia(100%); -o-filter: sepia(100%);
    filter: url(inc/sepia.svg#old-timey);
    filter: sepia(100%);
    background-color: #5E2612;
    filter: alpha(opacity = 50);
    zoom:1;
    }

    .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);
    }

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    IE8 - still grayscale (and squares - but I've found the fix for that).

    Can you say the fix for that in case we recommend something you've already tried?

  3. kirkfree
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is it this plugin http://wordpress.org/plugins/ie-css3-support/ you're referring to?

    To make your sepia work in old browsers, try following this tutorial http://demosthenes.info/blog/533/Sepiatoning-photographs-with-CSS3-&-SVG .

    Do you have a Child Theme or Custom CSS plugin?

  5. kirkfree
    Member
    Posted 1 year ago #

    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.

  6. kirkfree
    Member
    Posted 1 year ago #

    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....

  7. kirkfree
    Member
    Posted 1 year ago #

    OK. The Firefox problem is identified by reference to this thread:
    http://wordpress.org/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: http://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 :)

  8. kirkfree
    Member
    Posted 1 year ago #

    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=\'http://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);
    }
  9. kirkfree
    Member
    Posted 1 year ago #

    Andrew Nevins wrote:

    How far did you get with that tutorial: http://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.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can't see your post on the forum....

    Sorry, I deleted it because I realised it was the same as the code in your first post.

  11. kirkfree
    Member
    Posted 1 year ago #

    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?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    but IE8 is liklely to be around for ever.

    The thing is, the people who are using IE8 aren't used to seeing CSS3 effects anyway. It's not like they're missing it, or even realise that it's supposed to be there. Those people are probably used to seeing aesthetically poor websites anyway.

    Losing some beauty in old browsers is a good incentive for people to upgrade too.

    If you really wanted to, you could always find a way to style things in JavaScript; as JavaScript works on pretty much every browser if switched on.

    Are you aware of anybody having done that?

    Done what, integrate Spun with Woocommerce? No, I don't hear about that on these forums.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic