Metafluence

Pimping your MySpace

This has been a fascinating experience. It’s been one helluva challenge trying to figure out how to hide the MySpace code, but keep the ads and comments. The problem is compounded when you view your handy work in the various browsers. I must admit this profile still doesn’t look good in FireFox, but I’ll crack that soon. I wanted to launch and get this thing started. This is all to say that you won’t be getting a key today. You will be able to read the state of profile development methods from some of the most progressive MySpace profile developers. Perhaps it’s more interesting to not have a key but instead to have a beginning to more interesting solutions. There is much to look forward to.

Best I can tell, this is the earliest record of how to make completely custom MySpace layouts. It’s the last thing I came across in my experience (thanks Marshall), which leads me to believe there must be a great deal more Ninjas out there.
The information I’m about to layout talks about HTML and CSS. I’ll do my best to make the information as lay friendly as possible, but if you don’t have at least some exposure to HTML and CSS, parts of the info below may be confusing. I’ve tried to use style code snippets that can be copied and pasted, but the methods below all require you to build your own HTML pages. I will be offering student profiles in the next day or two for those with no prior HTML experienc to build from. If you have any questions, leave a comment on this post.

The Absolute method

This is the first method I came across and I was introduced to it by Tim Benzinger’s profile. The idea is to push the entire MySpace page tens of thousands of pixels off of the screen. Then absolutely position your page starting from the top left corner.

What I like about it:

It’s super easy to program. It obfuscates the MySpace page the best and makes positioning elements on the page a snap. Cross browser support is so solid I don’t think I had to do any tweaks.

What I don’t like about it:

I haven’t figured out how to display ads. I know I haven’t spent enough time trying variations on the approach and I’m confident that there is a way to show ads with this approach. I also don’t like that I can’t center my profile using this technique.

How to do it:

This is by no means an exhaustive explanation of this technique, but it should be enough to get you started.

Step 1
Hide everything. You can do this by using the style below:
table
{
margin-right: -20000px;
margin-top: -20000px;
overflow: hidden;
}

Step 2
Once you’ve hidden everything, you have a blank canvas to work from. All of your HTML elements can be absolutlely positioned from the top left corner with total predictability, which makes this a beginner friendly option. You will likely still want to use the comments table, which is pushed offscreen from the style code above, so here’s the code to manage your comments table:

* Comments table *
You’ll need to absolutely position the comments table to pull it back on screen from the style code that pushed it off in step one. You can do that with the style code below:
html body table td table td table td table td table
{
position: absolute;
top: 500px;
left: 500px;
}

* Style Comments *
If you want to control the comments style, use the selector below:
html body table td table td table td table td table td
{
background: transparent;
border: 0px;
padding: 20px;
font-family: Arial;
line-height: 1.8em;
color: rgb(0,0,0);
margin: 0;
}

* Friend’s name link in Comments *
html body table td table td table td table td table td a
{
font-weight: normal;
font-size: .9em;
}

* Images people post in your Comments *
If you make a pretty design and don’t want people’s big ass images to wack out the width of your comments table, use the snippet below. It prevents images from being any wider than you set below. However, it also makes the smaller images blow up the size below. I think it’s a good trade off for maintaining your comments table’s width. If you use this, you’ll need to use the following two style snippets too. Feel free to change the number of pixels to whatever your heart desires. You can even use percentages. Oooohh.

html body table td table td table td table td table td img
{
width: 280px;
}

* Comments online now image *
html body table td table td table td table td table td div img
{
width: 80px;
}

* Comments friend image *
td.text a img
{
width: 90px;
}

* Comments date *
If you want to stylize the comment date, use the snippet below. I made this snippet with an image in case you want to throw a comment balloon icon or something in there.

span.blacktext10
{
font-family: Arial,’Sans Serif’;
font-size: .9em;
color: black;
font-weight: normal;
letter-spacing: .1em;
padding: 5px;
padding-top: 0;
text-align: right;
margin: auto;
display: block;
padding-right: 20px;
background: transparent url(http://www.YourImageHere.com/) top right no-repeat;
}

Step 3
Because you are using child selectors to stylize parts of the comments table, that can leave behind other unwanted elements that you may need to hide or other control. I’ve been playing with enough methods lately that I can’t remember all of the unwanted issues that cropped up, but this should get you started and I’m always game for questions. For newbies, I’ve put default values in the properties, but Ninjas can put whatever properties and values they need to control these elements. The Key is having the child selection path or the right class name to target the element you want to control.

* Friends Table *
I’ve had difficulty trying to use the friends table for absolute positioning because all of the table cells render from the same starting point, which overlays them and makes the friends unusable. So the value below just hides it all together. If you wan to display friends, grab the file path to one of their pics and build them into your HTML.

table table td.text table td.text tbody table tbody td table
{
display: none;
}

* MySpace URL *
You don’t need to display this item. If you want to put your MySpace URL in your layout, do it with HTML as it will be easier to position and stylize.

html body table td table td table td strong
{
visibility: hidden;
}

So, that’s an introduction to the absolute method. Check back in a day or two for a starter template to build from for this method.

The Div Overlay

I saw this method in practice first on Rathy’s client’s site, DJ Q bert. I believe this is the same method used by Marcos, but I haven’t looked at his code thoroughly enough yet. My friend Marshall sent me a link to Derek’s explanation of this technique. As the technique’s name suggests, the idea is to place your HTML directly over MySpace’s. It’s a little challenging to control your comments table with this technique without having other unwanted elements show up in the background. You’ll need to target items quite specifically to root out all of the unwanted residue elements that never seem to stop cropping up. I want to have a list of all of the undesireables for you so you can easily build from a blank canvas.

What I like about it:
I can center my profile, keep the ads, and position my comments table. Nuff said.

What I don’t like about it:
So far I’ve found it challenging to work with this method. I changed my approach for this profile at least four times trying to acheive a centered profile, displaying just their ad and nothing else from the top nav, and getting it to look right on all of the major browsers.

How to do it:
As Derek has already covered this technique and I don’t feel like I understand it enough to provide the kind of clarity I want this profile to be, I’ll direct you to Derek’s article. Once I get this profile to work right in FireFox, I’ll tear it apart and have some solid answers for y’all.

Conclusion

This is my first crack at presenting this information and I’ve learned a blitzkrieg of info in the past few days, so I can’t imagine how there aren’t parts of this that are confusing. Please don’t hesitate to ask me questions. This should be more than enough information for web designers and if you’re pretty new and felt lost, you may want to start with the basics.