myspace civilized
phidias showing frieze of parthenon to his friends
Monday, June 11, 2007
v. 1.3 contact table
The contact table is something I haven't tinkered with in a while. As you can see from the demo profiles, moshi stylesheet 1.x could customize it. But it was one of those things that seems to have evolved on its own and I was afraid to touch for fear of breaking everything.

For version 1.3, I've conquered my fear and have torn into it.
See the results here. In using this contact table code independently be aware of unwanted side effects. Any of these should be eliminated once the table in integrated into the full 1.3 stylesheet.

The code below can also be found in the project repository:

/*
Myspace Open Source Stylesheet Initiative

Version 1.3 : Moshi Contact Table
Myspace Moshi Stylesheet
Jun 2007

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

NOTES

* This stylesheet builds on the work of Mike D at
www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts

* Contact Table
- default settings show this image: http://img501.imageshack.us/img501/3002/moshicontactnygr6.jpg
- to display the myspace icons (which myspace recently redesigned to look a
little less ugly), make the following changes below:
1. change this line: .contactTable a img, .contactTable img { border: 0px; display:none; visibility:hidden; }
...to this: .contactTable a img, .contactTable img { border: 0px; }
2. change this line: .contactTable td table { background-image: url(http://img501.imageshack.us/img501/3002/moshicontactnygr6.jpg); }
...to this: .contactTable td table { background-image: url(); }
3. match table borders to image background by changing these lines:
.contactTable td { background-color:333333 }
.contactTable tr { border-color:333333; }
4. edit header font

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

<style type="text/css">NOTE { START COPYING MOSHI STYLESHEET HERE }</style>

<style type="text/css">

START { CUSTOM CONTACT TABLE }

NOTE { see note in documentation above on hiding myspace icons and adding your own }
.contactTable a img, .contactTable img { border: 0px; display:none; visibility:hidden; }

NOTE { insert image url below for custom table }
.contactTable td table { background-image: url(http://img501.imageshack.us/img501/3002/moshicontactnygr6.jpg); }

NOTE { match these settings to the image background }
.contactTable td { background-color:333333 }
.contactTable tr { border-color:333333; }

NOTE { header font }
.contactTable span.whitetext12
{
color:cc6600; font-family:Trebuchet MS, Helvetica, sans-serif !important;
font-size:1em; font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
}

JUNK DNA { should not need to edit these settings }
.contactTable { width: 328px !important; border-width:0px; background-color:transparent; border-collapse:collapse; }
.contactTable td { padding:0px; margin:0px; text-align:center; border-width:0px; }
.contactTable td table { background-color: transparent; background-position: center; background-repeat: no-repeat; border-width:0px; }
.contactTable td table td {background-color:transparent; border-width:0px;}
.contactTable a { padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent; }
.contactTable span.whitetext12 { display:block; text-align:center; margin:0px; padding:0px 2px; background-color:transparent; }

JUNK DNA { Firefox realignments }
html>body .contactTable { width: auto !important; }

END { CUSTOM CONTACT TABLE }

</style>
» add your own comment