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/