Handling URLs inside a CSS in CakePHP

Question

Heyall,

I am designing a website using CSS Files a lot, but I have several occurrences of background images, images for bullets in lists and I will probably find another need for the css url() function.

But, in cake, all URL should be handled by the Route::url() function, in several ways, being most common the $html->url()

But my problem is that CSS Files are not interpreted by PHP. How I can create a CSS File containing something like:

div.coolbg {
  background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}

See, my last option is to import the css file inline on the layout so it can be interpreted. But I highly prefer to use a more "Cake" approach.

Thanks!

Answer 1

You can add CSS to be processed through PHP by editing your .htaccess file in Apache. Processing it, as opposed to just spitting it out does have a slight performance hit.

AddType application/x-httpd-php .css

Also, see: http://www.webmasterworld.com/forum88/5648.htm

Answer 2

This won't help too much with the Cake stuff unless you first instantiate the Cake objects. If you want to use the html helper, you'll probably want to figure out how the first Cake object is instantiated, then mimic that in your CSS stuff. Not sure exactly how I'd do this -- I think having an entire CSSController would be overkill, but I think you might have to instantiate an app controller (after all, you want the rewritten css url to reflect you app's settings, right?). So I guess you may have to create a CSSController anyways.

Answer 3

You don't need to use $html->url() in your css file, consequently you don't need to parse the CSS files through PHP or create a CssController.

If your cake app is installed in your virtual hosts DocumentRoot, just make all the paths to images absolute from the webroot. e.g.

div.coolbg {
  background-image: url(/img/coolbg.jpg);
}

This will apply the image at app/webroot/img/coolbg.jpg to your

If your cake app is not installed in the virtual hosts DocumentRoot, i.e. you access your cake app via a URL like http://www.domain.com/myapp/, then you make the path to the image relative to the css file. Check out the style rules in app/webroot/css/cake.generic.css e.g.

#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}

This works because style sheets live in the app/webroot/css/ directory, and image live in the app/webroot/img/ directory, so the path "../img/cake.icon.gif" comes up out of the css directory, then back down into the img directory.

Answer 4

a whole bunch of cakephp experts are probably going to hate me for suggesting this one.. :)

the easiest solution for me was to just include the image file in the css folder. something like this

/app/webroot/css/css_images/mypic.jpg

so in css file i would just put in background-image: url(css_images/mypic.jpg);

the bad thing is obviously it's not the cakiest thing to do. the good thing is that it will work regardless if you are using fancy url or not since css finds the image relative to the css file.

Answer 5

I would definately go for the solution suggested by zam3858. And if you don't like to have your images in two distinct locations, create a symbolic link in the css directory that points to the images. Like this:

$ cd app/webroot/css 
$ ln -s ../img .

Now, the image paths will be resolved correctly for both the html helper and style sheets:

// css:
url(img/image.png);

// view.ctp
echo $html->image('image.png');

It may not be the cakiest solution, but it doesn't look like cakephp provides one.

Answer 6

menu li a{

                display:block;
                float:left;
                height:52px;
                color:#0e7b93;
                text-transform:uppercase;
                font-size:11px;
                font-weight:bold;
                background:url(/img/menu_027_l.jpg) no-repeat left;
                line-height:39px;
                padding:0 0 0 18px;
                text-decoration:none;
            }

i used this but still not appear the image at menu...please help meeee