فعال سازی و استفاده از قابلیت واکنش گرایی مای بی بی (Responsive MyBB)

[mojtabamalaekeh]

قالب پیشفرض (Default) مای بی بی ریسپانسیو نوشته شده اما برای پیروی از استانداردی خاص، چند قانون به دستورات css اضافه شده تا قالب عرض ثابتی داشته باشه.

   

حالا چرا ما میخوایم این قانون رو بشکنیم و یه کار غیر استاندارد کنیم؟
نمیدونم!

کنترل پنل مدیر کل => قالب ها و پوسته ها => ویرایش پوسته Default => ویرایش سبک global.css => ویرایش قالب بندی: حالت پیشرفته
الف) این عبارت رو سرچ کنید:

کد:

#container

قسمتی از کد رو پیدا خواهید کرد که این شکلیه:

کد:

#container {
    color: #333;
    text-align: right;
    line-height: 1.4;
    margin: 0;
    min-width: 990px;
    font-family: 'MITahoma',Tahoma;
    font-size: 13px;
}

باید خاصیت min-width رو حذف کنیم یا غیرفعال کنیم!
برای غیر فعال کردن کدها توی css می تونید یه اسلش ستاره به ابتدای اون خط و یه ستاره اسلش هم به انتهاش اضافه کنید:

کد:

    /*min-width: 990px;*/

ب) حالا این یکی عبارت رو سرچ کنید:

کد:

.wrapper

خاصیت min-width این یکی رو هم با افزودن اسلش / ستاره * به ابتدای خط و افزودن ستاره اسلش به انتهای خط، غیرفعال کنید:

کد:

/*min-width: 970px;*/

ذخیره ی تغییرات رو بزنید و....  
نتیـ ج) به صفحه اصلی انجمن برید و F5 بزنید. عرض پنجره مرورگر رو کوچیک کنید.
اگر تغییری مشاهده نشد یا Ctrl+F5 بزنید یا یکی دو بار دیگه F5 رو بزنید.
اینجوری فایل css که اخیراً تغییر دادین، به جای کش مرورگر (Cache) (که روی هارددیسک کامپیوتر شماست)، دوباره از سرور خونده میشه.


ویرایش 1

با اضافه کردن کردهای زیر در global.css زمانی که عرض صفحه نمایش کمتر از 770 پیکسل باشه
چیدمان قسمت هایی از انجمن مرتب تر میشه.

کد:

@media all and (max-width: 770px) {
    /*استفاده بهینه از عرض صفحه*/
    #content {
        padding-left: 0 !important;
    }
    .wrapper {
        width: 98% !important;
    }
    /*راهنماهای فوتر*/
    .forum_legend dt {
        clear: both !important;
    }
    /*لوگو در هدر*/
    .wrapper>a {
        display: block !important;
        text-align: center !important;
        margin: 15px auto !important;
    }
    /*منو در هدر*/
    #logo ul.top_links {
        text-align: center !important;
        margin: auto !important;
    }
    /*جستجو در هدر */
    #search {
        width: 100% !important;
        margin: 15px auto !important;
        text-align: center !important;
    }
    /*دیو های داخل فوتر*/
    #footer div {
        float: none !important;
        margin: 5px auto !important;
    }
    /*منوی فوتر*/
    #footer .upper ul.bottom_links {
        margin: 10px auto !important;
        display: block;
        text-align: center;
        float: none !important;
    }
    /*جدول لیست انجمن ها در صفحه اول*/
    tr td.trow1:last-child, tr td.trow2:last-child, tr td.trow_shaded:last-child {
        white-space: normal !important;
    }
    /*مخفی کردن ستون های سمت راست لیست موضوعات یک تالار*/
    .trow1, .trow2 {
        white-space: normal !important;
    }
    .can_hide * {
        display: none !important;
    }
    .can_hide {
        width: 0 !important;
        max-width: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

تا اینجا فایل های پوسته رو دستکاری کردیم.
حالا رای اینکه کلاس can_hide توی کدهای بالا معنا پیدا کنه باید تغییری توی یکی از فایل های قالب هم بدیم!
از کنترل پنل مدیر به بخش قالب ها برین
قالب Forum Display Templates رو گسترش بدین
فایل forumdisplay_thread رو پیدا کنید و ویرایش کنید
خط اول یک تگ tr هست که کاری باهاش نداریم
خط دوم و سوم td هست که با هردوشون کار داریم
دو تا td کدشون این شکله:

کد:

<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
    <td align="center" class="{$bgcolor}{$thread_type_class}" width="2%">{$icon}</td>

که باید کلاس can_hide رو بهشون اضافه کنیم:

کد:

<td align="center" class="can_hide {$bgcolor}{$thread_type_class}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
    <td align="center" class="can_hide {$bgcolor}{$thread_type_class}" width="2%">{$icon}</td>