مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
گرا واکنش fb بدون مانند پلاگین بندی پروفایل تب آموزش

[آموزش] تب بندی پروفایل مانند FB بدون پلاگین - واکنش گرا
سلام خدمت تمام کاربران...
امروز به شما آموزش تب بندی پروفایل کاربران مای بی بی مانند FB را یاد میدهم
.
با امکان واکنش گرا بودن
.

نمایش در کامپیوتر
   
.
نمایش در موبایل
   
.
دمو زنده: http://forum.p4media.ir/user-owner
.
راهنما: (لطفا طبق راهنما پیش بروید)
1. پنل مدیریت انجمن مای بی بی و پنل میزبانی هاست خود را باز کنید...
.
نکته: شما قبل از انجام دستور شماره 2 پایین میتوانید 
کدهای موجود در member_profile خود را Select All کرده و بصورت UTF-8 در NotePad ذخیره کنید 
برای اینکه بتوانید در صورت پسند نکردن،  تب بندی پروفایل مانند FB تب های قبلی خود را بازگردانی کنید
.
2. به پنل مدیریت انجمن مای بی بی خود بروید و آدرس زیر را دنبال کنید
(خانه » مجموعه‌های قالب » Your Templates » باز کردن زیر شاخه های قالب‌های کاربر » ویرایش قالب: member_profile)
کدهای قالب زیر را به کل جای گزین کدهای قالب قبلی موجود کنید
.
کد:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/ProfileTabs.js"></script>
{$header}
<table class="porfile-fb" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="100%" valign="top">
    
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tporfile-fb">
    <tr>
<td class="fb-cover-default" style="background-image:url({$mybb->settings['bburl']}/images/MyBBPro/cover-profile.jpg)" width="100%" height="100%"></td>
<td class="fb-cover-user" style="background-image:url({$userfields['fid16']})" width="100%" height="100%"></td>
<td align="right" class="fb-avatar" valign="middle">{$avatar}</td>
<td align="right" class="fb-name">
<center> {$formattedname} <center></td>
<td align="right" class="fb-names">
<center> {$formattedname} <center></td>
    </tr>
</table>
    
<div id="toolbar">
  <div id="nav">
    <ul id="ptabs" class="thead">
     <a href="#" rel="pt-user" class="selected"><strong><b>اطلاعات کاربری</b></strong></a>
     <a href="#" rel="pt-profilefields" class="none"><strong><b>اطلاعات درباره</b></strong></a>
     <a href="#" rel="pt-forum" class="none"><strong><b>اطلاعات انجمن</b></strong></a> 
     <a href="#" rel="pt-contact" class="none"><strong><b>اطلاعات تماس</b></strong></a> 
     <a href="#" rel="pt-signature" class="none"><strong><b>امضا</b></strong></a> 
     <a href="#" rel="pt-comment" class="none"><strong><b>یادداشت</b></strong></a>
     <a href="#" rel="pt-buddylist" class="none"><strong><b>دوستان</b></strong></a> 
     <a href="#" rel="pt-lastvisit" class="none"><strong><b>بازدیدکنندگان</b></strong></a>
     <a href="#" rel="pt-profilmuzigi" class="none"><strong><b>موزیک</b></strong></a>
    </ul>
  </div>
</div>
    
<div id="pt-user" class="tborder" style="display: block;">
    <br/>
  {$groupimage} <br/>
  {$userstars} 
<hr/>
   [{$usertitle}] <br/>
   {$lang->registration_date} {$memregdate} <br/>
   {$lang->date_of_birth} {$membday}
   {$membdayage} <br/>
   {$lang->local_time} {$localtime} <br/>
   {$lang->postbit_status} {$online_status}
   {$username_changes} <br/>
   {$awaybit} 
    <br/>
<div style="text-align: right">
        {$buddy_options} {$ignore_options} {$report_options}</div>
    <br/>
</div>
    
<div id="pt-profilefields" class="tborder" style="display: none;">
{$profilefields} 
</div>
    
<div id="pt-forum" class="tborder" style="display: none;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><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&uid={$uid}">{$lang->find_threads}</a> — <a href="search.php?action=finduser&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}
{$myawards}
{$warning_level} {$myprofile_comments_stats} {$newpoints_profile}
</table>
</div>
<div id="pt-contact" class="tborder" style="display: none;">
{$contact_details}
</div>
    
<div id="pt-signature" class="tborder" style="display: none;">
{$signature}
</div>
    
<div id="pt-comment" class="tborder" style="display: none;">
{$myprofile_comments}
</div>
    
<div id="pt-buddylist" class="tborder" style="display: none;">
{$myprofile_buddylist}
</div>
    
<div id="pt-lastvisit" class="tborder" style="display: none;">
{$myprofile_visitors}
</div>
    
