Customizing a MySpace Page for a Band/Page 2

[previous] [next]

Customizing a MySpace Page for a Band

Getting a Bit Creative

(Note: Graphics are presented at the end of this article showing the areas detailed below.)

Tip: When you're editing the sytle sheet, it's helpful to also have your MySpace Web page open in the browser. That way, you can edit on the one page and view the results on the other. A good Firefox extension for this is Split Browsr. With this extension you can divide the screen into separate windows and view them at the same time.

The first thing we're going to do is change the background. Login to your account and click on the "Edit Profile" link right under the "Hello, [your band's name]." Then click on the "Band Details" tab. Here you can fill in the different fields with all the band's information. What we're going to do is click on the "Edit" link in the "Bio" section. This is where you'll place all of your CSS code (well, 99% of it). At the very top of the textarea box, above any other text, add the following tags for the embedded style sheet:

Be sure that all of the style code is placed within these tags, otherwise the code itself will display on the page.

Next, we'll set the default font, line height, and add a bit of color to the background:

This will provide the color for the background of the entire page, which is seen on each side of the center column. We'll set the color for the center column in a moment.

When you make a change to the style sheet, you need to press the preview key to process it. Many times the changes you make will not be seen on the next screen as they're in a different part of the screen. It's not a problem if you make a mistake, though. You can always edit it. If all is well, press the submit button. A JavaScript alert window will pop up with a warning that the changes may not be searchable for 24 hours. Since you're just changing the style sheets, it really won't matter.

If you want to add a graphic to the background, it's very simple. However, you need to have the image (that you're using for the background) hosted on another server as you can't link to uploaded graphic files on MySpace. Just change the background property to the following (using your own server infomation, of course):

Now, let's add some color to the center column. First we'll remove the borders on all the tables. You can always add a color to the border and change its style to make if stand out, if you like):

That should remove most, if not all, of them. This will remove the border around the contact box

Next, we'll color the center column, using descendant selectors:

This is where the Firebug extension comes in handy. Many of the areas that you might want to customize are buried deep on the page. Using Firebug will help you to find the path to them.

You could, of course, add a graphic to the center column also, if you wish. You would just use the same method as we did previously for the body selector.

Finally, let's remove the border around all links with images (friends, etc.)

[previous] [next]

URL: