[mod release] Tabbed Profile

OPEN USER/PROFILE.PHP

Find (at top of document):

<?php

Add after that:

// Mod: Tabbed Profile 1.0 ----------------------------------------------

Find:

if(!defined("_CHARSET")) exit( );

Add after:

include("user/contact.php");

Find:

$nameinfo .= " [<a href=""viewuser.php?action=contact&amp;uid=".$userinfo['uid'"]."">"._CONTACT."</a>]";

Change to:

$contactinfo .= " [<a href=""viewuser.php?action=contact&amp;uid=".$userinfo['uid'"]."">"._CONTACT."</a>]";

Find:

if(dbnumrows($fav) == 0) $nameinfo .= " [<a href=""user.php?uid=USERUID&amp;action=favau&amp;author=".$userinfo['uid'"]."">"._ADDAUTHOR2FAVES."</a>]";

Change to:

if(dbnumrows($fav) == 0) $favinfo .= " [<a href=""user.php?uid=USERUID&amp;action=favau&amp;author=".$userinfo['uid'"]."">"._ADDAUTHOR2FAVES."</a>]";

Find:

$tpl->assign("userpenname", $userinfo['penname']." ".$nameinfo);

Add before:

$tpl->assign("add2fav", $favinfo);

Find:

if($userinfo['image'])
$tpl->assign("image", "<img src=""".$userinfo['image'"]."">");

Now, there are two things you can change that to, depending if you want to use the same image everywhere (in the efiction/images folder) or whether you want to have a different image for each skin (in the skins/images folder)

Method 1: image found in skins/***/images - Change to

if($userinfo['image'])
     $tpl->assign("image", "<img src=""".$userinfo['image'"]."" border="1" vspace="2">");
else $tpl->assign("image", "<img src=""$skindir/images/unlined_noimg.gif"" border="1" vspace=2">");

Method 2: image found in eFiction/images - Change to

if($userinfo['image'])
     $tpl->assign("image", "<img src=""".$userinfo['image'"]."" border="1" vspace="2">");
else $tpl->assign("image", "<img src=""images/unlined_noimg.gif"" border="1" vspace=2">");

SAVE FILE.

----

OPEN USER/CONTACT.PHP

Find (at top of document):

<?php

Add after that:

// Mod: Tabbed Profile 1.0 ----------------------------------------------

Look for ALL instances of $output and change them to $output2

Find:

$tpl->assign("output", $output2);

Change to:

if(action == "contact")
$tpl->assign("output", $output2);
else    $tpl->assignGlobal("contactform", $output2);

SAVE FILE

------------------------------------------
Customizing
------------------------------------------

You can refer yourself to the tabber examples found on the tabber project page: http://www.barelyfitz.com/projects/tabber/

The one thing you need to know before you start is what tabs you want showing and what you want inside those tabs. This may sound crazy, but you'll be really confused if you don't start with a clear plan in mind. I knew I wanted to have the following tabs:

User Profile | Author Biography | Contact Author | Miscellaneous
(where miscellaneous contains all the messengers and website and some custom profil fields I added)

Armed with that knowledge, it was time to start the structure. You will need to "initialize" the tabber process by adding
<div class="tabber"> RIGHT AFTER <!-- START BLOCK : profile --> Of course, don't forget to close that with </div> RIGHT BEFORE <!-- END BLOCK : profile --> of you'll get errors in your template.

To create your tabs, simply use the combination of the following codes:

<div class="tabbertab">
 <h2>NAME of TAB</h2>
{content}
</div>

The < h2 >< /h2 > tag is where you set the name of your tab. So if you wanted a tab to read My Profile, you would have a code that would read like this

<div class="tabbertab">
 <h2>My Profile</h2>
{content}
</div>

So far so good, no? So create all the tabs you want before you even start to fill them out. Then, simply customize your template as you normally would, just be careful where you input your data so that it shows in the right tab. The ONLY important tab not to mess up is the Contact tab since you'll remember we otherwise disabled the [contact] link to have the contact author form pop up. Simply make sure to include the {contactform} variable inside your Contact Author tab (something like this):

<div class="tabbertab">
  <h2>Contact Author</h2>
  <div id="profile" align="center">{contactform}</div>
</div>

And since we also removed the [Add to favorites] link, include {add2fav} where you want the link to appear. I personally like to group it with the [Report this] link.

So simply look for:

<div id="profile">
{adminoptions} {reportthis}
</div>

and change it to:

<div id="profile">
{adminoptions} {reportthis} {add2fav}
</div>

------------------------------------------
WORKING EXAMPLE (Library skin)
------------------------------------------

<!-- START BLOCK : profile -->
<div class="tabber">
    <div class="tabbertab">
  <h2>User Profile</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td class="sectioncontent" valign="top" align="center" width="110" rowspan="4">
<div id="profile"><div id="bio"><div id="biocontent">{image}
<div align=left>{gender}{betareader}</div></div></div></div>
  </td>
  <td class="sectionlinked">
<div id="profile"><div id="bio"><div id="biotitle"><b>Alias:</b> {userpenname}</div></div></div>
  </td>
  <td class="sectionlinked">
<div id="profile"><div id="bio"><div id="biotitle"><b>Real Name:</b> {realname}</div></div></div>
  </td>
 </tr>
 <tr>
  <td class="sectionlinked" colspan="2">
<div id="profile"><div id="bio"><div id="biocontent"><b>User Level:</b> {userlevel}</div></div></div>
  </td>
 </tr>
 <tr>
  <td class="sectionlinked">
<div id="profile"><div id="bio"><div id="biocontent"><b>Member since:</b> {membersince}</div></div></div>
  </td>
  <td class="sectionlinked">
<div id="profile"><div id="bio"><div id="biotitle"><b>Last logged in:</b> {lastlog}</div></div></div>
  </td>
 </tr>
 <tr>
  <td colspan="2">
<div id="profile"><div id="bio"><div id="biocontent"><b>Skin:</b> {userskin}</div></div></div>
  </td>
 </tr>
</table>
     </div>
     <div class="tabbertab">
  <h2>Author Biography</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td class="sectioncontent" valign="top" align="center" width="110">
<div id="profile"><div id="bio"><div id="biocontent">{image}
<div align=left>{gender}{betareader}</div></div></div></div>
  </td>
  <td colspan="2" class="sectioncontent" valign="top">
<div id="profile"><div id="bio"><div id="biocontent"><br />{bio}</div></div></div>
  </td>
 </tr>
</table>
     </div>
     <div class="tabbertab">
  <h2>Contact Author</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr> 
  <td class="sectioncontent" valign="top" align="center">{contactform}</td>
 </tr>
</table>
    </div>
     <div class="tabbertab">
  <h2>Miscellaneous</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr> 
  <td class="sectioncontent" valign="top" align="center" width="110" rowspan="5">
<div id="profile"><div id="bio"><div id="biocontent">{image}
<div align=left>{gender}{betareader}</div></div></div></div>
  </td>
<td valign="top">
<div id="profile"><div id="bio"><div id="biocontent"><b>Website</b><br />{website}</div></div></div>
  </td>
 </tr>
 <tr>
<td valign="top">
<div id="profile"><div id="bio"><div id="biocontent"><b>Messengers</b><br /><br />{msn}<br />{yahoo}<br />{aol}<br />{icq}

</div></div></div>
  </td>
 </tr>
 <tr>
  <td valign="top">
<div id="profile"><div id="bio"><div id="biocontent"><b>Favorite TV Shows</b><br />{tvshow}</div></div></div>
  </td>
 </tr>
</table>
    </div>
  </div>
<br />
<div id="profile">
{adminoptions} {reportthis} {add2fav}
</div>
<!-- END BLOCK : profile -->

Do you have an example of where we can see this in action?

http://fanfics.suethomasfbeye.net/viewuser.php

username: test
password: test (if you want to log in)

Nice work, Jacynthe!

I'm viewing with no JS enabled, so -- completely optional, just a note -- if you're using this mod and are  really picky about things, you might want to place the contact form at the end.

My luck precedes me, anyways I'm testing it on the dark2 theme at my site. It's displaying it all at once. I made the changes as it said to, used your skin example for profile.tpl and yeah. The extra header is working, but I've no idea.

user: test
pass: test

edit - i added your skin and it works, so a compatibility issues this time. Thanks.

I see that the dark2 theme has it working fine in firefox at least...  aside from the tabs not being the same color as your theme.

its working now? man this gives me such a headache sometimes. thanks agan

Funny you should mention a headache seeing as I've had a migraine today. (not caused by eFiction, no one need worry... LOL)

Oh it is working yay! There is only one problem:  "extra_header.php" file should be modified too, there is this line:

<link rel="stylesheet" href=""skins/[b"]Library/tabber.css"

      Now I've gotta add every other profile fields that I require. You rock. Thank you so much.

Oops! I missed that one. I meant to edit that to href=""{skindir}/tabber.css"" and I guess I forgot. Good catch glenien! And I'm glad it's working for others than me. 🙂

No problem if I could help 🙂 I tried with {skindir} but it doesn't work that way, (I'm guessing because I don't have a skindir field?) I'm writing skin names for each file.

the skindir doesn't work?? hmmmm.... *ponders* It may be because since it's an extra_header file that has no efiction coding in it.... it doesn't know what the heck skindir is supposed to be...

lol! skin names are working fine, it's not like i have zillions of skins. i just love this mod :X:X:X