How to style your MySpace page using CSS

Tutorial by admin, last edited on December 31st, 2007

Everybody always has these complicated methods that they have to use when they style their MySpace page. Usually their CSS selectors are long, clunky and are hard to control. There are some basic tricks that I think we're all missing!

The MySpace CSS Selectors

MySpace, as you may have already figured out, will disable the # sign. This makes it impossible to select the ID divs used for the layout. So we are restricted to using classes. I've gone to the trouble of finding the main CSS selectors and what they will effect:

MySpace Areas

.bodyContent: changes the body tag (for instance, if you are adding a background image or color)
.navigationBar: the main navigation table
.profileInfo: effects everything from your display name to the "View my: Pics | Videos"
.interestsAndDetails: this is your General Interests, Music, Books, Heroes, etc.
.contactTable: effects your contact table, naturally
.userProfileURL: the little box with your MySpace URL
.userProfileDetail: your dating status, here for, ethnicity, job, etc.
.userProfileNetworking: your networking table
.userProfileCompany: your companies
.extendedNetwork: "your username" is in your extended network box
.latestBlogEntry: the table displaying your most recent blog posts
.blurbs: the blurbs- About Me, Who I'd Like to Meet, etc.
.friendSpace: edits the way your top friends show up on the page
.friendsComments: edits the friends comments section

MySpace Fonts

.orangetext15: "Blurbs", "Friends", "Friend's Comments" and most of the headlines on the right side
.whitetext12: "Contacting _____", "____'s Interests", "____'s Details", and most of the headlines on the left side
.navbar: the links for the main navbar. In order to change the style the selector should be '.navbar a' (but without the quotes) to properly select the links
.nametext: the font for where your username is displayed
.lightbluetext8: the font for the category headers within Interests, Details, and Schools. Example: "General", "Music", "Status"
.redtext: the numbers in "Displaying 50 of 164 comments"
.blacktext10: the date within each comment post
.commentlinks: the links for Comment Back, Send Message, and Block User. Again you'll need to use '.commentlinks a' to effect the links themselves
.text: effects a number of items on the MySpace layout, and is somewhat unruly so I don't use it much in my stylization

Redesigning the layout

There are a few keys when it comes to redesigning your layout in MySpace. If you want to be moving things around you're going to need to use some positioning tricks, especially since we're dealing with a lot of ugly code. Some things to keep in mind:

» MySpace is kinky. Sometimes what you think will work won't, and what you think won't work will. After some toying around in CSS and MySpace you will start to learn what needs to go where to make things tick.
» The MySpace layout was created in tables. If your CSS selector isn't working, try looking at the code and start including specific ancestors to your selectors to make it more specific. Sometimes that's all it takes.
» Some things in MySpace can only be selected through long strings of tags, usually involving a lot of this: table tr td table tr td tbody tr td { your: style here; }. This is easiest to do if you download Firefox and use the Web Developer plugin, and then hit Ctrl+Shift+F.
» This method makes it relatively simple to: hide your friends comments, hide your friends, hide your information, or hide practically anything you want simply using the { display:none; } command.

As for redesigning and moving things around, you can use the following methods to get you started before you find your own way of moving things: For each box (for example, maybe you want to move the contact box) you would follow this format:

Set the display to block, and maybe give it a width.

.contactTable { display: block; width: 220px; }

Next, position it absolute and set the left to 50%. This will place it evenly in the middle of the page at the top.

.contactTable { display: block; width: 220px; position: absolute; left: 50%; }

To position it, set the margin-left to either a positive or negative number in pixels. This will either move it left (negative) or right (positive).

.contactTable { display: block; width: 220px; position: absolute; left: 50%; margin-left: 200px; }

To place it's final position, you can give it a number of pixels from the top to space itself away.

.contactTable { display: block; width: 220px; position: absolute; left: 50%; margin-left: 200px; top: 350px;}

In this manner you can move, style, add backgrounds, and change almost all the main aspects of your MySpace layout.

Fixes for your layout

Using the methods above, you might soon realize that your footer links aren't adjusting to the length of your page. There is an easy fix to this:

table + table tr td div div { clear: both; margin-top: 150px; }

That code will create a 150px margin above your footer and cause it to stay at the bottom of your page, therefore fixing all of your problems.

Ideas for you to incorporate

There are some easy ideas you can incorporate into your site to make your MySpace page more unique.

Spice up your Extended Network or Comments text

Extended Network:

.extendedNetwork .blacktext12:before { content: "Guess What! " }

or Comments

.redtext + .redtext:after { content: " appreciated "; }

will show "Guess What! _____ is in your extended network" and "Displaying 50 out of 143 appreciated comments"

Add a masthead/banner above your profile

In your "About Me" section, add the following code:

