Changing CSS with PHP

[Moorcam]

Hi guys,

I want to be able to dynamically change a site's color scheme using JS Colorpicker.

I have the JS amd form etc all set and the color is updating in the database. However, I need to be able to use that database entry to change a color hex in a xss file.

I am using Codeigniter 3

Here is the HTML Form:

<div class="tab-pane" id="color">
                            <?php echo form_open(base_url().'admin/setting/update',array('class' => 'form-horizontal')); ?>
                            <div class="box box-info">
                                <div class="box-body">
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">Color </label>
                                        <div class="col-sm-4">
                                            <input type="text" name="footer_bg" class="form-control jscolor" value="<?php echo $setting['footer_bg']; ?>">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-6">
                                            <button type="submit" class="btn btn-success pull-left" name="form_color">Update</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php echo form_close(); ?>
                        </div>

I have the following on the top of the style.php file:

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

?>

This all works fine if I say have the following:

<?php
header("Content-type: text/css");
$footer_bg = '#333';
?>

background-color: <?php echo $footer_bg; ?>;

However, if I try to call the color from settings database table it won't work.

Can anyone help with this?

Cheers,

Dan

[kicken]

So long as you're generating a valid CSS file as the output of your script, it wouldn't be any different than a normal css file from the browser's perspective.  Load your CSS file directly and make sure it's outputting valid CSS and not any PHP errors/warnings etc.  You'll also need to look out for potential cache issues, the browser may cache the css output which would make it not change.

As an alternative to a dynamic CSS file, you could have a static css file that uses CSS variables, then override those variables with the values from the DB in your page headers (or a smaller dynamic file).  This would allow the bulk of your CSS rules to remain cached and only the variables need to be reloaded.

Example:

style.css:

/* Default values */
:root {
    --bg-color: #aaf;
    --fg-color: #000;
}

body {
    color: var(--fg-color);
    background-color: var(--bg-color);
}

page.php:

<?php
//Load $BG/$FG from DB, then:
?>
<link rel="stylesheet" href="style.css">
<style>
  :root {
    --bg-color: <?=$BG?>;
    --fg-color: <?=$FG?>;
  }
</style>

 

[maxxd]

For my money, CSS variables (custom properties will sometimes get more hits on google) is the way to go here. Deal with any changes using Javascript, which can interact with the CSS variables directly and not have to wait for page reloads, etc. I'd recommend using php to inject the values into inline Javascript instead of inline CSS, though that's probably a weird personal thing. In my brain keeping the CSS in one place is easier to read, although I expect some inline Javascript. Like I said, it's a weird personal thing...

[gizmola]

Aside from the interesting comments made by kicken and maxxd, it's hard to help you with a database problem when you provided us with no actual code that read from your database. 

I have a lot of questions, but it goes without saying that, if your css file is being generated dynamically with database variables interpolated, changing something in the database doesn't automagically cause the generated css file to change, nor will it make the source page reload, nor will it clear the browser cache of the css file.   By default stylesheets will be cached, so it's common to have to use some sort of cache busting scheme to get around this behavior.  

For example, lets' asssume your script is named style.php.  You might need the main html page to add a url parameter like:

<link rel="stylesheet" href="style.php?v=something">

You could do something like generate a random string for the parameter like this:

<link rel="stylesheet" href="style.php?v=<?= bin2hex(random_bytes(8)) ?>">

This would essentially defeat any caching of the css file, but also -- you get no css caching

I'm not sure what your actual issue is, but this might be related to whatever you are experiencing, although you also may have database query and fetch issues we don't know about.