Sunday, October 01, 2006
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>
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>
<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 color2. you'll probably want to match .your_banner
background-color to your profile background color3. if you have a background image, you'll want to enter it's url in the .your_banner
background-image: url(); setting4. more info on css background settings here
Labels: custom myspace banner / masthead
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
<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.
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!
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. :)
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
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
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>
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.)
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!!!
this is how myspace looks now
www.myspace.com/shekinahjuvenil
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
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!
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.
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.
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.
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
you and the brain of a friend saved me from hours of headache!!
thank you thank you thank you!
<3 anna.
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. :)
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.
Hally, see my comment on 2/20 above. That's likely the problem.
Hope that helps!
Tom
Thought that solution looked way too easy (from my experience with these scripts lol)
Answered here. (I'm going to try to shift questions over to my wiki as it's a bit more interactive.)
'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.
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..
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
(ps. i made sure the background color was different form the text and links colors so im not sure)
see this
Please send me a message on myspace.
www.myspace.com/stephiexbee
message me please my myspace url is
www.myspace.com/eddie_guerrero_fansite_ok
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
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!!!!