CSS error

[SimonMac]

Calling all code monkeys, need some help!

Got a wordpress theme that is causing me grief, the bit in the style.css file is

.grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url('css/grayscale.svg#greyscale');

It seems this is being translated into

http://mywebsite/css/grayscale.svg#greyscale

but also as

http://mywebsite/page/css/grayscale.svg#greyscale

both of these locations are invalid causing 404 errors which lock the user out of the site.

on the server the path is

/wp-content/themes/scalia/css/grayscale.svg

I assume I could hard code the full link, but is there a better way?

[eek]

Calling all code monkeys, need some help!

Got a wordpress theme that is causing me grief, the bit in the style.css file is

.grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url('/themes/scalia/css/grayscale.svg#greyscale');

It seems this is being translated into

http://mywebsite/css/grayscale.svg#greyscale

but also as

http://mywebsite/page/css/grayscale.svg#greyscale

both of these locations are invalid causing 404 errors which lock the user out of the site.

on the server the path is

/wp-content/themes/scalia/css/grayscale.svg

I assume I could hard code the full link, but is there a better way?

From memory its the above. You can't use relative urls but need to explicitly specify it from the websites root

[FrontEnder]

Just move the 'grayscale.svg' file into the same folder as the css file.

[SimonMac]

Just move the 'grayscale.svg' file into the same folder as the css file.

Won't work as one of the "folders" that it is trying to refer to is actually a page, also don't want to have to have a single file dotted around the website multiple times just fix some CSS

[Bunk]

The path to the SVG file is relative to the location of the CSS file, so "filter: url('css/grayscale.svg#greyscale');" would indicate that in the same folder as the CSS file there is another "css" folder containing the SVG file. Is that correct?

[FrontEnder]

That's odd.

Relative URLs in CSS are relative to the stylesheet, so placing any images etc that are needed relative to the stylesheet is common practice.

What's the path of the CSS file? If 'css/grayscale.svg' is showing as 'http://mywebsite/css/grayscale.svg' in the browser, then it looks like it's in your site root.

It should really be in the theme folder, with the svg file you need relative to that.

[SimonMac]

All the css is located in /wp-content/themes/scalia/css/

[Bunk]

All the css is located in /wp-content/themes/scalia/css/

Ah, and if the SVG is located at /wp-content/themes/scalia/css/grayscale.svg, then you want to change

filter: url('css/grayscale.svg#greyscale');

to

filter: url('grayscale.svg#greyscale');