myspace civilized
phidias showing frieze of parthenon to his friends
custom myspace banner / masthead (updated)
this version of the banner has been deprecated. please see the latest version of the moshi stylesheet


Version 1.0 of the moshi style sheet includes code (html and css) for adding your own banner. These techniques have been addressed in a couple previous posts, but the code below has been more thoroughly tested and updates those.

This code was devised to be used in conjunction with the full moshi stylesheet, but you should be able to applied independently with only slight modifications necessary (if any).

Remember, don't mess with myspace's ad banner -- they don't like that and may cancel your account.

Add this css code (between the style tags) to your "About Me" section:

<style type="text/css">

START { YOUR BANNER - below myspace masthead }

NOTE { left margin should be half the width and negative }
NOTE { match border-color to your background color - color is text color }
.your_banner
{
border-color:black;
background-color:white;
color:cccccc;
position: absolute; left: 50%; top: 170px;
height: 150px;
width: 800px; margin-left: -400px;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif !important;
background-image: url(URL_FOR_YOUR_BG_IMG_HERE);
background-position:center left;
background-repeat:no-repeat;
border-width: 4px 0; border-style: solid;
}
.banner_content
{
padding:10px 20px;
border:none;
}
.your_banner h2
{
margin:0;
font-family:Trebuchet MS, Helvetica, sans-serif;
font-size:44px;
line-height:48px;
font-weight:normal;
}
.your_banner h4
{
margin:2px 0;
font-size:20px;
line-height:24px;
font-weight:normal;
}
.your_banner p
{
margin:0;
font-size:14px !important;
line-height:16px;
font-weight:normal;
}

NOTE { make room for the banner by padding top of profile table }
NOTE { setting below MINUS banner height above EQUALS margin below your banner }
body table table td {padding-top:160px;}

DNA { control side effects }
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}

END { YOUR BANNER }

</style>


Add this html code to your "I'd Like to Meet" section:

<div class="your_banner"><div class="banner_content">
<h2>title here</h2>
<h4>subtitle</h4>
<p>note 1</p>
<p>learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a></p>
</div></div>


notes
1. .your_banner color attribute sets text color
2. you'll probably want to match .your_banner background-color to your profile background color
3. if you have a background image, you'll want to enter it's url in the .your_banner background-image: url(); setting
4. more info on css background settings here

Labels:

comments

add your own comment
hi,

If i wanted to use an animated Flash file as my masthead image, what would be the code?

Awesome work by the way and sorry to burden you with this question when I know you are already busy.

Hope you can help.

Many thanks
I don't have a lot of experience with Flash, but if you have your flash code and are just wondering where to paste it, you'd want to put it between the two outer banner tags:

<div class="your_banner"><div class="banner_content">
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="600px" height="150px">
</embed>
</object>
</div></div>

The sample flash code is from this w3schools:

http://www.w3schools.com/flash/flash_inhtml.asp

Now I know that myspace allows flash code, but I don't know what kind of hoops they make you jump through in using it.

You could tweak the .banner_content settings, too, to help you position it. (Say get rid of the padding settings and position it absolutely to locate your flash object more precisely.)

When I have a little more time, I'll actually try this myself. :) Hopefully this will get you started. Just make a backup (using, for example, Notepad or Dreamweaver) of your profile before you do anything and experiment with it a bit.

And let me know how it turns out.
Hi Tom,

Thanks for the ultra-quick response!

I am going to sound like a real moron here but I have no idea what are the outer tags. Sorry, me and CSS just don't go. Flash and actionscript no problem but CSS... lol.

Can I just pase your code in the example above and if so, exactly where would it go?

Sorry again!
Flash and actionscript no problem but CSS... lol.

Yes, it occurred to me that some of the techniques described here assume a level of familiarity with css that not everyone has. As soon as I release v1.0 of the moshi stylesheet, I'm planning to add a "Intro to Basics" post. But that may not be for a few days. :(

If you can handle flash and actionscript, you can probably get yourself up to speed on CSS in all of 5 minutes. Here are some good quick tutorials:

http://www.w3.org/Style/Examples/011/firstcss
http://www.brainjar.com/css/positioning/
http://www.w3schools.com/css/css_examples.asp

As far as the outer banner tags, that would be:

<div class="your_banner">
<div class="banner_content">

{content inside banner here}

</div>
</div>

Why it requires nested tags like this I won't bore you with here. But this creates the banner which the css then positions.

