Question

My globalStyles.css has been stable for 3 weeks and is used everywhere in the project. After studying several SO posts and responses it seems some people like to put their global CSS stuff into a .php file to avoid the type of problem I’m having.

Here is the issue.

At the top of my project’s files I have a PHP block — here’s the top of my index.php:

  <?php
   include 'titleBar.php';

   require_once 'navBar.php';

   require_once 'theDatabase.php'; // functions for the UI and DB access

   require_once 'globals.php'; // variables and statics used throughout
  ?>

Deeper into each file – such as my index.php above — is this statement:

   <link rel="stylesheet" type="text/css" href="<?php echo $sitePath ?>globalStyles.css" />     

$sitePath comes from globals.php, looks like this:

   $sitePath = "http://" . $_SERVER['HTTP_HOST'] . "/Artifacks/";

(‘Artifacks’ is the project name. Real nice, I didn’t pick it.)

Then I use $sitePath like this all over the place, for example:

 <img src="<?php echo $sitePath?>images/Artifacks-icon.png"></img>

Does this work? Oh my goodness. Incredible — like fresh Gumbo and biscuits. And stable for weeks too.

Notice that I said above the link rel=”stylesheet” globalStyles.css comes after the require_once ‘globals.php’
inside my index.php file (and all the other files in the project for that matter — globalStyles.css is pulled in AFTER globals.php, in all files).

By the time the link rel pulls the globalStyles.css into my index.php — the $sitePath is ‘visible’ already since it came from globals.php which was included before globalStyles.css.

So inside my globalStyles.css I added this:

   background-image: url('<?php echo $sitePath; ?>images/egypt-Sphinx.jpg ) ;

The image does NOT appear.

So I thought ‘okay even though globalStyles.css is pulled into index.php AFTER
the require_once ‘globals.php’ — for whatever reason my $sitePath in globals.php is not ‘visible’ to the code inside globalStyles.css.

To prove that, I hard-coded inside globalStyles.css the full path to egypt-Sphinx.jpg and this image now appears fine.

So I added this to globalStyles.css:

But my Netbeans IDE tells me “invalid content.”

How can I reference $sitePath inside globalStyles.css?

I need this statement to work — I can’t hardcode paths anymore because we’re deploying to the staging server then to the production server – I need to make the following work or to have its desired effect implemented SOMEhow:

Inside my globalStyles.css I need this to somehow work:

  .grayDecorative
   {
      background-image: url('<?php echo $sitePath; ?>images/egypt-Sphinx.jpg ) ;
      /* other styles here.........*/
   }

I have tried it without the semicolon after $sitePath and still no image.

When I ‘echo’ the $sitePath it DOES have a trailing slash:

    http://localhost/Artifacks/

Answer 1

If you need to run php in your stylesheet, then this should help.

You will have to alter the structure just a bit. Change globalstyles to a php file, and call it in your link line like so: <link rel="stylesheet" type="text/css" href="<?php echo $sitePath ?>globalStyles.php" /> line.

Then, rename the css to globalStyles.php, but add the following to the very top:

<?php
    header("Content-Type: text/css");
    header("Vary: Accept");
?>

You can now add any php that you need to the stylesheet. For example:

background-image: url('<?php echo $sitePath; ?>images/egypt-Sphinx.jpg );

will work, because it will get parsed by the php handler before it is returned as a stylesheet.