PHP within css file

[Sub_Seven]

Hello, this post could belong to another category but I'm just not sure.

I was doing some research to find out if PHP could be run inside a *.css file, I have found several tutorials online but I cannot make it work, maybe someone here (as always) knows how to make it work, this is what I've done:

1. I put the header data in my CSS file (with .css extension).

<?php header("Content-type: text/css; charset: UTF-8"); ?>

2. I created an .htaccess file with the following data in it:

AddHandler application/x-httpd-php .css

I also tested it this way:

AddHandler application/x-httpd-php5 .css

3. Tested it with my css file that looks like this:

<?php
header("Content-type: text/css; charset: UTF-8");
$color = 'blue';
?>

h2 {color: <?=$color?>}

Bottom line my h2 data should be blue but it isn't, does anybody know what is wrong here?

Thanks in advance for any responses received.

[Readie]

First things first, check the basics:

Make sure you're including the correct .css file into your webpage.

If that's fine, what does it look like when you visit the .css file in your browser?

[astupidname]

Just another guess, perhaps you may not have php short tags enabled? Try:
h2 {color: <?php echo $color; ?>;}
It works fine for me with
AddHandler application/x-httpd-php .css
also I believe it should be charset=UTF-8 rather than charset: UTF-8, not sure if it makes a difference : vs =

[Sub_Seven]

@Readie

I can see everything, including whats in the php tags, this is my css file:

<?php
header("Content-type: text/css; charset=UTF-8");
$color = 'blue';
?>

/* Master */
body {font-family: Georgia; padding: 0; margin: 0}
#content {width: 960px; margin: 0 auto; min-height:100%; margin-bottom:-96px; position: relative}
#clearfooter {height: 96px; clear: both}
#footer {width: 100%; min-width: 960px; height: 80px; padding-top: 16px; text-align: center; position: relative}
html, body {height:100%;}
/* Master */

/* Header */
h2 {margin: 0; padding: 0; font-size: 1.5em; color: <?php echo $color; ?>}
/* Header */

@astupidname

I have tried both ways <? ?> and <?php ?>, the results were the same. Also I've changed to charset=UTF-8 and the h2 still looks pretty black to me...


You can see it for yourself here: testland[dot]devseven[dot]com

[Readie]

The problem here lies in that PHP is not being parsed as PHP in the CSS file. I'm not sure how to go about enabling it if I'm honest - I'm a bit detached from the whole server settings process.

You can probably turn up how to enable it with a Google search without too much trouble.

[Sub_Seven]

AddHandler application/x-httpd-php .css

The line above in a .htaccess file in the same folder where the css is is the way to do it, according to several sources from google

Others say it is this way:

AddType application/x-httpd-php .css

But that one actually disables my css so I think I'm hitting a dead end, unless there is a way to modify Apache (a workaround...)

[Readie]

If you have access to the php.ini file, you should be able to add a parameter there for it.

Also, what do you mean by "disables my CSS"?

[Sub_Seven]

I mean that everything is displayed as if there was no CSS at all, for example the footer is displayed right after the h2 and not at the bottom like I have it set or the content div looses the margin: 0 auto; property and everything is aligned at the left of the screen...

I'll contact my hosting provider and see if I can edit the php.ini, thanks for the help.

[Readie]

Ok, that is actually promising, it suggests that "AddType application/x-httpd-php .css" is correct, but something with your PHP is making your CSS completely unrecognisable.

Turn that flag on again, and visit the .css file in your browser to see what it looks like.

[Sub_Seven]

Huh, I did and if I try to go to testland[.]devseven[.]com/css/styles.css it brings up a "save as" box

What is the difference between AddType and AddHandler?

Now, could this line be wrong in some way:

header("Content-type: text/css; charset=UTF-8");

and maybe it should be

header("Content-type=text/css; charset=UTF-8"); or
header('Content-type="text/css"; charset="UTF-8"');

[Sub_Seven]

