Tutorial: Adding your band logo to the top of your MySpace profile

One thing most of the MySpace pages of professional bands have in common is that they show large logos or promotional images on the top of their MySpace pages. In this tutorial I'll show you how to add your logo to your own MySpace band page.

Depending on the type of profile you have, there are two methods. The first method is for the older MySpace profile, which most bands still have. The second (and slightly easier) method is for people with the new MySpace Profile 2.0. For both methods you need to have your logo image online somewhere so you can link to it.

Oldschool MySpace profiles

Click on 'Edit Profile' in the Profile dropdown menu. Then select the 'Musician Details' tab. There click the 'Edit' link belonging to the 'Bio' field.

Edit Profile - MySpace

We start by entering the html that will show your logo at the bottom of the 'Bio' field:

<div class="logoHeader">
    <img src="URL" alt="Your bandname" title="Your bandname" />
</div>

You need to replace URL with a link to your logo.

The next step is creating some space where we can show your logo. Enter the following below the other html, with at the place of the XXX fill in the height your logo needs:

<style type="text/css">
body table {
margin-top: XXXpx;
}
body td table, body div table {
	margin-top:10px;
}
</style>

It's possible to tweak the margin-top value a bit to add more or less space for your logo.

Now we still need to specify where your logo should be shown. The following code will take care of that.

<style type="text/css">
div.logoHeader {
	position:absolute;
	top:210px;
	left:50%; 
	margin-left: -475px;
	width: 950px;
	height: XXXpx;
}

margin-left:-475px;
width:950px;
</style>

Replace XXX with the heigth of your logo. If you want your image the be centered it's best to keep the width at 950 pixels. If you change that, you'll also have to change the margin-left value. If your logo is shown over other parts of your page, tweak the top value to get it at the right place below the MySpace banner and navigation.

This is the result:
The Mieters - MySpace

MySpace Profile 2.0

With the new MySpace Profile 2.0 pimping your bands profile will get a lot easier. Sadly it isn't available for everyone yet. To check if it is available for you, select 'Customize Profile' from the Profile dropdown menu. If you see the next screen, you're good to go with Profile 2.0, otherwise, you'll have to follow the steps for the olschool MySpace profiles.

Customize Profile - MySpace

Profile 2.0 - MySpace

In the Profile 2.0 editor select CSS, there add the following css code:

.contentTop {
	background-image: url(URL);
	background-repeat: no-repeat;
	background-position: top left;
	padding-top: XXXpx;
}

Replace URL with the url to your logo and replace XXX with the height of your image. That's all!

This is the result:
Mae Day - MySpace

Conclusion

I hope this tutorial helps you create a more professional looking MySpace. Keep in mind MySpace sometimes changes their html, so while the information in the tutorial is correct now, it might change in the future.

If you have any questions, remarks or corrections, please let me know by leaving a comment!

Related articles:

Liked this post? You might also like the following articles:

16 comments on “Tutorial: Adding your band logo to the top of your MySpace profile”

snyd

January 14th, 2009 | 1:48

thX for this article, it´s really helped me, more tutorials like this one:)

jackson

March 21st, 2009 | 18:33

hey what is wrong with me. I figure this out. every time i use this code it just puts the picture in my bio rather than a banner on top. what am i missing?

Jimmy Shelter

March 22nd, 2009 | 11:37

Hey Jackson,

I can't see a logo at your MySpace at all right now, so I can't what's going wrong.

Probably either you or me made a typo in the code. I have to inspect the result to see where the problem is.

Ray

April 19th, 2009 | 19:59

what website can u go to to get that code that u have in your pics

HipKat

May 16th, 2009 | 17:59

Code works perfectly, except on tweak. I had to change the margin left to 55% to get it centered, and that was using the 950px as an image width.
Easy enough, though.

Thanks!!

Those pre-generated codes never work right.
This worked perfectly!

Ty Gibson

May 30th, 2009 | 8:43

Excellent tutorial my friend! What took me hours trying to figure now took minutes. Thanks!

prerak

June 6th, 2009 | 21:53

hey,
i want to link a url to the picture which I have added by the method shown above. the new profile 2.0 does not allow me to use html in css box. how should I link the url to my image? Please help. thanks
Prerak

pete

June 23rd, 2009 | 0:47

This is brilliant. 100% instant success. Be sure to follow carefully the bit about making space for the logo to fit or else it overlaps other stuff. Copy your code from the biog section first into a notepad doc as a back up.

jordan

August 25th, 2009 | 23:37

hi i was wondering if you knew why every time i click the "customize profile" tab it links me to "Edit Artist Profile >> Edit Upcoming Shows" even when i click the customize profile link in myspace's help section it still sends me to "Edit Artist Profile >> Edit Upcoming Shows"

on my personal myspace i have no problems, it sends me right to the customization screen

Carl Frantz

September 9th, 2009 | 2:52

hey when i do this everthing works great but i cant finalize cuz the graphic covers up my submit option after i hit preview.... idk how i could get around that

Jonathan

September 30th, 2009 | 18:05

You Sir are a genius.

brandon

November 27th, 2009 | 3:08

i did this turtorial for my bands myspace and i accomplished what i needed to, but it will not, for whatever reason, let me submit the material once it has been copied and pasted and all that stuff. any suggestions?

ro

December 8th, 2009 | 8:09

im in big trouble, i used this tutorial and now i cant keep editing my profile, the space of the picture occupies the (edit) links on my profile edit page and now i think its stuck this way forever.

HELP!!!!

Markus

January 16th, 2010 | 22:32

It's real work....!!!!
Thanks a lot!!!!
God Bless!!!

Aaron

March 13th, 2010 | 12:32

hey when i do this everthing works great but i cant submit because the graphic covers up my submit option after i hit preview.... how i could get around that?

me

April 17th, 2010 | 2:31

when i go to the customize profile it comes to the thing with "show date" :l

Comments are closed

This blog is archived, new comments are closed.