Main CSS Overwritten - Why?
Permalink
Here is the issue,
I'm editing the Dark Chocolate theme and want to had an image on hover to the left of my nav. So what it will do is on whatever link you hover over, to the left of that link an image will appear next to it... To accomplish this I am using pure css as follows:
#sidebar a:hover:before {content:"" url("/cms/images/9NEW4.jpg");}
But when I go into firebug I see somehow it is being overwritten with an incorrect url, so the code looks like this:
#sidebar a:hover:before {content:"" url("/concrete/themes/dark_chocolate//cms/images/9NEW4.jpg");}
Why? and how can I make it stop adding in that url string?
I'm editing the Dark Chocolate theme and want to had an image on hover to the left of my nav. So what it will do is on whatever link you hover over, to the left of that link an image will appear next to it... To accomplish this I am using pure css as follows:
#sidebar a:hover:before {content:"" url("/cms/images/9NEW4.jpg");}
But when I go into firebug I see somehow it is being overwritten with an incorrect url, so the code looks like this:
#sidebar a:hover:before {content:"" url("/concrete/themes/dark_chocolate//cms/images/9NEW4.jpg");}
Why? and how can I make it stop adding in that url string?
Remove the quotation marks from around the URL (there's a C5 bug that causes these not to work), and also make it a relative path instead of an absolute one (so no leading slash). It looks like you'll need to move that image into your theme directory in order for this to work.
For example:
And note that since this is now a relative path -- no leading slash -- it's going to look for the image file relative to the location of the CSS file, which means you will need a folder called "images" in your theme directory that it should reside in. If your css file is itself in a subfolder (e.g. "css"), then the path would be url(../images/9NEW4.jpg)
For example:
#sidebar a:hover:before {content:"" url(images/9NEW4.jpg);}And note that since this is now a relative path -- no leading slash -- it's going to look for the image file relative to the location of the CSS file, which means you will need a folder called "images" in your theme directory that it should reside in. If your css file is itself in a subfolder (e.g. "css"), then the path would be url(../images/9NEW4.jpg)
When you output the CSS address through that function it will run through a concrete CSS parser that will replace those URLs.
So, just include that image in your theme folder and you will be fine. All the theme-specific images should lie in the theme's folder.
Antti / Mainio