myspace civilized
phidias showing frieze of parthenon to his friends
moshi style sheet version 1.0 released!
Version 1.1 has been released and is recommended for being a bit more user-friendly

I am proud to announce the release of version 1.0 moshi myspace style sheet -- the culmination of months and weeks of wasted time! This is the first globally themed, ready-for-production style sheet. Now, you too can have a banner like Willie Nelson.

I created the "limited edition" banner below to commemorate this historic release: ;)



The style sheet can be seen in action on the redesigned recivilized profile:

http://www.myspace.com/recivilized

Here is the complete style sheet:

/*
Myspace Open Source Stylesheet Initiative

Version 1.0
Myspace Moshi Skin 1.0
Theme: moshi gray on black

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

NOTES

* paste stylesheet BELOW any other text in your myspace *About Me* section
* do not paste these comments -- start below the dotted line

----------------------------------------------------------------------------- */


<div class="your_banner"><a href="http://myspacecivilized.blogspot.com/"><div class="banner_content">
</div></a></div>

<style type="text/css">

START { NO EDIT }
NOTE { JUNK DNA - default settings to reset formatting as much as possible... EDIT WITH CARE }

body
{
position:relative; background:transparent;
font-size:1px; line-height:1px; font-family:arial,sans-serif !important;
}
form {border-width:0px;background-color:transparent;}
table,tr,td,table tr,table td {border-width:0px; background-color:transparent; border-collapse:collapse; z-index:5;}
input {background-color:white !important;border-color:eeeeff;border-width:1px;border-style:solid;}
img {border-width:0px;background:transparent;}
br {line-height:8px;}
u {text-decoration: none; }

body table {border-width:0px;background-color:transparent;}
body div table, body td table {margin-top: 0;}
table table,table table td {border-width:0px;background-color:transparent;}
table table table, table table table td {border-width:0px;background-color:transparent;}
table table table table, table table table table tr, table table table table td { border-width:0px; background-color:transparent; }
table table table table div {border-width:0px;background-color:transparent;}
.contactTable td table td {background-color:transparent; border-width:0px;}
body table div div { margin-top:0; width:800px; padding-bottom:10px; }

div table td,table table td {padding:4px 0;}
table table table {margin:4px 0; width:100%;}
table table td table { width:270px; }
table table td.text table {width:372px; max-width:372px;}
table table td.text table td table {width:auto;}
table table table td {padding:8px 4px; margin:0px;}
table table table table, table table table table td{padding:0px; margin:0px;}
table table td.text table td img {padding:4px;}

END { NO EDIT }





START { LAYOUT SETTINGS }

TOM { Page Background - coordinate with table div in footer section below }
body,table div { background-color:333333; }

TOM { Profile Background }
div table,table td { background-color:black; }

DNA { match color above to remove annoying little box borders }
table table td table,table table td table tr { border-color:black; }

CLASS { Content Boxes }
table table table td
{
background-color:333333;
border-color:666666; border-width:1px; border-style:solid;
padding:4px;
}
CLASS { Content Boxes Left - overrides Content Boxes above }
table table td table td { border-width:1px; }

CLASS { Content Boxes Right - overrides Content Boxes above }
table table td.text table td { border-width:1px; }

TOM { Upper Navbar - below myspace ad banner }
div table table { border-color:666666; border-width: 1px 0px; border-style: solid; }
div table table td { background-color:333333; padding:2px; }

TOM { Contact Table }
NOTE { fonts are all images - use background image for complete makeover }
.contactTable td { border-color:666666; border-width:0px; border-style:dotted; }

TOM { Footer - Lower Navbar }
body table div div
{
background-color:333333;
border-color:666666; border-width: 1px 0 0; border-style: solid;
}

DNA { Control Side Effects }
table table table table td { border:none; }

END { GLOBAL SETTINGS }



START { YOUR BANNER - below myspace masthead }

NOTE { left margin should be half the width and negative }
.your_banner
{
position: absolute; left: 50%; top: 170px;
height: 150px;
width: 800px; margin-left: -400px;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif !important;
background-image: url();
background-position:center left;
background-repeat:no-repeat;
background-color:333333;
border-color:black; border-width: 4px 0; border-style: solid;
color:cccccc;
}
.banner_content
{
padding:10px 20px;
border:none;
}
.your_banner h2
{
margin:0;
font-family:Trebuchet MS, Helvetica, sans-serif;
font-size:44px;
line-height:48px;
font-weight:normal;
}
.your_banner h4
{
margin:2px 0;
font-size:20px;
line-height:24px;
font-weight:normal;
}
.your_banner p
{
margin:0;
font-size:14px !important;
line-height:16px;
font-weight:normal;
}

NOTE { make room for the banner by padding top of profile table }
NOTE { setting below MINUS banner height above EQUALS margin below your banner }
body table table td {padding-top:160px;}

DNA { control side effects }
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}

END { YOUR BANNER }



START { CUSTOM CONTACT TABLE }
Credit { Mike D at www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts }

