MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Customized profile
Full Version: Customized profile
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

tphe1234

2016-06-28, 02:55 PM
Hello MyBB Community,
The profile in my theme looks awful,
actually it's the same as the deafult mybb theme
but with diffrent colors and shape,
i'd like to have more organized profile.
Im looking for tabbed profile,
i already tried one tutorial actually the only one that i found on the internet,
it's look's great but not working well with my theme{Square},
so, if someone can help me with that it's could be nice,



Thanks in advanced, Afik Habaz.

WallBB

2016-06-28, 04:22 PM
Just implement jquery tabs, pretty simple and easy to do.
Apply some css styling over it after tabs are working Smile

tphe1234

2016-06-28, 04:56 PM
(2016-06-28, 04:22 PM)WallBB Wrote: [ -> ]Just implement jquery tabs, pretty simple and easy to do.
Apply some css styling over it after tabs are working Smile

Hay, thanks for reply,
i already tried to build custom but lets say i want to put user signature in one tab,
so i put ($user_signature) {Thats just an example} and everything goes wrong,
that's also the reason that im looking for help in MyBB community cause the people here
know that im using MyBB and they will Be considerate this.
if you have some time, it's could be nice that you help me with that, i dont mind to pay.

Garden of Sinners

2016-06-28, 08:34 PM
You are using eNvy's theme Square am I correct?

credits to: http://community.mybb.com/thread-146284.html

go to:

adminCP-> Templates and Style->Templates->Your theme->Ungrouped Templates->headerinclude

and add

<script type="text/javascript">
jQuery(document).ready(function($) {
   $(".tab_content").hide(); 
   $("ul.tabs li:first").addClass("active").show();
   $(".tab_content:first").show(); 
   $("ul.tabs li").click(function() {
       $("ul.tabs li").removeClass("active"); 
       $(this).addClass("active"); 
       $(".tab_content").hide(); 
       var activeTab = $(this).find("a").attr("href"); 
       $(activeTab).fadeIn();
       return false;
   });
});
</script>

then go to adminCP-> Templates and Style->Templates->Your theme->Member Templates->Member_Profile and replace everything inside with

<html>

<head>
    <title>{$mybb->settings['bbname']} - {$lang->profile}</title>
    {$headerinclude}
</head>

<body>
    {$header}
    <table border="0" cellspacing="0" cellpadding="10" width="100%">
        <tr width="100%">
            <th class="memprof" width="20%" border="0" cellspacing="0" cellpading="10">
                <span class="memtext"><strong>{$formattedname}</strong></span>
            </th>
            <th class="memprof" width="150%" border="0" cellspacing="0" cellpading="10">
                <span class="memtext" style="float:right;"><strong><font color="white">{$online_status}</font></strong></span>
            </th>
        </tr>
        <tr width="100%">
            <td width="20%" valign="top">
                <table border="0" cellspacing="0" cellpadding="10" width="40%">
                    <tr width="100%">
                        <td class="trow1" width="40%">
                            {$avatar}
                            <table width="40%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td class="trow1" width="75%">
                                        <span class="largetext"><strong>{$formattedname}</strong></span><br />
                                        <span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
                                    </td>
                                    <td width="25%" align="right" valign="middle"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {$awaybit}
                </table>
            </td>
            <td width="150%" valign="top">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <td width="100%" style="vertical-align: top;padding-top: 2px;">
                        <ul class="tabs">
                            <li>
                                <a href="#tab1">
                                    <font color="white">About</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2">
                                    <font color="white">Contact</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab3">
                                    <font color="white">Activity</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab4">
                                    <font color="white">Moderation</font>
                                </a>
                            </li>
                        </ul>
                        <br />
                        <div class="tab_container">
                            <div id="tab1" class="tab_content">
                                {$profilefields} {$signature} {$buddy_options}
                            </div>


                            <div id="tab2" class="tab_content">
                                <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                                    <tr>
                                        <td colspan="2" class="thead"><strong>Contact Details Of {$formattedname}</strong>
                                            <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>
                                        </td>
                                    </tr>
                                </table>
                            </div>


                            <div id="tab3" class="tab_content">
                                <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                                    <tr>
                                        <td colspan="2" class="thead"><strong>Statistics Of {$formattedname}</strong>
                                            <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>
                                            <tr>
                                                <td class="trow2"><strong>{$lang->timeonline}</strong></td>
                                                <td class="trow2">{$timeonline}</td>
                                            </tr>
                                            {$reputation} {$warning_level}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="tab4" class="tab_content">
                                {$modoptions} {$adminoptions}
                            </div>
                        </div>
                    </td>
        </tr>
        </table>
        </td>
        </tr>
    </table>
    {$footer}
</body>

</html>

After that go to Templates and style->Themes->Your theme->Global.css->Edit in Advanced Mode

and paste in 
.tabs{
background: #41403B;
margin: 0px;
padding: 0px;
margin-top: 10px;
list-style: none;
}
.tabs li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}

