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 14 of 14

Thread: CSS via PHP

  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS via PHP

    The CSS for the site I am working on (test model found here) doesn't want to display in Firefox and Mozilla (not sure about Netscape and Opera). I'm pretty sure this is because the CSS is displayed by PHP. Yes I am using header("Content Type: text/css");, but I don't know what is wrong. Is IE the only browser that likes the header("Content Type: whatever/whatever"); or am I using the wrong MIME type?

    PHP Code:
    <?php
    header 
    ("Content Type: text/css");
    ?>
        
    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }

    #top
    {
    padding: .5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
    }

    #top h1
    {
    padding: 0;
    margin: 0;
    }

    #leftnav
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
    }

    #rightnav
    {
    float: right;
    width: 160px;
    margin: 0;
    padding: 1em;
    }

    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    margin-right: 200px;
    border-right: 1px solid gray;
    padding: 1em;
    max-width: 36em;
    }

    #footer
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
    }

    #leftnav p, #rightnav p { margin: 0 0 1em 0; }
    #content h2 { margin: 0 0 .5em 0; }

  • #2
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhhh..... try this:
    <link rel="stylesheet" type="text/css" href="hh-css.php" media="all" />

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Or...if that doesnt work.

    Or, if you are using Apache you could use htaccess to have php parse css files:
    Code:
    AddType application/x-httpd-php .css

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    PHP Code:
    header("content-type:text/css"); 
    See the hyphen?

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, oen of those little things I never remember. And Circus, I also forgot that (shame shame Kurashu). However, I don't think that having Apache parse CSS for PHP is a wise idea when all my dynamic CSS (in this case not so dynamic yet) will be served by a PHP script.

    Thanks for the help.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    having similar problems

    Didn't seem clear if a sure solution was offered in this thread...

    My server is an IIS machine at the moment, if that brings up any relavant details for people.

    Beyond that, this is my code, which all seems in order. None of these styles are being parsed, however:

    Code:
    <link rel="stylesheet" type="text/css" href="style/skin.php" media="screen,projection" />
    Code:
    <?php header('Content-Type: text/css'); ?>
    
    body {
    	background: #000 url(../images/bgt-<?php echo $sectionColor; ?>.gif);
    }
    
    div#page {
    	background: url(../images/bg-page-<?php echo $sectionColor; ?>.jpg) no-repeat;
    }
    
    ul#nav-main {
    	background: url(../images/bg-nav-<?php echo $sectionColor; ?>.gif) no-repeat;
    }
    
    #nav-main li#about-us {
    	background-image: url(../images/bg-nav-about-<?php echo $sectionColor; ?>.jpg);
    }
    Bueller???

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Duh... how is the stylesheet supposed to know what the value of $sectionColor is...

    Guess I'll have to output those dynamic styles in betwixt some <style></style> tags...

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've only just learned that this is possible to do, i'd been wanting to use php in my css for a while now.

    Anyway, i've given it a go and it's not working. My index.php starts off as so..

    PHP Code:
    <?php
    $logo 
    "logo.png";
    $color "#CC6600";
    include (
    './header.php');
    ?>
    and my css is as so....

    PHP Code:
    <?php header('Content-Type: text/css'); ?>

    body {
        margin: 0px;
        padding: 0px;
        width: auto;
        background: <?php echo $color?>;
        color: white;
    }
    the variables in the index.php get set before the header (and as such the css file) are called, so they should be able to pick those up.

    Can anyone tell me where i've gone wrong?

    //done some troubleshooting, and it appears that the variable isn't being picked up by the css page. I guess a workaround for this would be not to use a style sheet, but instead use an include file, and have the style sheet as follows...

    PHP Code:
    <style>body {
        margin: 0px;
        padding: 0px;
        width: auto;
        background: <?php echo $color?>;
        color: white;
    }</style>
    Apart from making nasty looking source code, are there any other drawbacks to this method?
    Last edited by Snetty; 07-13-2005 at 04:47 PM.

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Location
    West Midlands, UK
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not 100% sure on this but I assumed that stylesheets were stored in the local browser cache, so I assume if you redeclare that same styling inline in each of your files you won't get the benefit of being able to download just one single .css file, ergo it might slow things down a little. Of course, whether that makes a difference depends on how much styling you have in there, a few k you can probably live with.

    Going back to your example above, have you tried changing this:
    PHP Code:
    <?php header('Content-Type: text/css'); ?> 

    body { 
        margin: 0px; 
        padding: 0px; 
        width: auto; 
        background: <?php echo $color?>
        color: white; 
    }
    To something like this, which should make sure the variable is set before it's output:
    PHP Code:
    <?php
    $style 
    '
        body { 
            margin: 0px; 
            padding: 0px; 
            width: auto; 
            background: ' 
    $color 
            color: white;
        }'
    ;
        
    header('Content-Type: text/css');
    print 
    $style;
    ?>
    Also, you have to include this differently, you can't just include() the above script, as mentioned you have to use it like this in your man page:
    PHP Code:
    <link rel="stylesheet" type="text/css" href="script.php" /> 
    Where "script.php" is the name of the script that generates your css file.

    Hope that helps
    Last edited by delinear; 07-13-2005 at 05:04 PM.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Snetty
    //done some troubleshooting, and it appears that the variable isn't being picked up by the css page. I guess a workaround for this would be not to use a style sheet, but instead use an include file, and have the style sheet as follows...

    PHP Code:
    <style>body {
        margin: 0px;
        padding: 0px;
        width: auto;
        background: <?php echo $color?>;
        color: white;
    }</style>
    Apart from making nasty looking source code, are there any other drawbacks to this method?
    I had a brief play around with PHP in CSS a while back and I came to two conclusions…

    If you are going to implement PHP with embedded CSS, then it's best (read: 'cleanest') if you only embed the line which uses PHP.

    i.e.

    Your external css…
    Code:
    body {
    margin: 0px;
    padding: 0px;
    width: auto;
    background: #fff; /* a default colour */
    color: white;
    }
    Your embedded css…
    Code:
    <style type="text/css">
    
    @import url(main.css);
    
    body {
    background-color: <?php echo $color; ?>;
    }
    
    </style>

    I also hit the problem of variables (passed via $_POST or $_GET) not reaching into the php within the css.
    I got round this by declaring the php variables as session variables.

    e.g.

    markup…
    Code:
    <?php
    session_start();
    $_SESSION['logo'] = "logo.png";
    $_SESSION['color'] = "#CC6600";
    include ('./header.php');
    ?>
    external css…
    Code:
    <?php
    
    header('Content-Type: text/css');
    session_start();
    
    ?>
    
    body {
        margin: 0px;
        padding: 0px;
        width: auto;
        background: <?php echo $_SESSION['color']; ?>;
        color: white;
    }
    N.B. Be sure to add session_start() to each php enabled document which references those variables.

    By using sessions, I was able to reference variables from within any php-enabled document, whether it was the source markup document, the css or an external js file.

    I prefer the above method over others as it allows me to keep the externa css file (css.php) looking as much like a normal .css file as possible.


    N.B.
    It may be advantageous to set up a fallback value for the session variables in the css so that the css file still validates if tested directly (i.e. without first having had the parent markup document establish the session).

    e.g.

    external css…
    Code:
    background-color: <?php if (isset($_SESSION['pcolor'])) { echo $_SESSION['pcolor']; } else { echo '#fff';} ?>;

  • #11
    New Coder
    Join Date
    May 2005
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for the help guys, i've resorted to just using embedded css now. Thanks anyway.

  • #12
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In the example posted above eventually evolved into using $_GET and a switch statement for the different media. I've also written a script that gets the CSS from a database and displays it and all the other CSS settings are set as alternates.

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Location
    West Midlands, UK
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kurashu
    I've also written a script that gets the CSS from a database and displays it and all the other CSS settings are set as alternates.
    That sounds interesting - if you had a site with user registration you could allow users to individually set the colour of pretty much everything in the website, exactly the way you can set the colour of windows, message boxes, text, etc in your operating system.

  • #14
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah. It still needs a bit of work though. I'm thinking that if I ever finish my blog, I'll add that to it.


  •  

    Posting Permissions

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