Question about how to layout MySpace

Question about how to layout MySpace

I recently received this e-mail from one of our readers:

I read the CSS information on how to personalize your myspace page. My question is How can you save the layout so I can post it on my website so anyone can use it? Like all those websites that offer free layout. What programs can you use to create these layouts? Are there any tutorials that show me step by step instructions?

I've been told by some that the MySpace css layout tutorials on our site are some of the best out there, though I still think they leave a lot to be desired.

Getting started with your layout of a MySpace page

One way to get started designing a MySpace css layout is to do the following:

  1. Visit a profile page.
  2. Download the MySpace layout by saving the page. In Internet Explorer 7, this means clicking "Page" and then "Save as", and selecting "Webpage, complete" as the type to save. In Firefox, click file, then "Save page as", and save as Webpage, complete.
  3. Open the MySpace profile page html file by visiting where you downloaded the files and double-clicking the .htm or .html page. At this point, you should see an identical page in your browser.
  4. Now, you can start playing with the css of the layout by right-clicking on the .htm or .html page you just opened, select "Open with" and select "Notepad". This will open up the HTML in a text editor.
  5. MySpace allows you edit the CSS, but not the HTML, so you'll need to use some CSS trickery to edit the layout. One good place to learn CSS is
  6. To add CSS to the MySpace layout page, add the following to your page:
        /* This is a comment. Enter style below this, but before </style> */
        .example-style {

The difference between 'id' and 'class' in a MySpace Layout

To specify what parts of the page get what CSS styles, MySpace uses either the 'class' or 'id' attributes. To override the 'class' of an element, take the following MySpace profile page code:

<TR class=userProfileURL>

To change how this displays, you would add this to the style section of your css page:

.userProfielURL {

Notice that you use a period in front of the style when it is used in a 'class' attribute.

For an id attribute, as in the following:

<DIV id=tkn_leaderboard></DIV>

You would use:

#tkn_leaderboard {

Notice that this style starts with a '#' instead of a period.

Testing the MySpace layout

To test out what you've done, first save the file in Notepad by clicking "File' and then 'Save'. Then, refresh the page in the browser you have the page open in. You should see the changes you've made.

Layout MySpace's css styles with Firebug

The Firefox browser has a great tool for finding out what css styles are being used on a page. After installing Firefox, download the Firebug extension. Once it is installed, open the MySpace Layout again in Firefox (right-click, select 'open with', and select Firefox). Click CTL+ALT+L to open Firebug. It should display towards the bottom of the browser screen. Then select 'Inspect' and hover over different areas of the page. On one side of the Firebug window, it will show you what HTML is there, and on the other side it will tell you what CSS is being used on the MySpace page, and what the name of the css styles are. You can click on an element, copy the CSS code from Firebug, and paste it into your stylesheet. Once it's there, you can mess with the style all you want.

Sharing your MySpace layouts

There are tons of sites out there that host layouts MySpace users can use. If you want to share your layout, you just need to copy the everything from the beginning to the end of your style tags, with the tags included. Then, to add it to your web page, you can use a textarea to allow people to copy it:

    /* Your styles here */

Which will look like this:

Programs to create MySpace layouts

In regards to your question about programs that allow you to create MySpace layouts, I don't know of any that cater directly to layouts MySpace users can use. However, you can use an editor like Dreamweaver for more powerful CSS layout editing.

I hope that helps!

Discussion on this post:


Do any of you know about moving around the myspace tables to give it an even diffrent look?

I agree, those are the best tutorials I have seen on Myspace

I agree that the above referenced page (and the other pages by the same author) are among the best myspace code tutorials out there.
But I have to admit to some bias.

MySpace didn't always strip the #.
I have only been playing with myspace for just under a year, and when I started, I was able to get the # in on the band pages, as long as I didn't use safe mode.
They since blocked that, and forced me to change my solution which used that (the maroon navigation bar is where I most used it, that thing is just irritating).
This makes me wonder if it was once allowed on the standard page as well.

Implied By Design Logo