Been trying to find the bug, turns out that this:

header("Content-type: text/css; charset=UTF-8");

is the correct way...

The problem is still unresolved.

[Anyango]

why not just rename the .css to php ?

css.php

<?php
header("Content-type: text/css; charset=UTF-8");
$color = 'blue';
?>

/* Master */
body {font-family: Georgia; padding: 0; margin: 0}
#content {width: 960px; margin: 0 auto; min-height:100%; margin-bottom:-96px; position: relative}
#clearfooter {height: 96px; clear: both}
#footer {width: 100%; min-width: 960px; height: 80px; padding-top: 16px; text-align: center; position: relative}
html, body {height:100%;}
/* Master */

/* Header */
h2 {margin: 0; padding: 0; font-size: 1.5em; color: <?php echo $color; ?>}
/* Header */

index.html

<link href="css.php" rel="stylesheet" type="text/css">
<h2>testing, should be blue</h2>

That works as you want, why struggle with .css extension

[Sub_Seven]

@Anyango

Thanks for the help, I had tried that already but when I visited the styles.php file it gave me this error:

styles.php

Warning: Cannot modify header information - headers already sent by (output started at /home/devseven/public_html/testland/css/styles.php:1) in /home/devseven/public_html/testland/css/styles.php on line 2
/* Master */ body {font-family: Georgia; padding: 0; margin: 0} #content {width: 960px; margin: 0 auto; min-height:100%; margin-bottom:-96px; position: relative} #clearfooter {height: 96px; clear: both} #footer {width: 100%; min-width: 960px; height: 80px; padding-top: 16px; text-align: center; position: relative} html, body {height:100%;} /* Master */ /* Header */ h2 {margin: 0; padding: 0; font-size: 2em; color: blue} /* Header */

I'm going to upload this files to a different hosting/server and see if it happens there as well as I'm running out of options...

[topr8]

there is an error in your css code anyway - the trailing semi-colons ;

have been omitted in nearly every line, not sure if this would cause an error but it's certainly invalid.

however why are you trying to do this, by using php in a css file you are losing the caching benefit of an external style sheet as the browser will have to download it fresh for each page (most likely)

you should have a static css file and then if required use php to write rules into the <head> ... these rules will override the rules in the style sheet

[Sub_Seven]

Hey topr8, you just made me think I could have just asked for the best solution to what I'm trying to do.

In general I'm trying to get more functionality from my CSS and also trying to let the client change small things without compromising the well-being of the website.

It all started with a website I've had for years, it is a landscaping website from NJ, all I want is to base the background image under a php if statement that will change the image depending on the date (a different image for each season), I know I could do this outside the CSS but the fact that I cannot make it work has created the urgency to not give up (yes I am stubborn).

Another reason is that I like to keep the HTML as clean as possible <head> and <body> so anything I can send to an external file is welcome.

About caching, that’s something I was trying to ignore but it has been pointed out on several pages and now here, I guess the cons equal the pros so probably if it ain’t broken don’t try to fix it.

So if you know any better solutions please let me know, thanks a lot for the help :)

[topr8]

ok here's my solution

1)
the main css file served as normal, no php!
build 4 extra css files each with the season background image rule
use php to serve the extra file depending on date.
or even 4 complete files identical except for the bg image rule

2)
write some kind of cron job that overwrites the image file on the server with the new image every 3 months

not saying these are the best way to do it but both would work and be easy to impliment.

[Sub_Seven]

Your right, I leave my styles with their original extension, I'll probably create 4 new css files with the background property only and create the script that will swap them externally and call it in the <head> with a single line php include.

Thanks for all the help :)

[Anyango]

that header error is just because there was a white line before the <?php

[Anyango]

with that whitespace gone it works perfectly, we cannot send any blank lines or any output whatsoever before the header php function call. what you are trying to achieve is so simply possible with php, i dont think youd need seperate files and to swap them externally, its very easy here.