Trying to Use CSS Variables Style Sheet with php

coolcat

I'm trying this example code:

but it's not working for me...

page 1 is style sheet - style.php with this code:

<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
echo <<<CSS

/ --- start of css --- /
.title-text
{
color: $color; / <--- use the variable /
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
/ --- end of css --- /
CSS;
?>

then page 2 is test php page called csstest.php

with this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test Document</title>
<link rel="stylesheet" href="style.php" media="screen">
</head>

<body >

test this

etc...

but when I view the page - the text is not green...

Q: how do I get the php style '.title-text' to work?

sneakyimp

Have you checked the output of your php script to make sure it's valid CSS?

dagon

<p class=".title-text">test this</p>

should be

<p class="title-text">test this</p>

in the css you use . for class # for id, in the html
class="" and id=""

coolcat

sneakyimp;10934302 wrote:
Have you checked the output of your php script to make sure it's valid CSS?

Hi sneakyimp - not quite sure how i test this - if you mean show page 1 - style.php in a browser - then it will show a blank page - but with no errors

and the page 2 does display various text - (even a simple php echo 'test'😉 - just with no formatting...

Do you mean something else?

coolcat

dagon;10934308 wrote:
test this
should be
test this
in the css you use . for class # for id, in the html
class="" and id=""

Hi dagon - Good EYE! but that was just a thread typo - the actual page was correct - (as you stated)

sneakyimp

The fact that you are getting a blank page when you visit in a browser means that something is wrong. That no errors appear doesn't mean everything is fine. Your server may be configured to hide errors. Perhaps add this line to your style.php file and visit it again:

error_reporting(E_ALL);

If you still get nothing at all from your script, there must be some other problem (like a syntax error). I have tried the code below and it works for me:

<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
echo <<<CSS
/* --- start of css --- */
.title-text
{
color: $color; /* <--- use the variable */
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
/* --- end of css --- */
CSS;
?>

the other file:

<html>
  <head>
    <link href="foo.php" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
  </head>
<body>
<div class="title-text">This appears as green</div>
</body>
</html>

coolcat

Hi sneakyimp,

Well you were right - there was something else going on. I copied your exact code and it worked - then I found the problem. this original code I copied from the web page: http://sperling.com/examples/pcss/

... there were 3 invisible spaces after this line:

echo <<<CSS SPACE SPACE SPACE

which your code did not have. When I deleted the 3 spaces - all worked fine!

Thanks again for your help!

paulnaj

Hi All,

Just for completeness, you don't 'have to' use the heredoc notation - I just use the standard format ...

<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
?>
.title-text
{
color: <?php echo $color; ?> /* <--- use the variable */
font-weight: bold;
font-size: 1.2em;
text-align: left;
}

... which works fine.

P 😉