myspace civilized
phidias showing frieze of parthenon to his friends
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 directly

click here for a demo

Here'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:

comments

add your own comment
This comment has been removed by the author.
The banner works well in IE6 and Firefox2, but only if you have the default extended network and blog boxes visible.

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
Thanks for your comment. It reminds me that I should probably add a caveat to moshi v 1.3: IE6 support not guaranteed. :)

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
To thesimpletooth:

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
add your own comment