myspace civilized
phidias showing frieze of parthenon to his friends
version 0.5 : Template Object Model release 2
This stylesheet succeeds in isolating several distinct template objects in the style of the document object model. What it lacks in simplicity and elegance it tries to account for in ingenuity:

/*
Myspace Open Source Stylesheet Initiative

Version 0.5
TOM (Template Object Model) release 2

Google Projects Page: http://code.google.com/p/moshi/
Blogger Page: http://myspacecivilized.blogspot.com/
Myspace Page: http://www.myspace.com/moshisample
Author: Tom at klenwell@gmail.com

NOTES
* paste stylesheet below AFTER any other text in your myspace *About Me* section
* do not paste these comments -- start at style tag

***************************************************************************** */

<style type="text/css">

NOTE { TOM - Template Object Model - STYLING }
body { background-color:black; font-family:arial,sans-serif; }
body table { background-color:transparent; }

FONT { body links }
a, a:link, a:visited, a.searchlinksmall, a.redlink:link, a.redlink:visited
{ color:b3ccfc; font-family:Arial, Helvetica, sans-serif; font-size:1em; font-weight:normal; font-style:normal; text-decoration:none; }
a:hover, a.searchlinksmall:hover, a.redlink:hover
{ color:purple; }

TOM { obscured objects }
table { background-color:red; }
table table { background-color:pink; }
table table table { background:transparent; margin:4px 0; }

SECTION { MASTHEAD - TABLE 1 - 3 }
TOM { MASTHEAD ABOVE AD }
div table td { background-color:ffeeee; border-color:red; border-width: 1px; border-style: solid; }
font {color:red; font-weight:normal; font-style:none; text-decoration:none;}
a font:hover {color:ff9999;}

TOM { MASTHEAD BELOW AD }
div table table td { background-color:ffffee; border-color:yellow; border-width: 1px; border-style: solid; }
a.navbar:link, a.navbar:visited {color:yellow; font-weight:normal; font-style:none; text-decoration:none;}
a.navbar:hover {color:ffff99;}


SECTION { PROFILE - TABLE 3 }
TOM { PROFILE TABLE... left margin - match with body }
table td { background-color:black; color:white; font-size:12px; }

TOM { TABLE^3 CONTENT BOX }
table table table td
{
background-color:white; border-color:navy; border-width: 1px; border-style: solid;
color:999999; font-size:.8em; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; text-decoration:none;
}

SECTION { PROFILE LEFT }
TOM { PROFILE LEFT COL }
table table td { background-color:eeffee; border-color:green; border-width: 1px; border-style: solid; padding:4px; }
table table table table table table td { background-color:red; }
table table td table td { background-color:white; border-color:olive; border-width: 1px; border-style: solid; }

TOM { NAMEBOX and LEFT COL BG... NAMEBOX h1 }
table table table td.text
{
background-color:white; border-color:ff33ff; border-width: 1px; border-style: solid;
color:b3ccfc; font-size:1em; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; text-decoration:none;
}

TOM { CONTACT TABLE }
.contactTable td { background-color:333333; border-color:black; border-width: 1px; border-style: solid; }

FONT { NAMEBOX h1 }
.nametext { padding-left:1em; color:b3ccfc; font-size:2.5em; font-family:Palatino Linotype, Book Antiqua, Palatino, serif; font-weight:normal; font-style:italic; text-decoration:none; }

FONT { LEFT COL h2 }
.whitetext12
{
color:b3ccfc; background-color:transparent;
margin:5px 0; padding:2px;
font-family:Arial, Helvetica, sans-serif; font-size:.9em; font-weight:bold;
text-transform:uppercase; letter-spacing:.3em;
font-style:none; text-decoration:none;
}

FONT { PROFILE URL }
table table table table td div { background-color:transparent; color:blue; font-weight:bold; }

FONT { LABELS }
.lightbluetext8, table table table table table td div strong
{
color:b3ccfc; font-family:Arial, Helvetica, sans-serif; font-weight:bold;
text-transform:uppercase; font-style:none; text-decoration:none;
}


SECTION { PROFILE RIGHT }
TOM { PROFILE RIGHT COL }
table table td.text { background-color:eeeeff; border-color:blue; border-width: 1px; border-style: solid; }
table table td.text table td { background-color:white; border-color:purple; border-width: 1px; border-style: solid; }

FONT { NETWORK h1 }
.blacktext12
{ color:cccccc; font-size:1.5em; font-family:Trebuchet MS, Helvetica, sans-serif; font-weight:lighter; font-style:none; text-decoration:none; }

FONT { BLURBS h1 }
table table table td .orangetext15
{ color:cccccc; font-size:1.6em; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:none; text-decoration:none; }

FONT { FRIEND SPACE and ABOUT ME h2 }
table table table table td .orangetext15
{
color:b3ccfc; background-color:transparent;
margin:5px 0; padding:2px;
font-family:Arial, Helvetica, sans-serif; font-size:1em; font-weight:bold;
text-transform:uppercase; letter-spacing:.3em;
font-style:none; text-decoration:none;
}

FONT { BLOG and FRIEND COUNT h2 }
.btext
{ color:cccccc; font-size:1.4em; font-family:Palatino Linotype, Book Antiqua, Palatino, serif; font-weight:lighter; font-style:italic; text-decoration:none; }

FONT { FRIEND NUM h2 }
.redbtext
{ color:b3ccfc; padding:0 .1em; font-size:1.3em; font-family:Palatino Linotype, Book Antiqua, Palatino, serif; font-weight:bold; font-style:normal; text-decoration:none; }



SECTION { FOOTER - TABLE 5 }
TOM { FOOTER NAVBAR }
table div div { background-color:ffeeee; border-color:orange; border-width: 1px; border-style: solid; padding-bottom:4px; }
a.text:link, a.text:visited {color:orange; font-weight:normal; font-style:none; text-decoration:none;}
a.text:hover {color:ffcc00;}

TOM { FOOTER LOWER HALF and various other objects interspersed within the profile table }
table div { background-color:transparent; }


NOTE { TAGS }
table { border:0px solid transparent; border-collapse:collapse; }
form{background-color:none; border-width:0px;}
input{background-color:white !important; border-width:0px;}
img { border-width:0; }

TRICK { a little extra for network h1 }
.blacktext12:before {content: "Oh no! ";}

</style>


the myspace layout_beta profile (recently noted by a commentor) provided a couple tips -- in particular, how to distinguish between the two profile columns.

comments

add your own comment
note to self: replace FONT with TYPESETTING as a comment marker

backlinks

add your own comment