Change CSS value by using PHP

Question

For example, I have this CSS script:

<style>
.header{
background:none:
color:#fff;
}
</style>

Then, I would like to change the header value to:

<style>
.header{
background-color:#fff:
color:#000;
}
</style>

The values are stored in database. What makes me confused is which should be the best to do that: Using PHP script or CSS or even javascript. I want it changed based on the CSS value from my database which I can change again when I need it (by using PHP script). Perhaps this question is too general but, please give me some scripts which I can perform it well. Thanks for any help.

Answer 1

first, change the extension of your file from (e.g.) style.css to style.php . Then add this to the first line of your css:

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

and after that you can define the value of your background as a variable and change it easily.

background: <?php echo $value; ?>

and in your php file:

<?php value = "#fff"; ?>

UPDATE:

<?php $value = "#fff"; ?>

Answer 2

I think its same for both way.

If you want to use php then you will have to use inline css or style tag and its simple to.

Like

$color = (!dbValue?"defaule value":dbValue);

<style>
.header{
background-color:<?=$color?>:
color:#000;
}
</style>

Answer 3

Make a php page in that write

$row = mysql_fetch_array(mysql_query('select * from table'));


<style>
    .header{ 
        background-color: <?php echo $row['bg_color_from_db']; ?> //change variable
        color:<?php echo $row['color_from_db']; ?>; //change variable
    }
</style>

Answer 4

In order to achieve this you will need to use all three together, I am assuming you are using a LAMP set up on the back end. You will use PHP to first retrieve the values and store them, here is a good post to show this.

Link to Example on Stackoverflow

Once you have your values stored you will then need to create a file to change the DOM using JavaScript. Here is a good starting point produced by Mozilla Developers:

Mozilla JavaScript and CSS

The reason I suggest using JavaScript to achieve this is the ability to listen for events and change the client side in response. Hope this helps.

Answer 5

For maintainability and flexibility reasons, I want to propose the frontend, not a backend solution (also because so far nobody proposed that).

I especially like the approach taken in the Grips library, where you can compile CSS template, passing in variables as an input (i.e. colors), and get the CSS to use. All of that can happen in the browser. And you can use Grips for HTML templating as well.

As I mentioned in the comment, this video is the best introduction to Grips.

Also note that if you want to use Grips in the backend, you can - but it's a JS library, so it wouldn't fit perfectly into your PHP solution.