« Back to the myspace.com Forum

myspace contact table [pinned]

Posted by industrialghost

posted
updated

Forum: myspace.com Group

I've been trying to recreate myspace's contact table and i guess i've basically got it, except that it's too spaced out and i don't know how to fix it.

comparing these two, i see that there's another difference with the borders... e_e

but i'm just going to give you my code as-is so that it's out there.  obviously, if you spot the problem, let me know!  otherwise, if i fix it, or if i clean it up more, i'll update this.  


<style>
.contact .inner a img { font-size: 0; } /*probably gets rid of original imgs*/

.contact .inner a:before {content: ""} /*dont know what this does but i need it*/

.contact .inner a {font-size:0;} /*gets rid of text*/


/*Add to Friends ("Send Message")*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/r2ngKrJz/mail-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}

/*Add To Favorites ("Forward to Friend")*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/67NZRrB0/forward-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}

/*Send Message ("Add to Friends")*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
  /* send message */
  display: block;
  background: url("https://i.ibb.co/d4m7tJMJ/friend-1.gif")no-repeat 0 0;
  background-size: 100%;
  height: 20px; width: 132px;
}

/*Forward to Friend ("Add to Favorites")*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/JjHW1JbK/favorite-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}

/*Instant Message*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/LhNHBppM/im-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}

/*Block User*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/ccVnMCH9/block-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}
/*Add To Group*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/KzRc4FmQ/group-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}

/*Report User ("Rank User")*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  display: inline-block;
  background: url("https://i.ibb.co/7tWLyQ0D/rank-1.gif")no-repeat 0 0;
  background-size: 100%;
  width: 132px;
  height: 20px;
}
</style>

wow that's long that's embarrassing without a scrollbox.  sorry.  
the thing that made this so easy is that the buttons on the myspace table are entirely images, which is unfortunate for styling... that's why people used the full contact box images.

you'd think that someone would've recreated the basic unstyled myspace profile for spacehey, like that's the first thing that would be made on this website.  but if i took that possibility for granted i'd have spent a lot more time looking for it than i did trying to do it myself.  i will be the one.  but i don't know how to fucking code


Report Topic

1 Reply

Reply by Kara † Kadavera

posted
updated

"i will be the one. but i don't know how to fucking code" is taking me ouuuttt HAHAH this is so me with whatever I got going on on the group profile.

Here's what I've done with it, but I'm not entirely sure if it's 100% accurate, and it is the original older and more simpler version of around 2005-2006.


<style>

.contact{

width: 300px!important;

height: 150px!important;

--lighter-blue: #6698cb;

}

.contact img{

display: none;

}

.contact a{

display: block;

height: 24px!important;

width: 120px!important;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a{

content: url("https://i.ibb.co/fYfJG1Q7/add-Friend-Icon.gif");

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a{

content: url("https://i.ibb.co/7x6nd6Gt/add-Favorites-Icon.gif;")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a{

content: url("https://i.ibb.co/zTV5vrHW/send-Mail-Icon.gif");

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a{

content: url("https://i.ibb.co/qL20ywWt/forward-Mail-Icon.gif");

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a{

content: url(" https://i.ibb.co/DD1hFKVV/messagefriend.gif");

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a{

content: url("https://i.ibb.co/hz8J7nQ/blockuser.gif");

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a{

content: url("https://i.ibb.co/DDpswqKH/icon-add-to-group.gif");

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a{

content: url("https://i.ibb.co/hRYY2FFN/icon-rank-user4.gif");

}

</style>


I also did switch up the order to work with Spacehey. I'm not sure why you're having the gap, I might recall having the same problem at first, I struggled a lot figuring this out but this is what turned out to work for me. You need to adjust the proportions of the table and text and then the images just fall into place (though it also somehow seems it looks a bit different on Tom's Myspace profile. I ripped these proportions from old Myspace contact tables.)

It also looks to me the newer one you're replicating is wider and more narrow, so you might wanna figure out what those parameters are, and it also got some fucked up border!


Permalink Report Reply