In response to your specific question regarding where to put the code, follow the instructions in the original post itself. Then to include flash, tweak the banner html code as suggested in my last comment.

If you want me to help you with your code itself, send me a message to my klenwell myspace account and I'll see what I can do:

http://www.myspace.com/klenwell

Hope that helps. :)
tom ...

great work here, many thanks in advance for all your diligence.

I was trying to create a banner like the one found on Willie Nelson's myspace page (just as an example):

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=12411479

And have run into problems getting the image (.jpg) to actually show up on screen.

Does the .jpg have to be a specific size? Can it be modified?

I would like to create a banner 850p by 404p.

Any help at all would be appreciated.

Still a novice, but dedicated.

Steffan
papabear,

A couple suggestions:

1. Make sure you have the full correct url -- http:// and all

2. Units in css settings should be 'px' (not 'p')

It's probably true that Willie Nelson is allowed to do things on his myspace page that we cannot, but you should be able to add a banner similar to his.

I've tried to simplify the code in this example here:

banner/masthead simplified
This is what i found in wilie nelsons page...

Maybe it will help someone?
< div class="header">< center>< embed enablejavascript="false" allowscriptaccess="never" allownetworking="internal" src="http://www.oneoone.org/myspace/willie/williemovie2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="286" width="845">< /center>< /div>
Hey, this is pretty useful but I'd like a bigger banner. How do I go about doing that? I've modified the width and margins etc, but it still stays the same. I'd just like a deeper space to put in a bigger banner i.e. I need more padding at the top of my profile.
Hey, this is pretty useful but I'd like a bigger banner.

Sorry. Someone just can't give you a bigger banner. A bigger banner is something you have to earn.

(But here's a hint: don't overlook the height setting.)
Hey Tom! Thanks. It worked. I adjusted 2 things:

This
width: 800px; margin-left: -400px;
height: 180px;


and this
body table table td {padding-top:260px;}

And it works now. I have all the space I need. So thank you. I'm not finished with the rest of the coding but as soon as I am I'll let you see the end result.

Thanks again!!!
Men!!!! you are the best!!!!!!!!!!!! this is what i was looking forrrr God blessssss youuuuuu

this is how myspace looks now
www.myspace.com/shekinahjuvenil
Hello,

I'm having trouble in that the masthead graphic (re-sized to 720x360) overlaps everything; it doesn't push the the myspace links at the top or the profile info below further down. Also, somewhat alternatively, how would you simply add a table in between the myspace top banner and the profile info? Thanks
I'm having trouble in that the masthead graphic (re-sized to 720x360) overlaps everything

Last time I checked, this was the setting that controlled spacing:

body table table td {padding-top:110px;}

See the "Your Banner" section of v.1.2 stylesheet for more info.



how would you simply add a table in between the myspace top banner and the profile info?

I'm not sure if myspace accepts the <table> tag. And even if it did, it would be nearly impossible to position with all the other tags already there. If you want to add table-like content, I would suggest using a DIV tag in the same way that you would add a custom banner.

Hope this helps!
Hello,

Thank you for the code, it was helpful, do you by any chance know how to put a customer made banner with picture over the myspace banner

Thanks again

Hope you can help.
do you by any chance know how to put a customer made banner with picture over the myspace banner

Same way you'd do the custom banner but moved up to cover the banner with some position:absolute; magic.

Note, however, that this is against myspace's TOS and grounds for deletion.
i've tried a few variations of the masthead code...

when i view my profile in FF using the code that is currently on my profile..there's a huge blank spot at the top of the page.

and when i try to get the masthead to show up, it covers my profile picture/name/location/header.

when i uncover my picture/name/location...it makes the rest of my "about me" disappear..

and when i get everything to show up...the masthead is all sqenched up at the top of the page hiding under the Ad.

check out my page:
www.myspace.com/takecareanna

and see what i'm doing wrong...

THANKS!!

<3 anna.
Well, Anna, normally I don't do this because I end up with some godawful song playing in the background, but I looked at the source on your profile to help you (and ended up with Camera Obscura, which I do like.) In return for this, all I ask is that you remove Vulture from your playlist. :)

I see where you have the moshi banner code. However, I don't see the html for the banner itself. That is, you need to put your banner in a div tag, something like:

<div class="your_banner"><img src="URL_HERE" alt="my banner" border="0"></div>

