Loading css value from database

Question

Currently I am working on a site CMS using Yii Framework, where the user can edit the main background color used in the site. When I load the page, I need to query the CSS value (background colors) from the database, put the result to Cookies, and then use those values in my CSS file.

To use PHP variables and Cookies in the CSS file, I renamed the CSS file from main.css to main.php and add: header("Content-type: text/css; charset: UTF-8"); on the top.

The problem is, when I opened the page for the first time, the colors I get from the database are not loaded. I use inspect element and checked the CSS file, and the background color definition is not there. It only appears after I refreshed the page once.

Please tell me what did I do wrong? Any help is appreciated. The relevant code is provided below.

Query and Cookies insertion in protected/components/Controller.php:

public function beforeControllerAction($controller, $action)
{
    if(parent::beforeControllerAction($controller, $action))
    {
        $prog = Programs::model()->find(array(
            'condition'=>'id_program = :program',
            'params'=>array(
                ':program'=>Yii::app()->params->programCode,
            ),
        ));
        Yii::app()->request->cookies['color1'] = new CHttpCookie('color1', $prog->main_color1);
    }
}

The CSS file:

<?php
header("Content-type: text/css; charset: UTF-8");
$color1 = $_COOKIE['color1'];
?>

#header
{
    background-color: <?php echo $color1; ?>;
}

Answer 1

Based on what you have stated, there re two probabilities

1. Your cookie value is set after your main.php is requested

You should have your css file, main.php loaded AFTER you have set the cookie. In order to do that you can use the Controller::beforeRender. In your protected/components/Controller.php you can have this

public function beforeRender($action)
{
    $color = Yii::app()->request->cookies['color1'];

    $prog = Programs::model()->find(array(
        'condition'=>'id_program = :program',
        'params'=>array(
            ':program'=>Yii::app()->params->programCode,
        ),
    ));
    Yii::app()->request->cookies['color1'] = new CHttpCookie('color1', $prog->main_color1);


    return true;
}

Just be sure that nothing bad (like loading the css) happens at that find. In case of overwrite.

2. Your css is cached

In order to have your css loaded dynamically in the place you load main.php (probably your layout) you should add something like this:

<link rel="stylesheet" type="text/css" 
href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.php?q=<?php echo microtime(1);?>">

This way you can be sure that your css is loaded dynamically. However this way is just like having inline <style>s . Your code is a bit more organized and a bit more time consuming.