Update 20070528: The styles on this page are obsolete. The current stuff is on these pages:
miahz’s MySpace Profile Stylesheet
miahz’s MySpace Blog Stylesheet
Someone asked for the stylesheets i used for my MySpace profile, but, ironically, there was no way to post the commented CSS on MySpace. So here they are.
I developed these more or less from scratch over a year ago, and haven’t looked at them since. I tried to document as much as i could at the time, but i don’t really remember what all is going on now as far as the code goes. MySpace is a mess, so basically the routine is: undo MySpace’s styles, then add back your own. In this case, i was going for clean and easy to read. The left column is in a sans-serif font on a beige background; the right is seriffed in the “opposite” colors. I didn’t use any images. I mainly worked with the colors and typography. Some comfortable line-spacing does wonders for readability. The blog was a little easier to play with, so it has the negative-space dates that i wanted. It all looks pretty much how i want it to in Firefox; Internet Explorer doesn’t quite do it right, but it’s close.
MySpace strips any comments in CSS and doesn’t allow pound signs (#) in profile styles, but they work fine in custom stylesheets for blogs. Mike Davidson has more details on MySpace’s funkiness.
Update 20070424: not sure if these are the exact same styles on my current profile—i might have made some tweaks somewhere along the way that i forgot about. Also, it occurred to me that there are other blog style options that would affect how my custom stylesheet works. I’ll maybe post my settings for that at some point.
This is the CSS for my profile:
/* BEGIN general styles */
/* base elements */
body {
background-color: 222526;
}
table {
border: none;
background-color: transparent;
}
td {
border: none;
background-color: transparent;
}
body,
td,
li,
p,
div,
textarea { /* counter x.myspace line 95 */
color: 666666;
}
/* END base elements */
a {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
a:link {
color: 206980;
}
a:hover {
color: 206980;
}
a:visited {
color: 335A66;
}
a.navbar:link { /* top menu text, links */
color: gray;
}
a.navbar:visited {
color: 595959;
}
/* Contacting links */
.contactTable td.text a {
}
.contactTable td.text a img {
}
.contactTable td.text a:hover img {
background-color: E5E3DA;
}
a.redlink { /* "View All of ... Friends */
font-family: inherit;
font-size: inherit;
}
a.redlink:link { /* "View All of ... Friends */
color: 206980;
}
a.redlink:hover {
color: 206980;
}
a.redlink:visited {
color: 335A66;
}
b font font, a.text { /* bottom menu text, links */
color: 222222;
}
.text { /* basic info: Headline, A/S/L, Last Login */
color: 666666;
}
.nametext { /* NAME */
letter-spacing: 1ex;
padding-left: 3ex;
font-weight: normal;
font-family: Georgia, "Times New Roman", serif;
color: 222526;
font-size: 10ex;
}
.blacktext12 { /* ...is in your extended network BFBEB6 */
color: black;
font-size: 10px;
display: none;
}
.whitetext12 { /* Interests, Details */
font-size: 20px;
color: AABABF;
font-weight: normal;
display: block;
background-color: 222526;
padding: 1ex 2ex;
margin-left: -3ex;
margin-bottom: 1ex;
}
.lightbluetext8 { /* MAIN > LEFT > Interests, Details subheaders (General, Music, Movies, etc.) */
font-size: 13px;
color: 206980;
}
.text .text .whitetext12 { /* Contacting, Interests headers */
color: red;
}
.orangetext15 { /* Blurbs (About Me:, Who I'd like to meet:) Friends, Friend Comments */
display: block;
font-family: Georgia, "Times New Roman", serif !important;
color: D9D0A3;
font-weight: normal;
font-size: 18px;
padding: 1ex 2ex 0 2ex;
}
.text .text .orangetext15 { /* Blurbs, Friends, Comments headers */
font-size: 4ex;
background-color: D9D7CE;
color: black;
margin-left: -2ex;
margin-bottom: 1ex;
padding: 1ex;
}
.btext { /* "... Latest Blog Entry" . "has XX friends" */
color: inherit;
font-family: inherit;
}
.redtext, /* MAIN > RIGHT > Comments > Displaying "XX" comments */
.redbtext { /* MAIN > RIGHT > Friends > has "XX" friends */
color: ffdf00;
}
.blacktext10 { /* MAIN > RIGHT > Comments > comment timestamp */
font-family: inherit;
color: 404039;
}
.text table {
border-width: 0 !important;
}
div table font { /* top nav menu */
color: gray;
}
div div table font { /* undo for above rule */
color: inherit;
}
font input { /* top search form */
background-color: 333333 !important;
color: cccccc !important;
border-style: solid;
border-width: 1px;
border-color: gray;
}
/* END general styles */
/* BEGIN profile page styles */
body div table table td {
background-color: transparent;
}
body table {
}
body table td { /* trying to shrink cell on left of main content table */
width: 0;
}
body table td img { /* trying to shrink cell on left of main content table */
display: none;
}
body table td td img { /* trying to shrink cell on left of main content table */
display: inline;
}
body table table td { /* undo above in children */
}
body div table td { /* ditto */
}
body table table {
}
body div div table {
background-color: transparent;
background-image: none;
}
body table table table {
background-color: transparent;
background-image: none;
}
body div div table {
}
body table table td { /* main content columns */
background-color: D9D7CE;
width: 0;
}
/* main content columns links */
body table table table td a:link {
text-decoration: underline;
}
body table table table td a:hover {
text-decoration: underline;
background-color: E5E3DA;
}
body table table table td a:visited {
text-decoration: underline;
}
.miahz-interests-general,
.miahz-interests-music,
.miahz-interests-movies,
.miahz-interests-television,
.miahz-interests-books,
.miahz-interests-heroes,
.miahz-content-aboutme,
.miahz-content-likemeet { /* main content divs */
line-height: 175%;
}
.miahz-interests-general p,
.miahz-interests-music p,
.miahz-interests-movies p,
.miahz-interests-television p,
.miahz-interests-books p,
.miahz-interests-heroes p,
.miahz-content-aboutme p,
.miahz-content-likemeet p { /* main content ps */
margin-top: 0;
}
body table table td.text { /* right content column */
background-color: black;
}
/* right content text */
body table table td.text body,
body table table td.text td,
body table table td.text li,
body table table td.text p,
body table table td.text div,
body table table td.text textarea { /* counter x.myspace line 95 */
color: 808080;
font-family: Georgia, "Times New Roman", serif;
}
/* right content links */
body table table td.text a:link {
text-decoration: none;
}
body table table td.text a:hover {
text-decoration: underline;
background-color: transparent;
color: 309EBF;
}
body table table td.text a:visited {
text-decoration: none;
}
body table table td.table { /* right column sub tables */
width: 100%;
}
body table table table td,
body div div table table td,
body table table table td.text { /* undo above */
background-color: transparent;
}
td.text td.text td b { /* Displaying n of n comments... */
margin-bottom: 2ex;
}
td.text td.text table table tr { /* individual comment containers */
}
td.text td.text table table td { /* individual comment blocks */
line-height: 175%;
}
.text div img { /* Online Now! icon */
}
/* END profile page styles */
This is the CSS for my blog:
a:link,
a:visited,
a:active {
font-family: inherit !important;
font-size: inherit !important;
text-decoration: inherit !important;
}
table.blog a:link {
font-family: inherit;
}
a:hover {
text-decoration: underline !important;
}
table.main {
margin: 0 auto;
}
table.main table.profile {
border: none;
}
table.blog {
margin-bottom: 1ex;
}
table.blog table.blog {
}
table.blog td {
background-color: #222526;
}
table.blog .spacer td {
background-color: transparent;
height: 2ex;
}
table.blog td td {
background-color: inherit;
}
table.blog table.blog td {
}
table.blog,
table.blog a {
}
table.blog p {
}
table.blog table.blog td p,
table.blog table.blog td ul {
line-height: 1.75em;
margin-left: 8ex;
margin-right: 8ex;
}
table.blog table.blog td * {
}
table.blog table.blog td * * {
}
table.blog table.blog .blogSubject {
line-height: 1em;
margin-top: 1em;
position: relative;
margin-left: 4ex;
margin-right: 4ex;
text-indent: -2ex;
}
table.blog table.blog .blogContent {
}
table.blog table.blog .blogContentInfo {
clear: both;
line-height: 1em;
position: relative;
margin-left: 2ex;
margin-right: 2ex;
}
table.blog table.blog .blogContentInfo,
table.blog table.blog .blogContentInfo a {
font-size: 11px;
font-family: Verdana;
color: #335A66;
}
.blogContent img {
background-color: white;
padding: 1ex;
margin: 1ex;
}
.blogCommentsProfile,
a b {
font-weight: normal !important;
}
.blogCommentsProfile a {
font-size: smaller !important;
}
.blogComments .blogComments { /* comments container block */
padding: 2ex;
}
.blogComments .blogComments p {
line-height: 1.75em;
}
.blogComments .blogComments .blogCommentsContent {
font-family: Georgia, "Times New Roman", serif !important;
}
strong font,
strong font a {
color: black !important;
}
.miahz-blog-header {
text-align: left;
font-family: sans-serif;
font-family: Arial;
font-family: Lucida Grande;
font-family: Lucida Sans Unicode;
font-size: .75em;
background-color: #222526;
padding: 1em 2em;
}
.miahz-blog-header h1 {
font-size: 1.5em;
}
.miahz-highlight {
color: #ffdf00;
}
/* miahz.com negative-space-effect datestamps */
table.blog td {
position: relative;
overflow: hidden;
display: block;
}
table.blog td td {
display: table-cell;
}
table.blog p.blogTimeStamp {
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-align: right;
text-transform: lowercase;
font-size: 35px;
margin: 0;
position: absolute;
top: -23px;
right: -10px;
text-align: right;
}
I can try to answer questions, but like i said—it’s been a while since i messed with this. There might even be problems or errors with the code. If it blows up your profile it’s not my fault. I spent time working on this, so i’d encourage you to put in some effort to change some colors or something and not straight jack it. Use it as a jump-off to create your own look. Holler at me with some link love if you like it or end up using it.
