Dynamic CSS with PHP based on database

Question

found a couple answers here on StackOverflow and used them as my models, but I must be missing something. I'm trying to set a couple of background colors dynamically in CSS based on what is in my database, but it's not working - when I check Inspect Element in Chrome, background-color has a line through it and a warning mark for 'Invalid property value'.

Here's my code; it's in two separate files - the first is in the header include file, and the second is in the linked .php / css-esque file.

Header include: [Edited 4/29 to include session code]

session_start();
// check if $_SESSION was set before
if (!isset($_SESSION['email'])) {
header("Location: bad_login.php");
exit();
}

$_SESSION['companyid'] = $_POST['companyid'];
$companyID = $_SESSION['companyid'];
$email = $_SESSION['email'];

require_once('../includes/_connection.inc.php'); 
$connect = dbConnect('read');
$sql = 'SELECT colorone, colortwo, logo
        FROM companies
        WHERE companyid = ' . $companyID;
$result = $connect->query($sql) or die(mysqli_error());
$row = $result->fetch_assoc();
$colorOne = '#' . $row['colorone'];
$colorTwo = '#' . $row['colortwo'];
$carrierLogo = '/companylogos/' . $row['logo'];

PHP/CSS file:

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

?>

#main {
    width: 85%;
    margin: 0 auto;
    padding: 0.75em 0;
}

#colorOne {
    width: 100%;
    height: 12px;
    background-color: <?php echo $colorOne; ?>;
}

#colorTwo {
    width: 100%;
    height: 7px;
    background-color: <?php echo $colorTwo; ?>;
}

EDIT 4/29:

This is the CSS generated:

#main {
    width: 85%;
    margin: 0 auto;
    padding: 0.75em 0;
}

#colorOne {
    width: 100%;
    height: 12px;
    background-color: ;
}

#colorTwo {
    width: 100%;
    height: 7px;
    background-color: ;
}

I also echoed the variable back in the html so I know that there should be something in the variable. Should I be opening the database and assigning the variable inside the css.php file?

CSS/PHP is linked this way in header:

<link type="text/css" rel="stylesheet" href="../css/carrier.php">

Answer 1

Instead of using the .css file extension, use .php

in the html file: is it linked to .php?

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

in the style.php add

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

Now you can set up variables for whatever you like:

source

Edit:

Don't forget about session_start(); since you're using sessions (I don't understand how, since nothing gets posted to css/carrier.php you should rather have it in session from a different file & then just use the $companyID = $_SESSION['companyid']; $email = $_SESSION['email'];).

is this the way your code looks?

        <?php
    session_start();
        header("Content-type: text/css; charset: UTF-8");
    $_SESSION['companyid'] = $_POST['companyid'];
    $companyID = $_SESSION['companyid'];
    $email = $_SESSION['email'];

    require_once('../includes/_connection.inc.php'); 
    $connect = dbConnect('read');
    $sql = 'SELECT colorone, colortwo, logo
            FROM companies
            WHERE companyid = ' . $companyID;
    $result = $connect->query($sql) or die(mysqli_error());
    $row = $result->fetch_assoc();
    $colorOne = '#' . $row['colorone'];
    $colorTwo = '#' . $row['colortwo'];
    $carrierLogo = '/companylogos/' . $row['logo'];
    ?>

#main {
    width: 85%;
    margin: 0 auto;
    padding: 0.75em 0;
}

#colorOne {
    width: 100%;
    height: 12px;
    background-color: <?php echo $colorOne; ?>;
}

#colorTwo {
    width: 100%;
    height: 7px;
    background-color: <?php echo $colorTwo; ?>;
}