CSS error

Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:

You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

Bunk replied

10 May 2016, 10:39
Originally posted by SimonMac View Post

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

Code:

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

to

Code:

filter: url('grayscale.svg#greyscale');
Leave a comment:
SimonMac replied

10 May 2016, 10:22
All the css is located in /wp-content/themes/scalia/css/
Leave a comment:
FrontEnder replied

10 May 2016, 09:48
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.
Leave a comment:
Bunk replied

10 May 2016, 09:47
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?
Leave a comment:
SimonMac replied

10 May 2016, 08:31
Originally posted by FrontEnder View Post

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
Leave a comment:
FrontEnder replied

10 May 2016, 08:05
Just move the 'grayscale.svg' file into the same folder as the css file.

Last edited by FrontEnder; 10 May 2016, 08:10.
Leave a comment:
eek replied

9 May 2016, 21:41
Originally posted by SimonMac View Post

Calling all code monkeys, need some help!

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

Code:

.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
Leave a comment:
SimonMac started a topic CSS error

9 May 2016, 20:10
CSS error
Calling all code monkeys, need some help!

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

Code:

.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?
Tags: None