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

Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Pro-Profile Pages with 3 Tabs
Author Message
NNT_ Offline
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 001_tongue
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 ! 001_smile 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 001_tongue


Attached File(s)
.png  comments.png (Size: 2.46 KB / Downloads: 175)
.png  information.png (Size: 2.75 KB / Downloads: 108)
.png  posts.png (Size: 2.67 KB / Downloads: 91)
.png  signature.png (Size: 2.67 KB / Downloads: 89)
.png  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
Find all posts by this user Quote this message in a reply
members Offline
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
Find all posts by this user Quote this message in a reply
b0r1swh Offline
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
Find all posts by this user Quote this message in a reply
NNT_ Offline
Junior Member
**

Posts: 21
Joined: Dec 2010
Reputation: 0
Post: #4
RE: Pro-Profile Pages with 3 Tabs
Thanks, you're welcome guys Tongue
01-11-2011, 04:24 PM
Find all posts by this user Quote this message in a reply
Mazi1577 Offline
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
Find all posts by this user Quote this message in a reply
Manutdfans7 Offline
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
Find all posts by this user Quote this message in a reply
McStormify Offline
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
Find all posts by this user Quote this message in a reply
cadbru Offline
Junior Member
**

Posts: 22
Joined: Jan 2011
Reputation: 0
Post: #8
RE: Pro-Profile Pages with 3 Tabs
thank you, will try it Big Grin
01-27-2011, 11:55 AM
Find all posts by this user Quote this message in a reply
Androidian Offline
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. 001_smile
01-29-2011, 06:16 PM
Find all posts by this user Quote this message in a reply
envira Offline
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
Visit this user's website Find all posts by this user Quote this message in a reply
Post Reply 




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