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
– Matthew Riches, Commented Jun 8, 2012 at 14:29
Any reason you cannot use jquery instead for this? It would be much easier — chadpeppers
– chadpeppers, Commented Jun 8, 2012 at 14:31

Steve · Accepted Answer · 2020-08-22 23:51:11Z

15

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, 2020 at 23:51

answered Jun 8, 2012 at 14:28

Steve

6424 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vikas Kandari Over a year ago

will it cache ?

Steve Over a year ago

@VikasKandari check this out stackoverflow.com/a/4485194/679184 header("Cache-Control: max-age=2592000"); //30days (60sec * 60min * 24hours * 30days)

Purpletoucan · Accepted Answer · 2012-06-08 14:32:01Z

4

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

answered Jun 8, 2012 at 14:32

Purpletoucan

6,6223 gold badges25 silver badges29 bronze badges

1 Comment

Steve Over a year ago

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

Lawrence Cherone · Accepted Answer · 2012-06-08 14:36:53Z

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;
}

Collectives™ on Stack Overflow

Change css value with php

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related