Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    my css file not picking up php variables??

    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.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    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.

  • #3
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    ^ 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.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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??
    Last edited by AndrewGSW; 01-18-2013 at 07:45 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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.

    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,480
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by jeddi View Post
    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.
    Last edited by felgall; 01-18-2013 at 08:10 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 properlyPLEASE 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.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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;
    }
    Last edited by AndrewGSW; 01-18-2013 at 08:48 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks,

    I read up on floats again - a good reminder


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •