Question

I’m building a “theme builder” that will dynamically edit a CSS file on-the-fly. I figured using PHP would be the easiest option (willing to consider alternative methods).

My CSS file contains comments after each property like so:

html,body {
    background: #fff url(../images/bg.jpg) repeat-x; /*{bgColor}*/ 
    color: #fff; /*{textColor}*/ 
}

Is it possible to use a replace function that searches for that comment and replaces only the code before it? The user may want to go back once they’ve finished building the theme and change something again, so the comment must remain at all times.

Thanks

Answer 1

Are you generating the CSS on page load, or are you regenerating a CSS file when the theme gets added?

If you generate the CSS on edit of the theme, you could do this;

/*bodybg*/ background: #fff url(../images/bg.jpg) repeat-x; /*/bodybg*/

You could do something like:

$shortCode = bodybg
$cssContents = preg_replace("/(\/\*".$shortCode."\*\/).*?(\/\*\/".$shortCode."\*\/)/i",
                            "\\1 background: #F00; \\2", 
                            $cssContents);

If you generate the CSS on page load, you could do this:

background: {{bodyBgColor}} url(../images/bg.jpg) repeat-x;

$cssContents = str_replace("{{bodyBgColor}}", $color, $cssContents);