Please read this important policy change | Form Manager v2.0 has been released
MyBB Source » Customization » Tutorials » Pro-Profile Pages with 3 Tabs

 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Pro-Profile Pages with 3 Tabs
Author Message
NNT_
Junior Member


Posts: 21
Joined: Dec 2010
Reputation: 0
Post: #1
Pro-Profile Pages with 3 Tabs
I didn't have a plugin for this, sorry
This is demo: Link
How to do this ? First, download this: Profile Comment

Step 1:
Go to Templates & Style --> Themes --> Your Themes --> Global.css-> Edit Stylesheet: Advanced Mode

Add to the bottom :
PHP Code:
#tabs {
    width: 100%;
}

#tabs ul {
        clear: both;
}

#tab-links {
        list-style: none;
        padding: 0px;
        margin: 0px;
}

#tab-links li {
    color: #fff;
    float: left;
    padding: 3px;
    
    font-size: 18px;
}

#tab-links li.selected,
      #tab-content {
    color: #fff;
}

#tab-content {
    padding: 5px;
    margin: 0px;
    list-style: none;
    
    font-size: 12px;
}

#tab-content-2,
      #tab-content-3,
      #tab-content-4 {
        display: none;
} 

Step 2:
Download all attachment i've attached below. Then save them into a folder named BTProfile. After that throw it to your theme folder.

Step 3:
Go to Templates & Style -->Templates --> Your Templates -->Member Templates -> member_profile
Replace all by this
PHP Code:
<html>
<head>
    <title>{$mybb->settings['bbname']} - {$lang->profile}</title>{$headerinclude}

</head>
<body>
    {$header}
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
        class="tborder">
        <tbody>
            <tr>
                <td colspan="2" class="thead">
                    <strong>{$lang->users_forum_info}</strong>
                </td>
            </tr>
            <tr>
                <td class="trow1" valign="top" width="15%">
                    <p align="center">
                        {$avatar}<br>
                        <span class="largetext"><strong>{$formattedname}</strong></span><br />
                        ({$usertitle})<br />
                        {$groupimage} {$userstars}<br />
                        <br>
                        <strong>{$lang->registration_date}</strong><br>
                        {$memregdate}<br>
                        <br>
                        <strong>{$lang->date_of_birth}</strong>
                        <br>
                        {$membday}<br>
                        {$membdayage}<br>
                        <br>
                        <!-- start: member_profile_offline -->
                        <span class="offline" style="font-weight: bold;">{$online_status}</span>
                        <!-- end: member_profile_offline -->
                        </span>
                        <br>
                        <br>
                        <a href="search.php?action=finduserthreads&amp;uid={$uid}">
                            <img src="images/BTProfile/threads.png"></a>
                        <br>
                        <br>
                        <a href="search.php?action=finduser&amp;uid={$uid}">
                            <img src="images/BTProfile/posts.png"></a>
                    </p>
                    <p>
                    </p>
                </td>
                <td class="trow2" valign="top" width="75%">
                    <ul id="tab-links" style="width:100%">
                            <li id="tab-link-1" class="selected"><a href="javascript:showhide('divProfile');">
                                <img border="0" src="images/BTProfile/information.png"></a></li>
                            <li class="" id="tab-link-2"><a href="javascript:showhide('divComment');">
                                <img border="0" src="images/BTProfile/comments.png"></a></li>
                            <li class="" id="tab-link-3"><a href="javascript:showhide('divSig');">
                                <img border="0" src="images/BTProfile/signature.png"></a></li>
                    </ul>
                    <table width="100%">
                    <tr><td>&nbsp</td></tr>
                    </table>
                     <div id="divProfile" style="display: inline;">
                        <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
                            class="tborder">
                            <tr>
                                <td colspan="2" class="thead">
                                    <strong>{$lang->users_contact_details}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->homepage}</strong>
                                </td>
                                <td class="trow1">
                                    {$website}
                                </td>
                            </tr>
                            {$sendemail}
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->pm}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->icq_number}</strong>
                                </td>
                                <td class="trow1">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=icq&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['icq']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->aim_screenname}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['aim']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->yahoo_id}</strong>
                                </td>
                                <td class="trow1">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['yahoo']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->msn}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['msn']}</a>
                                </td>
                            </tr>
                        </table>
                        <br />
                        {$profilefields} </br> {$modoptions}
                        <br />
                        <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
                            class="tborder">
                            <tr>
                                <td colspan="2" class="thead">
                                    <strong>{$lang->users_forum_info}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->joined}</strong>
                                </td>
                                <td class="trow1">
                                    {$memregdate}
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->lastvisit}</strong>
                                </td>
                                <td class="trow2">
                                    {$memlastvisitdate} {$memlastvisittime}
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->total_posts}</strong>
                                </td>
                                <td class="trow1">
                                    {$memprofile['postnum']} ({$lang->ppd_percent_total})<br />
                                    <span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a>
                                        &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span>
                                </td>
                            </tr>
                            {$tyl_memprofile}
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->timeonline}</strong>
                                </td>
                                <td class="trow2">
                                    {$timeonline}
                                </td>
                            </tr>
                            {$reputation} {$warning_level}
                        </table>
                    </div>
                    <div id="divComment" style="display: none;">
                        <!-- ProfileComments -->
                        {$comments_index}<!-- /ProfileComments -->
                    </div>
                    <div id="divSig" style="display: none;">
                        {$signature}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <script language="JavaScript" type="text/javascript">
        function showhide(layer_ref) {
            HideDiv();
            document.getElementById(layer_ref).style.display = 'inline';
        }
        function HideDiv() {
            document.getElementById('divProfile').style.display = 'none';
            document.getElementById('divComment').style.display = 'none';
            document.getElementById('divSig').style.display = 'none';
        }
