WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Circle thumbnails in colour by default? (17 posts)

  1. MrNickSheppard
    Member
    Posted 1 year ago #

    Exploring Spun for my wife's blog http://cardtherapy.co.uk/ but she's not keen on black and white images for circles...Any tips on changing the css so circle thumbnails are colour by default rather than black and white until mouseover?

    Had a quick look at .attachement-post-thumbnail in FireBug but I'm no CSS or WordPress guru...think I'll need to use a child theme...And modify filter?

    Thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

  3. MrNickSheppard
    Member
    Posted 1 year ago #

    Thanks Andrew I'll have a crack...actually just been following your instructions for text inside circles at http://wordpress.org/support/topic/put-test-inside-images-on-home-page but something has gone awry (text shows but no circle til mouseover - only tried FireFox). Would you mind having a quick look and seeing if you can spot the problem?

    http://cardtherapy.co.uk/

    Not sure if I should start a new thread for this?

  4. MrNickSheppard
    Member
    Posted 1 year ago #

    Actually works as expected in Chrome on my nexus

  5. MrNickSheppard
    Member
    Posted 1 year ago #

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Looks like the issue is to do with your server and how it deals with SVG files.

    Spun uses an SVG file called, 'desaturate.svg' to help with its grayscale on the circles and that file on Spun's demo website can be found at: http://spun-demo.calobeedoodles.com/wp-content/themes/spun/inc/desaturate.svg#greyscale

    For SVG to work in Firefox it needs to be sent using a particular set of HTTP headers:
    https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers .

    This tool can check your SVG files to see if the headers are being sent correctly: http://web-sniffer.net/ .

    Your SVG file: http://cardtherapy.co.uk/wp-content/themes/spun-child/inc/desaturate.svg#greyscale simply cannot be found so that may be a reason as to why you are having problems with it.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you copy the "inc" folder from your parent theme and paste it into your Child Theme directory?

  8. MrNickSheppard
    Member
    Posted 1 year ago #

    Yep that's fixed it thanks

  9. MrNickSheppard
    Member
    Posted 1 year ago #

    Not quite right though...circle displays but also kinda disappears for fraction of a second on mouseover before colour. Also can't get your custom CSS hack to work.

    Many thanks for your help with this. Much appreciated!

  10. MrNickSheppard
    Member
    Posted 1 year ago #

    Again works in Chrome and IE but not FF...

  11. MrNickSheppard
    Member
    Posted 1 year ago #

    Note that whiteout issue also on spun demo in FF...could live with that but custom css also doesn't appear to work in FF

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    On your site I can't experience the issue in Firefox where the circles only appear when on-hover. Did you resolve this?

  13. MrNickSheppard
    Member
    Posted 1 year ago #

    Oh...Might be version specific...at work now and works on 23.0.1...so just that still black & white rather than colour by default - in FireFox only; custom CSS works for other browsers.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Something's wrong with your Child Theme style.css file, how come you're importing the styles over twice? Once through the @import line and then the other time by taking a code dump.

  15. MrNickSheppard
    Member
    Posted 1 year ago #

    Just amateur! Added the @import later as was trying to include the code to modify fonts to calligraffiti as per this thread you helped me with a few weeks back http://wordpress.org/support/topic/modifying-h2-in-twentyten?replies=23

    Probably need to do some homework on child themes!

    ...so I should use @import then I can just add CSS rules to the child theme that will take precedence over the equivalent rules in the parent theme?

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    so I should use @import then I can just add CSS rules to the child theme that will take precedence over the equivalent rules in the parent theme

    Yes, well that's the idea. Sometimes you have to use more specific CSS selectors.

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    It makes it easier for us to debug why you're still having a greyscale issue in Firefox too - as we don't have a thousand lines of CSS to wade through.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.