CODEWITHSUNDEEP
javascriptphphtmlcss
Joe Kdw
Joe Kdw

Reputation: 2261

Change CSS value by using PHP

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.

Upvotes: 9

Views: 10306

Answers (7)

lflier
lflier

Reputation: 114

If you're using WordPress, you could add an action that would write your styles into the document head. The styles can be made conditional on whatever PHP conditions you like:

<?php
add_action( 'wp_head', 'my_custom_styles' );
function my_custom_styles() {
    ob_start();
        ?>
        <style id="my-custom-styles" type="text/css">
            <?php if ( condition is met ) : ?>
                 .header{ background-color: #fff; color: #000;
            <?php else : ?>
                 .header{ background: none; color: #fff; }
            <?php endif; ?>
        </style>
        <?php
    echo ob_get_clean();
}

You could even write the styles with PHP variables:

.header{ background: none; color: <?php echo esc_attr( $variable ) ?>}

Upvotes: 0

Amit Verma
Amit Verma

Reputation: 41219

Import your database here In css or include db page;

$bg_color=$_row['column name'];
background-color:$bg_color;

And something like this you will be able to change your Background color using the value stored in database

Upvotes: 1

Majid Sadr
Majid Sadr

Reputation: 1071

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"; ?>

Upvotes: 9

kamituel
kamituel

Reputation: 35950

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.

Upvotes: 2

hudsond7
hudsond7

Reputation: 706

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.

Upvotes: 1

Rana Soyab
Rana Soyab

Reputation: 896

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>

Upvotes: 1

Pratik Boda
Pratik Boda

Reputation: 414

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>

Upvotes: 1

Related Questions