CSS Preview?


I am currently using this code to change the css on the blogs on my mu system (http://pengchat.com)



Plugin Name: Custom CSS

Plugin URI: http://rizapn.blogsome.com/

Description: A plug-in to add a Custom CSS capability to WordPress MU. Custom CSS will "overwrite" a needed CSS value(s) from its original themes.

Author: Riza Purwo Nugroho

Version: 0.3b

Author URI: http://rizapn.blogsome.com/


add_action('wp_head', 'custom_css_add_line');

function custom_css_add_line()


$base = get_option('fileupload_url');

$file = preg_replace('/.+?themes//','',get_stylesheet_uri());

$file = str_replace('/','_',$file);

?><link rel="stylesheet" href="<?php echo $base; ?>/themes/<?php echo $file; ?>" type="text/css" media="screen" /><?php


add_action('admin_menu', 'custom_css_add_menu');

function custom_css_add_menu()


add_submenu_page('themes.php', 'Custom CSS', 'Custom CSS', 10, 'custom_css', 'custom_css_do_action');


function custom_css_do_action()


global $blog_id;


$theme = get_current_theme();

$style_uri = get_stylesheet_uri();

$tfile = $_GET;

if (empty($tfile)) $tfile = $_POST;

if (empty($tfile)) $tfile = preg_replace('/^.+?themes/(.+?)/.+$/','$1',$style_uri);

$real_file = ABSPATH.get_option('upload_path')."/themes/${tfile}_".basename($style_uri);

if ($_POST=='update')


$content = stripslashes($_POST);

if (!file_exists($real_file)) wp_mkdir_p(dirname($real_file));

if (empty($content)) {

if (file_exists($real_file)) {


?><div class="error"><p><?php echo __('File deleted !'); ?></p></div><?php



else {

$f = fopen($real_file, 'w+');

if ($f !== FALSE) {

fwrite($f, $content);


?><div id="message" class="updated fade"><p><?php _e("File edited successfully.") ?></p></div><?php


else { ?><div class="error"><p><?php echo __('Error processing your request.'); ?></p></div><?php }



elseif (file_exists($real_file)) {

$f = fopen($real_file, 'r');

$content = fread($f, filesize($real_file));

$content = htmlspecialchars($content);


if (empty($content))

$content = "/* Custom CSS - write your own CSS values to overwrite the ones from $theme */n".



<div class="wrap">

<h2><?php _e('Edit Custom CSS'); ?></h2>

<form method="post" action="themes.php?page=custom_css">

<input type="hidden" name="action" value="update" />

<input type="hidden" name="tfile" value="<?php echo $tfile; ?>" />

<div class="tablenav">

<div class="alignleft"><big><?php echo basename($real_file); ?></big></div>

<br class="clear" />


<br class="clear" />

<div id="templateside">

<h3 id="bordertitle"><?php _e("Custom CSS Files"); ?></h3>


    $dir = dirname($real_file);

    $num = 0;

    if (is_dir($dir) && ($d = opendir($dir)))

    while ($style_file = readdir($d))


    $dfile = "$dir/$style_file";

    if (is_file($dfile) && preg_match('/(.+?)_style.css$/',$style_file,$MATCH))

    { print "

  • $style_file
  • n"; $num++; }


    if ($num<=0) print "

  • No file found !
  • n";




<textarea cols="80" rows="25" name="newcontent" id="newcontent" tabindex="1"><?php echo $content; ?></textarea>



<p class="submit">

<input type="submit" name="submit" value="<?php echo __('Update File'); ?>" tabindex="2" />




<div class="clear">   </div>





Do you think this can be edited to add it so users can preview it?