myspace civilized : how to edit your own myspace profile

Year-End Summary

2007-12-30T19:26:00.000-08:00

Over 1500 downloads of the moshi stylesheet since its release. Not earth-shattering but more than I would have predicted.

I should note that I have not been working on moshi for a while now and have no plans for the future. Too many other things to do.

I'm not absolutely positive the stylesheet hasn't been broken by recent changes, but if my profile is any indication, it still seems to work. Myspace continues to clean up its profile editor as it slowly dies and I don't have much more to add.

This blog will still be here as a reference, as will the moshi project page. Cheers and Happy New Year!

something not totally lame now available on myspace

2007-09-15T11:52:00.000-07:00

Just go here:

http://www.myspace.com/cafetacvba

You can hear the latest single from Café Tacvba. Can't download it. But for the time being, you can listen until you get sick of it.

100 downloads

2007-07-24T17:19:00.000-07:00

It's not on the level of World of Warcraft or, say, nude photos of Lindsey Lohan, but it's still more than I would have expected. In just over a week, over a 100 people have downloaded moshi 2.0.

A few people have written to thank me and share their profiles. (No complaints or new issues yet.) I've created a wiki page for them.

If you have a comment, or just want to share your profile, feel free to contact me.

just in time for moshi 2.0

2007-07-13T17:33:00.000-07:00

MSNBC declares myspace uncool.

click here for full Fark round-up

Of course, the myspace 95 thesis predicted this years ago. See #11.

moshi v2.0 released

2007-07-12T09:44:00.000-07:00

At last! You can grab it from the repository or download the care package (includes a few image files you can play around with) here. Includes updated settings for custom banner, custom contact table, fonts and typefacing, and reflects the latest myspace profile markup.

Some links:
moshi 2.0 stylesheet
moshi v2.0 care package
release notes
bug reports
questions

Some demos:
moshisample
myspacefonts
editor.k

v2.0 stylesheet beta released

2007-07-03T20:21:00.000-07:00

The beta release organizes settings more rationally by grouping typeface and layout rules together.

find it in the repository: moshi v2.0 beta stylesheet

demo: moshi sample profile

There are some minor issues. Those can be found here: issues

invisible captcha

2007-07-02T21:33:00.000-07:00

Trying to test the v2.0 stylesheet out on one more profile before final release, but encountering this:

Now I know what a blind person feels like trying to edit his myspace profile. I take it the myspace captcha server is overloaded at the moment.

IE7 mystery box

2007-06-26T19:16:00.001-07:00

Look at the demo for the new moshi stylesheet in Firefox and it looks – well, if not perfect, then at least the way I more or less want it to. But check it out in IE7 and you get this:

Nothing in the code indicates the reason behind its appearance. I've tried every tweak I can think of to get rid of it. And still it remains, a real puppy ass mystery.

So for any super ninja web designers reading this, there is your challenge: make that white box disappear.

Otherwise, I'm just about ready to release the moshi 2.0 stylesheet.

version 2.0 alpha released

2007-06-21T18:11:00.000-07:00

Looking for a myspace stylesheet? The latest moshi stylesheet can be found here:

moshi v2.0-alpha stylesheet

Click here for a demo: myspace.com/moshisample

Now a few comments and caveats:

1. Version 1.3 is now version 2.0 - the changes are substantial enough to warrant the bump.

2. This is an alpha release - expect a few flaws and blemishes -- especially in IE. I'm happy with the way it looks in Firefox. IE? Good enough. Still not sure why that white box is there in the friend space.

3. No documentation yet - so recommended only for people who have previously used a moshi stylesheet or know their way around html and css

4. one of my goals with this stylesheet was to reduce the footprint. Doesn't look like that will happen. I think it is a bit more organized or orderly. Unfortunately, even with the markup improvements, there is just no simple way to create a clean and comprehensive myspace stylesheet.

If you use it and have a bug or issue to report, file one here or you're welcome to email me directly.

controlling the overflow

2007-06-20T21:21:00.001-07:00

This has been one of the most frequent requests/challenges posed to me: how do I keep images from overflowing? Anyone with html enabled in comments has probably wondered this at one time or another after having a "friend" post a wallpaper-size image in their comments. Myspace of course gives you the option of disabling html in comments (if you can find it -- good luck!)

I figured there was a way. I also figured it would take a lot of research into the arcane details of css settings to find it. I was right on both counts. When I saw the new selectors added by myspace, I figured I'd address this nagging issue as part of my 1.3 stylesheet.

Well, I thought I was ready, so I put out a request for large comments. Holly kindly answered my call. And promptly burst my bubble by totally hosing my profile.

An hour of Googling finally led me to the answer -- deep in the fine print of the w3c document on tables itself. The secret: an obscure little setting I'd never before heard of called table-layout.

Anyway, if you want to re-enable html on your comments and not have to worry about photos of your friend's pimped-out rice rocket busting your profile, try this:

NOTE { Stop the Overflow }
table.friendsComments table table { table-layout:fixed; margin:0; width:435px; *width:421px; }
table.friendsComments td { overflow:hidden; }

demo

complete myspace fonts reference

2007-06-19T21:34:00.000-07:00

I noted this morning that I had begun deconstructing myspace anew and was pleasantly surprised to discover a modicum and order and logic to the markup. The discovery inspired me to put together something I've been meaning to do for a while: a complete myspace fonts cheat sheet.

You can find it on the wiki: Moshi Myspace Fonts Cheat Sheet

I'm still putting it together, but it's fairly comprehensive at this time. I may also redo my myspace myspacefont profile to better illustrate the settings, if I can remember the password.

Stylesheet 1.3 still in development. Hopefully by the end of the week.

deconstructing the new myspace

2007-06-19T10:38:00.000-07:00

My grandparent do sudoku to keep their minds sharp. Me, I do this. The last few stylesheet releases have just been touch-ups on previous versions. The 1.0 release was the last significant revision. So for 1.3, I thought I'd go back through the whole thing. In doing so, I've discovered something interesting: myspace has cleaned up a lot of their markup.

That's not to say it's not still a mess. But they've made a lot of progress. The bad news is this means more work in preparing the next stylesheet than I expected. The good news: the news stylesheet should be a bit simpler.

Still in the process of deconstructing the new myspace markup. You can follow my progress here:

http://www.myspace.com/moshisample

v. 1.3 contact table

2007-06-11T22:39:00.000-07:00

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>

v. 1.3 banner code

2007-06-07T19:09:00.000-07:00

Since the custom banner is probably the most popular subject on this blog, I've added a new stylesheet to the project repository specifically for customizing your myspace banner. This will be integrated into the 1.3 stylesheet.

click here to go to it directly

click here for a demo

Here's the code:

