Sunday, September 10, 2006
make your own myspace banner
the techniques described here have been updated. please see the following post:
custom masthead / banner (updated)
custom masthead / banner (updated)
Myspace terms of service prohibit altering their ad banner (hey, Fox has some big bills to pay after buying your profile for half a billion.) But that doesn't stop you from running your own banner underneath.
This technique is still highly experimental and runs within the context of the full moshi style sheet, so handle with care. But here's the relevant code:
<div class="your_banner"><div class="banner_content">
<h2>your banner</h2>
<p>set text or add a background image</p>
<h4>learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a></h4>
</div></div>
<style type="text/css">
START { YOUR BANNER - below myspace masthead - coming soon }
NOTE { left margin should be half the width and negative }
.your_banner
{
position: absolute; left: 50%; top: 170px;
height: 150px;
width: 800px; margin-left: -400px;
overflow:hidden;
background-image: url();
background-color:white;
border-color:black; border-width: 8px 0; border-style: solid;
color:cccccc;
}
.banner_content
{
padding:20px;
border:none;
}
NOTE { coordinate setting below with your banner height setting }
body table table td {padding-top:154px;}
body div table, body td table {margin-top: 0;}
END { YOUR BANNER }
</style>
<h2>your banner</h2>
<p>set text or add a background image</p>
<h4>learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a></h4>
</div></div>
<style type="text/css">
START { YOUR BANNER - below myspace masthead - coming soon }
NOTE { left margin should be half the width and negative }
.your_banner
{
position: absolute; left: 50%; top: 170px;
height: 150px;
width: 800px; margin-left: -400px;
overflow:hidden;
background-image: url();
background-color:white;
border-color:black; border-width: 8px 0; border-style: solid;
color:cccccc;
}
.banner_content
{
padding:20px;
border:none;
}
NOTE { coordinate setting below with your banner height setting }
body table table td {padding-top:154px;}
body div table, body td table {margin-top: 0;}
END { YOUR BANNER }
</style>
Note that the banner html precedes the style settings between the style tags. Here's a screenshot (IE 6):
Or see for yourself over at my recivilized profile.
I'm still tweaking it, but it looks ok as far as I can tell in Firefox and IE 6. Custom user mastheads will be part of the final 0.8 moshi stylesheet.
keywords: banner, masthead, custom
Labels: custom myspace banner / masthead
