(by 96 people)
Created by derek (contact me)
Twenty three years of age and counting. Filipino. Creative. Humorous. Possibly temperamental concerning certain aspects of my life. Nag-iisa. Aspiring... (more...)
Your fans are waiting!
Boasting 50+ million individual users and music bands, MySpace is web force few can challenge. With millions of users interacting on a daily basis via instant message(s), private message(s), comments, and blog posts, standing out from the crowd may prove difficult. Expressing individuality and personality is limited to a less than attractive default profile layout. While MySpace does allow its users to edit their profiles to suit their own personal tastes, the ability requires the use of malformed HTML & CSS. Many users simply cut and paste content from various online resources to change the color scheme of the default profile. While acceptable for some, the default fails to meet the expectations of others.
I will share the basic requirements for a two column div overlay providing users with a clean canvas to create their own personalized profiles. For an example of what can be accomplished with a DIV overlay, visit my personal profile on MySpace for a quick example.
What's here
Keep your pages light
Broadband users should think of their "friends"
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?
Minimal DIV Overlay
The finished result [Dark MySpace DIV Overlay]
Dark Minimal MySpace Overlay
Minimal Lime MySpace Overlay
MySpace DIV overlay series
It can't get any easier than this
- 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
- 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.
Worth a read
CSS Mastery: Advanced Web Standards Solutions
Amazon Price: $22.74 (as of 05/17/2008)
