With a reported 230,000 signups a day MySpace is more than just an internet phenomenon, a phrase that is banded about far too lightly these days. The social networking site started in back in 2003 by Tom Anderson, has grown to such an extent that it was acquired by Rupert Murdoch’s News Corporation for a figure in the region of $580 million in 2005 and the 100,000,000 user signed up in August 2006. A figure thought of as inflated at the time, the current valuation is considered to be nearer a cool $1 billion!
With such success they are clearly doing a huge amount correctly; enabling people to keep in contact easily with the ability to post photos, video and music it has quickly turned into a successful marketplace for aspiring musicians and film directors.Where MySpace fails is how difficult it is for the everyday user to create an attractive site that doesn’t give their audience a head ache after 5 minutes.
MySpace Overlay
Well here’s my first approach to offering something back to the community and hopefully the sanity of some of the 100 odd million users. Welcome to ‘Seloquent’…. something along the lines of a simple and eloquent design that hopefully demonstrates some of the potential for making MySpace a little less hectic and refined. You can check out Seloquent in action on my page at MySpace.
Seloquent is a MySpace div overlay (or myspace hack) that effectively lies over the top of your page, while still displaying the information to your friends that your want them to see. Including the ability for people to drop you a comment, it should hopefully be a pretty painless way to spruce up your MySpace page for the princely sum of nothing, gratis, FOC or in other words nothing!
Quick Instructions.
This is a quick version of the installation instructions required to install this overlay. Please read through all the instructions included with the download as well and post any problems you have below. I will try to answer all of them though this is distributed without any warranty.
- Download the Seloquent zip file below.
- Copy the contents of the ‘aboutme_css.txt’ into the ‘About Me’ section in your profile, making sure to erase everything that is already there.
- Copy the contents of the ‘idliketomeet_html.txt’ into the ‘I’d like to meet’ section in your profile, making sure to erase everything that is already there.
- Alter all references of ‘YOURFRIENDID’ with, yep you guessed it, your actual friend ID.
- Edit the appropriate sections to add your information.
- Save your profile.
License
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 License. Woa, that sounds serious, what does this mean? Well you can use it, modify it and distribute it but you must continue to have the small print section at the bottom linking to this page or website. At the very least there should be a clear link to this page displayed in this section.
Download Seloquent Div Overlay
Version 1.3 of Seloquent
Custom MySpace Div Overlays
For more information about having a MySpace profile designed exclusively for your band, group or personal ‘myspace’ page, please don’t hesitate to contact me.
Versions / Changes
Version 1.3 (dated 290307) another small alteration, adding the CC licensing information.
Version 1.2 (dated 020107) a small alteration to the readme file and the ‘Idliketomeet_html.txt – only nessesary to ‘upgrade’ if some of the links at the top of the page are not working.
Version 1.1 (dated 281206) update that fixes an issue with the comment box at the bottom of the overlay. Thanks to Cmoney in the comments for bringing it to my attention. See my follow up comment for those who want to edit the single line of html rather than download the new version and make all the customisations again.
Thank mate. Sick CSS (Cascading Style Sheets). Peterborough, eh? Datin a bird from there. She’s mad.
Thanks for all your effort in design and advice. Youre a better man than I. Cheers.
Bish, I read what you said about putting an image as background in the CSS (Cascading Style Sheets) but I’m not sure how.
Could you click my myspace profile and let me know how I would get the banner at the top to fit perfectly (i.e no space above, below or either side) into the top part.
Thanks.
Btw my myspace is: http://www.myspace.com/kleeneze79
Has anyone found a solution to show the comments?
The Stokes solution is not displayed here, and i can not find a way to contact…
Can anybody help or is this page no longer looked at any more?
@Steve,
You need to edit your CSS (Cascading Style Sheets) so that it has the following line in the header section![]()
tags from your html. This will make the image a background image allowing you to display text over the top.
background-image: url(http://i17.tinypic.com/8fvki8z.jpg);
Then delete the
Bish, i have used your DIV and it is really good, im still moving everything around so your link isnt on there yet, but it will be when everything is in place. Now the problem is that it works fine in Firefox but it doesnt “fill” the whole page in Internet Explorer. You can still see the defualt profile in the backgroud. can you help so that it works all fine in both?
Bish, first of all great overlay and thanks for helping people out. I like to add where i’ve been to my overlay. request help?
Hi…I’m migrating to your code, which is excellent. Thanks for sharing! I want to change the ‘linkages’ section to my myspace blog, preferbly with a small thumbnail next to each blog entry….If it’s not too much to ask, what’s the code to do this?
Thanks in advance,
Paul
Hi…great layout….thanks for being so generous! I would like to change the ‘linkags’ section to my latest blog entries (created in myspace) with a small thumbnail by each entry. If it’s not too much to ask, will you give me the code for this?
Thanks in advance
paul
sorry for the triple post (didn’t see the post I left yesterday…thought it didn’t post correctly)
Bish, I have the following now in the ‘About Me’ Section at the top:
.main
{
position:absolute;
left:50%;
top:150px;
_top:160px;
z-index:1;
margin-left:-400px;
padding:0;
border:0;
background-color:FFFFFF;
background-image: URL(http://i17.tinypic.com/8fvki8z.jpg);
}
However, now it’s blank! … No background image comes up at all? … however the jpg still shows if I type it into the explorer address bar. I notice it looks for it as its loading up all the images (bottom left of i.explorer), but still it just doesn’t show at all.
Any idea why it’s not showing at all? I removed the image link as you said before as well.
Apoligies, I meant the header section:
.header
{
margin-top:10px;
background-color:666666;
height:280px;
padding:0 0px;
text-transform:uppercase;
color:FFF;
text-align:right;
background-image: URL(http://i17.tinypic.com/8fvki8z.jpg);
}
Nevermind I’ve sorted it
Why does my profile look all out of sync in Firefox, yet if I view it in Internet Explorer, it’s fine?
Ok, I’ve tried to read through all these and not bother anyone, but its driving me crazy. My old background just won’t go away! I tried deleting comments, I can’t seem to get it to work. Could someone please help?
http://www.myspace.com/nagrant
I’m an HTML super novice
I really like the overlay but I’ve been struggling with the links for “add to friends” “send message” etc…
I’d like to not have any “hover effect” when I mouse over them…just the plain text. Can you point me in the right direction?
Thanks!!!
I hate to ask, considering so many people have asked so many questions, but if I wanted to add in code to make friends and comments visible on my myspace page, how could I do that using your div? Thanks for any help you could give.
@steve,
It could be to so with the other informaiton you have in your profile or the comments with large pictures. Try deleting them.
@Nicole Gray
Try googling “hover effect links html CSS (Cascading Style Sheets)” or “hover effect text html css”
@Sara,
Try removing any other information you have in your profile.
@Sala
If you want a custom profile designed for you at a great price, contact me above for a quote.
nevermind i got it. forgot to change content-b to content-c….. rookie move.
everyone say it with me starts with a J and ends with ackass!
email me about prices for custom pages, i need one for my screen writing company
Hi I love this template it’s clean and great to work with. I was wondering at the top where your name is there a way to work a flim strip looking picture? Could it be possible that the pictures could be moving? I’m not too savy with this so please explain as if your talking to a 6 year old.
Is there a place to add photo albums?
Thank you
@Amy,
All this is possible but would involve quite a bit of work. Unfortunately as web design is my livelihood there would be a cost involved. Drop me an email from the contact page above and we could discuss what exactly you are after.
Great tutorial, and I was able to iron out some wrinkles with help on this page, still experiencing an issue with older versions of ie displaying the origional page under the overlay. Also, its intermittent, but Firefox does not load the overlay correctly and the original site is poking out of the top sometimes… Any fix for this????
Hi Bish,
As for paying for your time I completely understand. I think i might have asked more of a question that came off too complex.
I was just wondering if there was a way to insert pics on the very top where the gray is.
My next question was if there was a way to connect to my photos where you have “add a friend” ‘add to group”…..wondering if one of those can be “view my pics” and for everyone to be able to view my ablum.
Thank you
Amy
Hi I love your overlay .Do you think you can check out my myspce and let me know if it’s working?
Thank you
Scott
http://www.myspace/turtleislandproductions
Will this overlay work for a myspace band profile? If not do you know where I could find an overlay that would work?
Kicked my but a little, but i tweaked it to my liking. Thanks Ben!!!
Thanks man, I appreciate you making this overlay freely available. I just joined Myspace a week or so ago, but it’s nice to see that not *every* layout is based off of glitter graphics – as I was beginning to suspect they all were. Anyway, thanks again. It’s been fun tweaking things.
Heyy
I LOVEE the layout, but i was wondering if it is possible to not hide my friends or my comments?
Hi! I have been using myspace div overlays for some time. Although i am having trouble with a spreadsheet that i have recreated… i can not seem to put a generated fancy comment box on my layout tho. I paste the code (as i have done in past layouts) although with this layout my comment box will not appear at all (quite like invisible all together).
Could this be due to the spreadsheet i am using? Any chance of over writing it so i am able to put a comment box in it.?
In the original layout codes it has a written link “write a comment” although i deleted that section so i could have an actual comment box on my page.
Needing advice and help! I really like my layout.. i dont wanna have to recreate it all again!
eyy thanks for the layout
i jus made a few adjusments so the layout would cover my old layout completely, but other than that its still the same.
thanks again
Hey man, i love the overlay but i wanna use this on my bands profile, how would i do it?
how do i add a picture to the background and stretch it to fit the page? also how do i add a picture header to the top of the page? thanks, much appreciated..
Hey. I love this layout, but I have a problem. The links at the top of the page won’t work for some reason. I put in my own friend ID, but they just don’t work. Any ideas?
And thank you!
add a picture header by making an image that has a width of 800 and a height of 280….save that image to photobucket.com or some other site like that….then go to the .header section in the about me code…..go to the background section and take out the “background-color=” part and add this: background-image: URL(“direct link to the image that was made”).
“Thanks to Cmoney in the comments for bringing it to my attention. See my follow up comment for those who want to edit the single line of HTML…”
Where can i find that line ??
Hey man I implemented your code. Unfortunately my old profile is still showing for some reason. I have no clue how myspace is still showing my old profile when the code isn’t even there anymore. Does anyone know how to fix this problem? Also, how do you make your About Me, Interests tables longer if you want to add more content to these areas? Any information would be appreciated. Thanks. Branina20@yahoo.com
My old page is showing underneath the new layout. I’m not sure why. I guess if the width of the new layout is a little bit wider it would completely overlay the old one. It looks as if the new overlay isn’t aligned properly and it’s aligned towards the right. What is going on here?
@branin
Just looked at your page and it looks as though you have removed it. For anyone else who has this problem, it is probably the comments. Try deleting any wide comments.
For some reason I have the overlay stuck in the about me section of the original myspace page…I have deleted everything…can someone please help….Crystal
Oh and I luv the overlay btw…please please help me Im so frustrated…..it is showing all of the original myspace with the overlay stuck in the about me section…thank you…
Hi, I really love this overlay… And I am trying to make it work. But I am really having a hard time figuring out this comments section. I have pasted my friendID where it says, but I am still getting the same response “blank comment” .. Also the sending a message button isn’t working either. Could you possibly take a look at it and let me know what I am doing wrong?
Thank you so much!
Excellent layout. Just wondering how to put a image on the header. Thanks!
Hi,
First of all … thanks for the layout!!!
i’m modifying it a little (graphics), is it possible to display “Friends” and “comments”
on the same page?
The site http://www.myspace.com/lincolnpixel
Your theme is very beautiful, but here is a bug with Firefox 3 RC1 (and maybe with Firefox 3 and more), you can check my profile, or yours, the old page is visible behind your theme.
Kind regards,
Anthony
Hey wonderful job with this overlay I am diggin on it. But, I am having a problem loading a picture from photobucket into the content b box. I have absolutely no programming experience. Getting your overlay this far on my profile is in fact the first time I have done any code editing at all.
The problem is every time I try to load the photo I end up having it not show up, or tile across the whole backgroung. I want it to be what is set to my profile picture and sit in the content b box below the interests and movies/music columns, to the left of the links.
I’m also having issues with myspace redirecting one of my links back to myspace, but I feel that is their own proprietary horse$#!t and nothing you can hel me with.
I’ve tried figuring out the picture thing from your other comments (to yoyo and ange) but have had no luck. Help would be appreciated much!
Hey, the layout is great, it’s just that I can still see all the original modules and everything.
I’m new to MySpace and I don’t understand step 4: “Alter all references of ‘YOURFRIENDID’ with, yep you guessed it, your actual friend ID.”
Help?
Bish, you are MEGA talented. I am working on trying to get this to work, but I would really like to put am Image Right Above my name in the first box. Also, Is there any way to add another colored box to match the ABOUT/VITALS Box Color but twice the length of the INTERESTS box, Just beneath the Interests box? I just want to create more space to display more info. Please let me know. xfile102@gmail.com