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:
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.
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
Finally, let's remove the border around all links with images (friends, etc.)