.contactTable { width: 328px !important; }
.contactTable td
{
padding:0px; margin: 0px;
text-align: center; background-color: transparent;
}
.contactTable td table
{
background-image: url();
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; display: none; visibility: hidden; }
.contactTable span.whitetext12 { position:left; left:10px; top:2px; }

NOTE { Firefox realignments }
html>body .contactTable { width: auto !important; }
html>body .contactTable span.whitetext12 { left: 0; }

END { CUSTOM CONTACT TABLE }





START { Font Color Settings }
NOTE { TOM elements grouped by class below }

CLASS { default font color }
body, table td, p, font, body table div div { color:999999 !important; }

CLASS { default link color }
a, a:link, a:visited, a.searchlinksmall, a.redlink:link, a.redlink:visited, a font, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited { color:666666; }


CLASS { header and labels }
CLASS { Profile h2 }
.whitetext12, table table table table td .orangetext15, .btext { color:ff6600; }
CLASS { Detail Box and Profile URL Labels }
.lightbluetext8, table table table table table td div strong { color:ff6600; }


CLASS { h1 and link hovers }
CLASS { link hovers }
a:hover, a.searchlinksmall:hover, a.redlink:hover, a font:hover, a.navbar:hover, a.text:hover { color:000000; }
TOM { User Name h1 }
.nametext { color:ff6600; }
TOM { Network Box and Blurbs h1 and Friend Num h2}
.blacktext12, table table table td .orangetext15, .redbtext { color:ff6600; }
TOM { Profile URL }
table table table table td div { color:white; }


TOM { Metabar Help Box Fonts }
a.man font { color:ff9999 !important; }
a.man font:hover { color:red !important; }

END { Font Color Settings }




START { Font Family Settings }

CLASS { Default Font and Links }
body, table td, p,
a, a:link, a:visited, a.searchlinksmall, a.redlink:link, a.redlink:visited { font-family:Arial, Helvetica, sans-serif !important; }

CLASS { Ornamented Headers }
.nametext, .btext, .redbtext, table table table td .orangetext15 { font-family:Palatino Linotype, Book Antiqua, Palatino, serif; }

CLASS { Default Profile Headers and Labels }
.blacktext12, .whitetext12, table table table table td .orangetext15,
.lightbluetext8, table table table table table td div strong
{
font-family:Trebuchet MS, Helvetica, sans-serif !important;
}

TOM { Copyright Footer }
table div font { font-family:Verdana, Geneva, sans-serif; }

END { Font Family Settings }



START { Typeface Proportions }

CLASS { Default }
body, table td, p
{
font-size:12px !important;
font-weight:normal; font-style:normal; text-decoration:none;
}

CLASS { Default Link }
a, a:link, a:visited, a.searchlinksmall, a.redlink:link, a.redlink:visited
{
font-size:1em;
font-weight:bold; font-style:normal; text-decoration:none;
}

TOM { Metabar Help Box Fonts }
a.man font { font-size:11px; background-color:transparent; }

CLASS { Upper and Lower Navbar Fonts }
a.navbar:link, a.navbar:visited, body table div div
{
padding:2px 0;
font-size:11px;
font-weight:normal; font-style:normal; text-decoration:none;
}

TOM { Blurbs h1 }
table table table td .orangetext15
{
font-size:2em;
font-style:italic; font-weight:normal; text-decoration:none;
}

TOM { User Name h1 }
.nametext
{
padding-left:1em;
font-size:2.5em;
font-style:italic; font-weight:normal; text-decoration:none;
}

TOM { Network Box h1 }
.blacktext12
{
font-size:1.4em;
line-height:1.2em;
font-weight:lighter; font-style:none; text-decoration:none;
text-align:center;
}

CLASS { h2 - Detail Box Left and Friend Space and About Me and Comment Right }
.whitetext12, table table table table td .orangetext15
{
margin:5px 0; padding:2px;
font-size:1em;
font-weight:bold;
text-transform:uppercase; letter-spacing:.3em;
background-color:transparent; font-style:normal; text-decoration:none;
}

CLASS { Detail Box and Profile URL Labels }
.lightbluetext8, table table table table table td div strong
{
margin:5px 0; padding:0px;
font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
font-style:none; text-decoration:none;
}

TOM { Profile URL }
NOTE { cannot remove internal borders and keep outer borders for info boxes }
table table table table td div { padding:0 0 10px; background-color:transparent; font-weight:normal; }


CLASS { Blog and Friend Count h2 }
.btext
{
font-size:1.4em;
font-weight:lighter; font-style:italic;
text-decoration:none;
}

TOM { Friend Num h2 }
.redbtext
{
padding:0 .1em;
font-size:1.3em;
font-weight:bold; font-style:normal; text-decoration:none;
}

TOM { Copyright Footer }
table div font
{
padding:2px 0;
font-size:11px;
}

END { Typeface Proportions }



START { Extras }

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

END { Extra }

</style>

<p>profile theme based on <a href="http://myspacecivilized.blogspot.com/">moshi stylesheet</a></p>



The style sheet is also available in the moshi google code repository.

comments

backlinks

add your own comment