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.
Comments (16)
Leave a Reply
Man that is exactly what i wanted and more, great post, and i appreciate it.
Sat 16 Jun, 2007 @ 1:21 am
Thanks! This represents to me what is good about the internet - not a gimmicky device but a practical, honest educational tool. You rock!
Why is it that it is easier to find the Firefox plugins through your blog entry than on the extensions page?
–J
Fri 29 Jun, 2007 @ 2:11 pm
Hi! I just searched for External Profiles and I found your site!
Sun 27 Jan, 2008 @ 3:29 pm
how about customizing myspace music? profiles for bands? where do I put those html/css codes?
tnx
Wed 05 Mar, 2008 @ 8:43 am
hope to ck ur site again soon
Fri 07 Mar, 2008 @ 10:55 am
@mark - I would assume that you could go about editing band profiles in the same manner. I have never edited a band page, so I cannot be completely sure, but you should be able to insert the CSS in any one of the free-form text fields such as the “About” area.
Fri 07 Mar, 2008 @ 12:12 pm
Please help…i have been trying to make some changes to my myspace profile under edit profile and when i remove an image and then add another image (code) and then select save…i get this sorry an unexpected ERROR has occurred …etc….
i have been able to make changes in the recent month with no problem, but suddenly about a week ago, it won’t let me make any changes to my profile..it just keeps saying that error message from above.
hope you can help in any way.
aloha from Hawaii..
Summer
Thu 03 Apr, 2008 @ 5:56 am
@Summer - From what it sounds like, the issue seems to be on MySpace’s side.
Are you adding the new images one at a time or a bunch at once? If you are adding a bunch at once, try adding one at a time until you can determine what might be causing the error.
Something else to try is to go into the screen where you edit your profile and don’t change anything, just hit save. If you still get the error, then chances are MySpace has changed something that has caused your current profile code to cause a problem on their side. In this case, your only options are to contact MySpace (if this is even possible) or try to figure out which part of your code is causing it by removing a little at a time until you don’t get the error any more.
Thu 03 Apr, 2008 @ 11:11 am
Hi There, Ive had over 5,000,000 hits on page. Im about to tour and am looking to update mine. I initially had someone program the basic background of my MySpace BandPage, and with that the basics were deleted…
For example:
The box on right that says: UPCOMING SHOWS.
(And you list them all in)
The box on left that says: BAND MEMBERS
My question is: Where can I find these basic html texts and instructions to re-enter them into this page?
THANKYOU-FIOR
Mon 09 Jun, 2008 @ 8:18 pm
@Fior, I’m not too familiar with the band profiles on MySpace because I don’t have one and I haven’t ever edited one, so unfortunately, I don’t know if I can provide much assistance.
Do the areas you are referring come standard with your MySpace band profile, or were they something that was added by you and then got deleted by the person you had change your page?
Mon 09 Jun, 2008 @ 9:38 pm
I am having great problems. I have an image in the background that is overruling and I can’t see my friends image or photo comments in the comment area. With the resources you provided, it tells me that there is an error but how do I fix it? Could someone look at my code and help me fix my page? I deleted all the info in “about me”, redesigned my page and it still stays the same. Thank you. myspace.com/fatinaboo
Mon 07 Jul, 2008 @ 10:18 am
I am having great problems. I have an image in the background that is overruling and I can’t see my friends image or photo comments in the comment area. With the resources you provided, it tells me that there is an error but how do I fix it? Could someone look at my code and help me fix my page? I deleted all the info in “about me”, redesigned my page and it still stays the same. Thank you. myspace.com/fatinaboo
Mon 07 Jul, 2008 @ 10:19 am
@fatina, your myspace profile is private, so I cannot look at the code you are referring to; however, it may be that you need to set the background color of the friends and/or comments areas. If these areas are currently set to a transparent background, then the text will be very hard to read over the top of your page background.
Mon 07 Jul, 2008 @ 3:37 pm
hey,
thanks for the tips, very usefull. i wondered if you can help me identify certain elelments.
i understand that you can’t use # , so how do i identify something when it’s id includes a #.
i.e
#member
#type
if i edit css with this:
#member{visibility:hidden;}
#type{visibility:hidden;}
the member since and type of label are hidden but i cant add it to my css as the # is not valid.
also can i make a certain table hidden if it has no id? thanks
Mon 14 Jul, 2008 @ 9:45 am
hi……….i have a dilemma lol!! i dont know what the hell i am doing on myspace….so i played around with it and wanted to change my background……….in error i deleted EVERYTHING in the about me section where i wanted to apply my backgound?? now when i copy and paste a back ground it is all messed up and not centered?? please help with instructions………….tx ………my kids are big and out and wont friggin help me………ugh……..they tell me to stop bothering their friends too ………..lol!
Sat 02 Aug, 2008 @ 2:57 pm
We add a show to our upcoming shows - it works fine - but when you refresh the page, the listing doubles - then triples and so on - can you help?
Tue 23 Sep, 2008 @ 1:25 pm