v. 1.3 banner code
Since the custom banner is probably the most popular subject on this blog, I've added a new stylesheet to the
project repository specifically for customizing your myspace banner. This will be integrated into the
1.3 stylesheet.
click here to go to it directlyclick here for a demoHere's the code:
/*
Myspace Open Source Stylesheet Initiative
Version 1.3 : Moshi Banner
Myspace Moshi Stylesheet
Jun 2007
Google Projects Page: http://code.google.com/p/moshi/
Blogger Page: http://myspacecivilized.blogspot.com/
Myspace Page: http://www.myspace.com/klenwell
Wiki Page: http://www.klenwell.net/is/CategoryMoshi
Author: Tom at klenwell@gmail.com
NOTES
* Banner
- the <div class="moshi_banner"> block serves as the content of your banner
- .moshi_banner style settings control where and how your banner appears
- replace http://img143.imageshack.us/img143/3492/moshibannermq4.jpg in src setting with the url for your image
- replace http://code.google.com/p/moshi/ with url to which you want banner linked
- default settings are 200px high and 800px wide -- you can change these, but you
will need to change some of the other settings to position correctly (recommended
for experienced css designers only)
----------------------------------------------------------------------------- */
<style type="text/css">NOTE { START COPYING MOSHI STYLESHEET HERE }</style>
<style type="text/css">NOTE { Your Custom Banner }</style>
<div class="moshi_banner">
<a class="banner_link" href="http://code.google.com/p/moshi/">
<img src="http://img143.imageshack.us/img143/3492/moshibannermq4.jpg" alt="moshi banner" border="0" />
</a>
<a class="moshi_credit" href="http://myspacecivilized.blogspot.com/">moshi template 1.3</a>
</div>
<style type="text/css">
START { CUSTOM BANNER - below myspace masthead }
NOTE { left margin should be half the width and negative }
.moshi_banner
{
position: absolute; left: 50%; top: 168px;
width: 800px; margin-left: -400px;
height: 200px;
overflow:hidden;
}
a.banner_link {}
a.moshi_credit { position:absolute; left:4px; top:4px; font-size:11px; }
NOTE { make room for the banner by padding top of profile table }
NOTE { set this to banner img height PLUS desired padding }
body table table td { padding-top:210px; }
JUNK DNA { control side effects }
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}
END { YOUR BANNER }
</style>
Labels: custom myspace banner / masthead
I hid the extended network and blog boxes, but relatively repositioning the table up 180px mangles the banner. I can't shift up the entire right column without mangling the banner in IE6. (This is not a problem in Firefox) All I can do is move the hole around with divs. Any suggestions?
see myspace.com/thesimpletooth
2:08 PM, June 16, 2007
Not that I don't want things to look nice in IE6. But XP automatically upgraded my browser to IE7 and it's difficult to now test in IE6. Besides, the only people I know using IE6 any more are corporate users who weren't automatically upgraded and probably have myspace access blocked anyway.
But to your question: do I have any suggestions? Not at this time. I looked at your profile in Firefox 1.5.x and IE7 and the banner looks fine. I would suggest backing up your profile and tinkering yourself. If you find a solution (or already found one), please post it here or let me know and I'll circulate it. If I find one, I'll be sure to post it and incorporate it into the 1.3 stylesheet.
Regards,
Tom
I just noticed an extra </h2> tag in the banner code. That may be have been responsible for your IE6 problem. I've corrected code listed here. If still having problems with this, try that.
Tom