Moorcam Posted February 25, 2023 Share Posted February 25, 2023 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 Quote Link to comment Share on other sites More sharing options...
kicken Posted February 25, 2023 Share Posted February 25, 2023 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> Quote Link to comment Share on other sites More sharing options...
maxxd Posted February 25, 2023 Share Posted February 25, 2023 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... Quote Link to comment Share on other sites More sharing options...
gizmola Posted March 1, 2023 Share Posted March 1, 2023 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.