getStyleSheet -> buggy for trying to use images in CSS
Permalink 1 user found helpful
So, I've been loading stylesheets wrong now for over a year and they've been working fine. Here's what I've been doing:
And in that time, I've had background images and :before and :after images on my links with CSS no problem using CSS like this:
I just switched my method of linking a style sheet to the "correct" way and the above completely broke. Images missing.
It did not matter what I tried.
I tried:
content: url(images/menu-arrow.gif);
content: url(/images/menu-arrow.gif);
content: "url(images/menu-arrow.gif);"
content: "url(/images/menu-arrow.gif);"
and none of these worked.
My directory is set up super simply.
In my theme, I have this:
default.php
view.php
style.php
images
that's it.
So, according to what I've read, either of these should have worked:
content: url(images/menu-arrow.gif);
content: url(/images/menu-arrow.gif);
They didn't.
So, I went back to my old way of linking a stylesheet:
And voila! Images are back.
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
And in that time, I've had background images and :before and :after images on my links with CSS no problem using CSS like this:
#menu ul li a.nav-path-selected:before { /* PARENT Page is selected */ height:22px; content: url(images/menu-arrow.gif); margin-left:-15px; } #menu ul li a.nav-selected:before { /* Page is selected */ height:822px; content: url(images/menu-arrow.gif); margin-left:-15px; }
I just switched my method of linking a style sheet to the "correct" way and the above completely broke. Images missing.
It did not matter what I tried.
I tried:
content: url(images/menu-arrow.gif);
content: url(/images/menu-arrow.gif);
content: "url(images/menu-arrow.gif);"
content: "url(/images/menu-arrow.gif);"
and none of these worked.
My directory is set up super simply.
In my theme, I have this:
default.php
view.php
style.php
images
that's it.
So, according to what I've read, either of these should have worked:
content: url(images/menu-arrow.gif);
content: url(/images/menu-arrow.gif);
They didn't.
So, I went back to my old way of linking a stylesheet:
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
And voila! Images are back.
There's nothing wrong about linking stylesheets the way you do. It just isn't editable in the backend (and faster).
Wait, which way is faster? getThemePath or getStyleSheet?
I'm surprised that :before and :after images do not work when stylesheets are linked with getStyleSheet.
A little arrow graphic to indicate current page is quite common!
Background graphics seem to work okay.
I'm using this in a different website which has a stylesheet linked the official way:
#socialmedia ul li a.facebook { background:#0072AB url(/images/facebook-32.png) 0 0 no-repeat; }
but this doesn't work:
a:before {content: url(images/whatever.gif);}
NOR this:
a:before {content: url(/images/whatever.gif);}
And it does if I link the stylesheet with getThemePath instead.
I'm surprised that :before and :after images do not work when stylesheets are linked with getStyleSheet.
A little arrow graphic to indicate current page is quite common!
Background graphics seem to work okay.
I'm using this in a different website which has a stylesheet linked the official way:
#socialmedia ul li a.facebook { background:#0072AB url(/images/facebook-32.png) 0 0 no-repeat; }
but this doesn't work:
a:before {content: url(images/whatever.gif);}
NOR this:
a:before {content: url(/images/whatever.gif);}
And it does if I link the stylesheet with getThemePath instead.
getThemePath ist faster because the stylesheet is served as static content.
I tried your code though, but in my version (5.4.2.1) it worked perfectly. Maybe your core is outdated? I used the version without a slash in front.
See this about getThemePath vs. getStyleSheet performance:http://www.concrete5.org/documentation/how-tos/developers/five-easy...
I tried your code though, but in my version (5.4.2.1) it worked perfectly. Maybe your core is outdated? I used the version without a slash in front.
See this about getThemePath vs. getStyleSheet performance:http://www.concrete5.org/documentation/how-tos/developers/five-easy...
I'm using 5.4.2. If I actually need the .1 on the end update then wow.
Thanks for your feedback, I think I will stick with getThemePath, then. It's faster and I need that. Plus, I'm not allowing clients any customization control of styles.
Thanks for your feedback, I think I will stick with getThemePath, then. It's faster and I need that. Plus, I'm not allowing clients any customization control of styles.
