lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
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

<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 &middot; 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