MySpace Like Contact Table - Switchable By User + Custom Display Name

I wrote this hack entirely by myself, but I give full permission to anyone to redistribute or claim as their own. I haven't seen anything like this on these forums, so I claim it as my own and giving all of you the joy to claim it as well! Until I find out otherwise. Maybe I just haven't had my eyes opened wide enough?

This hack optionally adds to the Myspace Profile Re-Write PRO! 1.0.0. It says it's only for version 3.5.4, but it works on my 3.6.9. I also have the vS-Interactive Profiles hack. I had no part in writing these two hacks. Therefore, I do not take any credit for either.

Install vS-Interactive Profiles before Myspace Profile Re-Write PRO! 1.0.0 if you do decide to install the two.

You can install this hack without installing the Myspace Profile Re-Write PRO! 1.0.0 and vS-Interactive Profiles, but you'll have to do some editing that is not described in this post. And those hacks are very useful if you want a MySpace type of setup. So you may want to look into adding both to make this work. vS-Interactive Profiles provides the Comment and Friends List alerts, while Myspace Profile Re-Write PRO! 1.0.0 provides a more realistic MySpace-like profile setup.

WHAT THIS HACK DOES

It allows you to have a MySpace-like contact table that is editable by the user. They can switch it out with whatever image they want. And it's actually a lot easier than editing it in CSS like MySpace. It also allows the user to have their own display name.

INSTALL

15-20 minutes - excluding the additional hacks.

2 template edits
2 new profile fields

Files to upload
1 default 350x150 contact table image of your choice. Size is editable, depending on the width you set your tables to.

This hack is assuming you've installed the hacks mentioned above.

1. Install the above hacks first: Myspace Profile Re-Write PRO! 1.0.0 and vS-Interactive Profiles. Ask for support with those hacks in those threads.

STEPS FOR CONTACT TABLE
1. Create an image thats 350x150 in Painshop Pro or PhotoShop. If you aren't very good with graphics, get someone to do it for you. Or download the attached contact table I have created for my site.

2. Once you have downloaded the image or created a new one, if you aren't very familiar with image mapping, go here and upload the image to find out where the mapping points are. Note: if you have chose to use my image, this step isn't necessary.

If you create your own, make sure you update all of the x y points in the script. There are two sets of the same script. One is the custom profile field script and the other is the default contact table script. Whatever you update the x and y points to, you'll have to update on both sets. If you are confused on how image mapping works, google it. There are TONS of tutorials on Google.

3. Upload to your /images directory.

4. Create a custom profile field and remember it. Example: field1.

Single-Line Text Box
Name: Contact Table Image
Description: Paste your contact table URL here.
Max length of allowed user input: I have mine set to 200. You never know how long their URL is going to be. So, just in case.
Field Editable by User: Yes

5. In the Contact Table code IN NOTEPAD! Don't replace the template code just yet.

FIND:

<if condition="$userinfo[field1]">
<img src ="$userinfo[field1]" width="350" height="150" alt="Contact <if condition="$userinfo[field2]">$userinfo[field2]<else />$userinfo[username]</if>"
usemap ="#contacttable" />

REPLACE the 1 with the field number of your Contact Table custom profile field for the contact table.

6. FIND:

<img src ="http://www.yoursite.com/forum/yourstyle/image/misc/contacttable.jpg" height="150" alt="Contact <if condition="$userinfo[field2]">$userinfo[field2]<else />$userinfo[username]</if>"
usemap ="#contacttable" />

REPLACE the URL with the default contact table URL that you uploaded.

DISPLAY NAME STEPS

1. Create a custom profile field and remember it. Example: field2

Single-Line Text Box
Name: Display Name
Description: The name you want to display in your profile.
Max length of allowed user input: I have mine set to 20. In case you use the nowrap="nowrap", it's highly advisable to set it to a low number so your tables don't get stretched by someone who thinks they should have their WHOLE biography in their display name.
Field Editable by User: Yes

2. FIND in.. in Notepad - still, do not edit the template yet.

$userinfo[field2]

REPLACE every number 2 with the number if your Display Name custom field. This is required in all parts of the script if you want the Display Name to show up in certain parts. So just do a search on it in Notepad or Wordpad.

TEMPLATE EDITING STEPS

1. BACK UP YOUR MEMBERINFO TEMPLATE! Paste it into Notepad or Wordpad. Just in case the Myspace Profile Re-Write PRO! 1.0.0 and vS-Interactive Profiles hacks aren't compatible with your version of vB. As well as any modifications you have installed. In this case, save your back up in case you start to notice certain functions, buttons or other things not appearing or working.

2. If you haven't already installed the associated hacks Myspace Profile Re-Write PRO! 1.0.0 and vS-Interactive Profiles, do so now and wait on step 3 until you've finished.

