Circle thumbnails in colour by default?

Related https://www.ads-software.com/support/topic/changing-circles-to-color-without-hovering?replies=17

Thanks Andrew I’ll have a crack…actually just been following your instructions for text inside circles at https://www.ads-software.com/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?

https://cardtherapy.co.uk/

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

Actually works as expected in Chrome on my nexus

Ah just noticed FireFox thread! https://www.ads-software.com/support/topic/problems-viewing-in-firefox?replies=6

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: https://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: https://web-sniffer.net/ .

Your SVG file: https://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.

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

Yep that’s fixed it thanks

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!

Again works in Chrome and IE but not FF…

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

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

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.

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.

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 https://www.ads-software.com/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?

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.