myspace layout

Keep your pages light

Broadband users should think of their "friends"

Standing out is essential if your aim on MySpace is to attract the attention of others. While the flamboyantly colored pages overloaded with streaming content may have seemed "cool" while you cut n' pasted code from various resources online, others may not share the same excitement as they tap their desks waiting for pages to load. 50+ million users strong. Of those 50+ million registered users, what percentage do you think access MySpace from a high speed internet connection?Keep your pages light. A single streaming audio or video clip is fine.

Streaming audio combined with high resolution images? Not fine.Design smart. Create light. And think of others while designing your pages. Your contact list may be full of "friends", which ones actually wait for your 30 second page load times?

MySpace DIV overlay series

It can't get any easier than thisFollow the series to create a base two column DIV overlay. I provide the canvas, you provide the paint and creativity.

Part One: MySpace DIV overlay [The base]
This will be part one of a series for creating your own MySpace DIV overlay. I will try to keep this tutorial simple and straightforward. The idea is to cover the entire default MySpace profile with your own custom page. While DIVs can be used to cover specific areas of the profile [while retaining much of the default page], this series will walk you through the steps necessary to cover the entire default profile. The easiest way to visualize a DIV overlay is to imagine a stack of strategically placed "layers".

Part Two: MySpace DIV overlay [Navbar / Content]
[...] create the basic navbar, a main content area, and a sidebar. This means that we will be using three seperate DIVs. We will build upon the previous code from part one of the series.

Part Three: MySpace DIV overlay [Comments]
This portion of the series addresses the MySpace comments. More specifically, hiding the long winded list of comments [left by other users] and inserting a comment box.

Part Four: MySpace DIV overlay [Color]
Much needed update covered basic uses of background-color and background-image to style individual DIVs.

Completed: Dark MySpace DIV overlay
I've zipped the completed base HTML and CSS files for one convenient download allowing you to create a personalized DIV overlay. Please consider reading through the tutorial series linked above before downloading this package.

Completed: Minimal Lime MySpace DIV Overlay
An updated option for MySpace users looking for an alternative DIV overlay. Read the entire post as I've included a pink and orange option.
Linkage that may be of interest The following links can be used as reference(s) during the creation of your custom profile.

Colors make the world go 'round
Squidoo lens with web color resources. Much of your custom profile will rely on overall structure. The actual asthetics deal a lot with color. Choose wisely. Your colors reflect your personality.

Mozilla Firefox
The Firefox browser in itself offers security advantages over Internet Explorer. Take Firefox for a spin and enjoy tabbed browsing and extensibility through a vast collections of extensions. See link for the Web Developer extension below.

Firefox: Web Developer
Once you've created the overall HTML structure of your profile, utilize the CSS editor provided by the Web Developer toolbar extension for testing your profile. Edit CSS live without the need to resubmit code after minor changes.

HTML Beginner's Guide - HTML Dog
This HTML Beginner's Guide assumes that you have no previous knowledge of HTML or CSS.

CSS Beginner's Guide - HTML Dog
[...] the CSS Beginner's Guide assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials [...]

MySpace profile "hack"
Yet another approach to overlaying your MySpace profile with a giant background image.

The web designers guide to MySpace
Eston breaks down the options for individuals who wish to break away from the standard profiles. The options range from the strict limits of tweaks to existing tables, to the limitless otpions afforded by overlaying the entire profile with a DIV container.