Change css value with php

Question

how can I change css of a div displaying some text on my home page from the admin are. I want when I enter a color code in my plugin admin page, the code is updated in the css file. This is a common thing, but can't get a grasp of it.

so here is the css of my div.

#div{

background: #0000;

}

and here is the php code for my admin section.

<?php 
 Background Color: <input type="text" size="20" name="background"
 value="<?php get_option('backgroundchanges');?>"/>

so basically I want the value that I enter in the input to be reflected in the css file.

thanks for any help.

regards, :)

-ROn.

What have you tried? Normally you would store the values in a database and then generate the CSS dynamically and use a rewrite to make it look like CSS (not required but nice) and change the MIME type to text/css. Or you could write the result to a file (less resource heavy) and reference this file. — Matthew Riches, Jun 08 '12 at 14:29
Any reason you cannot use jquery instead for this? It would be much easier — chadpeppers, Jun 08 '12 at 14:31

Steve · Accepted Answer · 2020-08-22T23:51:11.303

14

You should actually not use a .css file and instead use a .php file acting as a .css file. Then you can just set the new color to a variable in the .php css file.

Rename your style.css file to style.php, then add the following to the top of the file:

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

This line tells the browser that the file is CSS instead of HTML. In your HTML files, change the stylesheet references from style.css to style.php. For example:

<link rel="stylesheet" type="text/css"
 media="screen" href="style.php">

citation: http://www.barelyfitz.com/projects/csscolor/

edited Aug 22 '20 at 23:51

answered Jun 08 '12 at 14:28

Steve

605
4
15

ah! thanks dynamic. that worked. exactly what I was looking for. :) – Ronny Kibet Jun 08 '12 at 14:34
will it cache ? – Vikas Kandari Sep 11 '20 at 10:06
@VikasKandari check this out https://stackoverflow.com/a/4485194/679184 `header("Cache-Control: max-age=2592000"); //30days (60sec * 60min * 24hours * 30days)` – Steve Nov 07 '20 at 23:51

score 3 · Answer 2 · answered Jun 08 '12 at 14:32

Putting out a CSS file through PHP will add overhead to the server as you will have dynamic HTML and CSS to create. Given the 'cascading' nature of CSS, any inline style served in the HTML pages will override the CSS, so it's quite likely that you can simply add some inline styles into the pages already being served by PHP. Another option is to update the CSS using Javascript, here is one way to do this, but I don't believe this works in all browsers (I use this in Webkit on iOS):-

var cssStyle = getCSSRule('#styleName');
cssStyle.style.background = redfinedColour;

...using getCSSRule from here:-

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

It would add only a tiny bit of overhead to the server. Milliseconds at most. I've done this before on huge forums with little to no slowdown at all, and it really makes your script more — Steve, Jun 08 '12 at 14:38

score 2 · Answer 3 · answered Jun 08 '12 at 14:36

How I do it is have a content loader controller or script that will load images/css/js and pass them to the browser, you can also control the cache and create javascript dynamically, like the image lists in tinyMCE ect:

Heres an stripped down example but you get the idea.

<?php 
$filename = value passed from url


if(file_exists(SITE_ROOT.'/templates/'.$theme.'/css/'.basename($filename))==true){
    $fullpath=SITE_ROOT.'/templates/'.$theme.'/css/'.basename($filename);
    header("Content-type: text/css");
    $search=array('{SITE_URL}','{BACKGROUND}');
    $replace=array('http://example.com',get_option('backgroundchanges'));
    echo str_replace($search,$replace,file_get_contents($fullpath));
    die;
}else{
    die('CSS file does not exist!');
}

?>

Then have you css files with place holders replaced by your parameters:

#div{
background: #{BACKGROUND} url('{SITE_URL}/stripe.png') repeat;
}

Change css value with php

3 Answers3

Linked