Convert JSON to CSS with PHP

Question

I have some encoded JSON data stored in my database, like the following:

{".main-header":"{\"color\":\"rgb(5, 213, 255)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"35px\"}",".main-header-free":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-lunch-price":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-week":"{\"color\":\"rgb(62, 214, 24)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-week-week":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".day-name":"{\"color\":\"rgb(237, 129, 5)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".lunchtext":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"Baskerville\",\"font-size\":\"13px\"}",".puffheading":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".pufftext":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"Baskerville\",\"font-size\":\"13px\"}",".re_name":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"'Times New Roman'\",\"font-size\":\"13px\"}",".re_address":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"'Times New Roman'\",\"font-size\":\"13px\"}",".re_phone":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"'Times New Roman'\",\"font-size\":\"13px\"}",".re_webpage":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"'Times New Roman'\",\"font-size\":\"13px\"}","html":"{\"background\":\"none\"}"}

This is how I would do it with jquery:

var currentStyle = {{ $theme->css}};

$.each(currentStyle, function( index, value ) {
   $(index.toString()).css(jQuery.parseJSON(value)));
});

In my Controller, I render the view and then converts it to a PDF:

    $view = View::make('pdf.template')
                ->with('css', $css);

    $pdf = PDF::loadHTML($view);
    return $pdf->stream();

This means that the view rendered will return the DOM in its initial state, I cannot use any JavaScript to apply the JSON CSS with say jquery, because of that.

So can I directly convert this JSON to CSS through PHP somehow?

Have you tried to slip in a <style>your css here</style>

colburton
– colburton

2014-06-17 10:57:57 +00:00
Commented Jun 17, 2014 at 10:57 — colburton
– colburton, Commented Jun 17, 2014 at 10:57
Updated question... Maybe you understand better now.

user3121056
– user3121056

2014-06-17 11:00:56 +00:00
Commented Jun 17, 2014 at 11:00 — user3121056
– user3121056, Commented Jun 17, 2014 at 11:00

Steve · Accepted Answer · 2014-06-17 11:15:48Z

You will need to generate valid css in your php script:

$str = '{".main-header":"{\"color\":\"rgb(5, 213, 255)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"35px\"}",".main-header-free":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-lunch-price":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-week":"{\"color\":\"rgb(62, 214, 24)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".sub-header-week-week":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".day-name":"{\"color\":\"rgb(237, 129, 5)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".lunchtext":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"Baskerville\",\"font-size\":\"13px\"}",".puffheading":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"NeutraText-Book\",\"font-size\":\"22px\"}",".pufftext":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"Baskerville\",\"font-size\":\"13px\"}",".re_name":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"\'Times New Roman\'\",\"font-size\":\"13px\"}",".re_address":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"\'Times New Roman\'\",\"font-size\":\"13px\"}",".re_phone":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"\'Times New Roman\'\",\"font-size\":\"13px\"}",".re_webpage":"{\"color\":\"rgb(0, 0, 0)\",\"background-color\":\"rgba(0, 0, 0, 0)\",\"font-family\":\"\'Times New Roman\'\",\"font-size\":\"13px\"}","html":"{\"background\":\"none\"}"}';
$arr = json_decode($str, true);
$css='';
foreach($arr as $key => $val){
    $css.=$key . '{' . PHP_EOL;
    foreach(json_decode($val, true) as $k => $v){
        $css.=$k . ':' . $v . ';' . PHP_EOL;
    }
    $css.= '}' . PHP_EOL;
}
//to see result
//echo '<pre>' . $css . '</pre>';
$view = View::make('pdf.template')
            ->with('css', $css);

$pdf = PDF::loadHTML($view);
return $pdf->stream();

Then in your view echo $css withing <style>...</style> tags.

Note that the new lines (PHP_EOL) are only for formatting, and are not needed.

If you try decode the string provides, you can see this fails, as it is isn't decoded that the element attributes are separated.

Collectives™ on Stack Overflow

Convert JSON to CSS with PHP

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related