.tabs li.current{
background: #fff;
color: #222;
}

.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.memprof
{
background: #4774a1; /*For old browsers*/
color: #fff;
}
.memtext
{
font-size: 16px;
font-weight: bold;
color: #fff;
}
.memprof a:link
{color: #fff;
}
.memprof a:visited
{
color: #fff;
}

And you should end up with a result somewhat like this

[Image: cU3rRRs.png]

After that you should be able to change the layout of the items in the tabs via the member_profile template to suit your liking.

tphe1234

2016-06-28, 11:07 PM
(2016-06-28, 08:34 PM)Garden of Sinners Wrote: [ -> ]You are using eNvy's theme Square am I correct?

credits to: http://community.mybb.com/thread-146284.html

go to:

adminCP-> Templates and Style->Templates->Your theme->Ungrouped Templates->headerinclude

and add

<script type="text/javascript">
jQuery(document).ready(function($) {
   $(".tab_content").hide(); 
   $("ul.tabs li:first").addClass("active").show();
   $(".tab_content:first").show(); 
   $("ul.tabs li").click(function() {
       $("ul.tabs li").removeClass("active"); 
       $(this).addClass("active"); 
       $(".tab_content").hide(); 
       var activeTab = $(this).find("a").attr("href"); 
       $(activeTab).fadeIn();
       return false;
   });
});
</script>

then go to adminCP-> Templates and Style->Templates->Your theme->Member Templates->Member_Profile and replace everything inside with

<html>

<head>
    <title>{$mybb->settings['bbname']} - {$lang->profile}</title>
    {$headerinclude}
</head>

<body>
    {$header}
    <table border="0" cellspacing="0" cellpadding="10" width="100%">
        <tr width="100%">
            <th class="memprof" width="20%" border="0" cellspacing="0" cellpading="10">
                <span class="memtext"><strong>{$formattedname}</strong></span>
            </th>
            <th class="memprof" width="150%" border="0" cellspacing="0" cellpading="10">
                <span class="memtext" style="float:right;"><strong><font color="white">{$online_status}</font></strong></span>
            </th>
        </tr>
        <tr width="100%">
            <td width="20%" valign="top">
                <table border="0" cellspacing="0" cellpadding="10" width="40%">
                    <tr width="100%">
                        <td class="trow1" width="40%">
                            {$avatar}
                            <table width="40%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td class="trow1" width="75%">
                                        <span class="largetext"><strong>{$formattedname}</strong></span><br />
                                        <span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
                                    </td>
                                    <td width="25%" align="right" valign="middle"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {$awaybit}
                </table>
            </td>
            <td width="150%" valign="top">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <td width="100%" style="vertical-align: top;padding-top: 2px;">
                        <ul class="tabs">
                            <li>
                                <a href="#tab1">
                                    <font color="white">About</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2">
                                    <font color="white">Contact</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab3">
                                    <font color="white">Activity</font>
                                </a>
                            </li>
                            <li>
                                <a href="#tab4">
                                    <font color="white">Moderation</font>
                                </a>
                            </li>
                        </ul>
                        <br />
                        <div class="tab_container">
                            <div id="tab1" class="tab_content">
                                {$profilefields} {$signature} {$buddy_options}
                            </div>


                            <div id="tab2" class="tab_content">
                                <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                                    <tr>
                                        <td colspan="2" class="thead"><strong>Contact Details Of {$formattedname}</strong>
                                            <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>
                                        </td>
                                    </tr>
                                </table>
                            </div>


                            <div id="tab3" class="tab_content">
                                <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                                    <tr>
                                        <td colspan="2" class="thead"><strong>Statistics Of {$formattedname}</strong>
                                            <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>
                                            <tr>
                                                <td class="trow2"><strong>{$lang->timeonline}</strong></td>
                                                <td class="trow2">{$timeonline}</td>
                                            </tr>
                                            {$reputation} {$warning_level}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="tab4" class="tab_content">
                                {$modoptions} {$adminoptions}
                            </div>
                        </div>
                    </td>
        </tr>
        </table>
        </td>
        </tr>
    </table>
    {$footer}
</body>

</html>

After that go to Templates and style->Themes->Your theme->Global.css->Edit in Advanced Mode

and paste in 
.tabs{
background: #41403B;
margin: 0px;
padding: 0px;
margin-top: 10px;
list-style: none;
}
.tabs li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}

.tabs li.current{
background: #fff;
color: #222;
}

.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.memprof
{
background: #4774a1; /*For old browsers*/
color: #fff;
}
.memtext
{
font-size: 16px;
font-weight: bold;
color: #fff;
}
.memprof a:link
{color: #fff;
}
.memprof a:visited
{
color: #fff;
}

And you should end up with a result somewhat like this

[Image: cU3rRRs.png]

After that you should be able to change the layout of the items in the tabs via the member_profile template to suit your liking.
tySmile
[Image: image.png][url=https://postimage.org/][/url]
MyBB Community Forums > Extensions > Themes > Theme Support > Customized profile