create css file with php

Question

I need to create a dowloadable css file depending on variables changed on the front end.

Note: this is shortened example.

CSS:

.color: red; width: incrementvalue();

In html id have an inout field to adjust the width, example:

HTML

<input type="text" value="3">

Id then have a function that would run on change of the input that would do the following:

$('input').on ('change', function (){return $(this).val () * 2});

Yes the above function is in jquery but I dont really know php and im told this should be done in php.

Any ideas?

Why you need it in PHP? I'd do it in PHP if the value needed to be saved somewhere (ex Database), but otherwise Jquery is the best solution. — Gerard Rovira
– Gerard Rovira, Commented Jul 4, 2013 at 7:48
It needs to create a downloadable css file, how can I do that with javascript/jquery? @Rov — Shannon Hochkins
– Shannon Hochkins, Commented Jul 4, 2013 at 10:21

Expedito · Accepted Answer · 2013-07-04 11:23:19Z

2

You can create a regular PHP file starting with a CSS header:

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

After that, you can just echo out the CSS content. One way to do that is with heredoc syntax with a template system. The template puts variable values within '%%' percentage symbols as delimiters. Here's an example:

$css = <<<EOTAAA
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: %bg_color%;
    background-image: url(images/bg.gif);
    background-repeat: repeat-x;
    font:  14px Arial, Helvetica, sans-serif;
}
div.my_div{
    color: red;
    width: %width%;
}

EOTAAA;

$search = array('%bg_color%', '%width%');
$width = width_function();//some function for determining width
$bg_color = bg_function();//some function for determining background color
$replace = array($bg_color, $width);
echo str_replace($search, $replace, $css);

Download Link:

In your HTML, create a link something like this with the URL of the file that will handle the request:

<a href="HTTP://www.example.com/download.php">Get CSS</a>

And then in your PHP file, change the header information to the following:

header("Content-Disposition: attachment; filename=\"custom.css\"");
header('Content-type: text/css');
header("Content-Type: application/force-download");
header("Connection: close");

edited Jul 4, 2013 at 11:23

answered Jul 4, 2013 at 8:00

Expedito

7,8095 gold badges32 silver badges45 bronze badges

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

4 Comments

Shannon Hochkins Over a year ago

How would this create like a link for them to download though? So if I have a button that says download css, where would or how coukd I implement that?

Shannon Hochkins Over a year ago

So this would create a download.css file? I dont want them to download a php file, sorry if im confused

Expedito Over a year ago

It's a PHP file that produces a CSS file. Look at the filename in the header function: "custom.css." You can change that to whatever you like.

Shannon Hochkins Over a year ago

It worked brilliantly, although now that I've learnt this, I may have to revisit, because I need the download button to actually download a few files at once, which I'd like to zip them up etc

Rohan Kumar · Accepted Answer · 2013-07-04 07:51:47Z

0

Try this,

<?php
   header("Content-type: text/css; charset: UTF-8");
   $my_width= incrementvalue();
?>

.phpClass{color: red; width: <?php echo $my_width;?>}

Save this file as style.php

Usage

<link rel='stylesheet' type='text/css' href='style.php' />

Read http://css-tricks.com/css-variables-with-php/

answered Jul 4, 2013 at 7:51

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

Shannon Hochkins Over a year ago

But this would be a php file that they wuld download right not css?

Martin Strouhal · Accepted Answer · 2013-07-04 07:56:58Z

0

I can see you are binding change event. That probably means you want to change width dynamically. You can not script on client-side using PHP. PHP is server language which is useless in this case. If you want to change something dynamically, you have to use client scripting. jQuery (or Knockour.JS) is probably the easiest solution.

answered Jul 4, 2013 at 7:56

Martin Strouhal

1,2341 gold badge13 silver badges23 bronze badges

1 Comment

Shannon Hochkins Over a year ago

Sorry I did write that a little weird, jquery will update the ui on the page, kind of like a demo of what they will be downloading, but there will be a button that would generate a file using this information for them to download when the click said button

eonj · Accepted Answer · 2013-07-04 08:05:28Z

0

You'd better increase width of the input box with javascript. Using PHP will definitely increase network load - the web browser should send request for each change of input box.
If you really need to refresh of stylesheet, <link id='dynamic_stylesheet' rel='stylesheet' type='text/css' href='style.php?length=3' /> and later change href of $('#dynamic_stylesheet'). In this case, you'd better just load extra styles of different selectors and change the class of input tag later.
jQuery event callback function should return a boolean value representing whether it overrides the pre-defined behavior.

answered Jul 4, 2013 at 8:05

eonj

1191 gold badge2 silver badges12 bronze badges

1 Comment

Shannon Hochkins Over a year ago

I do want it to be a css file though not a css file that they download?

Collectives™ on Stack Overflow

create css file with php

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related