/*
Myspace Open Source Stylesheet Initiative

Version 1.3 : Moshi Banner
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

* Banner
- the <div class="moshi_banner"> block serves as the content of your banner
- .moshi_banner style settings control where and how your banner appears
- replace http://img143.imageshack.us/img143/3492/moshibannermq4.jpg in src setting with the url for your image
- replace http://code.google.com/p/moshi/ with url to which you want banner linked
- default settings are 200px high and 800px wide -- you can change these, but you
will need to change some of the other settings to position correctly (recommended
for experienced css designers only)

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

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

<style type="text/css">NOTE { Your Custom Banner }</style>
<div class="moshi_banner">
<a class="banner_link" href="http://code.google.com/p/moshi/">
<img src="http://img143.imageshack.us/img143/3492/moshibannermq4.jpg" alt="moshi banner" border="0" />
</a>
<a class="moshi_credit" href="http://myspacecivilized.blogspot.com/">moshi template 1.3</a>
</div>

<style type="text/css">

START { CUSTOM BANNER - below myspace masthead }

NOTE { left margin should be half the width and negative }
.moshi_banner
{
position: absolute; left: 50%; top: 168px;
width: 800px; margin-left: -400px;
height: 200px;
overflow:hidden;
}
a.banner_link {}
a.moshi_credit { position:absolute; left:4px; top:4px; font-size:11px; }

NOTE { make room for the banner by padding top of profile table }
NOTE { set this to banner img height PLUS desired padding }
body table table td { padding-top:210px; }

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

END { YOUR BANNER }

</style>

scuttlebutt: new moshi stylesheet imminent

2007-06-07T15:05:00.000-07:00

Let the buzz begin. Yes, I am working on another update of the moshi stylesheet: v. 1.3. This will integrate all the updates and revisions since 1.2 and probably be the last one.

I figure any day now myspace is going to abandon their current skinning model. Or people will finally get sick of myspace. Probably #1 before #2. In any case, either event would render the moshi project moot.

Look for the new stylesheet, along with some updates to this blog and the moshi project page, within the next week or so.

warning: masthead problem on update

2007-04-27T08:33:00.000-07:00

Will, who uses the moshi banner code on a myspace music page, reports that the position:absolute setting upon which it absolutely depends has started getting scrubbed out of user css settings.

This will wreck havoc on profiles using the moshi banner code. He said the following workaround works:

Full details here.

Has myspace begun a campaign of incremental steps to lock down profile customizations? Not sure, but I suspect, if it is the case, it will be part of a larger makeover that restricts the kind of arbitrary globals controls users have now using css and html and offers more restrictive drag-and-click and section-specific editing, a la Friendster or Blogger.

We'll see.

myspace malware technique #14982

2007-03-29T11:19:00.000-07:00

Yes, the #14982 is a random number -- I don't imagine that there are that many myspace exploits. But this one I just encountered is the first of its kind that I've seen. Got a friend request from the following profile:

Now I would only click this if you are using a relatively reliable browser like Firefox, Opera, or maybe IE 7, just to limit the possibilities for unintended malware installations. You've been warned:

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=173622368

In any event, if you're reluctant or it's already been deleted, what you would see a blank screen that says:

This profile contains adult content.
CLICK HERE to install MS Viewer.

The link, naturally, does not send you to microsoft's site and when you click it, it tries to download an executable. Yes, very 2003. But the profile photo is of course a super hot chick in a bikini. And I'm sure a few young turks have fallen for it. Pity all of us as their machines are quickly converted to spam-generating zombies.

A good demo, in any event, I suppose of the div overlay profile-editing method.

should've used moshi

2007-03-27T17:02:00.000-07:00

Amusing article on techcrunch about how Mike Davidson of the Davidson hack took advantage of a hotlink to pull one over on the McCain campaign and their myspace page.

have a question?

2007-03-16T12:41:00.000-07:00

Try my new moshi wiki page:

Moshi Questions

This will centralize questions -- rather than spreading them out all over in the comments here -- and will allow me to respond a little more quickly.

linkable image banner

2007-03-14T20:20:00.000-07:00

customizing banners (or mastheads) is one of the more popular themes around here. the code below allows you to add your own linkable banner image. it also has the advantage of simplifying previous examples.

you can see a demo at the new sonnetmonkey myspace page

here's the code (parts you'll want to edit in bold -- your values will obviously depend on the dimensions of your image -- this is for an 200x800 img):

don't forget that last part -- the <a> <img> tags are the actual code that display the banner. the rest just moves it into position.

if you have a question, try my new moshi wiki page

label: custom banner / masthead

2007-02-09T17:25:00.000-08:00

adding another label to aggregate all the posts related to rolling your own masthead or banner

moshi stylesheets broken?

2007-02-02T09:01:00.000-08:00

Update
To correct this, change the following line in the Junk DNA section from:

body table div div { margin-top:0; width:800px; padding-bottom:10px; }

to:

body table div div { margin-top:0; width:auto; padding-bottom:10px; }

Thanks to TCT for noticing and fixing this! I'll update the stylesheets in the moshi repository.

Someone commented: Hey as of 2/1 something is "WRONG" w/ the v1.2 stylesheet??? I checked the sample and the garden and they are doing the same thing?? HELP!

I checked my profiles last night and verified that it is true. Not sure if it is a temporary thing or some kind of major overhaul of its majorly messed-up mark-up by myspace (that's alliterative.) And unfortunately, myspace is firewalled here at work so not sure when I'll be able to check it out.

Haven't found any other reports of major myspace breakage. And one would expect a there to be a major disturbance in the force if this was widespread. There was a serious security flaw reported at The Register. I suppose it could be related, but who knows?

Whatever the case, it should be expected that the current moshi stylesheets will break someday. It really needs to. Myspace profile markup really is a mess. When it does break, it should be replaced by something much simpler or, in the style of Blogger Beta, by markup that interfaces with a much more user-friendly interface.

label: myspace fonts and typography

2007-01-24T08:45:00.000-08:00

Just switched to the new Blogger and am creating first label (label, not tag). This label should now appear at the bottom of all posts relating to fonts and typography.

What makes this really handy is that by then clicking that label, you'll get this page, which lists all the posts together.

I'll be adding other labels and updating menus in the coming days.

finally ready for the big switch to the new Blogger...

2007-01-19T09:03:00.000-08:00

and suddenly I find I have nowhere to go. I could have sworn that there was a big button taunting me to do it the last two weeks, and finally when I'm ready to do it, I can't figure out how. I guess I'll have to wait a little longer.

The main reason I'd like to do it is for the new tags feature. It would be very useful for this site as it conveniently groups all related posts on a subject together. As soon as I can switch, I'll start adding tags. These will include:

fonts
stylesheets
custom banner
contact table
thesis
accents
basics

the growth of myspace

2007-01-16T15:07:00.000-08:00

Slashdot linked to an interesting article on the hardware and networking problems that the myspace admins have faced as the site grew. A bit off-topic here, but the first new thing I've seen about myspace in a while. Most surprising discovery in article for me? Myspace apparently is still growing!

Some discussion in the comments on whether or not it is possible for myspace to reform the user-controlled html and css model it uses, but little more than the usual idle speculation.

custom "online now" icon

2006-12-09T15:45:00.000-08:00

Talking about this little guy:

1600 square pixels so ugly, awkward, and ubiquitous that it has, in its own inimitable way, become iconic.

Anyway, after seeing several sites that will help you customize this for yourself, I started tinkering with my stylesheet and came up with my own icon.

Here's the code:

This will display this icon:

It looked to me like it will display when you are offline as well, but it's hard to know exactly how myspace handles it -- whether it dynamically tweaks the css or the html. To test how well it works, you can check the moshi profile. It it says that I'm online, then it probably displays all the time, since I'm rarely signed in.

When I have time, I'll play with it some more and see if I can come up with both online and offline icons that display appropriately.

version 1.2 released

2006-12-05T17:40:00.000-08:00

First update in a couple months. I wish I could say the stylesheet got smaller or simpler. Unfortunately, that just isn't very easy with myspace. What it has got is updated banner settings tweaked to better cooperate with the recent myspace layout changes and a few other minor changes.

It also includes more thorough documentation, especially for those who wish to add their own banner or contact table. Altogether, it is a pretty coherent and thorough guide for customizing your profile.

There are two versions:

v1.2d - with documentation at the top
v1.2 - without documentation

A demo can be found here.

family values: picking your myspace fonts

2006-12-01T17:39:00.000-08:00

Ok, corny headline. But a serious subject. If I were to offer one piece of advice on making your profile more stylish, it would be this: forget the graphics and annoying flash plug-ins. Get yourself a nice family of fonts.

Most people who aren't experienced web designers probably come at fonts from a background in word processing (most likely with Microsoft Word.) The problem with this is that it may give the impression that the fonts are an intrinsic part of the document. They are not.

Anyone who has spent hours laboring over a Word document in order to get just the right combination of rare and exotic fonts, only to see them disappear or get replaced when the document is opened on another computer, knows this sad truth. Fonts are in the machine, not in the document (with the exception, perhaps, of PDF and image files). This fact is amplified on web pages, where a page or document will be viewed more oftenly by a machine other than the one is was created on.

So if you're creating a page that you know will most often not be seen on your own machine and therefore will not have at its disposal the fonts that you have loaded on your machine, how do you know which fonts to choose? That's where font-family rule css comes in.

Here is an example font-family css rule:

font-family: Arial, Helvetica, sans-serif;

A font-family rule basically says: first try this font, then this one, then this one, and if none of those are available, use the font in this family of fonts that the viewer has specified as the default in their browser.

In this case the font-family is "sans-serif" and the fonts listed before it (Arial and Helvetica) belong to that family. There are five generic font-families:

serif, sans-serif, monospace, cursive and fantasy.

Serif and sans-serif are the most important families (the Montagues and Capulets, Kennedys and Bushes, of typefacing.) A serif is basically a decorative little tail added to a character, so serif means something like "with decorative little tails on the letters" and sans-serif means "without decorative little tails". Avoid monospace unless you're a geek like me who's going to be displaying a lot of code. And don't use cursive or fantasy if you're over the age of eight.

The trick to creating a good font-family rule is knowing which fonts are common to the most popular operating systems -- Windows (the overwhelming majority), Mac, and Linux. Here are a few of my favorites, common to Windows and Mac systems, displayed as styled for your browser:

sans-serif
Arial, Helvetica, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif

serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
Garamond, Georgia, serif
"Times New Roman", Times, serif

(Note: the standard is, for multi-word font names, put the name in quotation marks. However, on myspace, remove the quotation marks. The fonts will still display properly in most browsers and quotation marks will jam the myspace parser.)

I generally prefer sans-serif fonts for web pages, larger and bolder for headlines. Lighter and smaller (but still visible) for longer passages of text. If I want something to have a slightly more literary feel, then I might use a serif font for body text.

A more complete list of common stylish font-families can be found here:

http://phosphorusandlime.blogspot.com/2005/11/css-window-mac-font-families.html

If you have a favorite not listed here, especially for Linux, feel free to note it in the comments.

myspace 95 thesis update

2006-11-30T18:20:00.000-08:00

Surprised to find seven new contributions to the myspace 95 thesis. Pretty sharp, too! These are the first I did not pen myself and, for reasons not fully understood by me, 45 seems to have become a kind of magic number. The widget source file has been updated.

Feel free to chime in. (Just remember all work subject to a rather finicky editor's pen.)

moshi fonts v1.2

2006-11-13T11:17:00.000-08:00

Working on stylesheet v1.2. It will be an incremental update in an effort to simplify settings and fallback more gracefully with things like background settings.

Here is the font stylesheet. It is a complete list of all the font settings (that I am aware of) used in the myspace profile. The version included in the v.1.2 stylesheet will consolidate some of these. But if you want complete control over your myspace fonts, this is the authority.

Some visual aids are available here. You can see this stylesheet in action here. And if you want a list of widely available cross-platform font families, click here.

NOTE { moshi myspace fonts v.1.2 }

START { Global Fonts }
body, table td
{
color:999999 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:12px !important; font-weight:normal; font-style:normal; text-decoration:none;
}
u { text-decoration:none !important; }
END { Global Fonts }

START { Global Links }
a, a:link, a:visited, a.searchlinksmall
{
color:ff9999 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:1em; font-weight:normal; font-style:normal; text-decoration:none;
}
a:hover, a.searchlinksmall:hover { color:ff0000 !important; }
END { Global Links }

START { Masthead }
TOM { basic fonts and links }
font
{
font-family:Arial, Helvetica, sans-serif !important;
font-size:11px; font-weight:normal; font-style:normal; text-decoration:none;
}
a font { color:003366 !important; }
a font:hover { color:6699cc !important; }

TOM { navbar below banner }
a.navbar:link, a.navbar:visited { color:0000ff !important; }
a.navbar:hover { color:003366 !important; }

TOM { metabar help box -- this appear to have been eliminated }
a.man font { color:00000 !important; }
a.man font:hover { color:999999 !important; }
END { Masthead }

START { Profile Left }
CLASS { left-side-specific fonts and links -- overrides table td above }
table table td table td { color:9999ff !important; }
table table td table td a, table table td table td a:link, table table td table td a:visited, table table td table td a.searchlinksmall { color:9999ff !important; }
table table td table td a:hover, table table td table td a.searchlinksmall:hover { color:0000ff !important; }
TOM { user name (h1) }
.nametext
{
color:CCCCCC;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:2.5em; font-style:italic; font-weight:normal; text-decoration:none; padding-left:1em;
}
TOM { detail box header (h2) }
.whitetext12
{
color:336699;
font-family:Trebuchet MS, Helvetica, sans-serif !important;
font-size:1em; font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
margin:5px 0; padding:2px; background-color:transparent; font-style:normal; text-decoration:none;
}
TOM { detail box label }
.lightbluetext8
{
color:336699;
font-family:Trebuchet MS, Helvetica, sans-serif !important;
font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
margin:5px 0; padding:0px; font-style:none; text-decoration:none;
}
TOM { profile url label }
table table table table table td div strong
{
color:336699;
font-family:Tahoma, Geneva, sans-serif; font-size:12px;
margin:5px 0; padding:0px; font-style:none; text-decoration:none;
}
TOM { profile url }
table table table table td div
{
color:ff0000;
font-family:Trebuchet MS, Helvetica, sans-serif !important; font-size:12px;
font-weight:bold; text-transform:uppercase;
padding:0 0 10px; background-color:transparent; font-weight:bold;
}
END { Profile Left }

START { Profile Right }
CLASS { right-side-specific fonts and links -- overrides table td above }
table table td.text table td { color:99ff99 !important; }
table table td.text table td a, table table td.text table td a:link, table table td.text table td a:visited, table table td.text table td a.searchlinksmall { color:99ff99 !important; }
table table td.text table td a:hover, table table td.text table td a.searchlinksmall:hover { color:00ff00 !important; }
TOM { network box (h1) }
.blacktext12
{
color:ff0000;
font-family:Trebuchet MS, Helvetica, sans-serif !important;
font-size:1.4em; line-height:1.2em;
font-weight:lighter; font-style:none; text-decoration:none; text-align:center;
}
CLASS { blog header (h2) and friend count }
.btext
{
color:ffcc00;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:1.4em; font-weight:lighter; font-style:italic; text-decoration:none;
}
TOM { blurbs header (h1) }
table table table td .orangetext15
{
color:660000;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:2em; font-style:italic; font-weight:normal; text-decoration:none;
}
TOM { friend space / about me / comment header (h2) -- must follow blurb header }
table table table table td .orangetext15 { color:660000; font-family:Trebuchet MS, Helvetica, sans-serif !important; }
TOM { friend number (h2) }
.redbtext
{
color:ff0000;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:1.3em; font-weight:bold; font-style:normal; text-decoration:none; padding:0 .1em;
}
TOM { view all friends link }
a.redlink:link, a.redlink:visited
{
color:ffcc00 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:1em; font-weight:normal; font-style:normal; text-decoration:none;
}
a:hover, a.searchlinksmall:hover { color:cc9900 !important; }
END { Profile Right }

START { Footer }
CLASS { basic footer font }
body table div div
{
color:999999 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:11px !important; font-weight:normal; font-style:normal; text-decoration:none;
}
CLASS { footer links }
a.text:link, a.text:visited { color:ff0000 !important; text-decoration:none !important; }
a.text:hover { text-decoration:underline !important; }
TOM { copyright notice }
table div font { color:ffcc00; }
END { Footer }

myspace changes layout

2006-11-13T10:42:00.000-08:00

Just noticed the change in myspace layout. The top navbar (what I call the metabar) is gone and the ad has been moved up and the search field centered and expanded. Also, the icons in the contact table have been updated (finally!) Small changes but I think it does look a lot better. I little design improvements like that. A sign of more changes to come?

The good news is it doesn't appear to have broken the moshi stylesheet. (may need to tweak the custom banner settings a little.) phew...

myspace 95 thesis widget

2006-11-10T12:17:00.000-08:00

You may notice the little note tagged to the upper right hand corner of this blog's home page. That is the myspace 95 thesis widget.

What's sort of interesting about it is that you can, thanks to the generosity of the Google Code site, post it just about anywhere (except myspace, of course!) :) More to the point, you can run it from any web page that allows javascript by adding just a couple lines:

paste in head

<script type="text/javascript" src="http://moshi.googlecode.com/svn/trunk/m95_wx/m95.wx.js"></script>

(Notice it's called directly from the google site: http://moshi.googlecode.com/. Not sure how fast it will be loaded.)

paste in body (I put it right before the closing </body> tag)

You can then control its position with this css:

#m95_wrap { position:absolute; top:10px; left:10px; }

Here are the full css settings that can be used to modify the appearance -- though not many settings are set inline and the width is fixed:

/* m95 CSS */
/* essential */
#m95_wrap { position:absolute; top:10px; right:10px; }
.m95_wx
{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#330000;
}
.m95_wx a { color:#993300; text-decoration:none; }
.m95_wx a:hover { color:#ff9900; }

/* others*/
.m95_mid {}
.m95_text {}
.m95_num {}
.m95_top {}

Anyway, feel free to give it try on your site. The code is all available here. And it's easy to uninstall.

willkommen, deutsche

2006-11-07T08:08:00.000-08:00

From today's New York Times:

In September, MySpace opened public test pages for Germany and France, the company’s first versions in languages other than English. That month, the site had 2.5 million unique users in Germany and about half that in France, respectable numbers for a new venture.

But Mr. Basic [a 40-year-old technology consultant in Frankfurt] was only briefly among them. "I’m not a typical user," he said. He became frustrated by unwanted messages and he did not care for the flashy pages.

"People here think the design is bad," he said, "and that is important for Germans."

-- MySpace Aims for a Global Audience, and Finds Some Stiff Competition

Looks like I redesigned this page just in time. I welcome any new German or French myspace users put off by myspace default design to take advantage of the moshi project templates.

babelfish translation of "myspace design for Germans": myspace Design für Deutsche

"myspace design for French": conception de myspace pour le Français

Lawrence Alma-Tadema has a posse!

2006-11-06T20:44:00.000-08:00

I was amused to discover, in the course of all my redesigning today, that Lawrence Alma-Tadema (whose painting serves as the banner for this blog) has his own myspace page. And he keeps some impressive company!

I have to admit I would have expected something a little more graceful from his profile. I know he's Victorian and all. But just because you were born in the 19th century doesn't mean you have to have wallpapering by William Morris. Or does it? I think that background was the wallpaper that killed Oscar Wilde in Paris.

myspace civilized civilized

2006-11-06T18:27:00.000-08:00

Finally broke down today and redesigned this blog today. Like a Southern California suburb, it had sort sprawled beyond the boundaries and expectations of its original design. Gone are the bouncy rounded corners and myspace-blue tones. In its place, something hopefully a little bit more orderly and pleasant to look at.

Still a few things to add and I'll probably be tweaking it here and there over the next couple days. And eventually I hope to have a fluid full-width layout.

a new home for the myspace 95 thesis?

2006-11-01T19:55:00.000-08:00

Google announced yesterday that they have acquired Jotspot (which they promptly shuttered). I've been waiting for a nice, free, easy-to-use Googlesque (can I use that term?) wiki. I like pbwiki, but free accounts have only a master password, which chills collaboration. Wikia offers all the power of the wikipedia mediawiki framework, but requires their approval to create your own wiki {unless you use the scratchpad, which is sorta cool.)

Still, could a new home for the thesis be in the works? We'll see.

myspace 95 thesis mashup

2006-10-27T16:59:00.000-07:00

This guy got the point.

myspace profile duality

2006-10-25T12:30:00.000-07:00

Trying to come up with a myspace profile mod that fully captures your split personality? Someone asked me if it was possible to have differently colored fonts for the two sides of your myspace profile. If you've seen the moshisample profile where I've set different background colors for the two sides, you probably recognized the potential.

It is possible. Here are the basic settings to get you going:

START { Font Color Settings }

CLASS { left-side fonts }
table table td table td { color:ff0000 !important; }
table table td table td a, a:link, a:visited { color:ff9999 !important; }
table table td table td a:hover { color:ff0000 !important; text-decoration:underline; }
TOM { User Name h1 }
.nametext { color:ffcccc; }
TOM { Profile URL }
table table table table td div { color:white; }
CLASS { Detail Box and Profile URL Labels }
.lightbluetext8, table table table table table td div strong { color:ffcccc; }

CLASS { right-side fonts }
table table td.text table td { color:0000ff !important; }
table table td.text table td a, a:link, a:visited { color:9999ff !important; }
table table td.text table td a:hover { color:0000ff !important; text-decoration:underline; }
TOM { Network Box and Blurbs h1 and Friend Num h2}
.blacktext12, table table table td .orangetext15, .redbtext { color:ccccff; }

END { Font Color Settings }

See the results on the update moshisample profile. (Remember, the columns have been reversed in this profile, so don't get confused.)

It will require a little additional tweaking to completely coordinate the colors by side, but I'll leave that for your enjoyment.

aesthete, redesign thyself

2006-10-19T19:38:00.000-07:00

A couple people have, rather politely, pointed out that for someone advocating elegance and simplicity in web design, the layout of this blog is rather clunky. I have to agree. It has grown somewhat piecemeal and I've been more focused on refining the moshi stylesheet than this blog's stylesheet.

I actually have a rather pleasant vision for redesigning it. But at the moment, I just have too much other stuff I have to get done. And while this site is more popular than I would have ever guessed, it isn't so popular as to justify putting everything else aside to clean it up.

Maybe things will slow down after the holidays. In the meantime, if the clutter offends thee, try perhaps my design blog or the good old klenwell myspace profile where matters are a little more refined and elegant.

the subtle courage of the flip-flop

2006-10-14T11:08:00.000-07:00

Are you one of those people who, like me, just has to be different? Then what are you doing on myspace? :)

In any event, if you ever wanted to reverse polarity and flip your profile columns, you can, thanks to a handy little css setting: direction. When you decide it's time to reverse course, here's all you need:

NOTE { reverse polarity }
table {direction:rtl;}
table table table {direction:ltr;}

demo: moshi profile

a myspace API for PHP

2006-10-13T10:50:00.000-07:00

Not an official one, but the next best thing. I do PHP coding for my day job so this caught my attention:

MySpace Profile Updater
This class can be used to update the profile of a MySpace user
It connects to the MySpace site and authenticates as a given user.
The class retrieves the user profile fields and submit them with the new values.

If I had the time, I'd love to play with this -- perhaps integrate it with the moshi template. It could be used, for instance, to create a moshi demo page.

You can download it from the phpclasses.org site (registration required):

http://www.phpclasses.org/browse/package/3434.html

a reformation of sorts

2006-10-09T20:19:00.000-07:00

The myspace 95 thesis is finally where it belongs -- tacked to the front of myspace! Well, not the front exactly. But it's tacked up nevertheless:

You can contribute, too: 95 thesis

moshi v1.1

2006-10-07T15:52:00.000-07:00

I call this version "Smallfoot" because it has a smaller footprint (a full kb less!) than v1.0. It is also a little better organized in my opinion. I would recommend this one for anyone taking their first stab at making over their profile.

Sample: moshi profile

Code:

/*
Myspace Open Source Stylesheet Initiative

Version 1.1
Myspace Moshi Smallfoot Skin

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

NOTES

* smaller footprint than v1.0
* 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"><div class="banner_content">
<h2 style="text-align:center;margin:0;"><a href="http://myspacecivilized.blogspot.com/">moshi template 1.1</a></h2>
</div></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;}
table,tr,td,table tr,table td {border-width:0px;background-color:transparent;border-collapse:collapse;z-index:5;}
div,form,img {border-width:0px;background-color:transparent;}
u {text-decoration: none; }

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; overflow-x:auto;}
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;}
body table div div { margin-top:0; width:800px; padding-bottom:10px; }
br {line-height:8px;}

END { NO EDIT }

START { LAYOUT SETTINGS }

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

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

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

CLASS { Content Boxes Border - All, Left, Right }
table table table { border-color:669966; border-width:1px; border-style:solid; }
table table td table { border-color:996666; border-width:1px; border-style:solid; }
table table td.text table { border-color:666699; border-width:1px; border-style:solid; }

CLASS { Content Boxes Background - All, Left, Right }
table table table td { background-color:336633; }
table table td table td { background-color:663333; }
table table td.text table td { background-color:333366; }

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;
}

CLASS { Form Input Boxes }
input { background-color:transparent !important; border-color:eeeeff; border-width:1px; border-style:solid;}

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

END { LAYOUT SETTINGS }

START { YOUR BANNER - below myspace masthead }

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

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:60px;}

JUNK 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 }

NOTE { the setting below removes the myspace images -- edit or delete to keep the default contact box }
.contactTable a img, .contactTable img { border: 0px; display:; visibility:; }

NOTE { Setting for table image (add url) and background color }
.contactTable td table { background-image: url(); }
.contactTable td { background-color:336633; }

JUNK DNA { should not need to edit these settings }
.contactTable { width: 328px !important; }
.contactTable td { padding:0px; margin: 0px; text-align: center; }
.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 span.whitetext12 { position:left; left:10px; top:2px; }

JUNK DNA { 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, a.man font
{ color:666666 !important; }

CLASS { link hovers }
a:hover, a.searchlinksmall:hover, a.redlink:hover, a font:hover, a.navbar:hover, a.text:hover, a.man font:hover
{ color:yellow !important; }

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

CLASS { h1 }
TOM { User Name h1 }
.nametext { color:CCCCCC; }
TOM { Network Box and Blurbs h1 and Friend Num h2}
.blacktext12, table table table td .orangetext15, .redbtext { color:CCCCCC; }
TOM { Profile URL }
table table table table td div { color:white; }

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
{ font-size:11px; font-weight:normal; font-style:normal; text-decoration:none; padding:2px 0; }

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 { font-size:2.5em; font-style:italic; font-weight:normal; text-decoration:none; padding-left:1em; }

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
{
font-size:1em; font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
margin:5px 0; padding:2px; 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
{
font-weight:bold; text-transform:uppercase; letter-spacing:.3em;
margin:5px 0; padding:0px; font-style:none; text-decoration:none;
}

TOM { Profile URL }
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 { font-size:1.3em; font-weight:bold; font-style:normal; text-decoration:none; padding:0 .1em; }

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

END { Typeface Proportions }

START { Extras }

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

END { Extra }

</style>

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

a myspace hello program

2006-10-04T20:37:00.000-07:00

More detailed information on learning how to edit your own profile can be found in my last post. But if you wish to start with a simple hands-on example, I offer up my version of the "hello world" program for a myspace profile:

Log into you myspace account, click Edit Profile, and copy this at the very bottom (in case you already have some text there) of the "About Me" section.

It should tile the background of your page with the image below:

For a limited time, you can see what it should look like here:

http://www.myspace.com/myspacefonts

myspace : back to basics

2006-10-04T20:03:00.000-07:00

Now that I've finished version 1.0 of the moshi stylesheet and css moshi garden, I figure I should once again step back and address the basics. For someone completely unfamiliar with html and css, redesigning your myspace profile can be a little daunting. Let me rephrase that: for someone who does know a little about web design it can be daunting. For someone coming at it fresh, it can be utterly baffling.

So I thought I'd offer a very cursory introduction to the topic of editing your myspace profile -- mostly by way of links to other good tutorials and introductions to the subject.

So here is what you need to know in order to edit your myspace profile:

1. What is CSS?
Short answer: Cascading Style Sheets. Simple rules that can be used to style the content on a web page.

I've put together a pretty good set of links I think answer this question and introduce you to the basics at css.wikia.com. It's a wiki so if you know any others, you can add them there. Take a half-hour or so and surf some of these links. It may no click at once, but if you can set up a myspace profile, you can probably pick up enough CSS in an hour or so to do something civil with it.

2. Ok, I think I get this CSS stuff, now how do I edit it?
Any text editor will do. I use html-kit on Windows, but you could even use Notepad. (Avoid Word as it adds extra hidden characters that will foul things up.)

I'll get to a simple exercise you can try below. If you have some experience with editing your myspace profile but are perplexed by myspace esoteric class settings, I'd suggest copy my null stylesheet and playing with that.

3. Cool. I've whipped up a little CSS that I want to try on my profile. Now where do I put it?
Log into you myspace account, click "Edit Profile," and paste it in the "About Me" section below any other text you may have already have there. (I'd recommend copying and saving any pre-existing text to your editor just to be safe.) Make sure you put the CSS between <style></style> tags.

4. Bollocks! I did just what you said and it (a) didn't do what I wanted to, (b) did nothing at all, or (c) completely eff'd up my profile. Now what?
See why I recommended saving a copy of your "About Me" info before you started. Welcome to the wonderful world of web development. Don't give up yet. At worse, you can always start over.

More likely you'll need to do some troubleshooting. This generally involves: 1. checking for typos (even small ones can completely throw everything off) 2. reviewing the CSS guides noted above 3. seeking out professional help. You can do the latter by seeking out one of many forums on myspace design, people in your friends list who have cool profiles, or even asking here. In any event, be on your best netiquette, be specific, and be prepared not to get an immediate response. The best troubleshooting is to systematically tinker with your code until you fix or at least isolate the problem.

Anyway, I hope that gets you started if you need help getting started. There are also a number of sites out there already to give you a pre-fab layout or skin -- but where's the soul in that?

In my next post, I'll offer my version of a myspace "hello world" program. If this your first stab at editing your profile, you might check that out. Otherwise, jump in. Just try not to make something that ends up here.

moshi style sheet version 1.0 released!

2006-10-03T20:58:00.000-07:00

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.

custom myspace banner / masthead (simplified)

2006-10-03T18:32:00.000-07:00

this version of the banner has been deprecated. please see the latest version of the moshi stylesheet

Getting a lot of questions about my last post on custom banners. Some knowledge of css helps you modify it. But here's an attempt to help you if you don't have a lot of experience with css -- a stripped down version optimized for showing your own background image:

This is the complete code -- you can put it in either your "About Me" or "Like to Meet" section. The parts you'll want to edit are in bold red:

It includes a little plug for moshi which I leave it to you to remove. :)

Here's what it will look like, more or less, if you do it right:

http://www.myspace.com/recivilized

For more info on using and editing CSS, consider the following quick tutorials:

w3.org
brainjar.com
w3schools.com

For a slightly more complex version of this banner, see my previous post:

custom myspace banner / masthead (updated)

custom myspace banner / masthead (updated)

2006-10-01T11:02:00.000-07:00

this version of the banner has been deprecated. please see the latest version of the moshi stylesheet

Version 1.0 of the moshi style sheet includes code (html and css) for adding your own banner. These techniques have been addressed in a couple previous posts, but the code below has been more thoroughly tested and updates those.

This code was devised to be used in conjunction with the full moshi stylesheet, but you should be able to applied independently with only slight modifications necessary (if any).

Remember, don't mess with myspace's ad banner -- they don't like that and may cancel your account.

Add this css code (between the style tags) to your "About Me" section:

Add this html code to your "I'd Like to Meet" section:

<div class="your_banner"><div class="banner_content">
<h2>title here</h2>
<h4>subtitle</h4>
<p>note 1</p>
<p>learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a></p>
</div></div>

notes
1. .your_banner color attribute sets text color
2. you'll probably want to match .your_banner background-color to your profile background color
3. if you have a background image, you'll want to enter it's url in the .your_banner background-image: url(); setting
4. more info on css background settings here

moshi microtag

2006-09-30T13:16:00.000-07:00

I love microtags. So I created one for the moshi project:

Feel free to add one to your myspace profile page (especially if you're using a moshi template). Here's the code to paste:

css Moshi Garden

2006-09-29T16:33:00.000-07:00

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support...

Yes, that about sums up myspace's code.

But I didn't let that stop me. In a final test of the moshi stylesheet before the version 1.0 release and as an hômage to css Zen Garden, I took on the challenge of the css Zen Garden -- on myspace.

The results are now on display on the klenwell profile:

(Note: the images from css Zen Garden are not public domain and displayed provisionally pending Dave Shea's approval. I have contacted him through his website to request his permission.)

customizing your contact table

2006-09-28T18:50:00.000-07:00

Customizing your myspace contact table is perhaps the most counterintuitive among the many counter-intuitive techniques required to pimp your profile (so to speak). Much of this is drawn from the mikeindustries hack.

Step 1: Create Your Custom Contact Menu Background Image
The first step is the creative one. You can use the image below as a template (left-click -> right-click -> save as) for creating your own contact table menu using your favorite graphics editor. (I use Macromedia's Fireworks.)

Step 2 : Upload Your Image
Upload your image to a server where it will be accessible by the code below. I have my own server, so I host mine there. I suspect you could upload it to your myspace photos, then right click -> properties to get the URL, and use that. There are also a number of free image hosting services out there that cater to myspace, though I don't know which one is best.

Step 3 : The Code
The only edit you should have to make to the code below is to replace YOURIMGURLHERE with the url for your background image. The rest of the code just formats the myspace contact table to neatly display your image in place of the myspace defaults.

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; }
.contactTable td table td {background-color:transparent; border-width:0px;}
.contactTable td table
{
background-image: url(YOURIMGURLHERE);
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 }

See my unadorned example here.

Problems? Questions? Comment or contact me.

version 0.9 : myspace classes

2006-09-25T19:20:00.000-07:00

Most html or xhtml pages are set up so that related objects on the page -- say all the section headers or all the links -- can be styled all togther using css class settings. Myspace does this, too, but there is only minimal logic to the groupings. Version 0.9 attempts to bring a little more reason to your myspace profile by grouping together the native myspace classes into more logical groupings. Hence the title, classes. The stylesheet is now available in the google code repository and should make all of this a little more clear.

The next release will be the long awaited version 1.0. The goal with version 1.0 is to provide a stylesheet that can be used to simply and sensibly put together your own completely themed profile or skin. (The T3 skin posted last week shows that it can be done even now with version 0.9.)

But version 1.0 will have a couple extra tricks and I'm preparing a little surprise to mark its release. I hope to have it out by the end of the week.

moshi font taxonomy

2006-09-22T16:08:00.000-07:00

an updated myspace font stylesheet is available here

I've put together a page that lists the complete myspace font library on the Klenwell Style site:

klenwell.net/style/moshi_fonts.htm

I've tried to make it as simple and exhaustive as possible. Eventually it will include screenshots.

If you're trying to change the fonts on your myspace profile, check it out. The carte blanche stylesheet I posted earlier today is also useful for getting starting.

version 0.2 : the null stylesheet

2006-09-22T10:57:00.000-07:00

"Version 0.2?" you're asking. Wasn't I supposed to be putting the finishing touches on version 0.9? Well, I am. But I was thinking it would be nice to have a nice simple generic stylesheet. Carte blanche, tabula rasa, null theme, vanilla skin -- it's the stylesheet about nothing. Well, not nothing exactly. As you see below, it requires quite a bit of fiddling of the stylesheet for something just to get you back to normal.

The results are currently on display in the myspacefonts profile.

Here's the stylesheet:

/*
Myspace Open Source Stylesheet Initiative

Version 0.2
Carte Blanche (the null stylesheet)

Google Projects Page: http://code.google.com/p/moshi/
Blogger Page: http://myspacecivilized.blogspot.com/
Myspace Page: http://www.myspace.com/myspacefonts
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 at style tag

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

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

<style type="text/css">

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

body {background:transparent;font-size:1px;line-height:1px;font-family:Arial,Helvetica,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;}
input {background-color:white !important;border-color:eeeeff;border-width:1px;border-style:solid;}
img {border-width:0px;background:transparent;}
br {line-height:8px;}

body table,div table td {border-width:0px;background-color:transparent;}
table table,table table td,table table td.text {border-width:0px;background-color:transparent;}
table table table, table table table td, table table table td.text, table table td.text table td {border-width:0px;background-color:transparent;}
table table table table, table table table table tr, table table table table td, table table table table td.text {border-width:0px;background-color:transparent;}
table table td table table, table table td table table td {border-width:0px;background-color:transparent;}

table table td { padding:4px 0;}
table table table { width:100%; margin:4px 0; }
table table table td { margin:0px; padding: 0 0 8px 0; }
table table table table, table table table table td, table table table table td.text, table table td table table, table table td table table td { padding:0px; margin:0px; }
table table td.text table td img { padding:4px; }
.blacktext12:before {content: "Oh no! ";}

END { NO EDIT }

START { GLOBAL SETTINGS }

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

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

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

END { GLOBAL SETTINGS }

START { Font Color Settings }

TYPE { Fonts }
body, table td, p, font, body table div div,
.nametext,
.blacktext12, table table table td .orangetext15, .redbtext,
.whitetext12, table table table table td .orangetext15, .btext,
.lightbluetext8, table table table table table td div strong,
table table table table td div
{ color:999999 !important; }

TYPE { Link }
a, a:link, a:visited,
a.searchlinksmall,
a.redlink:link, a.redlink:visited,
a font, a.man font,
a.navbar:link, a.navbar:visited,
a.text:link, a.text:visited { color:9999ff !important; }

TYPE { Link Hover }
a:hover,
a.searchlinksmall:hover,
a.redlink:hover,
a font:hover, a.man font:hover,
a.navbar:hover, a.text:hover
{ color:3333ff !important; }

END { Font Color Settings }

</style>

6 steps back. Then 7 steps forward to version 0.9.

the t3 stylesheet

2006-09-21T19:52:00.000-07:00

This is a myspace profile makeover I did for Triple Threat Dancewear:

www.myspace.com/t3dancewear

It is significant -- historic! -- because it is the first time I have applied the moshi template as a complete skin or theme in a production environment, so to speak. I still have a couple background images to add. But the layout seems to be holding together.

The version 1 release of the moshi template is designed to function as an easily configurable (as easy as possible anyway) complete skin. I hope to have it out by Oct 1. Stay tuned.

wanted: myspace monstrosities

2006-09-20T21:23:00.000-07:00

With version 9, I'm finally getting around to the subject of skinning -- that is, putting together a full coordinated myspace profile skin or theme -- and I thought it would be helpful to have some references and add a little perspective. Not to be cruel, just clinical.

I'm looking for bad myspace profiles -- specifically loud, garish, obnoxious, illegible, mile-wide, ALL CAP monstrosities crying out for makeover. Real cautionary tales in bad design. Worst case scenarios. The kinda thing myspace is famous for.

Send me a link of post it in the comments below.

moshi logo (take 1)

2006-09-18T19:01:00.000-07:00

version 0.8 released

2006-09-16T15:44:00.000-07:00

The most significant change with version 0.8 of the moshi stylesheet is the custom banner (detailed here). Version 0.8 is also noteworthy as it will probably be the most comprehensive version of the stylesheet, meaning it lists the various font and layout objects individually with only minimally grouping of related object. So if you're trying to change a specific object or setting, as opposed to a group or class of settings, this is the version to consult.

In version 0.9, I will start to group related typeface and color scheme objects together for easier coordination and a more thematic focus.

Have a Question?

2006-09-14T08:37:00.000-07:00

Don't be shy. I've gotten a couple questions from random readers of this blog. If you have a question not answered by the copious amounts of (somewhat unorganized) examples and code on this site, feel free to contact me, either through my myspace profile or by leaving a comment on this post.

(Note: I try to answer all questions within 24 hours and sometimes the answer will be "I don't know" or "It can't be done.")

in progress :: version 0.8

2006-09-12T21:14:00.000-07:00

version 0.8.2, with custom banner, now on display at the moshi profile. full style sheet available in the google code repository.

make your own myspace banner

2006-09-10T21:10:00.000-07:00

the techniques described here have been updated. please see the following post:

custom masthead / banner (updated)

Myspace terms of service prohibit altering their ad banner (hey, Fox has some big bills to pay after buying your profile for half a billion.) But that doesn't stop you from running your own banner underneath.

This technique is still highly experimental and runs within the context of the full moshi style sheet, so handle with care. But here's the relevant code:

<div class="your_banner"><div class="banner_content">
<h2>your banner</h2>
<p>set text or add a background image</p>
<h4>learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a></h4>
</div></div>

<style type="text/css">

START { YOUR BANNER - below myspace masthead - coming soon }

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;
background-image: url();
background-color:white;
border-color:black; border-width: 8px 0; border-style: solid;
color:cccccc;
}
.banner_content
{
padding:20px;
border:none;
}

NOTE { coordinate setting below with your banner height setting }
body table table td {padding-top:154px;}
body div table, body td table {margin-top: 0;}

END { YOUR BANNER }

</style>

Note that the banner html precedes the style settings between the style tags. Here's a screenshot (IE 6):

Or see for yourself over at my recivilized profile.

I'm still tweaking it, but it looks ok as far as I can tell in Firefox and IE 6. Custom user mastheads will be part of the final 0.8 moshi stylesheet.

keywords: banner, masthead, custom

CSS Swatches Project

2006-09-09T10:11:00.000-07:00

Another design project I've initiated. Not directly related to myspace, but it may be of some interest to readers of this blog nevertheless.

I originally tried to create this as a wiki space for this project, but wikia.com must sign-off on all wikis it hosts and the administrator reviewing my proposal thought a moshi wiki was too narrow in scope and suggested a more general css wiki. So CSS Swatches was created:

http://css.wikia.com/wiki/Main_Page

The Swatches project shares with this one its emphasis on simple, elegant, popular design. If you are a web designer or graphic artist, you may be interested by the swatch concept. Feel free to contribute to the wiki.

Incidentally, I did create a moshi "mini wiki" in the wikia scratchpad section:

http://scratchpad.wikia.com/wiki/Moshi

You can contribute directly to the Myspace 95 Thesis there:

http://scratchpad.wikia.com/wiki/Myspace_95_Thesis

myspace font stylesheet

2006-09-03T11:11:00.000-07:00

The !important declaration is necessary to fully control profile fonts.

The version 0.8 stylesheet will include a comprehensive set of font controls. Here is a well commented stylesheet for the typeface settings alone. They reflect the settings currently on display in my klenwell profile.

moshi wikia project

2006-09-01T17:31:00.000-07:00

Looking for a wiki-type collaborative editing sort of thing for moshi. I especially want it for the Myspace 95 Thesis, which has quickly got buried here on the blog. I requested a wiki for moshi on wikia. In the meantime, I've put up a page for moshi on the wikia scratchpad. If these scratchpad pages aren't periodically purged, this would just as well. Here's the Myspace 95 Thesis page:

http://scratchpad.wikia.com/wiki/Myspace_95_Thesis

(Feel free to contribute.)

If wikia doesn't pan out for one reason or another, I'll create a forum on Google Groups.

version 0.8 : first draft

2006-09-01T11:16:00.000-07:00

In progress... I've tried to rationalize the commenting and organization even further using START, END, TOM, NOTE, etc. labels within the stylesheet. Not 100% these all work yet.

in progress :: version 0.7 : footer

2006-08-31T21:00:00.000-07:00

The final piece of the version 0.7 puzzle: the footer. Stylesheet speaks for itself:

SECTION { FOOTER - TABLE 5 }
TOM { FOOTER NAVBAR }
table div div { width:800px; background-color:eeeeff; border-color:blue; border-width: 1px 0px; border-style: solid; padding-bottom:10px; }
a.text:link, a.text:visited {color:blue; font-weight:normal; font-style:none; text-decoration:none;}
a.text:hover {color:9999ff;}

TOM { FOOTER LOWER HALF - match with body }
table div { background:black; }

TOM { BOTTOM COPYRIGHT TYPEFACE }
table div font { color:orange; }

The complete v.0.7 style can be found in the google repository. Next up for v.0.8: clean up stylesheet and get rid of redundancies. v.0.9: add masthead and accents.

in progress :: version 0.7 : profile right

2006-08-31T16:40:00.000-07:00

Still tweaking this section of the profile. I did make one discovery: table table td.text table td table should be set to width:auto, not the width I had set it to in earlier versions, or the friend box will expand wildly.

SECTION { PROFILE RIGHT }
TOM { PROFILE RIGHT COL }
table table td.text { background-color:transparent; border-color:transparent; border-width: 0px; border-style: solid; }
table table td.text table td img { padding:4px; border-color:9999ff; border-width: 0px; border-style: solid; }
table table td.text table
{
width:372px; max-width:372px; margin:4px 0;
background-color:eeeeff; border-color:blue; border-width: 1px; border-style: solid;
}
table table td.text table td
{
background-color:transparent; border-color:purple; border-width: 0px; border-style: solid;
margin:0; padding:0 4px 8px;
}
table table td.text table td table
{
background-color:transparent; border-color:purple; border-width: 0px; border-style: solid;
width:auto;
}
table table td.text table td table td { padding:0; }

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

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

TYPEFACE { FRIEND SPACE and ABOUT ME h2 }
table table table table td .orangetext15
{
color:000099; 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;
}

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

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

NOTE { END PROFILE RIGHT }

in progress :: version 0.7 : profile left

2006-08-29T19:53:00.000-07:00

I've been able to isolate most the elements comprising the left side of the main profile table (TOM Table #4). Still a couple things to figure out (viz., extra border lines in the URL box and the font in the Interests box.) The stylesheet could be streamlined. Here it is in all its current glory (click here to view profile):

SECTION { PROFILE - TABLE 4 }

TOM { TABLE^3 CONTENT BOX }
table table table td
{
color:999999; font-size:.8em; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; text-decoration:none;
margin:0px; padding: 0 0 8px 0;
}

SECTION { PROFILE LEFT }
TOM { PROFILE TABLE... left margin - match with table^2 td below }
table td { background-color:white; border-width: 0px; font-size:12px; }

TOM { PROFILE LEFT COL }
TOM { LEFT SIDE BACKGROUND }
table table td
{
background-color:white; border-color:green; border-width: 0px; border-style: solid;
padding:4px 0;
}

TOM { LEFT SIDE TABLE^3 CONTENT BOXES }
table table td table td { background-color:eeffee; border-color:green; border-width: 1px; border-style: solid; padding:0 4px 8px; }
table table td table table, table table td table table td { padding:0; border-width:0; }

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

TOM { CONTACT TABLE }
.contactTable td { background-color:eeffee; border-color:green; border-width: 1px; border-style: solid; }
.contactTable td table td {background-color:transparent; border-width:0px;}

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

TYPEFACE { LEFT COL h2 }
.whitetext12
{
color:green; 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;
}

TYPEFACE { PROFILE URL }
table table table table td div { background-color:transparent; color:green; font-weight:normal; }

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

NOTE { END PROFILE LEFT }

in progress :: version 0.7 : the masthead

2006-08-27T22:35:00.000-07:00

the techniques described here have been updated. please see the following post:

custom masthead / banner (updated)

Starting work on version 0.7 which will attempt to coordinate objects in the myspace layout exposed by the v.0.6 bet-scan. While in progress, a demo of this version of the stylesheet can be viewed at the recivilized profile.

The first order of business: the masthead. According to my template model, the myspace masthead can be divided into three distinct tables which most designers will easily identify: ABOVE AD, AD, BELOW AD. However, because of the odd use of div tags, the layout and color coordination of these three tables can be split up into two parts: (1) ABOVE AD/AD (the ad banner) and (2) BELOW AD.

Here is my stylesheet for anyone interested in changing this section of their profile:

NOTE { MOSHI PROJECT - MASTHEAD STYLING }

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

TOM { obscured or transparent objects }
table, table table { background-color:transparent; }
table table table { width:100%; background:transparent; margin:4px 0; }
table table table table { padding:0px;margin:0px; background-image: none; }
table table table table td { padding:0px;margin:0px; }

SECTION { TABLE 1... Myspace Ad Masthead }
div table { background-color:white; border-color:f8f8ff; border-width: 1px; border-style: solid; }

SECTION { MASTHEAD - TABLE 1 - 3 }
TOM { MASTHEAD ABOVE AD }
div table td { background-color:transparent; border-color:white; border-width: 1px; border-style: solid; }
font {color:cccccc; font-weight:normal; font-style:none; text-decoration:none;}
a font:hover {color:9999ff;}
TOM { SIGNUP MINI TABLE... coordinated with MASTHEAD BELOW AD below }
a.man font { color:9999ff; background-color:white; }
a.man font:hover { color:0000ff; background-color:white; }

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

Again, a demo can currently be found at www.myspace.com/recivilized. The moshi profile will continue to demo the v 0.6 betscan for the time being.

version 0.6 : symmetrical BET-scan

2006-08-25T00:13:00.000-07:00

This release finalizes settings for myspace fonts, padding, and margins. The major unfinished development aspects here are the background colors and border settings.

/*
Myspace Open Source Stylesheet Initiative

Version 0.6
Symmetrical BET (Background Emission Topography) Scan

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; }

TYPEFACE { 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 or transparent objects }
table { background-color:red; }
table table { background-color:pink; }
table table table { width:100%; background:transparent; margin:4px 0; }
table table table table { padding:0px;margin:0px; background-image: none; }
table table table table td { padding:0px;margin:0px; }

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 { 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;
margin:0px; padding: 0 0 8px 0;
}

SECTION { PROFILE LEFT }
TOM { PROFILE TABLE... left margin - match with table^2 td below }
table td { background-color:eeffee; border-width: 0px; font-size:12px; }

TOM { PROFILE LEFT COL }
table table td
{
background-color:eeffee; border-color:green; border-width: 1px; border-style: solid;
padding:4px 0;
}
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; padding:0 4px 8px; }
table table td table table td { padding:0; }

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;
padding:0;
}

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 { width:372px; max-width:372px; margin:4px 0; }
table table td.text table td table { width:360px; }
table table td.text table td
{
background-color:white; border-color:purple; border-width: 1px; border-style: solid;
margin:0; padding:0 4px 8px;
}
table table td.text table td table td { padding:0; }

TYPEFACE { 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; }

TYPEFACE { 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; }

TYPEFACE { 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;
}

TYPEFACE { 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; }

TYPEFACE { 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 { width:800px; background-color:ffeeee; border-color:orange; border-width: 1px; border-style: solid; padding-bottom:10px; }
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 - match with body }
table div { background:black; }

NOTE { TAGS }
table { border:0px solid transparent; border-collapse:collapse; }
form { background-color:none; border-width:0px; }
input { background-color:white !important; border-color:eeeeff; border-width:1px; border-style:dotted; }
img { border-width:0; }
br { line-height: 10px; }

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

</style>

I'll post a screenshot when I have more time. For now, the results are on display at the moshi profile.

Next steps: coordinate background colors and borders; custom banner.

now on technorati

2006-08-22T20:37:00.000-07:00

see for yourself

myspace 95 thesis

2006-08-21T16:25:00.000-07:00

please note: a page for contributing to and editing the Myspace 95 Thesis has been added to the wikia scratchpad. please click here for the latest version of the thesis

Based on Luther's famous disputation and Dogme 95, the myspace 95 thesis is a list of phrases, philosophies, bullet points, and cries of frustration I'd like to nail to the homepage of myspace.

There will ultimately be 95 items in the list. I've started with the first 5 -- and the last one.

myspace 95 thesis

last updated 21 Aug 2006

1. when Jesus said "repent", he never imagined myspace or the internet

2. when editing your profile forget about validation, just try not to kill the browser

3. three levels of nested tables is enough

4. annual income is a myth exaggerated by men to impress teenage girls

5. avoid vertical scrolling where possible. do not embed multimedia over 300px wide in comments
.
.
.
95. all myspace profiles are quite useless

life on the grid: fine-tuning the layout

2006-08-18T15:25:00.000-07:00

I'm currently at work on release 3 of the Template Object Model. My goal is to impose as much symmetry upon the layout as possible using only basic css and avoiding as much as possible complicated hacks and workarounds.

My success can be tracked on the moshi profile.

Looking over the latest version myself, I see I've done a pretty good job. It looks better in Firefox, but it looks good enough in IE -- which as far as my self-imposed mandate goes.

One thing tying me in knots is that left-most filler cell in the main profile table (Table 4 according to the TOM.)

Originally, I had it styled to match the body background (Believe I adopted that from the mikeindustries stylesheet.) Under my new basic-css regime, however, I want it to match the left half of the profile, which means styling the basic table td cell to the color of the left half of the profile (table table td) like so:

TOM { PROFILE TABLE... left margin - match with table^2 td below }
table td { background-color:eeffee; border-width: 0px; font-size:12px; }

With the current style sheet, this also changes the color of the footer table (Table 5), so we have to restyle that further down to match the body background color, like so:

TOM { FOOTER LOWER HALF - match with body }
table div { background:black; }

I've almost got the main right-side content blocks lined up and equal in width. Need to add a little padding to the left-side blocks. Once that's done, we'll be at version 0.6: the symmetrical BET-scan.

version 0.5 : Template Object Model release 2

2006-08-14T23:09:00.000-07:00

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.

Myspace Template Object Model

2006-08-13T23:11:00.000-07:00

From typography, I'm moving on to the even gnarlier issue of myspace layout. My goal is to produce a detailed (perhaps definitive) document on the myspace layout -- a map of sorts. I call it the Myspace Template Object Model as a reference to the Document Object Model.

I started out with a quick and dirty Background Emission Topography scan. The results are currently on display on the moshi profile. (I'll add a screenshot when I have time.)

The BET-scan gives some insight into myspace layout. But to really master it, I found it necessary to actually scrutinize the html code itself. I'll post the full results of my analysis later when I have had a chance to double check. I can say for the time being: Wow. Talk about being patched together out of chewing gum and string!

Here is a preliminary schematic based on a detailed reading of the mark-up for the moshi profile. More on this later:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Myspace Template Object Model</title>

<style type="text/css">

/* BASIC LAYOUT */
body { background:black; }
table { background:#ccc; }
table td { background:#666; font-size:12px; }
table table { background:#fee; }
table table td { background:#efe; padding:4px; color:blue; font-weight:bold; border:1px solid #00f; }
table table td.text { background:#eef; }
table table table { background:#999; margin:4px 0; }
table table table td { background:#fff; padding:4px; color:red; font-weight:bold; border:1px solid #f00; }

/* ADDITIONAL STYLING */
body { font-family:arial,sans-serif; }
table, td { border:0px solid #333; text-align:center; border-collapse:collapse; }
</style>

</head>

<body>


<div align="center">
<table width="800" align="center"><tr><td>table 1: above ad navbar</td></tr></table>
<table width="800" align="center"><tr><td>table 2: ad</td></tr></table>
</div>

<div align="center">
<table width="800"><tr><td>table 3: below ad navbar</td></tr></table>
</div>



<table width="800" align="center"><tr><td width="780" align="center">
table 4 : profile stack
<table><tr>




<td width="20">(15px)</td>

<td width="275" height="33" align="center" valign="top">
table table td : profile left (width="275")


<table><tr><td>name box (4lA)</td></tr></table>
<table><tr><td>.contactTable (4lB)</td></tr></table>
<table><tr><td>myspace url (4lC)</td></tr></table>
<embed>mp3 player</embed>
<table><tr><td>detail box (4lD)</td></tr></table>
<table><tr><td>school box (4lE)</td></tr></table>
</td>


<td>(20px)</td>


<td class="text" valign="top" align="center" width="435">
table table td.text : profile right (width="435")

<table><tr><td>network box (4rA)</td></tr></table>
<table><tr><td>blog box (4rB)</td></tr></table>
<table><tr><td>blurb box (4rC)</td></tr></table>
<table><tr><td>friend space (4rD)</td></tr></table>
<table><tr><td>comment box (4rE)</td></tr></table>
</td>

</tr></table></td></tr></table>



<table width="100%"><tr><td>table 5: page footer</td></tr></table>


</body>
</html>

Here is a screenshot (they may some additional incidental styling for visibility -- click for larger view):

google projects: moshi

2006-08-11T11:11:00.000-07:00

Not hack in the sense of trying to exploit or expose an exploit in the myspace script -- that's been done. This is more hack in the sense of a workaround -- specifically, working around the awkwardness of myspace's html code.

The Myspace Open Source Hack Initiative, moshi, will track the evolution of the myspace civilized and provide a repository for the myspace civilized stylesheets.

The Google Project page has been set up:

moshi project page (code.google.com)

Files and screenshots will be uploaded within the next week.

version 0.4 : basic typography with em sizing

2006-08-10T19:20:00.000-07:00

for the latest updated moshi myspace font stylesheet, click here

The FET-scan actually proved extremely valuable in trying to break down the typography of myspace profiles. This stylesheet focuses on typography and provides a comprehensive yet organized set of definitions for typesetting your myspace profile. In a nod to standards evangelism, it uses only relative (em) font-size settings, though I will probably move over to absolute (px) settings in later versions.

The current settings are meant to echo the typography of this blog and are currently displayed on my recivilized profile.

As always, paste the stylesheet below any other text in the "About Me" section of your profile.

FET-scan screenshot

2006-08-09T21:18:00.000-07:00

Font Emission Typography. See last post for stylesheet used to trace font definitions

myspace Font Emission Typography

2006-08-09T15:42:00.000-07:00

I introduced the concept of Font Emission Typography (since relabeled slightly) in my last post. I've since implemented a more systematic approach. This controls four different typographical factors in trying to trace just what the hell is going on with the font-styling in myspace profile pages: color, font-family, font-size, font-styling.

The effects of this are currently on display on my recivilized profile. [Update: I've posted a screenshot to this blog.]

The result is unsightly, but not uninsightful.

Here is the Myspace Eclectic Style Sheet that I'm actually using:

(Incidentally, the only practical application for FET I can think of would be for a myspace webpage.)

basic typography

2006-08-07T13:20:00.000-07:00

My "recivilized" profile has been a bit of a mess all morning as I've struggled to dissect the stylesheet rules for myspace profile typefacing. It brought one insight: myspace profile editing is less a question of design than it is one of engineering. For this reason, I imagine it is a question more men find interesting than women, who I'd guess prefer -- like my sister -- simply to find a website that gives them a theme they more or less identify with. In any event, just a bit of speculation that could I suppose be tested if anyone really cared.

Back to the question at hand. After a couple hours works, I think I have finally pieced together most the basic settings for controlling typesetting on a myspace profile. I used a method I'm calling "Font-color Emission Tomography" (based on Positron Emission Tomography). Here is my stylesheet, with elements configured to highlight their differences rather than provide any sort of nice aesthetic harmony:

<a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.com</a><br>
stylesheet version : 0.2 < myspace font-color emission tomography<br>
<br>

<style type="text/css">

NOTE { ** FONT-COLOR EMISSIONS TOMOGRAPHY ** }
NOTE { unstylable fonts... MySpace URL box, page footer }

NOTE { basic text typeface }
body, table, td { font-family:Garamond, Georgia, serif; font-size:14px; color:red; }

NOTE { basic links (bold by default) }
a, a:link, a:visited, a.searchlinksmall { font-family:"Trebuchet MS", Helvetica, sans-serif; font-size:12px; color:yellow; }
a:hover, a.searchlinksmall:hover { color:black; text-decoration: none; }

NOTE { headers... in order -- left-side, blog and friend count, other right-side, view friend }
.whitetext12, .btext, .orangetext15, a.redlink:link
{ font-family:Impact, Charcoal, sans-serif; font-size:20px; color:green; }

NOTE { blurbs headline }
table table table .orangetext15 { font-family:"MS Serif", "New York", serif; font-size:24px; color:cyan; }

NOTE { friend space, about me headers }
table table table table .orangetext15 { font-family:Arial, sans-serif; font-size:16px; color:wheat; }

NOTE { subheaders and labels }
.blacktext12, .lightbluetext8, .redtext, .redbtext
{ font-family:Garamond, Georgia, serif; font-size:20px; color:indigo; }

NOTE { namebox header }
.nametext { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 24px; color:lime; }
NOTE { namebox text }
.text { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:blue; }

NOTE { upper navbar links -- above ad banner }
font { font-family:Impact, Charcoal, sans-serif; font-size:10px; color:green; }
a font:hover { color:black; text-decoration: none; }

NOTE { upper navbar links -- below ad banner }
a.navbar:link, a.navbar:visited { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; color:orange; }
a.navbar:hover { color:black; text-decoration: none; }

NOTE { lower navbar links }
a.text:link, a.text:visited, a.redlink:link, a.redlink:visited { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; color:violet; }
a.text:hover, a.redlink:hover { color:black; text-decoration: none; }

NOTE { reset styles }
form {border-width:0px;background-color:none;}
input {background-color:transparent !important}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table {margin:0px; width: 100% !important;}
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;}

NOTE { some background styling for visibility }
body{background-color:000000;}
table{background-color:333333;}
body table{background-color:999999;}
table table{background-color:cccccc;}
table table table{background-color:ffffff;}

</style>

The Wikipedia entry on typography is one of its prouder moments and worth a look.

keywords: font, typeface, typesetting, typography

profile: just as myspace made me

2006-08-06T14:12:00.000-07:00

my profile, in its current nakedness, newly born and unrefined by a designer's touch:

blog banner

2006-08-05T15:32:00.000-07:00

The first blog banner:

"Phidia Showing Frieze of the Parthenon to His Friends" by Lawrence Alma-Tadema.

mission statement

2006-08-04T10:04:00.000-07:00

A few months ago, my sister discovered myspace. Well, maybe that was when she first discovered the customization potential of myspace profiles. In any event, she contacted me about a makeover for her myspace profile.

With my experience in web design and my familiarity with myspace, I said, "Anything for my little sister," and jumped right in -- little realizing just what a morass I was diving into!

Myspace web design, as experienced web designers have amply noted, is a mess. I found a couple informal tutorials, spent a couple hours piecing together the typeface controls in the myspace style sheet, organized this as much as possible, and gave up. Fortunately, there are others who have not been so quick to throw in the towel. And some are even making a small fortune tricking out -- if not exactly civilizing -- myspace.

I myself have had a myspace account from very near the beginning (back in 2003) which I had more or less abandoned not long after setting up. I always thought friendster the superior product, but the vagaries of the market being what they are, myspace triumphed. It's probably not a coincidence that myspace gives you much more control over your profile, however perverse and convoluted those controls may be. And as cynics like to say, with freedom come the greatest opportunities... for chaos.

Simplicity is likely out of the question. But the goal here is to build a sensible, reusable, civilized myspace stylesheet. One that even my sister could use.

This blog will be styled using my blogger stack template.

See the references section at right for some of the guides and tutorials that have lifted me on their shoulders.