In your CSS, you can add the following lines of code to make this a sweet graphic above your profile, substituting the *'s for your own sizes and placing a link to your graphic in the indicated location.

 .masthead { display: block; width: *px; height: *px; position: absolute; left: 50%; margin-left: *px; top: *px; background: url(http://your-link-to-a-graphic) no-repeat; }
body table { margin-top: *px; }
body td table, body div table { margin-top: 0; }

The second selector "body table" will move your profile down below the masthead so you'll want that number to be at least the height of your graphic plus the number of pixels away from the top it is.

Making it all work

When you write your CSS for MySpace, you want to follow the following format:

 /* you can write yourself notes to keep track of things*/
.bodyContent { background: url(http://www.example.com/example.jpg); padding: 0; margin: 0; }
/* keep everything CSS in one string, don't add line breaks in between or MySpace won't read it correctly */
.nameText { font: 24px Verdana; }

One last tip: be careful when you're using shorthand CSS. If something you're writing in CSS you should check two things: your shorthand (you may need to switch to not using shorthand), and also look for inline CSS in the MySpace code. This causes a few problems but with a little investigation you may be able to overcome them.

This tutorial was written on December 31st, 2007 by admin. You can leave a comment below to help keep track of errors. Follow comments to this posting through the RSS feed.

Comments:

binx said:
Jan 05, 09:16:28 AM

thanx mate

dutch said:
Jan 13, 02:56:15 AM

why is it that myspace friends comment section becomes different in firefox?

The dark orange area (picture/link) is wider than the light orange area (comments/words) for me.
How can i adjust the width of the areas. Its only a problem in firefox.
IE looks fine.

Thanks

bucky said:
Jan 27, 02:43:02 PM

I'm noticing that when I view a myspace page in Firefox, the top margin moves
the page down about half-inch. In IE its not a problem. How can this be fixed?
I would like to see the page header stay in the same place. Thanks.

bucky said:
Jan 27, 02:43:49 PM

kimberly jordan said:
Feb 15, 10:04:43 AM

I've been trying for days to put an image at the top of my myspace profile and the best I can get the codes to do is to lay the image on top of my page without actually pushing the rest of my profile down. I've tried countless code generators and the masthead code didn't work for me at all. Can you help me? I'm working with firefox if that makes a difference.

admin said:
Mar 12, 11:52:34 AM

@Kimberly Jordan: Make sure that you enter into your "About Me" section, about your ...

@dutch/bucky: Could you post a link to the profiles you are trying to style?

bloglady said:
Mar 24, 07:15:53 PM

You're a saint! Thanks for this info!

Clark said:
Apr 05, 06:06:35 PM

I cant get the footer links to scale with my page.... any advice?

http://www.myspace.com/clarkisvegas

ANNA said:
Apr 28, 07:31:56 AM

Like people jsut start writing straight after teh extended network. There is like no space in betwweeen. how do you do that ?

odean maye said:
Apr 29, 09:40:06 AM

The sections are different in myspace music. I need the tags t edit the different myspace music sections.

serzer biiaym said:
May 02, 10:36:39 AM

CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

Diego said:
May 27, 07:09:32 AM

Finally a real "how to" guide for customizing your own myspace webpage intended for people who have a basic knowledge of using CSS.
I've been through so much junk surfin' on the net. Thank you very much mate.
By the way, this website is great for learning CSS: http://www.w3schools.com/css/css_reference.asp

Diego said:
May 27, 07:10:31 AM

hailey): said:
Jul 06, 11:45:29 PM

heey. i was wondering if you knew how to shift over "general intrests" over to the left on my myspace, but make it so it only affects that. thanks. (; (L)

if you can help email me back @! x_.memorys.fade_.x@hotmail.com

crystal said:
Aug 18, 07:42:20 PM

Hi, Can you please contact me at crystalga@live.com i have a question and it's too long to post here. -Crystal

Nicole said:
Aug 31, 11:19:39 PM

Hey Thanks so much for these tips... For the longest time I couldn't figure out why my masthead was overlapping my page, until I saw that the number of the 2nd body table had to be at least the height of the graphic plus the number of pixels away from the top.. i hadn't thought of that!

Again thanks so much, this is probably the most helpful site out there for these kinds of codes.

sicky said:
Oct 31, 04:00:07 AM

new masthead/banner code for all (Normal profile, band Profile)

.info{the height of your banner}
body table table td {padding-top:600px;}
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}
.info{required only for a band profile - to correct the old footer error}
body table.friendsComments td{padding-top:0px;}

check my last work:
www.myspace.com/boostadj

byez sik!!!!

CYNTHIA said:
Nov 04, 08:35:33 PM

I want to kno how i can make my general section (interest and details) make it bigger? Or if i can move my "who id like to meet section" to the left, but leave my "about me section" on the right?

chloe said:
Jan 06, 07:27:23 PM

i'd like to move my general section to the left, so that it doesn't make my profile look so wide.
is that possible?
if so send me the code to my email, please.
(if you want to view my myspace...)
it's myspace.com/chloe_colorrfulll

Tim said:
Jan 31, 03:06:22 AM

Ok so all i want to do is change the font and colour of the text in the friends box in myspace. Thats it. Why doesnt anyone know how to do this?

Peta Caswell said:
Mar 12, 02:53:10 AM

I want to change the Headline font to match one of the other fonts on my page. Does anyone know how to do this?

lydia said:
May 15, 02:18:35 PM

I'm having the same problem with the margin difference in firefox and IE. it tottally screws up the layout because i'm doing a band myspace that has a banner under the navbar. i have what margin numbers work properly in each browser, but how can I use both and write browser specific codes so that my layout can be viewed in both browsers? does any body have any idea? pretty pretty please email me! thanks :)

kpqvfxbvq said:
Oct 15, 09:54:54 PM

cG5jPl qaipkspmikjd, [url=http://wkamaabtslgn.com/]wkamaabtslgn[/url], [link=http://frweipocajtt.com/]frweipocajtt[/link], http://ukpufrmkzqsx.com/

albert said:
Nov 09, 10:53:19 AM

My page has recently been acting weird. Half way through the load up the entire page shifts to the right. I'm suspecting that someone left a comment which has some code that totally messes up my page. Any advice would be appreciated.

albert said:
Nov 09, 11:09:36 AM

http://www.myspace.com/albiethere

Mathias M. Stav said:
Jan 29, 02:40:35 PM

Can anyone check out why my css won't work for internet explorer?

http://www.myspace.com/mstavm

I've partly used advanced selectors([id="someid"]) to bypass the impossebilety of using "#", but I don't think that causes problems for any browser but ie6.

If its easier to get the code on mail, just tell me.