HOME | DD
poseyGFX — MySpace DIV Overlay Tutorial
Published: 2007-07-25 06:18:10 +0000 UTC; Views: 14327; Favourites: 77; Downloads: 1434
Redirect to original
Description
My first tutorial. Teaches you how to make an overlay design to be used on your MySpace profile.Related content
Comments: 111
Can you please help me. I used Gimp instead of Photoshop now I am purely stuck after I've made the map
👍: 0 ⏩: 1
I don't believe this works anymore with the new MySpace designs.
👍: 0 ⏩: 0
sorry man but bbzspace is out... any other site that helps in the same way?
thanks!
👍: 0 ⏩: 1
Haven't looked into it since I put up the tutorial. Don't use MySpace any more so I couldn't really say....
👍: 0 ⏩: 1
could you try looking for one? I could really use some help... :S
👍: 0 ⏩: 0
nice tutorial. I use a different method though.
I can overlay artist profiles for all those who are asking. ask me personally for advice.
👍: 0 ⏩: 0
You wouldn't happen to know how to apply overlays to a Artist Profile would you?
Like this one:
[link]
👍: 0 ⏩: 2
did you ever figure how to apply overlays in an artist profile? I am trying to figure it out.
👍: 0 ⏩: 1
It's the same deal as normal, but there tends to be a lot of glitches going on.
👍: 0 ⏩: 0
No, i have never tried on an artist layout. I would assume it would be similar minus the music player....
👍: 0 ⏩: 0
hey can you edit the about me txt without remaking the whole layout?
👍: 0 ⏩: 1
yes, just always have a backup in case it doesn't turn out how you wanted.
👍: 0 ⏩: 0
I have a few questions...
1. When I replace the 'image/'s, I replace them with the link to the photobucket album holding my images from the images folder?
2. The website you have doesn't work, so what steps would I take to do this on myspaceprodesigns.com?
👍: 0 ⏩: 1
1.) Yes
2.) I clicked, Generators, Layout 1 (top one), fill out your colors, Generate the code.
👍: 0 ⏩: 2
okay I did that stuff, but after I put the code from notepad in between
👍: 0 ⏩: 1
you have to adjust the width and height properties of the div to the size of your combined images. Also make sure you are linking the images from an online server like photobucket and not just your PC.
👍: 0 ⏩: 1
So I have to change the sizes of the image codes in the document into the sizes that the actual pieces of the layout?
👍: 0 ⏩: 1
not in the notepad section, no. In the div. code there should be set dimensions and you need to change those to fit your design.
👍: 0 ⏩: 0
But where does the code from notepad go?
👍: 0 ⏩: 0
Thank you for making this. I will get to making my layout as soon as I can. ^ ^
I`m really sick of my plain layout now.
👍: 0 ⏩: 0
Hey, I'm in need of some help...
1. every time I upload the code the background shows up in the middle of the page instead of the bottom.
2. how do I get my music player to show up where it normally does...
thanks a lot... please if possible e-mail me solutions or suggestions @ edmond.brianm@att.blackberry.net
Brian-marcel
👍: 0 ⏩: 0
Ok, so I've made my design, sliced it up and everything and in my folder I have a Mozilla [browser] image [which, when clicked, I can view it and when I click on my images works just like a website, when I click my friend Liz's picture, it goes to her profile, just how I wanted it to] and an images folder.
Now, you say to open up the code and replace stuff. Well, do you mean open up notepad and open up the Mozilla image ['cause when I do, it's code comes up]? And then I'm lost after that. You say replace "image/" with your folder [I don't understand that]? And then when it says "Replace With: -----" and you show an http:// thing... well, how do our images have http:// places if they're not uploaded to a site or anything yet?
I'm just so confused and I'm uberly stuck. Please help me out. If I'm being a dumbass tell me so, but still please tell me how to fix it. I'm so close >.👍: 0 ⏩: 2
In order for your overlay to work you must first upload all the images onto a website like photobucket. Right now the overlay is pulling our images from you hard drive. AFTER you upload the images their source will change from "C:\~~~" to the online location, "[link] ".
You can easily change this by uploading all the images into the same folder, and then change the source.
EX. C:\My Computer\Pictuer\image1.jpg will change to [link] (i just made that up. you'll have to use the actual link to the images)
👍: 0 ⏩: 1
Thank you for answering. I got all that down and it's ready and whatnot. I'm just stuck on... well, dang it's hard to explain.
Ok, I've changed all the links and everything to photobucket things and it works! But, where I'm lost is at... picture #14. The bbzspace.com thing.
See, everything works for me when I pull it up out of the folder and view it. I tried putting my code on my my page, but what I got was this >>[link] [I zoomed out so you could see everything, oh and not to mention, the top part of what I did for my layout got cut off 'cause of Myspace or something 
I pasted my code into the "About Me" section, too... donno if you needed to know that or not, but... yeah :[ *sigh*. I'm really sorry for bugging you with this ;3;
👍: 0 ⏩: 1
the picture example you posted has been moved or deleted so I can't see what you're talking about.
👍: 0 ⏩: 1
OH! Dang, I'm sorry. I made a new one now [link] [donno if you can see that either, if not, here's a screen capture [link] ], but now I'm having the problem of getting the background all black.
and I'm not sure if this is possible so may you can verify for me, but can you add a scroll box to your profile and edit things in it? Or would it have had to be included in the making of it?
And if you could add a scroll box, how would you get it to line up with the image you chose for it?
I'm sorry, I know these things aren't on this tutorial of yours and I don't even know if you know. You don't have to tell me how, even a simple yes or no would do and I'd try and find out how to do it somewhere else
👍: 0 ⏩: 1
If you look through the BBZ code you will see a section that says Allow Comment. Change it to yes and your comments will show up at the bottom.
A scroll box would only show up if the DIV dimension were shorter than those of the actual image. Meaning if your overlay is 800x600 and you DIV is set to 800x400, then you would have a vertical scroll box. I wouldn't recommend this.
To un-hide the top of your overlay you need to change the top padding. Either change the BBZ code to have an extra 150px in vertical size, or make you image larger and move the top part down.
👍: 0 ⏩: 1
Thank you so much for all your help!!!
I'll have it up and running in no time!
👍: 0 ⏩: 0
HUZZAAHH! I figured it out :3!
Now, I just have to find something else to work as bbzspace.com thing >.
👍: 0 ⏩: 0
Great tutorial, but I have a problem: I've found a site to generate my code and everything comes up on my MySpace except this fact: It's in a scrollbox! Plus, I haven't been able to change my background color with the code number in Photoshop when I have the color palette open. Can you help please?
👍: 0 ⏩: 1
In order to eliminate the scroll box you have to adjust the overlay width/height in the code you got from that website. You should be able to find the default numbers somewhere in that code and then just adjust them to be a little bigger than the size of your design.
Same goes for the background. Find the bg=#..... in that code and change it to the hex code of your design's background
👍: 0 ⏩: 1
Thanks so much! It works perfectly now
👍: 0 ⏩: 0
Oh man. I just did everything You said up to the coding part and I was fine. When I used the div generator ,updated my code I got an error on my layout. and some parts said "Violation of terms of service?" Soo frustrated, because Im sooo close. Can you give me another decent div generator?
The one mentioned doesnt exist anymore.
Thanx!
You Rock!
👍: 0 ⏩: 1
not sure, haven't looked into it; sorry....
👍: 0 ⏩: 1
bbzspace.com doesnt exist anymore, where else should I go?[link]
👍: 0 ⏩: 0
Can The smiley face pics be anything? Or do they have to be my friends pics?
👍: 0 ⏩: 1
It can be whatever you want. I just put those there for demonstration.
👍: 0 ⏩: 1
[link] -> finished it 
👍: 0 ⏩: 1
Looks good. Glad you chose to hide the music player. Keep it up....
👍: 0 ⏩: 1
;3; how did you get your black background?!
👍: 0 ⏩: 0
Dont worry I fixed it
I am now going to confess my undying love for you
THANK YOU SO MUCH
👍: 0 ⏩: 0
I have the same problem as ~michyokoop. I have done everything exactly to what you said.
Sadly....a scrolly box comes up around my profile.
I have NO idea how to get rid of it
Help!
👍: 0 ⏩: 0
awesum tutorial!!! <33
👍: 0 ⏩: 0
Thank you for the tutorial. I have it saved as a web page but I can't find the HTML code in notepad. All I have is a folder with the sliced images. Any suggestions? I'm using Photoshop CS if that matters.
👍: 0 ⏩: 2
In note pad, farily close to the top you should see a part that says something along the lines of "imageready slices" Underneath that should be the begining of the code you want. It should start with "
Ignore that, I figured it out. I had saved it as images only. Not as HTML and images.
👍: 0 ⏩: 1
Ok now I have another problem (Ha ha sorry for bugging you ;_
Now I have a scroll issue. I used the same resolution and pixels as you. It has a scroll on the bottom and right of my profile. The only way I think I could fix it is by cropping my profile in Photoshop.
Is there some sort of no scroll code I can put in the Interest or Music section?
👍: 0 ⏩: 1
| Next =>