PHP Variables in CSS not working

Question

I have the following code for my html file:

<html>
<head>
<link rel='stylesheet' href='css/style.php' media = "screen"/>
</head>
<body>
<h1 id="foo">My h1 foo element</h1>
</body>
<html>

And for my php file:

<?php
    header("Content-type: text/css; charset: UTF-8");
    $asd = '#0000ff';
?>

h1#foo  {
    color: <?php echo $asd;?>;
}

I've followed some tutorials and this is the simplest one i could make but somehow the output is not working the way it should be. Did i miss anything?

P.S. if i was gonna use php variables in css, can it be sort of dynamic? i mean inside the php body, can i overwrite the value of the php variable used in css and the output would change?

Help would be much appreciated ty!

What exactly do you mean by "it does not work". Is the color value empty or is the php not treated as an css file? Do you've looked at the response via developer tools? — Tobias Golbs, Aug 24 '15 at 11:23
what are you doing there? why did you use header()? have you use base href="" tag in head? or are you sure, that folder css in same dir as your test file? — donald123, Aug 24 '15 at 11:24
@Fred-ii- This is right too... Have a look, he's faking a CSS file. — Praveen Kumar Purushothaman, Aug 24 '15 at 11:28
@PraveenKumar I won't contest it, but there is a simpler way of doing this. They're working too hard. — Funk Forty Niner, Aug 24 '15 at 11:29
@PraveenKumar the output is on the html file and like i said the color, as defined in the php file is not working properly — phoenixWright, Aug 24 '15 at 11:35
@ToniLeigh i was gonna try to see if i could somehow overwrite values in css, thus using php variables — phoenixWright, Aug 24 '15 at 11:36
@phoenixWright Do this please. Open `/style.php` in your localhost and then copy the rendered output. Hey, are you using a Server to run PHP or are you just running it? — Praveen Kumar Purushothaman, Aug 24 '15 at 11:38
@PraveenKumar yes im using apache. this was the output on style.php: h1#foo { color: #0000ff ; } — phoenixWright, Aug 24 '15 at 11:39
@phoenixWright Looks alright to me. Check the console for the errors. Also check the content type that has been returned? — Praveen Kumar Purushothaman, Aug 24 '15 at 11:39
question is now, "how" are you accessing it, `http://localhost/file.php` or `file:///file.php`? and `href='css/style.php'` would mean that your other PHP file resides in the root. Might be a scope issue. — Funk Forty Niner, Aug 24 '15 at 11:41
Are you sure you have referenced to the right file location? ^w^ And maybe it could have to do something with buffers and such, try to end the file with `` — Xyv, Aug 24 '15 at 11:44
Add error reporting to the top of your file(s) right after your opening PHP tag for example ` — Funk Forty Niner, Aug 24 '15 at 11:46
@phoenixWright - not quite sure what the use case is, why don't you add classes in the php rendering then serve a css file with the classes you need for different colours? — Toni Leigh, Aug 24 '15 at 12:03

score 3 · Accepted Answer · answered Aug 24 '15 at 11:56

3

Works fine for me ^^

Use this syntax:

cssman.php

<?php
ob_clean();
header('Content-Type: text/css');
header('Cache-Control: no-cache, must-revalidate');

error_reporting( 0 );

// These are just to show you can use dynamic values and such:
$type  = isset($_GET['type'])   ? $_GET['type']  : '';
$theme = isset($_GET['theme'])  ? $_GET['theme'] : '';

/** Simply print or echo your css here **/

ob_end_flush(); 
?>

Try your output first, by navigating to the .php file manually. If there is no content at all, there is most likely a mistake in the PHP code, for debugging you could add error repporting (don't forget to also ini_set('display_errors',1), else errors will only be logged).

Then add it to your view:

your view

<style type="text/css">             
    @import "/Library/Stylesheets/cssman.php?type=cms"  screen;
    /* any aditional files here aswell */
</style>

answered Aug 24 '15 at 11:56

Xyv

739
7
15

`error_reporting( 0 );` this turns reporting off, be sure to let the OP know about this. – Funk Forty Niner Aug 24 '15 at 12:00
@fred-ii- Thank you for your suggestion, but I included `If there is no content at all, there is most likely a mistake in the PHP code, for debugging you could add error repporting (don't forget to also ini_set('display_errors',1), else errors will only be logged).` wouldnt that be sufficient? – Xyv Aug 24 '15 at 12:01
God job on making it work! I think it had something to do with output buffering then :) – Xyv Aug 24 '15 at 12:02
1

