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.
new problem… the “extended network” box seems to push the layout down further in firefox for windows. Got any ideas as to why it just started doing that? your page does it as well.
Benny D
@Brandon
Sorry, I can really help with customizing the appearance but the problem to the details schools and interests have been covered above. Have a read through the comments.
@BennyD
I can’t see what’s wrong on your profile. Both mine and yours appears ok to me.
I fixed it by simply removing my headline. Sorry for wasting effort. Did you ever figure out how I could move my player around?
Ben
Can anyone help me w/my old, ugly profile protruding out from the sides of my new div overlay?
I don’t recall adding or doing anything to change it, it was working fine before.
If anyone can take a look at it, I’d be of much thanks!
http://www.myspace.com/lovelinefilms
love the overlay but
my original profile is peeking out from behind it and i followed the instructions…
any ideas?
thanks,,,
I’m working on a band page and I pasted everything into the bio section. I have the code I want…at least a good rough draft, when I go to the preview page, there is no “save” button – only the “submit” button for the comments field.
Do you need to see my code?
Thank you,
Jeff
I just can’t save the code. The submit button is for the comments. When I click it, I get the “you can’t make a blank comment” error.
-sigh-
@jeff, the code is not designed with band profiles in mind but you may be able to soldier through with it anyway. Good luck.
my profile still seems shoved down off and using the most up to date version of firefox. in fact anyone who is using this code, it does from time to time.
have any ideas as to why?
Ben
I have inserted you code into my band proifle and want to remove it but i can’t what should i do…..
My problem is that my music player is under my overlay, but i want to see the player.
What should i do ??
I’m having problems with the comment part…when I click on it…it goes to a “page not found” thing….any suggestions?
a live link to my myspace is http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=231707715
click on the comment box…see what happens…
I figured out how to move it around but it was hidden or conflicts with the overlay. i tried to mess with the z-index, that didn’t seem to work in IE but in FF it worked okay.
another thing is, i want to know how to change the white spaces in my page, i want it to be offwhite background so its less hard on the eyes.
is there a way to make these gaps off white?
Ben
Re: Music player problem -an easy way to solve
Create a jukebox at projectplaylist dot com and embed it into your code.
Then adjust the size values (so long as the width is set at 800).
Re: Music player problem -an easy way to solve
Create a jukebox at http://www.projectplaylist.com and embed it into your code.
Then adjust the size values (so long as the width is set at 800). In action here:
http://www.myspace.com/johnrobinsonleeds
…and regarding adjusting colors, why not google ‘HTML color codes’ and experiment with the values yourself rather than waiting for someone on here to show you.
To get rid of the old layout in the background, type in all of the other boxes. It does actually state this in the instruction file, and it definitely DOES work
One of these:
@John,
Thanks for helping everyone out.
oh no.. its not that i haven’t experimented or don’t understand color changing within html, I simply cannot find an html or CSS (Cascading Style Sheets) code to change the part that I have. I also do not want to utilize a project playlist mp3 player, I prefer the one on my space, as it tracks what you have had, and it helps the bands get plays.
It sort of helped, but its all stuff I’ve thought of. I seriously do need some help figuring out why i have blanked white spots on my layout. I can’t find the specific tag to fix it.
nevermind about the color code, found it. its in ‘who i’d like to meet’ table. missed that.
Ben
I want to have the normal myspace player…
At the beginning the player was over my overlay and i could see it.
But from a day to the next day, it was under my overlay.
I didnt change anything…
uhh yeah, i think tom did an update and now my whole profile is shifted or to sum it all up its a little smaller.
its not covering up the whole myspace default page thing like it was doing.
i didnt change anything recently so im pretty sure that this is a reason.
how can i change to to where the background is all white again but it wont be covering up the div layout?
oh sorry for the cappo btw lol
Hi there. I’m not sure if this has been addressed yet but it looks like Internet Explorer 7 leaves a lot of space at the top of my profile. It looks great in Firefox and Safari but somehow IE7 doesn’t read the CSS (Cascading Style Sheets) quite right. Is there anything I can do about this?
Check it out: myspace.com/jasonzollinger
Thanks so much.
Jason
@donne,
Tom might have changed something in MySpace but it hasn’t effected my profile or anyone else’s. As you havent changed too much, try going back to the original profile and adding your content in again.
@Jason,
Your .header h2 has a large margin on the bottom (200px) which you must have added. Change this and it will work as intended in IE7.
I’m not quite sure why, but somehow in IE7 my under profile shifts over to the left and then shows up from underneath. is there any way to fix it?
I have addressed my other issues via trial and error. Well thanks again for your help.
Ben
@ BennyD
Congrats on the profile dude, it looks really good. Now the issue with the profile appearing beneath is probably due to the funky stuff you have done to your profile (the plane) and IE7 not quite working correctly. Basically the way to do things is code and design for Firefox and then fix the IE7 bits which you seem to have done.
The best way to fix it would be to hide the profile beneath I think. There is a comment above that lists the CSS (Cascading Style Sheets) to do this. Havent tried it myself but I think it would work. Here is the link to the comment.
Good luck and great work again my friend!
luckily i saved my old modified version lol. hmm how could i perhaps make it so that this div layout was just wider? and if there isn’t away…
how could i change the default div layout for myspace to blank out everything behind the eminentstyle?
Bish,
So this isn’t yet another friendID issue. Wahoo!
Buuut… I’ve been playing around and i cant seem to get rid of the small boarder that goes around the whole overlay. It seems to be about 3 pixels. if you can’t see my MySpace Page, here is screenie…: http://www.gautch.com/MySpace/border.jpg
-Josh
How do I change the color (text) from black to white on this section: Interests, Movies, Music, Linkages???
Hey Bish, Thanks for the overlay.
I was just wondering if you could put in normal myspace codes such as generators and icons and stuff like that. I wanted to ask first before i went ahead and changed my profile because i didn’t want to mess it up and have to start over.
Hey Bish, Thanks for the overlay.
i was wondering, can you still put normal myspace codes in the overlay such as generators and icons?
oops, sorry for the 2nd comment…the 1st one didnt show up the first time so i thought it didnt go through
Sorry again.
Bish! thanks for the compliment! Coming from you, it means a lot! thanks for the advice. I’m trying it right now.
Ben
update: this doesn’t seem to be working at this point but I am going to try some stuff now that i have the idea.
bah. nilch that now it won’t work in FF. Sorry for all the posts. I’ll figure it out.. in the meantime I have figured out it is NOT the plane that is causing it.
I may start from scratch again.
I just started using the overlay but I am have some issues with the code not overwriting my top frieds, and school/company/personal info area. Any ideas?
Well, I cant agree more.
My old page is sticking out the sides help!!!!!!
Crap my old page is stick out of the sides as well and when I go to edit the settings in the about me section and or idliketo meet section in myspace the page is showing over the options and will not allow me to click the edit button.
Any help would be greatly appreciated.
http://www.myspace.com/skinlessproductions
Whenever I put an image into the top space as 760px x 280px it just pushes all the text down instead of fitting in perfectly. Any idea why?
@Tivo,
Shouldn’t cause too many problems when adding different code but it depends on what you are adding. By design its not a concrete layout so if you put somehting in one of the boxes that doesn’t really fit it may knock everything out. The same concepts of web design apply to this overlay system.
Always back up your profile first before making changes (copy your who ‘id like to meet’ and ‘about me’ sections.
@bennyD,
It was a shot in the dark really, without having your code its difficult to be sure. Good luck if you decide to start again. it would be a shame after all the work you have done.
@Matt
Not without seeing your profile. I can’t help.
@Heather
Try clearing out any comments with large pictures. Wide comments has been known to do this.
@Skinless
See my comment above about clearing out your comments with big images. Regarding editing the profile, try using the safemode option in myspace.
@Steve
If you want to use the image behind the text it needs to set as a background-image in the CSS (Cascading Style Sheets). If you just insert it as an image then it by default it would push the text down.
Hey, I love this overlay. It is amazing. Just put it on and am still have a bit to mod. in firefox browser it looks perfect; however, in ie there is a bit of old profile up at the top… idk what to do. also im not good a ccs/html at all so if you can help that would be so awesome.
Love the layout!!
http://www.myspace.com/_katiethegreat
First off, love the code. I’m just learning CSS (Cascading Style Sheets) and I’m having some trouble with the links at the top of the page. The layout is overlaying the links. What do I need to change to move them down? Thanks.
@Katie,
Thanks for the complements.
Its a strange one. When I first loaded the page it happened but I have reloaded the page a couple times and now its working fine. Is there still a problem when you view it?
I don’t think its anything to do with your profile, just a case of Myspace not displaying the advert at the top so the overlay is too far down. Let me know if it happens again.
@Brandon
Thanks for the kind words. To move the profile down a bit change, the ‘top’ CSS (Cascading Style Sheets) property in .main {…} to the following without the quotes.
‘top:190px;’
Hello, great layout. Played with it for a bit heres what i currently have.
myspace.com/vgon
@Offx1
Looks great, nearly there by the looks of it. Great work…..