</script>
    {$footer}
</body>
</html> 

Done ! Ah, you should back-up your current member_profile template first after you do it. It'll make some plugin template disappear like NewPoint and Profile Design...
This is template you need replace if you're using NewPoints and Profile Design

PHP Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
{$profiledesigncss}
</head>
<body>
{$header}
{$profiledesigneditor}
 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
        class="tborder">
        <tbody>
            <tr>
                <td colspan="2" class="thead">
                    <strong>{$lang->users_forum_info}</strong>
                </td>
            </tr>
            <tr>
                <td class="trow1" valign="top" width="15%">
                    <p align="center">
                        {$avatar}<br>
                        <span class="largetext"><strong>{$formattedname}</strong></span><br />
                        ({$usertitle})<br />
                        {$groupimage} {$userstars}<br />
                        <br>
                        <strong>{$lang->registration_date}</strong><br>
                        {$memregdate}<br>
                        <br>
                        <strong>{$lang->date_of_birth}</strong>
                        <br>
                        {$membday}<br>
                        {$membdayage}<br>
                        <br>
                        <!-- start: member_profile_offline -->
                        <span class="offline" style="font-weight: bold;">{$online_status}</span>
                        <!-- end: member_profile_offline -->
                        </span>
                        <br>
                        <br>
                        <a href="search.php?action=finduserthreads&amp;uid={$uid}">
                            <img src="images/BTProfile/threads.png"></a>
                        <br>
                        <br>
                        <a href="search.php?action=finduser&amp;uid={$uid}">
                            <img src="images/BTProfile/posts.png"></a>
                    </p>
                    <p>
                    </p>
                </td>
                <td class="trow2" valign="top" width="75%">
                    <ul id="tab-links" style="width:100%">
                            <li id="tab-link-1" class="selected"><a href="javascript:showhide('divProfile');">
                                <img border="0" src="images/BTProfile/information.png"></a></li>
                            <li class="" id="tab-link-2"><a href="javascript:showhide('divComment');">
                                <img border="0" src="images/BTProfile/comments.png"></a></li>
                            <li class="" id="tab-link-3"><a href="javascript:showhide('divSig');">
                                <img border="0" src="images/BTProfile/signature.png"></a></li>
                    </ul>
                    <table width="100%">
                    <tr><td>&nbsp</td></tr>
                    </table>
                     <div id="divProfile" style="display: inline;">
                        <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
                            class="tborder">
                            <tr>
                                <td colspan="2" class="thead">
                                    <strong>{$lang->users_contact_details}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->homepage}</strong>
                                </td>
                                <td class="trow1">
                                    {$website}
                                </td>
                            </tr>
                            {$sendemail}
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->pm}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->icq_number}</strong>
                                </td>
                                <td class="trow1">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=icq&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['icq']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->aim_screenname}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['aim']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->yahoo_id}</strong>
                                </td>
                                <td class="trow1">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['yahoo']}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->msn}</strong>
                                </td>
                                <td class="trow2">
                                    <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">
                                        {$memprofile['msn']}</a>
                                </td>
                            </tr>
                        </table>
                        <br />
                        {$profilefields} </br> {$modoptions}
                        <br />
                        <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}"
                            class="tborder">
                            <tr>
                                <td colspan="2" class="thead">
                                    <strong>{$lang->users_forum_info}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->joined}</strong>
                                </td>
                                <td class="trow1">
                                    {$memregdate}
                                </td>
                            </tr>
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->lastvisit}</strong>
                                </td>
                                <td class="trow2">
                                    {$memlastvisitdate} {$memlastvisittime}
                                </td>
                            </tr>
                            <tr>
                                <td class="trow1">
                                    <strong>{$lang->total_posts}</strong>
                                </td>
                                <td class="trow1">
                                    {$memprofile['postnum']} ({$lang->ppd_percent_total})<br />
                                    <span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a>
                                        &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span>
                                </td>
                            </tr>
                            {$tyl_memprofile}
                            <tr>
                                <td class="trow2">
                                    <strong>{$lang->timeonline}</strong>
                                </td>
                                <td class="trow2">
                                    {$timeonline}
                                </td>
                            </tr>
                            {$reputation} {$warning_level}{$newpoints_profile}{$newpoints_shop_profile}{$newpoints_bank_profile}
                        </table>
                    </div>
                    <div id="divComment" style="display: none;">
                        <!-- ProfileComments -->
                        {$comments_index}<!-- /ProfileComments -->
                    </div>
                    <div id="divSig" style="display: none;">
                        {$signature}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <script language="JavaScript" type="text/javascript">
        function showhide(layer_ref) {
            HideDiv();
            document.getElementById(layer_ref).style.display = 'inline';
        }
        function HideDiv() {
            document.getElementById('divProfile').style.display = 'none';
            document.getElementById('divComment').style.display = 'none';
            document.getElementById('divSig').style.display = 'none';
        }
