Return to Snippet

Revision: 51227
at October 11, 2011 10:38 by FatFolderDesigner


Updated Code
// php code that does the work
<?php
require('../../../wp-load.php');
function colorize($m){
	// Your code to get the new color goes here, in this case it's grabbing a stored value from a Wordpress plugin.
	$c=get_option('tc_'.$m[4]);
	$m[3] = $c;
	if($c!=''){
		return $c;
	}else{
		return $m[0];
	}
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));
echo $css;
?>

// example of the css before colorization, note the comment
element {
	padding: 0;
	margin: 0 10px;
	color: #000000;/*#c_t#*/
}

// how it looks after colorization, note the color.
element {
	padding: 0;
	margin: 0 10px;
	color: #FF0000;
}

// older version, doesn't grab color codes as well, missing transparent keyword.
<?php
function colorize($v){
	//whatever code you use to turn variable $v into color $c, very dependent on your specific implementation.
	return $c;
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})~sU','',preg_replace_callback('~#[A-F0-9a-f]{3,8}(?=;/\*#([\d\w\s]+)(:(.+))?#\*/)~U','colorize',$css));
echo $css;
?>

Revision: 51226
at October 11, 2011 10:36 by FatFolderDesigner


Updated Code
// php code that does the work
<?php
require('../../../wp-load.php');
function colorize($m){
	$c=get_option('tc_'.$m[4]);
	$m[3] = $c;
	if($c!=''){
		return $c;
	}else{
		return $m[0];
	}
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));
echo $css;
?>

// example of the css before colorization, note the comment
element {
	padding: 0;
	margin: 0 10px;
	color: #000000;/*#c_t#*/
}

// how it looks after colorization, note the color.
element {
	padding: 0;
	margin: 0 10px;
	color: #FF0000;
}

// older version, doesn't grab color codes as well, missing transparent keyword.
<?php
function colorize($v){
	//whatever code you use to turn variable $v into color $c, very dependent on your specific implementation.
	return $c;
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})~sU','',preg_replace_callback('~#[A-F0-9a-f]{3,8}(?=;/\*#([\d\w\s]+)(:(.+))?#\*/)~U','colorize',$css));
echo $css;
?>

Revision: 51225
at September 18, 2011 06:40 by FatFolderDesigner


Initial Code
// php code used to do all the work
<?php
function colorize($v){
	//whatever code you use to turn variable $v into color $c, very dependent on your specific implementation.
	return $c;
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})~sU','',preg_replace_callback('~#[A-F0-9a-f]{3,8}(?=;/\*#([\d\w\s]+)(:(.+))?#\*/)~U','colorize',$css));
echo $css;
?>

// example of the css before colorization, note the comment
element {
	padding: 0;
	margin: 0 10px;
	color: #000000;/*#c_t#*/
}

// how it looks after colorization, note the color.
element {
	padding: 0;
	margin: 0 10px;
	color: #FF0000;
}

Initial URL
http://fatfolderdesign.com/382/css/css-minifier-and-color-changer

Initial Description
With this file you can load stylesheets and minify the code while changing colors. The stylesheets are loaded using file_get_contents and you can attach them one after another if you have multiple sheets. The colors are replaces based on a variable thats commented out of the css code, an example of the way thats formatted is below the cod block. The minification is done with a regular expression that removes all comments, line breaks, and un-needed spaces. The color replacement is done with a different regular expression and the colorize function that takes the variable and returns a color. You can use whatever method you want to get the color, but I personally am using variables from a Wordpress plugin (and stores using the Wordpress options function) to give users color customizability of their site.

If you have any questions or comments you can post a comment here or at the link, there is also a more in depth explanation at the link if your interested.

UPDATE: improved it's ability to find colors in the CSS declaration, also added the "transparent" keyword in as something it can find.

Initial Title
CSS minifier and color replaces

Initial Tags
css, simple, color

Initial Language
PHP