Question about how to layout MySpacePosted November 15th, 2007 by Chris
I recently received this e-mail from one of our readers:
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:
- Visit a profile page.
- 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.
- 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.
- 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.
- 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 w3schools.com.
- 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> */
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:
To change how this displays, you would add this to the style section of your css page:
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:
You would use:
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!