That goes in your About Me section, but outside the style tags for the CSS.

That is the html that the rule then gets applied to, moving the banner into the proper position.

Hope that solves it,
Tom
wow. thank you so much..and in return i did in fact delete Vulture from my music selection...

you and the brain of a friend saved me from hours of headache!!

thank you thank you thank you!

<3 anna.
wow. thank you so much..and in return i did in fact delete Vulture from my music selection...

Glad to hear you and friend got it solved.

Now if you were able to add Tobin Sprout to your music list, I'd feel like I really made a difference here. :)
Hi, I am finding all this information very useful, Thank you. It's great that you take the time to share you wisdom.

I have been working on a myspace page (www.myspace.com/tashh7) & I have created a nice masthead but it doesnt show up? I have no idea where I went wrong. Can you please offer some advise..

Much appreciated.
I have created a nice masthead but it doesnt show up? I have no idea where I went wrong.

Hally, see my comment on 2/20 above. That's likely the problem.

Hope that helps!
Tom
OK now my image is showing but it is overlapping the tables at the top of my page :( Is there a simple way to make more room at the top?
Thought that solution looked way too easy (from my experience with these scripts lol)
OK now my image is showing but it is overlapping the tables at the top of my page :( Is there a simple way to make more room at the top?

Answered here. (I'm going to try to shift questions over to my wiki as it's a bit more interactive.)
For those who are experiencing problems with their banners/mastheads overlapping profile tables...

'div table table td' is the element that holds the MySpace menu (Home,Browse,Search,etc). To create the space to fit the banner/masthead, use either padding-top & padding-bottom, padding:'top&bot''lt&rt', or padding:'top''rt''bot''lt'. It worked for me.
Hi
If you were going to add the masthead to a music profile where would you insert the second batch of code in place of the who Id like to meet..

Thanks! Your blog has been way helpful..
hey i'm copy pasting the codes into my bio section, and then putting in the link for my image where it's supposed to go, but for some reason the banner/masthead keeps showing up in my bio section.

in my actual myspace (im doing this for a music page, do i have to do something different?) i have a masthead up fine, and even when i copy paste the coding from my page into my music page the masthead is still in my bio section. any idea as to what i might be doing wrong?

thanks!
-Shaun
I'm having the same problem as shaun. A few weeks ago I made a cool masthead following the instructions here for a music page with no problem. Today I went back to tweak some things and now I can't get it to work. The spacing for the masthead is correct, but the picture keeps showing up in the bio section. Anybody know how to fix this?
When poeple leave a comment on my page the date of the comment is transparent/invisble. What settings control these side effects? Again the comments show up but the date is tranparent/invisble.. help????

(ps. i made sure the background color was different form the text and links colors so im not sure)
I'm an idiot...I cant figure this thing out at all. I've got my profile to frop down but cant see my banner at all
Jason,
see this
hi. i fixed my page and now my date and time doesn't show up on my comments. how do i fix this?
I am wanting to put a Banner and the top above the AD's and have a Body background image as well. How do I do this????
I am trying to put up a banner at the very top of a music myspace page. I am usually good with this stuff, but can't seem to figure this one out. Help please!? Thank you in advance.


Please send me a message on myspace.
www.myspace.com/stephiexbee
what do i do if your profile doesn't show the ''about me'' or the''i'd like to meet''section
message me please my myspace url is
www.myspace.com/eddie_guerrero_fansite_ok
Hey, okay well the myspace banner code worked really well. but i now have a huge gap between my friends and comments. can someone tell me how to get rid of it without getting rid of the banner?
Okay - I've have the banner placed on my page - but how do you keep it fixed in a position. When I go from monitor to monitor using ie the banner keeps moving and not centered with my profile. Any Suggestions?
okay...i'm really bad with HTML and CSS codes...
but i have the direct link to my banner, it's....
http://i180.photobucket.com/albums/x65/xchemqueenx/Untitled.jpg

i was wondering if you could make the code for it. so that i could just paste it?

email me at scottam@wsdmail.net
NEW MASTHEAD/BANNER CODE for all (Normal profile, band Profile)


body table table td {padding-top:600px;}
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}
.info{required only for a band profile - to correct the padding error between top friends and comments table}
body table.friendsComments td{padding-top:0px;}

check my last work:
www.myspace.com/boostadj

byez sik!!!!
how can i put a banner directly above my friends and comments?

backlinks

add your own comment