my css file not picking up php variables??

jeddi · 01-18-2013, 06:02 PM

Hi,

I read somewhere that I could use php to place
variables in my css style file to make it dynamic.

So I have a file called "a_style.php"

First I get my variables from the database, and manipulate them a bit:

PHP Code:


			
$cont = 'n';    

$width = "1000";

$widthpx = $width.'px';



$margin = $body_offset;

$marginpx = $margin.'px';



$name_pospx = $name_pos.'px';

$head_heightpx = $head_height.'px';



$name_sizepx = $name_size.'px';

$side_sizepx = $side_size.'px';

Then I link my style file:

Code:

<Head>
<link rel='stylesheet' type='text/css' href='a_style.php' >

My code in the "a_style.php" is like this:

PHP Code:


			
<?php

    header("Content-type: text/css; charset: UTF-8");

?>



* {

    margin: 0;

    padding: 0;

    }



html{

   height:100%;

   font-family:<?php echo $body_font; ?>;

    }





.main {

    width:<?php echo $widthpx; ?>;

    padding:0 50px 0 50px; 

    background-color:#<?php echo $body_bk_col; ?>;    

    }

    

.main_img {

    width:<?php echo $widthpx; ?>;

    padding:0 50px 0 50px; 

    }

When I run my script I noticed that my background color wasn't there
and then when I displayed the css file, I saw that the values were not
getting picked up.

The web page is:

http://professional-world.com

and the style sheet is:

http://professional-world.com/a_style.php

How do I remedy this ?

Thanks.

.

kbluhm · 01-18-2013, 06:33 PM

It is a totally separate file that is loaded independently and has no way of grabbing variables that are defined in another file. You'll need to move the variables to a file that is included in both.

Fou-Lu · 01-18-2013, 06:47 PM

^ this.
Look at how you get it into the site: <link rel='stylesheet' type='text/css' href='a_style.php' >. This is a client side fetch, not a server side one. PHP and the webserver has done its job already, and sent the HTML to the client. The client then sees the external href for the stylesheet and requests that the server provides a_style.php.
So as mentioned, completely independent requests.

AndrewGSW · 01-18-2013, 07:42 PM

I understand it is not advisable but isn't it possible?

Code:

HTML file:
<link rel="stylesheet" type="text/css" href="a_style.css.php">

a_style.css.php file:
<?php
header("Content-type: text/css; charset=utf-8");
//your php + css code goes here
?>

We have to use PHP to append a query variable to the end of the href

PHP Code:


			
href="a_style.css.php?version=<?php echo $some_number ?>">

otherwise it will use the version in the browsers' cache.

But why bother? That's what classes, ids, etc., are for??

jeddi · 01-18-2013, 07:47 PM

Yes - I see exactly what you are saying.

So I think the best way to deal with this is to
put the css that has variables inside the <Head> of the
index.php using:

Code:

<style type="text/css" media="all">

...
styles
...

</style>

Should work OK, I guess.

Thanks.

.

AndrewGSW · 01-18-2013, 07:58 PM

Well, that's one way. But if you had enough classes and ids to choose between (when constructing the HTML) then you wouldn't need to use PHP variables in your css?! Just apply different class-names as you build the page.

If you wanted to apply one of two different sets of CSS rules then you could use PHP to attach one .css file or the other to the page.

I don't see the need to embed PHP in a css file

. To me, it adds an unnecessary level of complexity.

felgall · 01-18-2013, 08:08 PM

Quote:

Originally Posted by jeddi

Then I link my style file:

Code:

<Head>
<link rel='stylesheet' type='text/css' href='a_style.php' >

You are correct with everything to that point.

The problem is that your code in the "a_style.php" doesn't define the PHP variables before using them. The adjustment I have made below shows you where you need the extra code to get the styles to work.

PHP Code:


			
<?php
    header("Content-type: text/css; charset: UTF-8");

 // set values here or place these in an include
$body_font = '';
$body_bk_col = '';

?>

* {
    margin: 0;
    padding: 0;
    }

html{
   height:100%;
   font-family:<?php echo $body_font; ?>;
    }


.main {
    width:<?php echo $widthpx; ?>;
    padding:0 50px 0 50px; 
    background-color:#<?php echo $body_bk_col; ?>;    
    }
    
.main_img {
    width:<?php echo $widthpx; ?>;
    padding:0 50px 0 50px; 
    }

Possibly the only change you need is to move the include for the file that manipulates the values form the DB to include into the styles from the PHP file generating the HTML into the PHP file generating the CSS.

jeddi · 01-18-2013, 08:19 PM

Thanks for the advice.

The only thing is - the user selects the background color so I
can not have different css files for every combination.

I am baffled though

I moved the variables out to the css as a posted but the
background color still doesn't come up

This is the code as seen in the source:

Here is the page - no color

http://professional-world.com/

PHP Code:


			
<!DOCTYPE HTML>

<html>

<head>

<title>Professional World</title>

<meta name="keywords" content="A Website">

<meta name="description" content="The Professional World Community">

<meta name="revisit-after" content="2 days">

<meta name="robots" content="all, index, follow">

<meta name="author" content="SimplePage.net">

<meta name="Rating" content="General">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="shortcut icon" href="/sys_images/favicon.png" type='image/png'>

<link rel="icon" href="/sys_images/favicon.png" type='image/png'>

<link rel='stylesheet' type='text/css' href='a_style.css' >



<style type="text/css" media="all">

html{

   height:100%;

   font-family:Helvetica,Arial,sans-serif;

    }

    

.main {

    width:1000px;

    padding:0 50px 0 50px; 

    background-color:#95BBF2;    

    }

    

.main_img {

    width:1000px;

    padding:0 50px 0 50px; 

    }

</style>        

    

    

</head>

<body>



<noscript>

 <p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>

</noscript>





<div class="main" id="mainC">

            

  <div style="float:left; width:1000px; height:260px; margin:20px 50px 0 50px; ">

    

    <div style="float:left; margin:10px 0 0 10px ; "> 

    <span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Professional World</span>

    <span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The Professional World Community</span>

    <br><br>

      <div id="head_image" style = "margin: 0 auto;"><img alt="Professional World" title = "Professional World" src="/images/trees.jpg" ></div></div>

           <Div style="float:left; width:80%; margin:20px auto; padding: 10px; border:1px solid darkblue;" >

              <div style = "margin: 10px auto;">

    <span><a href="http://www.simplepage.net">SimplePage.net</a>&nbsp; &nbsp; &nbsp; &nbsp;

    <a href="http://the_link.htm">Privacy Policy</a>&nbsp; &nbsp; &nbsp; &nbsp;

    <a href="http://the_link.htm">Terms and Conditions</a>&nbsp; &nbsp; &nbsp; &nbsp;

    <a href="http://the_link.htm">Earnings Disclaimer</a>

      </span>

      </div>

       </div>

     </div>

   </div>

The php variables seem to have got through,
but are not getting applied.

Can anyone see what I did wrong ??

Thanks.

.

AndrewGSW · 01-18-2013, 08:35 PM

Clear your browsers cache. This is why you need to apply a query-string variable to your css-link.

Edited: Oh I see you've added an internal stylesheet. However, clearing the browser cache always good when testing.

AndrewGSW · 01-18-2013, 08:44 PM

You are suffering div-collapse because your DIV only contains floated elements. That is, its height is collapsing to 0, which is why you don't see the background colour. Look at Collapsing on this page.

Code:

#mainC {
    margin: 0px auto;
    overflow: hidden;
}

jeddi · 01-19-2013, 09:37 AM

Thanks,

I read up on floats again - a good reminder

.