5. Once they're is installed.

FIND in MEMBERINFO template:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center"> 
        <tr class="tcat"> 
         <td colspan="2"><strong>Contacting $userinfo[username]</td></font></strong>
        </tr> 
        <tr class="alt2"> 
         <td height="5" nowrap="nowrap" width="50%"> <div align="left"> 
             <a href="private.php?$session[sessionurl]do=newpm&amp;u=$userinfo[userid]&quot;&gt;&lt;">
<img border="0" src="http://www.sevencityforums.com/forum...mns/sendpm.gif" align="left" width="79" height="22"></a>
</td> 
         <td height="5" nowrap="nowrap" valign="top" width="50%"> 
            <div align="left"><if condition="$userinfo['showicq']"> $userinfo[icqicon] 
             <a href="#" dir="ltr" onclick="imwindow('icq', '$userinfo[userid]', 500, 450); return false;">$userinfo[icq]</a> 
             </if> </div></td> 
        </tr> 
        <tr class="alt2"> 
         <td height="5" nowrap="nowrap" valign="top" width="50%"> 
            <div align="left"><div class="smallfont">
     <a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$userinfo[userid]&quot; rel=&quot;nofollow">
<img border="0" src="http://www.sevencityforums.com/forum...dmailicon2.gif" align="left" width="79" height="22"></a></p> 
            </div></td> 
         <td height="2" nowrap="nowrap" valign="middle" width="50%"> 
            <div align="left"><if condition="$userinfo['showaim']"> $userinfo[aimicon] 
             <a href="#" dir="ltr" onclick="imwindow('aim', '$userinfo[userid]', 400, 200); return false;">$userinfo[aim]</a> 
             </if></div></td> 
        </tr> 
        <tr class="alt2"> 
         <td height="5" nowrap="nowrap" valign="top" width="50%"> 
         <div align="left"><div class="smallfont"><if condition="$show['addbuddylist']"> <a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$userinfo[userid]">
<img border="0" src="http://www.sevencityforums.com/forum...s/addbuddy.gif" width="79" height="22"></a> 
             <else /><div class="smallfont"><a href="profile.php?$session[sessionurl]do=removelist&amp;userlist=buddy&amp;u=$userinfo[userid]">
<img border="0" src="http://www.sevencityforums.com/forum...mns/remove.jpg" align="left" width="79" height="22"></a>
             </if> </div></td> 
         <td height="5" nowrap="nowrap" valign="top" width="50%"> 
            <div align="left"><if condition="$userinfo['showmsn']"> $userinfo[msnicon] 
             <a href="#" dir="ltr" onclick="imwindow('msn', '$userinfo[userid]', 400, 200); return false;">$userinfo[msn]</a> 
             </if></div></td> 
        </tr> 
        <tr class="alt2"> 
         <td height="5" nowrap="nowrap" valign="top" width="50%"> 
            <div align="left"><div class="smallfont"><if condition="$show['addignorelist']"><a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=ignore&amp;u=$userinfo[userid]">
<img border="0" src="http://www.sevencityforums.com/forum..._mns/block.jpg" width="79" height="22" align="left"></a></p> 
             <else /><div class="smallfont"><a href="profile.php?$session[sessionurl]do=removelist&amp;userlist=ignore&amp;u=$userinfo[userid]">
<img border="0" src="http://www.sevencityforums.com/forum...ns/addbudy.jpg" width="79" align="left" height="22"></a></p>
             </if> </div></td> 
         <td height="2" nowrap="nowrap" valign="middle" width="50%"> 
            <div align="left"><if condition="$userinfo['showyahoo']"> $userinfo[yahooicon] 
             <a href="#" dir="ltr" onclick="imwindow('yahoo', '$userinfo[userid]', 400, 200); return false;">$userinfo[yahoo]</a> 
             </if></div></td> 
        </tr> 
     </table>

and replace with the attached code in contacttable.txt.

To show the Display Name above the avatar in the profile:

FIND

<tr class="tcat"> <td colspan="2"><div align="Left" class="bigusername"><strong>$userinfo[username]</div></font></strong>
<div class="smallfont"><a href="$vboptions[bburl]/$userinfo[username]">$vboptions[bburl]/$userinfo[username]</a></td></div></tr>

REPLACE WITH

<tr class="tcat"> <td colspan="2"><div align="Left" class="bigusername"><strong><if condition="$userinfo[field2]">$userinfo[field2]<else />$userinfo[username]</if></div></font></strong>
<div class="smallfont"><a href="$vboptions[bburl]/$userinfo[username]">$vboptions[bburl]/$userinfo[username]</a></td></div></tr>

[Conner85]

Demo: http://www.metal-clinic.org/conner

[MissKalunji]

Nice work!

[Conner85]

Thanks a lot Miss.