</script>
    {$footer}
</body>
</html> 

Hope this can help


Attached File(s)
  comments.png (Size: 2.46 KB / Downloads: 173)
  information.png (Size: 2.75 KB / Downloads: 106)
  posts.png (Size: 2.67 KB / Downloads: 91)
  signature.png (Size: 2.67 KB / Downloads: 89)
  threads.png (Size: 2.84 KB / Downloads: 99)
(This post was last modified: 12-31-2010, 06:33 AM by NNT_)
12-31-2010, 06:30 AM
members
Junior Member


Posts: 42
Joined: Jan 2011
Reputation: 0
Post: #2
RE: Pro-Profile Pages with 3 Tabs
Looks nice man, thanks.
01-07-2011, 05:48 AM
b0r1swh
Junior Member


Posts: 14
Joined: Jan 2011
Reputation: 0
Post: #3
RE: Pro-Profile Pages with 3 Tabs
really cool! thanks
01-09-2011, 11:55 PM
NNT_
Junior Member


Posts: 21
Joined: Dec 2010
Reputation: 0
Post: #4
RE: Pro-Profile Pages with 3 Tabs
Thanks, you're welcome guys
01-11-2011, 04:24 PM
Mazi1577
Junior Member


Posts: 33
Joined: Jun 2010
Reputation: 0
Post: #5
RE: Pro-Profile Pages with 3 Tabs
Thank you men.. Looks great ;]
01-17-2011, 06:56 AM
Manutdfans7
Junior Member


Posts: 35
Joined: Dec 2009
Reputation: 0
Post: #6
RE: Pro-Profile Pages with 3 Tabs
This looks pretty cool, but if there's an effect when switching, it would be awesome.
01-22-2011, 02:20 AM
McStormify
Junior Member


Posts: 11
Joined: Jan 2011
Reputation: 0
Post: #7
RE: Pro-Profile Pages with 3 Tabs
Amazing! Thanks so much
01-23-2011, 01:10 AM
cadbru
Junior Member


Posts: 22
Joined: Jan 2011
Reputation: 0
Post: #8
RE: Pro-Profile Pages with 3 Tabs
thank you, will try it
01-27-2011, 11:55 AM
Androidian
Junior Member


Posts: 33
Joined: Aug 2009
Reputation: 0
Post: #9
RE: Pro-Profile Pages with 3 Tabs
Hm... I want to be able to sample this tutorial through the demo but you have to register to see the profiles. I would, instead, post an image of the tabs of which you're displaying.

Just my two-cents.
01-29-2011, 06:16 PM
envira
Member


Posts: 74
Joined: Nov 2010
Reputation: 3
Post: #10
RE: Pro-Profile Pages with 3 Tabs
bro can you add a feature of recent visitors and profile buddies?
02-04-2011, 06:45 AM
 




User(s) browsing this thread: 2 Guest(s)