@fred-ii- No sweat! I appriciate your concern! its a very common mistake to disable errors while still having some. I just disabled it for the very slight chance a stupid depricated message or something would ruin the output /dirty ^^;; – Xyv Aug 24 '15 at 12:04
1

Oh a slight description on why I use the revalidate cache header: if I don't the client just saves the output... rendering the php file useless on updates. – Xyv Aug 24 '15 at 12:05

score 0 · Answer 2 · answered Aug 24 '15 at 11:24

0

you can do it like

echo"
<style>
 h1#foo {
   color: ".$asd.";
}
</style>
";

answered Aug 24 '15 at 11:24

Danyal Sandeelo

12,196
10
47
78

This doesn't answer. He's using it to link as `css` file. – Praveen Kumar Purushothaman Aug 24 '15 at 11:25
You are wrong. He's including it like CSS: `` – Praveen Kumar Purushothaman Aug 24 '15 at 11:27
@DanyalSandeelo Do you agree? – Praveen Kumar Purushothaman Aug 24 '15 at 11:30
@PraveenKumar he has clearly mentioned that he is doing it in his php file...check it please.. – Danyal Sandeelo Aug 24 '15 at 11:32
1

I think Praveen is suggesting that you don't need the `style` tags. – Hidden Hobbes Aug 24 '15 at 11:34
I understand that, but the person needs something dynamic and you can't have dynamic content using static CSS and this is why the questioner is trying it in PHP – Danyal Sandeelo Aug 24 '15 at 11:36
@DanyalSandeelo That's true but the OP is making a php file trick the browser into thinking it is a CSS file so the `style` tags should not be necessary in this instance as it is being included via a `link` tag. – Hidden Hobbes Aug 24 '15 at 11:40
@DanyalSandeelo He made a link to the PHP file instead of CSS file by setting the file headers. Understood? By the way, the output seems fine. – Praveen Kumar Purushothaman Aug 24 '15 at 11:40

score 0 · Answer 3 · answered Aug 24 '15 at 11:44

0

Firstly, to include a php file this syntax is absolutely wrong:

<link rel='stylesheet' href='css/style.php' media = "screen"/>

To include a Css file we use following syntax:

<link rel='stylesheet' href='css/style.css' media = "screen"/>

and include a php file we use:

<?php
include_once "a.php"; // this will include a.php
?>

answered Aug 24 '15 at 11:44

Dilip Kumar Yadav

565
1
7
27

1

It actually is possible to reference to a PHP file, as it behaves like a CSS file. see the output headers in OPs post. – Xyv Aug 24 '15 at 11:45
I have explained that its the wrong syntax. as in the question he have used that syntax to include a php file. – Dilip Kumar Yadav Aug 24 '15 at 11:52
What do you think this line means? `header("Content-type: text/css; charset: UTF-8");` If you wanted to give a valid answer you could have answered to use `` your answer is irrelevant, as suggestions should be in the comments. – Xyv Aug 24 '15 at 12:00

score 0 · Answer 4 · answered Aug 24 '15 at 12:06

Instead of using PHP to manage the CSS, you may want to consider one of the CSS preprocessors which are specifically intended for that purpose. It also dissociates your client side code from the server side technology.

http://lesscss.org/
https://learnboost.github.io/stylus/
http://sass-lang.com/

Another approach worth considering is to break up the CSS into several files. You can have a common file that applied to all pages on all devices, one that contains the colors, another that manages the layout, perhaps some device specific ones.

Antonio Bruno · Answer 5 · 2015-08-24T16:20:03.407

The code you post works as expected. The title with id=foo goes blu. The only problem is that it doesn't use the .css extension for a css file. To solve this you could put in css folder a .htaccess with instructions to Apache Web Server to use Php interpreter also for the css files (look this link).

However probably for dynamic-ly change it from php, you mean change the value (e.g after a user input or some other events). BUT If I understand well your question the answer is no.

Php can only preprocess your page, it can't modify dynamicly your page after it is loaded by the browser from the user. In addiction, using the code above your variable $asd can only be changed in the style.php AND before that it is used in the code.

I suggest you to use javascript instead, it's a lot easier. Use some javascript library like jQuery, to that kind of job.

oh... i see, i thought it could somehow overwrite. ty! – phoenixWright Aug 24 '15 at 12:27 — phoenixWright, Aug 24 '15 at 12:27

PHP Variables in CSS not working

5 Answers5

Linked