Angry CSS Coder meets MySpace.com

resources

news

join

members: 6381

Hiveminds Network

PHP Flash Java Ruby Windows Linux

videos

blogs

Hiveminds | Thu, 2006-02-09 21:44 tags: Tips and Tricks, Web design

leave a commentsubscribe to feedfriendly: printshare: delicious, digg, reddit, icerocket

Web design

It is rare that I just try something because it is new and cutting edge. This explains why I have not even opened myspace.com in my webrowser before today. Curiosity finally got the better of me and so I signed up to see what all the talk was about. Social networking and all that it is supposed to be is to be found at myspace.com right? So after taking a couple of minutes to create profile I lapse into my oldest habit, modifiying and hacking.

The profile page of myspace is supposed to be modifiable by use of CSS. There is a a catch though , myspace.com follows the Document Object Model like an over caffeinated drunk trying to walk a straight line. There are no class selectors or ids and just barely a resemblance to standards HTML. The second catch is that even if these did exist the sites filter scripts will not let you use them. You can't use hex colors either which is a pain is the rear end.

So pissed of at all this I decided to do what ever I can to make it easier for people to theme their myspace profile pages and at the same time vent some anger. So here it is the first draft template style. Take a look at the source code to grab the latest style. It is located at the bottom of the pge somewhere. You can always make me a friend if you feel so inclined. I will make comments to the code as I learn more about the myspace.com output.

If you are a CSS coder please post back any discovers or tricks that you use to modify the CSS. Here's a handy chart for the color names for those that don't know them. If anyone comes up with a beautiful and useful theme using this code please post a link. I'd hate to see the four hours I spent fiddling with this to go to waste.

Here's the code. Take it and place it in the "about me" section of your myspace profile and play with the colors to suit. You may also want to try some backgrounds and positioning to get a more complete theme.

<STYLE>
td, table, tr, span, li, p, div, textarea, DIV
{
  background-color: transparent;
}
body
{
  background-color: red;
}
table + table{background:pink;}
div + div{background:white;color:red;}
div + div a{background:gray;color:red;}
div + div table td font{background:yellow;color:red;}
div + div table td a font{background:beige;color:green;}
div + div + div + div{background:purple;}
div + div + div + div td{background:fuchsia;}
div + div + div table td table td {background:black;color:white;}
div + div + div + table{background:lavender;}
div + div + div + table table{background:whitesmoke;}
div + div + div + table table td{background:white;border: 1px solid lavender}
div + div + div + table td span{background:skyblue;border: 1px solid black}
div + div + div + table  table td > table td > table td{background:mediumspringgreen;border: 1px solid lavender}
div + div + div + div + div{background:mediumspringgreen;border: 1px solid lavender}
div + div + div + table  table td+td{background:violet;}
div + div + div + table  table table{background:thistle;}
div + div + div + table  table td>table{background:mediumorchid;}
div + div + div + table  table td>table table{border:2px solid red;}
div + div + div + table  table td>table table table{background:mistyrose;}
div + div + div + table  table td>table table table table{background:white;}
div + div + div + table  table td>table table td{background:black;}
div + div + div + table  table td>table  td + td table td{background:bisque;}
div + div + div + table  table td>table  td + td + td + td{background:greenyellow;}
div + div + div + table  table td>table  td + td + td{background:orange;}
div + div + div + table  table td>table table table table td{background:palegoldenrod;}
div + div + div + table  table td>table table td span{background:mediumturquoise;color:white;}
</STYLE>