WWW FAQs: How do I customize my myspace page?


2006-11-24: MySpace can be customized in many ways. This article is just a "down payment" on the subject - with links to tools and resources to do more.

A lot of readers probably just want to know how to do it now, and aren't that interested in how it works. So without further delay, here are two web pages that provide free tools for customizing your myspace page without pain:

1. Thomas' Myspace Editor (no relation to myself).

2. MySpaceEditor.Org also offers a simple MySpace-customizing web page.

OK, that's the basics for those who want a simple solution now! For those who are interested, here are the technical details on what MySpace can and can't do, and how it works "under the hood." The rest of this article is for folks who like to write their own HTML and CSS code... and for those who want to know why code for "real" websites won't always work on a MySpace page.

Understanding What MySpace Can And Can't Do

MySpace is unusual in that, even though MySpace is a free service and obviously very different from normal web hosting, they do allow users to insert both HTML and CSS code into their own pages. So users come to my site hoping to apply the techniques in my articles to MySpace.

But the fact that MySpace allows a limited amount of HTML and CSS coding doesn't mean you can do whatever you like. The following is a partial list of things that MySpace doesn't allow:

1. PHP

2. JavaScript

3. ASP

4. CSS color codes beginning with #

5. CSS element IDs, i.e. #id (class IDs such as .class are allowed)

6. Inline frames (the iframe element)

7. Hiding their ads (your profile will be deleted if you do)

8. Inserting code into the head element

9. Loading an external CSS file

As you can see, there's quite a bit that MySpace won't let you do. So most of my web design-related articles apply only partially to MySpace.

On the plus side, MySpace does allow Flash. And their support for CSS works as long as you watch out for rules 4 and 5 above.

With all these limitations, how does anyone manage to customize their MySpace page? You can do it by pasting in your CSS code in a style element at the top of the "About Me" section of your profile.

For example, the following code will:

1. Turn your background black (000000) and change most text to a slightly reddish white (FFBBBB).

2. Put all headings in small caps.

3. Make amusing additions to the text in certain places.

If you don't like my colors, substitute your own. Don't understand hex color codes? Use SitePro Central's free and relatively advertising-free color picker page to select your color on the screen and see the corresponding hex color code.

If you don't like the small caps, just leave out the font-variant: small-caps; line. You can remove my additions to the text by taking out the content: lines.


<style>
body, table, tr, td, th, a, p, strong, div {
color: FFBBBB;
background-color: 000000;
}

.blacktext12, .btext, .redbtext, .text, .nametext, .lightbluetext8 {
color: FFBBBB;
}

.blacktext12:after {
content: "isn't that nice?";
}

.lightbluetext8, .nametext, .btext, .redbtext, .blacktext12 , .whitetext12, .orangetext15 {
font-variant: small-caps;
}

.redbtext:after {
font-weight: bold;
content: " wonderful";
}

a.searchlinkSmall:link{color:FFBBBB}
a.searchlinkSmall:active{color:FFBBBB}
a.searchlinkSmall:visited{color:FFBBBB}
a.searchlinkSmall:hover{color:FFFFFF}

a:link {
color: BBBBFF;
font-variant: small-caps;
}
</style>

Changing the foreground and background colors isn't enough for you? Check out these resources for more advanced information about the guts of MySpace CSS:

1. The backgroundsarchive.com myspace introduction.

2. Natalie's amazingly informative myspace CSS HOWTO post on buddy4u.com.

3. Mike Davidson's "Hacking a More Tasteful MySpace," which is where I learned the Content: trick.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!