Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
profile
Name: klenwell
Home: San Diego, California, United States
About Me: designer, programmer, wordsmith
Tuesday, August 29, 2006
CSS: font family vox
I'm always on the look-out for cool non-image-based fonts on websites. This from one of the vox profile skins:
.vox
{
font-family: "Century Gothic", Futura, Arial, Verdana, sans-serif;
font-weight: normal;
}
{
font-family: "Century Gothic", Futura, Arial, Verdana, sans-serif;
font-weight: normal;
}
Monday, August 28, 2006
CSS: .microquote
Used in conjunction with the klenwellsos html quoter, a (visually) compact way to store textual information on a web page:
Example (as textarea -- width: 90%):
Example (as div):
/* MICROQUOTE STYLE CHIP */
.microquote
{
padding:2px;
font-family:"Lucida Console",Monaco,monospace;
font-size:4px;
font-weight:normal;
background:#999;
border:1px solid #000; color:#000;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.microquote
{
padding:2px;
font-family:"Lucida Console",Monaco,monospace;
font-size:4px;
font-weight:normal;
background:#999;
border:1px solid #000; color:#000;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Example (as textarea -- width: 90%):
Example (as div):
/* MICROQUOTE STYLE CHIP */
.microquote
{
padding:2px;
font-family:"Lucida Console",Monaco,monospace;
font-size:4px;
font-weight:normal;
background:#999;
border:1px solid #000; color:#000;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.microquote
{
padding:2px;
font-family:"Lucida Console",Monaco,monospace;
font-size:4px;
font-weight:normal;
background:#999;
border:1px solid #000; color:#000;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Saturday, August 26, 2006
new blogger beta
I've seen a lot over the last couple weeks about the new Blogger beta. (First time I've seen an existing application return to beta.) A couple of the more informative posts I've read:
new blogger embarking
For the love of the B
Both authors, Evan and Jason Goldman, have been integral to Blogger's development. And are now gone.
There was also a slashdot article on the return to beta:
Google Upgrades Blogger
I've read a few horror stories about botched transitions between the existing service and the new beta over on the Google discussion group. Fortunately, I haven't had any problems myself... yet. Likely because I get an "unable to transfer your blogs" message every time it tries to transfer me (which is every time I log in.)
All together, from what I've read of the new features, it sounds like the changes will be positive. My only reservation is template-editing. I hope to god Blogger preserves the source code access it allows now. In my opinion and my experience, this is what makes blogger superior to the other free don't-have-to-do-it-yourself services out there.
As I put it in my slashdot comment:
From what I've read, it sounds like this will remain. It would be a shame -- and probably a deal-breaker for me -- if it didn't.
new blogger embarking
For the love of the B
Both authors, Evan and Jason Goldman, have been integral to Blogger's development. And are now gone.
There was also a slashdot article on the return to beta:
Google Upgrades Blogger
I've read a few horror stories about botched transitions between the existing service and the new beta over on the Google discussion group. Fortunately, I haven't had any problems myself... yet. Likely because I get an "unable to transfer your blogs" message every time it tries to transfer me (which is every time I log in.)
All together, from what I've read of the new features, it sounds like the changes will be positive. My only reservation is template-editing. I hope to god Blogger preserves the source code access it allows now. In my opinion and my experience, this is what makes blogger superior to the other free don't-have-to-do-it-yourself services out there.
As I put it in my slashdot comment:
the cool thing that always distinguished Blogger for me was the freedom they gave you to edit the underlying page code. Myspace gives you that freedom, too -- but have you ever seen the code? (I still don't understand how their web pages just don't crumble in a heap of broken tags.)
Blogger offers direct access to (near) standards-compliant XHTML code. I practically learned how to properly do (x)html and css tinkering with their templates. If you know html and css, it gives you everything you'd want with Google Pages.
I just hope they don't start limiting this as they expand the WYSIWYG bells and whistles.
Blogger offers direct access to (near) standards-compliant XHTML code. I practically learned how to properly do (x)html and css tinkering with their templates. If you know html and css, it gives you everything you'd want with Google Pages.
I just hope they don't start limiting this as they expand the WYSIWYG bells and whistles.
From what I've read, it sounds like this will remain. It would be a shame -- and probably a deal-breaker for me -- if it didn't.
Friday, August 25, 2006
Visual: linux timeline
Another well-done visual. A good-old fashioned timeline, but informative, especially for someone curious about Linux:
linux distro timeline (up.md)
Let's see if I can include a thumbnail:
keywords: tufte, visual, timeline, linux
linux distro timeline (up.md)
Let's see if I can include a thumbnail:
keywords: tufte, visual, timeline, linux
Thursday, August 24, 2006
Visual: New York Times election guide
Just what I was looking for. A very cool flash graphic -- it would do Edward Tufte proud:
2006 New York Times Election Guide
Toggle between the by geography and by population to get a sense of how power is disproportionately distributed.
2006 New York Times Election Guide
Toggle between the by geography and by population to get a sense of how power is disproportionately distributed.
Wednesday, August 23, 2006
JS: a php javascript pseudo-compiler
Actually it's script obfuscator, of sorts. It is meant to make your javascript files functional yet inaccessible. It's based on this script. I attempted to package the concept a little more neatly.
It works as far as I've investigated, but that has only been as far as Firefox and IE 6.
NOTE: falsifier found. save complete web page in IE or Firefox and it renders visible the js portion of the js_script.php page
I imagine it would be possible to conceal the js script more effectively using this basic concept together with some conditional file operations, but I'll have to come back to this.
php_js_compiler.inc.php
function js_php_run($js_path)
{
// *** DATA
// *** MANIPULATE
// start session
if ( session_id() == '' ) session_start();
// set session compile flag
$_SESSION['compile_js'] = 1;
// build script link
$script_link = '<script language="JavaScript" src="' . $js_path . '"></script>';
// *** RETURN
// print this below in html doc head section
return $script_link;
}
function js_php_compile()
{
// start session
session_start();
// check flag
if ( !$_SESSION['compile_js'] ) die('js compile error');
// reset flag
$_SESSION['compile_js'] = 0;
// send content header
header("Content-type: application/x-javascript");
// return
return;
}
?>
js_script.php
js_compiler_test.php
an online demo: js_compiler_test.php
It works as far as I've investigated, but that has only been as far as Firefox and IE 6.
NOTE: falsifier found. save complete web page in IE or Firefox and it renders visible the js portion of the js_script.php page
I imagine it would be possible to conceal the js script more effectively using this basic concept together with some conditional file operations, but I'll have to come back to this.
php_js_compiler.inc.php
function js_php_run($js_path)
{
// *** DATA
// *** MANIPULATE
// start session
if ( session_id() == '' ) session_start();
// set session compile flag
$_SESSION['compile_js'] = 1;
// build script link
$script_link = '<script language="JavaScript" src="' . $js_path . '"></script>';
// *** RETURN
// print this below in html doc head section
return $script_link;
}
function js_php_compile()
{
// start session
session_start();
// check flag
if ( !$_SESSION['compile_js'] ) die('js compile error');
// reset flag
$_SESSION['compile_js'] = 0;
// send content header
header("Content-type: application/x-javascript");
// return
return;
}
?>
js_script.php
require_once('php_js_compiler.inc.php');
js_php_compile();
?>
// if you can read the following word, this js protection scheme has failed: WORD
//any javascript can go in here
alert("js compiler enabled");
js_php_compile();
?>
// if you can read the following word, this js protection scheme has failed: WORD
//any javascript can go in here
alert("js compiler enabled");
js_compiler_test.php
<?php
require_once('php_js_compiler.inc.php');
$js_path = 'js_script.php';
$js_link = js_php_run($js_path);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>javascript protector?</title>
<!-- JS File Calls -->
<!-- <script language="JavaScript" src="js_script.php"></script> -->
<?php echo $js_link; ?>
</head>
<body>
<h2>test in progress</h2>
<p>if javascript is enabled on your computer, you should have seen a javascript alert
pop-up.</p>
<p>however, if you try to view the source directly in your browser, you should get an error message.</p>
<a href="js_script.php">source file : js_script.php</a>
</body>
</html>
require_once('php_js_compiler.inc.php');
$js_path = 'js_script.php';
$js_link = js_php_run($js_path);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>javascript protector?</title>
<!-- JS File Calls -->
<!-- <script language="JavaScript" src="js_script.php"></script> -->
<?php echo $js_link; ?>
</head>
<body>
<h2>test in progress</h2>
<p>if javascript is enabled on your computer, you should have seen a javascript alert
pop-up.</p>
<p>however, if you try to view the source directly in your browser, you should get an error message.</p>
<a href="js_script.php">source file : js_script.php</a>
</body>
</html>
an online demo: js_compiler_test.php
Monday, August 21, 2006
CSS: wikipedia
A stylesheet for blog-based prospective wikipedia entries -- I plan on using it for my prospective contributions.
One hangup: the line-break thing on blogger, which would argue dropping the p tag.
<style type="text/css">
.wikipedia
{
width:auto; margin:.5em; padding:1em;
font:1em Georgia,serif;
color:#999;
background-color:#fff;
border:1px solid #eee;
}
.wikipedia a { color:#99f; }
.wikipedia a:hover { color:#33f; text-decoration:none; }
.wikipedia h2
{
margin:0;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight:normal;
font-size:1.8em;
}
.wikipedia h5
{
margin:0 0 8px;
font-family:arial,helvetica,sans-serif;
font-weight:normal;
}
.wikipedia p
{
line-height:1.4em;
color:#666;
text-align:justify;
}
.wikipedia blockquote
{
margin:.5em 0 .5em 2em;
font-size:.9em;
}
.wikipedia sup
{
font-family:verdana,geneva,sans-serif;
font-size:.8em;
color:#ccc;
}
.wikipedia dl
{
margin:0;
padding:.5em 0;
text-indent:0;
font-size:.7em;
border-top:1px solid #000;
}
.wikipedia dd { margin:0 0 .5em; padding:0; }
</style>
.wikipedia
{
width:auto; margin:.5em; padding:1em;
font:1em Georgia,serif;
color:#999;
background-color:#fff;
border:1px solid #eee;
}
.wikipedia a { color:#99f; }
.wikipedia a:hover { color:#33f; text-decoration:none; }
.wikipedia h2
{
margin:0;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight:normal;
font-size:1.8em;
}
.wikipedia h5
{
margin:0 0 8px;
font-family:arial,helvetica,sans-serif;
font-weight:normal;
}
.wikipedia p
{
line-height:1.4em;
color:#666;
text-align:justify;
}
.wikipedia blockquote
{
margin:.5em 0 .5em 2em;
font-size:.9em;
}
.wikipedia sup
{
font-family:verdana,geneva,sans-serif;
font-size:.8em;
color:#ccc;
}
.wikipedia dl
{
margin:0;
padding:.5em 0;
text-indent:0;
font-size:.7em;
border-top:1px solid #000;
}
.wikipedia dd { margin:0 0 .5em; padding:0; }
</style>
One hangup: the line-break thing on blogger, which would argue dropping the p tag.
Sunday, August 20, 2006
CSS: antarctica skin
Just something I put together over the weekend, but I rather like it:
<style type="text/css">
/* DEFAULT HTML TAGS */
/* reference: http://kurafire.net/lab/initial.css?v21 */
/*____________________________________________________________________________*/
h1, h2, h3, h4, h5, h6 { font-family:"Trebuchet MS", Helvetica, sans-serif; margin:0 0 4px; padding:0; }
p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
ul li { list-style:none; margin-left:.5em; }
form, fieldset { margin: 0; padding: 0; }
dd, blockquote { margin-left: .5em; }
form label { cursor: pointer; }
fieldset { border: none; }
input, select, textarea { font-size: 100%; }
table { border-collapse:collapse; }
td { vertical-align:top; }
/*____________________________________________________________________________*/
body
{
font-family:arial,helvetica,sans-serif;
color:#ccc;
}
a { color:#ccf; }
a:hover { color:#66f; }
#masthead
{
margin:0 0 10px;
padding: 0 0 4px;
}
#masthead h1 { margin:0; font-weight:normal; }
#masthead h6 { font-size:12px; }
#masthead p { margin:0; font-size:11px; font-family:"Lucida Console", Monaco, monospace; }
#core h2 { margin:0; }
#core p { margin:0 0 6px; font-family:Verdana, Geneva, sans-serif; font-size:11px; }
</style>
/* DEFAULT HTML TAGS */
/* reference: http://kurafire.net/lab/initial.css?v21 */
/*____________________________________________________________________________*/
h1, h2, h3, h4, h5, h6 { font-family:"Trebuchet MS", Helvetica, sans-serif; margin:0 0 4px; padding:0; }
p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
ul li { list-style:none; margin-left:.5em; }
form, fieldset { margin: 0; padding: 0; }
dd, blockquote { margin-left: .5em; }
form label { cursor: pointer; }
fieldset { border: none; }
input, select, textarea { font-size: 100%; }
table { border-collapse:collapse; }
td { vertical-align:top; }
/*____________________________________________________________________________*/
body
{
font-family:arial,helvetica,sans-serif;
color:#ccc;
}
a { color:#ccf; }
a:hover { color:#66f; }
#masthead
{
margin:0 0 10px;
padding: 0 0 4px;
}
#masthead h1 { margin:0; font-weight:normal; }
#masthead h6 { font-size:12px; }
#masthead p { margin:0; font-size:11px; font-family:"Lucida Console", Monaco, monospace; }
#core h2 { margin:0; }
#core p { margin:0 0 6px; font-family:Verdana, Geneva, sans-serif; font-size:11px; }
</style>
Friday, August 18, 2006
the myspace killer?
A lot of speculation out in the blather-o-sphere about what site -- or what kind of site -- will displace myspace as the it site for the great IE-browsing masses.
One idea: a social networking site that gives you freedom comparable to myspace in customizing your profile (using AJAX WYSIWYG tools and/or a saner html/css model) but you gives you a cut of the ad revenue generated off visitors to your profile. Instead or in addition to ad revenue, the incentive to sign-up and pimp-out your profile could be some other form of psychic income -- ad revenue would simply be the easiest for most users to grasp.
I imagine someone else has had this idea and there's probably a dozen sites out there already built on this concept scrambling to reach tipping-point critical mass. But I've yet to hear about or see any of them.
Personally, I think myspace has at least another 3 good years in it.
One idea: a social networking site that gives you freedom comparable to myspace in customizing your profile (using AJAX WYSIWYG tools and/or a saner html/css model) but you gives you a cut of the ad revenue generated off visitors to your profile. Instead or in addition to ad revenue, the incentive to sign-up and pimp-out your profile could be some other form of psychic income -- ad revenue would simply be the easiest for most users to grasp.
I imagine someone else has had this idea and there's probably a dozen sites out there already built on this concept scrambling to reach tipping-point critical mass. But I've yet to hear about or see any of them.
Personally, I think myspace has at least another 3 good years in it.
Wednesday, August 16, 2006
Earthlink WiFi: Anaheim
Signed up last week. Modem arrived Monday. A Day 2 review:
Why I Picked Earthlink
I'm started renting a small office between Disneyland and City Hall in Anaheim earlier this year and just about the time I was ready to set up internet access, I heard about the ribbon-cutting on the new Earthlink municipal wifi service. My options basically boiled down to SBC Small Business DSL and this [click here for summary].
I'm right on the fringe of the initial coverage area, but I can see the connection from my second-floor office, so I signed up last week. It's more of an individual account than an office account, but even if my partner were to sign up, it would be cheaper than SBC. And eventually, we should be able to roam the city, and maybe even work from home.
Why the Modem
I thought this was wireless, right? Well, though I can see a Earthlink Feather connection, I cannot seem to connect from my built-in laptop wireless card. Earthlink sends you a modem with an antenna and CAT-5 connection as a sort of signal amplifier. With this, I am able to connect easily. A local browser page tells me my current signal strength, which generally ranges from good to very good but never full strength and somewhat inconsistent.
Evaluation
Rather than assess the service as a whole, I figure I'd break it down and assign letter grades for a set of representative sites and services I use most frequently:
Google : B
Slashdot : C+
Blogger : C
Yahoo LaunchCast : D-
All in all, I'd say it's on a par with good dial-up service. I'm hopeful it will improve.
The ultimate verdict will be whether I decide to keep the service or not -- and whether I'd recommend it to others. I have until the first week of September to cancel my 1-year contract with no penalty. Right now, I'd say it's worth the money -- provided the service improves and expands to cover the entire city. I'm inclining to keep it.
I'll post updates as I go.
Why I Picked Earthlink
I'm started renting a small office between Disneyland and City Hall in Anaheim earlier this year and just about the time I was ready to set up internet access, I heard about the ribbon-cutting on the new Earthlink municipal wifi service. My options basically boiled down to SBC Small Business DSL and this [click here for summary].
I'm right on the fringe of the initial coverage area, but I can see the connection from my second-floor office, so I signed up last week. It's more of an individual account than an office account, but even if my partner were to sign up, it would be cheaper than SBC. And eventually, we should be able to roam the city, and maybe even work from home.
Why the Modem
I thought this was wireless, right? Well, though I can see a Earthlink Feather connection, I cannot seem to connect from my built-in laptop wireless card. Earthlink sends you a modem with an antenna and CAT-5 connection as a sort of signal amplifier. With this, I am able to connect easily. A local browser page tells me my current signal strength, which generally ranges from good to very good but never full strength and somewhat inconsistent.
Evaluation
Rather than assess the service as a whole, I figure I'd break it down and assign letter grades for a set of representative sites and services I use most frequently:
Google : B
Slashdot : C+
Blogger : C
Yahoo LaunchCast : D-
All in all, I'd say it's on a par with good dial-up service. I'm hopeful it will improve.
The ultimate verdict will be whether I decide to keep the service or not -- and whether I'd recommend it to others. I have until the first week of September to cancel my 1-year contract with no penalty. Right now, I'd say it's worth the money -- provided the service improves and expands to cover the entire city. I'm inclining to keep it.
I'll post updates as I go.
Tuesday, August 15, 2006
HTML: Special Entities
This page is meant to be my cheat sheet for my favorite HTML special character entities.
my favorites
references
HTML decimal character references (wikipedia.org)
HTML character entities (wikipedia.org)
character entity browser support chart (uklinux.net)
keywords
html, special characters, entities, wingdings, bullet, dagger
my favorites
© » © » ©
• » • » •
† » † » †
♥ » ♥ » ♥
• » • » •
† » † » †
♥ » ♥ » ♥
references
HTML decimal character references (wikipedia.org)
HTML character entities (wikipedia.org)
character entity browser support chart (uklinux.net)
keywords
html, special characters, entities, wingdings, bullet, dagger
Tuesday, August 08, 2006
CSS: Reference/Quotation Styles Updated
Just realized that my code, stylesheet styles were missing a definition for whitespace in IE. Did a little research and found this -- the definitive tutorial on css whitespacing:
Whitespace and generated content (http://cheeaun.phoenity.com)
That works fine when style the
Otherwise, the same three types of reference styles. For straight quotations: .quote. For displaying code: .code. And for displaying style sheet code: .ipod.
keywords: code, ipod, pre, wrap, pre-wrap, moz, whitespace, quote, quotation
Whitespace and generated content (http://cheeaun.phoenity.com)
That works fine when style the
<pre> tag. But when used with a new class, it also requires one more IE-specific hack:_white-space: pre;
Otherwise, the same three types of reference styles. For straight quotations: .quote. For displaying code: .code. And for displaying style sheet code: .ipod.
.quote
.quote
{
margin:3px 6px;
padding:8px;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
background:#fcfcfc;
border:solid thin #f6f6f6;
}
{
margin:3px 6px;
padding:8px;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
background:#fcfcfc;
border:solid thin #f6f6f6;
}
.code
.code
{
margin-bottom:0px;
padding:1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
{
margin-bottom:0px;
padding:1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.ipod
.ipod
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:"Lucida Console",Monaco,monospace;
font-size:.9em;
font-weight:normal;
border:1px solid #3c4782;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:"Lucida Console",Monaco,monospace;
font-size:.9em;
font-weight:normal;
border:1px solid #3c4782;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
keywords: code, ipod, pre, wrap, pre-wrap, moz, whitespace, quote, quotation
Friday, August 04, 2006
CSS: myspace civilized
Like a Jerry Springer version of css zen garden. My latest adventure in web design:
http://www.myspace.com/postmyspace
The stylesheet draws heavily on the mike industries myspace hack. This version eschews any use of external background images.
myspace civilized stylesheet version 0.8
keywords: myspace, stylesheet, css, hacks
http://www.myspace.com/postmyspace
The stylesheet draws heavily on the mike industries myspace hack. This version eschews any use of external background images.
myspace civilized stylesheet version 0.8
<div class="masthead"><span>
<div class="masthead_h1">myspace civilized</div>
<div class="masthead_p"><a class="masthead_a" href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.com</a></div>
<div class="masthead_p">version 0.8 · sans external images</div>
</span></div>
<style type="text/css">
NOTE { the myspace civilized stylesheet (based on the mikeindustries tasteful myspace stylesheet) }
NOTE { paste contents of this file *after* whatever other text in your About Me panel }
NOTE { ** JUNK DNA ** basic layout settings that should not need to be changed -- ie, DO NOT EDIT }
body { font-size: 1px; line-height: 1px; background-repeat: repeat-y; background-position: top center; }
p { margin: 0px 0px 1em 0px; }
img { border: none }
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
input {background-color:transparent !important}
body>div {margin-left: 10px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table { margin:0px; width: 100% !important; }
.masthead { width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 162px; }
a.masthead_a { text-decoration:none; }
body table {margin-top:104px;}
body td table, body div table {margin-top: 0;}
table tr td table tr td font {display: inline;}
.nametext { height: 40px; width: 270px; background-position: bottom center; background-repeat: no-repeat; overflow: hidden; text-align: left; padding: 0px 0px 3px 0px; display: block; margin: 14px 0px 8px 0px; }
.contactTable {width: 328px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 10px;}
.contactTable td table { background-color: transparent; background-position: center; background-repeat: no-repeat; }
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px;}
table tr td table tr td table tr td div strong {display: block; width: 270px;}
.whitetext12 { display: block; width: 270px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; font-weight: normal; }
.blacktext12 { font-weight: normal; display: block; margin-top: 14px }
.btext { margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-weight: normal; text-align: center; }
.orangetext15 { margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; width: 372px; display: block; font-weight: normal; text-align: center; }
.redtext,.redbtext { font-weight: bold; }
a.redlink:link {display: block; text-align: center; padding-top: 3px;}
u {text-decoration: none; font-size: 10px;}
NOTE { *** MASTHEAD *** sans imagery }
.masthead
{
width:800px; margin-left:-400px;
height:80px;
background-color:white;
}
.masthead_h1 { margin:0; font-size:32px; padding-left:10px; }
.masthead_p, a.masthead_a { font-size:16px; font-weight:normal; }
.masthead_p { margin:0; padding-left:10px; }
NOTE { *** EDIT COLORS *** }
NOTE { many of these are redundant, but this attempts to centralize all properties affecting color scheme }
NOTE { ** MAIN BG COLORS ** BODY and TABLE^3 (primary content cells) }
body
{
color:cccccc;
background-color:black;
}
table, table table {background-color:white;}
table table table
{
background-color:white;
border-color:whitesmoke; border-width: 3px; border-style: double;
}
NOTE {DEFAULT FONT COLORS -- sets default color for most text on the page }
.text, .masthead a {color:CCCCCC;}
a.text:link, a.text:visited {color:lightgray}
a.text:hover, a.redlink:hover {color:green}
NOTE { HEADLINES... in order -- name box, left-side, blog and friend count, other right-side, view friend }
.nametext, .whitetext12, .btext, .orangetext15, a.redlink:link
{
color:999999;
border-color: whitesmoke; border-width: 0px 0px 3px 0px; border-style: double;
}
NOTE { in order... extended network, "Interests" and "Details" modules, number count, "View All of ____'s Friends" }
.blacktext12, .lightbluetext8, .redtext, .redbtext, a.redlink:link, a.redlink:visited { color:999999 }
NOTE {LINKS}
a, a:link, a:visited, a.searchlinksmall { color:lightgray; text-decoration: none }
a:hover, a.searchlinksmall:hover { color:orange; text-decoration: none }
NOTE {UPPER NAVBAR FONT COLORS}
font, a.navbar:link, a.navbar:visited {color:lightblue}
a font:hover, a.navbar:hover {color:blue}
NOTE { *** EDIT TYPEFACES *** }
NOTE { ** PRIMARY TYPEFACES ** }
body { font-family: Arial, Helvetica, sans-serif; }
.text { font-size:11px }
p { !important }
NOTE { NAVBAR }
font, table tr td table a.navbar
{
font-size: 9px;
font-weight:normal;
}
NOTE { NAME HEADLINE }
.nametext
{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 24px;
}
NOTE { BLURBS HEADLINE }
table table table .orangetext15 { font-size:24px; }
NOTE { HEADLINES in order -- left-side, extended network, blog and friend count, other right-side, friend count }
.whitetext12, .blacktext12, .btext, table table table table .orangetext15, .redtext,.redbtext
{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
}
NOTE { Pseudo-Selector Text Tricks (not viewable in IE)... in order -- network box exclamation, friend count }
.blacktext12:before {content: "Hey! ";}
.redbtext:after {content: " special";}
</style>
<![if !IE]>
<style type="text/css">
NOTE { MORE JUNK DNA -- DO NOT EDIT... overrides some IE hacks in non-IE browsers}
.whitetext12{width: auto}
.contactTable { width: auto !important; }
.contactTable span.whitetext12 { left: 0; }
.orangetext15 {width: auto;}
table table table td{padding: 0;}
table table table { padding: 0 14px 14px 14px; }
table table table {max-width: 423px;}
.nametext { height: 35px; width: auto; }
table tr td table tr td table tr td div strong { display: inline; width: auto; }
</style>
<![endif]>
<p style="font-size:10px; margin:20px 0 10px;">(based on stylesheet by mike at <a href="http://www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts">mikeindustries.com</a>)</p>
<div class="masthead_h1">myspace civilized</div>
<div class="masthead_p"><a class="masthead_a" href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.com</a></div>
<div class="masthead_p">version 0.8 · sans external images</div>
</span></div>
<style type="text/css">
NOTE { the myspace civilized stylesheet (based on the mikeindustries tasteful myspace stylesheet) }
NOTE { paste contents of this file *after* whatever other text in your About Me panel }
NOTE { ** JUNK DNA ** basic layout settings that should not need to be changed -- ie, DO NOT EDIT }
body { font-size: 1px; line-height: 1px; background-repeat: repeat-y; background-position: top center; }
p { margin: 0px 0px 1em 0px; }
img { border: none }
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
input {background-color:transparent !important}
body>div {margin-left: 10px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table { margin:0px; width: 100% !important; }
.masthead { width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 162px; }
a.masthead_a { text-decoration:none; }
body table {margin-top:104px;}
body td table, body div table {margin-top: 0;}
table tr td table tr td font {display: inline;}
.nametext { height: 40px; width: 270px; background-position: bottom center; background-repeat: no-repeat; overflow: hidden; text-align: left; padding: 0px 0px 3px 0px; display: block; margin: 14px 0px 8px 0px; }
.contactTable {width: 328px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 10px;}
.contactTable td table { background-color: transparent; background-position: center; background-repeat: no-repeat; }
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px;}
table tr td table tr td table tr td div strong {display: block; width: 270px;}
.whitetext12 { display: block; width: 270px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; font-weight: normal; }
.blacktext12 { font-weight: normal; display: block; margin-top: 14px }
.btext { margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-weight: normal; text-align: center; }
.orangetext15 { margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; width: 372px; display: block; font-weight: normal; text-align: center; }
.redtext,.redbtext { font-weight: bold; }
a.redlink:link {display: block; text-align: center; padding-top: 3px;}
u {text-decoration: none; font-size: 10px;}
NOTE { *** MASTHEAD *** sans imagery }
.masthead
{
width:800px; margin-left:-400px;
height:80px;
background-color:white;
}
.masthead_h1 { margin:0; font-size:32px; padding-left:10px; }
.masthead_p, a.masthead_a { font-size:16px; font-weight:normal; }
.masthead_p { margin:0; padding-left:10px; }
NOTE { *** EDIT COLORS *** }
NOTE { many of these are redundant, but this attempts to centralize all properties affecting color scheme }
NOTE { ** MAIN BG COLORS ** BODY and TABLE^3 (primary content cells) }
body
{
color:cccccc;
background-color:black;
}
table, table table {background-color:white;}
table table table
{
background-color:white;
border-color:whitesmoke; border-width: 3px; border-style: double;
}
NOTE {DEFAULT FONT COLORS -- sets default color for most text on the page }
.text, .masthead a {color:CCCCCC;}
a.text:link, a.text:visited {color:lightgray}
a.text:hover, a.redlink:hover {color:green}
NOTE { HEADLINES... in order -- name box, left-side, blog and friend count, other right-side, view friend }
.nametext, .whitetext12, .btext, .orangetext15, a.redlink:link
{
color:999999;
border-color: whitesmoke; border-width: 0px 0px 3px 0px; border-style: double;
}
NOTE { in order... extended network, "Interests" and "Details" modules, number count, "View All of ____'s Friends" }
.blacktext12, .lightbluetext8, .redtext, .redbtext, a.redlink:link, a.redlink:visited { color:999999 }
NOTE {LINKS}
a, a:link, a:visited, a.searchlinksmall { color:lightgray; text-decoration: none }
a:hover, a.searchlinksmall:hover { color:orange; text-decoration: none }
NOTE {UPPER NAVBAR FONT COLORS}
font, a.navbar:link, a.navbar:visited {color:lightblue}
a font:hover, a.navbar:hover {color:blue}
NOTE { *** EDIT TYPEFACES *** }
NOTE { ** PRIMARY TYPEFACES ** }
body { font-family: Arial, Helvetica, sans-serif; }
.text { font-size:11px }
p { !important }
NOTE { NAVBAR }
font, table tr td table a.navbar
{
font-size: 9px;
font-weight:normal;
}
NOTE { NAME HEADLINE }
.nametext
{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 24px;
}
NOTE { BLURBS HEADLINE }
table table table .orangetext15 { font-size:24px; }
NOTE { HEADLINES in order -- left-side, extended network, blog and friend count, other right-side, friend count }
.whitetext12, .blacktext12, .btext, table table table table .orangetext15, .redtext,.redbtext
{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
}
NOTE { Pseudo-Selector Text Tricks (not viewable in IE)... in order -- network box exclamation, friend count }
.blacktext12:before {content: "Hey! ";}
.redbtext:after {content: " special";}
</style>
<![if !IE]>
<style type="text/css">
NOTE { MORE JUNK DNA -- DO NOT EDIT... overrides some IE hacks in non-IE browsers}
.whitetext12{width: auto}
.contactTable { width: auto !important; }
.contactTable span.whitetext12 { left: 0; }
.orangetext15 {width: auto;}
table table table td{padding: 0;}
table table table { padding: 0 14px 14px 14px; }
table table table {max-width: 423px;}
.nametext { height: 35px; width: auto; }
table tr td table tr td table tr td div strong { display: inline; width: auto; }
</style>
<![endif]>
<p style="font-size:10px; margin:20px 0 10px;">(based on stylesheet by mike at <a href="http://www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts">mikeindustries.com</a>)</p>
keywords: myspace, stylesheet, css, hacks
some rights reserved, © 2006