phoenixWright
phoenixWright

Reputation: 77

PHP Variables in CSS not working

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!

Upvotes: 1

Views: 1196

Answers (5)

Antonio Bruno
Antonio Bruno

Reputation: 296

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.

Upvotes: 0

user2182349
user2182349

Reputation: 9782

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.

Upvotes: 0

Xyv
Xyv

Reputation: 739

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>

Upvotes: 3

Dilip Kumar Yadav
Dilip Kumar Yadav

Reputation: 615

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
?>

Upvotes: 0

Danyal Sandeelo
Danyal Sandeelo

Reputation: 12391

you can do it like

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

Upvotes: 0

Related Questions