The other day, I had the “pleasure” of updating a Myspace page for someone, so I thought I would share my experience. It’s not the first, and probably not the last, Myspace page I’ve been asked to edit. (Well, actually I kind of volunteered… doh!) Even if you’re not a Myspace user, someone you know will have an account. If they know that you know anything about web design, chances are they will try to recruit you to customize their page.
Unlike some other blogging/social networking sites, Myspace doesn’t ask you to choose a template for your page, but rather allows you to use CSS to style your page how you’d like. This flexibility is one of the reasons why Myspace has become so popular.
A few things before we get started:
- Following along with these instructions will require at least basic knowledge of HTML, CSS, and the DOM. If you are not familiar with these concepts, w3schools.com is probably one of the best places to start learning.
- If you are a standards-aware web designer, Myspace’s markup will drive you INSANE! From a standards point of view, it is the definition of horrible code. Lots of tables, embedded styles, font tags, you name it.
- Myspace doesn’t like # symbols. When saving your page, it will convert them to #. This means no # symbols at the beginning of hex colors and no way to target elements by ID in your CSS.
- You may find it easier to find a theme or a profile code generator to give you a head start on your CSS. You can tweak it to your liking from there.
- You will need to put your CSS into one of the profile sections like “About me:” or “I’d like to meet:”. Normally, you would link to an external style sheet or (worst case) put it in the <head> of the document, but like I said, Myspace is not very standards-compliant.
- I highly recommend that you use a couple tools to help you edit. I will be using the Web Developer extension and Firebug for Firefox, so if you want to follow along, you’ll need to download and install them. I’ll explain how we’ll use them in a minute.
Now, here’s where we get started:
- Download and install Firefox, the Web Developer extension and Firebug.
- Find a theme that closely resembles the look you are shooting for. There a ton of themes on the web, as well as Myspace “code generators”. A quick Google search should find them. If you can’t find anything easily, don’t worry about it; you can still follow along, you’ll just be starting from scratch.
- If it’s not already running, fire up Firefox and install the plugins I mentioned in step 1.
- Go to the profile page you are trying to edit (the one that a normal user sees, not the one you see when you login).
- On the Web Developer toolbar at the top of Firefox, select Outline > Outline Current Element. This will turn your mouse pointer into crosshairs and will display a string just below the toolbar that represents the DOM structure of all of the ancestors of the element that your mouse is currently over. This is how you will figure out which element to target in your CSS.
- Since Myspace doesn’t let you use # to specify an ID of an element in your CSS, you will often need to use element names and classes to target objects that you could normally target by ID. So, given the following structure:
html > body.bodyContent > table > tbody > tr > td.latestBlogEntry > table > tbody > tr > td#ctl00_Main_linkCategory > a
you could normally use:
#ctl00_Main_linkCategory a
to target the anchor, but instead you are forced to use:
.bodyContent .latestBlogEntry a
Not a huge deal, but nevertheless, something to be aware of. It’s a little hard to illustrate here, but you’ll see what I mean when you start editing. - Now, in the Web Developer toolbar, click CSS > Edit CSS. This will split your window horizontally into half browser, half CSS editor. You’ll want to go to the “Embedded Styles” tab. Once you figure out which element you want to customize using the “Outline Current Element” tool, you can edit the CSS real-time and see the page change as you edit. Make all of your changes and then copy everything to Notepad or TextEdit. This is what you will need to paste into one of the profile sections mentioned previously.
- Next, click “Home” at the top of the Myspace page, then “Edit Profile”. Find the “About me:” or “I’d like to meet:” section and paste the code you copied from the CSS editor at the bottom and surround it with opening and closing <style> tags (<style> and </style>). After you’ve inserted your code, you can preview your profile or save changes by clicking one of the buttons at the top of the page. The preview is not always 100% accurate, so I would just save them and then go look at your actual profile.
- Here’s where Firebug comes in. Firebug has a really cool feature that lets you inspect the DOM, click on an element, and see every style that is applied to the element and exactly where it came from. It shows inherited styles as well as styles that specifically target the element, and strikes through any that are overridden by a more element-specific style. You can use this to figure out why a particlar style isn’t getting applied, even though it appears for a particular element in your CSS. (See the image below.)
- After you have your page looking the way you want, you can go back and clean up the styles using the same tool described in step 9. It shouldn’t hurt to leave duplicate styles intact, but it’s good practice and cleaner if you remove them. Plus, it will make debugging easier in the future.
That’s it. You’re done. Happy Myspace-ing.