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


Getting a lot of questions about my last post on custom banners. Some knowledge of css helps you modify it. But here's an attempt to help you if you don't have a lot of experience with css -- a stripped down version optimized for showing your own background image:

This is the complete code -- you can put it in either your "About Me" or "Like to Meet" section. The parts you'll want to edit are in bold red:

<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
{
background-image: url(http://www.domainforyourphoto.com/path/to/file.jpg);
width: 800px; margin-left: -400px;
height: 150px;
border-color:black;
background-color:white;
border-width: 4px 0;
position: absolute; left: 50%; top: 170px;
overflow:hidden;
color:cccccc;
font-family:Arial, Helvetica, sans-serif !important;
background-position:center left;
background-repeat:no-repeat;
border-style: solid;
}
.your_banner p
{
position:absolute;
top:120px; left:20px;
margin:0;
font-size:11px !important;
line-height:14px;
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>


<div class="your_banner">
<p>
learn how to edit your own profile: <a href="http://myspacecivilized.blogspot.com/">myspacecivilized.blogspot.profile</a>
</p>
</div>


It includes a little plug for moshi which I leave it to you to remove. :)

Here's what it will look like, more or less, if you do it right:

http://www.myspace.com/recivilized

For more info on using and editing CSS, consider the following quick tutorials:

w3.org
brainjar.com
w3schools.com

For a slightly more complex version of this banner, see my previous post:

custom myspace banner / masthead (updated)

Labels:

comments

add your own comment
Tom,

Brilliant reply to my post. A thousand thanks. I was beating my head against the ground wondering if myspace just didn't allow it.

Your adjusted code worked perfectly.

Thank you for suffering fools ... it's not always easy.
Thanks for highlighting the parts to edit in bold red. It makes it easy to get started right away, knowing that as I increase in knowledge of CSS and the insanity of MySpace's layout, I can make other improvements. Thanks for your hard work!
Big thanks! I'd been looking for a script that would do this for a while. It was only by chance that I came across a page with the script - I looked at the source and then typed in one of the invisible tags from it into Google... if only this page was easier to find it would have saved me a lot of time.
I got this to work easily, thank you. However, it's chopping my image off when viewed with internet explorer.

Help please?

-Ange
I got this to work easily, thank you. However, it's chopping my image off when viewed with internet explorer.

Not sure what's going wrong -- too many variables here. Without more information, all I can suggest is playing with this setting:

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

Maybe make it a little bigger?
This worked really well, thanks.

But is it possible to make it a flash banner instead of just an image?

Thanks again.

BenMoss.
using your code, i suddenly have a gap above my comments section that is the same size as the gap at the top for my banner. any idea how to correct this?
using your code, i suddenly have a gap above my comments section that is the same size as the gap at the top for my banner. any idea how to correct this?

A possible solution can be found here:

Moshi FAQ: Masthead/Comment Gap

(Just updated this. Let me know if it works.)

Thanks,
Tom
This comment has been removed by the author.
I've got the banner to post, and it looks good, but it covers up the myspace music bar.

My page is an artist page.

How can I lower the banner, as not to cover the Myspace bar?
R. Vidal:

try this
I appreciate that... I found it just before I saw the post. I needed to move it to 160px.

Thank you so much.
I feel like I'm so damn close, yet kind of far away. I cannot for the life of me, even with your code that seems to work for everyone but me, get my masthead/banner image to show up.

I have no idea what I'm doing wrong. Though I think I might have other issues since my table seems to be broken in Firefox. What am I doing wrong? Please help! Please.

I'm http://www.myspace.com/blogess and the image banner that won't show up is http://stephanieklein.blogs.com/myspace/header_myspace.jpg
skdines,

When something like this happens, usually the html for the banner itself is missing. See link below for more info:

comment #237410373039753436
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) 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
hi, im trying to put the banner up, but when i preview it or actually save it and view my profile afterwards, i see the banner, but no image..its blank...help plz
Tom,

i am trying to insert a custom banner i have made into myspace..

and i wanted it my own size.. so i got to this page i am commenting right now..

css seems like the solution but everytime i try and paste my banner using your form (even the simplified one) it doesnt show up..

its wierd because i have a small understanding of css and see no problem in what im doing...

link to profile - www.myspace.com/bruckyd

link to image - http://i162.photobucket.com/albums/t249/miss_kingsley/final1.jpg



help would be answered with gratitude...

bruckyd
Hi,

i would love some help with this if possable.

I enter the code and adjust it, but i cant get my image to display, although the text from the code does display in the appropriate box.

my myspace page is
http://www.myspace.com/4jude

any help would be awesome, thanks.
To 4jude:

See moshi faq: banner image missing

By the way, did someone hijack your profile? It looks like I'm getting involuntarily redirected.
i'm not sure. I noticed it also.

I will check out the link, thanks.
I am still not getting it to work. i am admittedly well outside of my league here, I know some html but CSS is blowing me away.

I am really just trying to put up some Gifs i drew up in photoshop, but be able to set thier position, fixed, and independant of the myspace sections. They dont even need to link, but that would be nice. I cant pos tthe code, dont know how, but its 2nd to last, and i am wondering if its placement is the problem.

Any help would be greatly appreciated. I cant seem to figure this out.

Thanks,
Jude
myspace.com/4jude
Hey, I've been trying to add the banner to my artist myspace page nut it is giving me problems. I began changing the CSS to try and fix a small problem I was having with the comment section of the page merging with the page's top friends' display. I was then adding padding to try and see if I could force a gap between the two but it didn't work. After I took the padding out from a portion of the code outside of the code I used for the banner, the code suddenly stopped making a gap in between the banner's position and the artist page's music player. Any help would be great, thanks!
By the way, here's the link to the page. http://www.myspace.com/reeddollazofficial

Please don't mind the music. =(
Many institutions limit access to their online information. Making this information available will be an asset to all.
add your own comment