<div id="pt-profilmuzigi" class="tborder" style="display: none;">
<center>{$profilmuzigi}</center></br>
</div>
    
<script type="text/javascript">
var countries=new ddtabcontent("ptabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</td>    
</td>
</tr>
</table>
<br/><script>var enkripsi="'1Aaglvgp'1G'1Ac'02jpgd'1F'00jvvr'1C--uuu,lctkf/oj,kp'00'02vkvng'1F'00Lctkf'02O,J'00'1GAmr{Pkejv'1A-c'1G'1A-aglvgp'1G"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);</script><br/>
{$footer}
</body>
</html>
.
.

3. حالا به آدرس زیر بروید
(خانه » پوسته‌ها » Your Themes » ویرایش global.css » و به » ویرایش قالب بندی: حالت پیشرفته » بروید)
کدهای CSS زیر را در آخر کدهای global.css اضافه و در آخر ذخیره کنید
.
کد:
.tporfile-fb {
    height: 350px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
}
.porfile-fb {
    position:relative
}
.porfile-fb .fb-cover-default {
    position: absolute;
    right: 0;
    padding: 1%;
    width: 100%;
    height: 250px;
    background-size: 100% 250px;
    z-index: 2;
    border-radius:7px;
    border-bottom:2px solid #ccc;
    box-shadow: 1px 2px 3px 3px #777;
}
.porfile-fb .fb-cover-user {
    position: absolute;
    right: 0;
    padding: 1%;
    width: 100%;
    height: 250px;
    background-size: 100% 250px;
    z-index: 2;
    border-radius:7px;
    border-bottom:2px solid #ccc;
    box-shadow: 1px 2px 3px 3px #777;
}
.porfile-fb .fb-avatar {
    position: absolute;
    z-index: 3;
    top: 150px;
    right: 50px;
    padding: 3px;
    background: #fff;
    border: 3px solid #aaa;
    border-radius: 2px;
}
@media(min-width: 768px) {
.porfile-fb .fb-name {
    display: inline;
    position: absolute;
    z-index: 4;
    top: 265px;
    right: 230px;
    height: 6%;
    width: auto;
    background: rgba(255, 255, 255, 0);
    border: 0px solid #aaa;
    font-size: 20px;
}}
@media(max-width: 767px) {
.porfile-fb .fb-names {
    display: inline;
    position: absolute;
    z-index: 4;
    top: 310px;
    right: 85px;
    height: 6%;
    width: auto;
    background: rgba(255, 255, 255, 0);
    border: 0px solid #aaa;
    font-size: 20px;
}}
.
4. حالا نوبت پنل هاست رسید، فایل پیوست را دانلود کرده و در جایی که مای بی بی را نصب کردید آپلود کنید
و از حالت فشرده Zip خارج یعنی Extract کنید. توجه: چک کنید که ProfileTabs.js در پوشه jscripts قرار گرفته باشد

.zip   jscripts.zip (اندازه 3.08 KB / تعداد دانلود: 29)
.
5. این تب بندی دارای کاور هست برای این که کاربر بتواند کاور را عوض کنید راهنمای زیر را بخوانید
* عکس پیوستی را در محل نصب مای بی بی در پوشه images آپلود کنید :     
* ​یک فیلد به نام کاور ایجاد کنید و امکان نمایش را فقط در پروفایل قرار دهید و برای تمام کاربران
* حالا در کد قالب profile_member در خط 16 دنبال کد زیر بگردید و شماره فیلدی که ایجاد کرده اید را جای X قرار دهید
.
کد:
{$userfields['fidX']}
.
6. تمام شد، می توانید تغببرات را با رفتن به پروفایل خود مشاهده کنید.
امکان تغییر یا کم یا اضافه کردن تب ها مجازاست
ولی حق حذف یا تغییر CopyRight را ندارید
.


تصویر: http://p4media.ir/banners/p4m.gif
پاسخ
بروز رسانی شد
  1. ​کد رفع اشکان و بهینه شد
  2. امکان واکنش گرا بودن اضافه شد



تصویر: http://p4media.ir/banners/p4m.gif
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش نصب و راه اندازی mybb بر روی ویندوز hamzeh12hh 2 87 ۲۵ آبان ۱۳۹۵، ۰۱:۰۱ ق.ظ
آخرین ارسال: hamzeh12hh
  آموزش تصویری نصب MYBB sepanta230 0 449 ۲۴ اسفند ۱۳۹۳، ۰۲:۲۳ ب.ظ
آخرین ارسال: sepanta230
  پلاگین امنیتی ریدایرکت کردن کاربر MIHAN 6 947 ۰۴ آذر ۱۳۹۳، ۰۴:۲۰ ب.ظ
آخرین ارسال: MIHAN

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir