طریقه تعویض ظاهر دکمه منو در صفحه نمایش کوچک

امروزه تلاش می شود که وب سایت ها ریسپانسیو ساخته شوند. ریسپانسیو چیست؟ ریسپانسیو به معنی سازگاری طول و عرض وبسایت و عناصر آن با تغییر اندازه صفحه نمایش نمایشگر. در نسخه های جدید جوملا، تمپلیت پروتواستار جوملا ظاهر دکمه منو با کوچکتر شدن عرض صفحه نمایش تغییر می کند و در نمایشگرهای کوچکتر از 979 پیکسل به شکل دکمه های زیر در می آید.

 آموزش تغویض دکمه منو موبایل و تبلت قالب جوملا

در این مقاله طریقه تغییر و سفارشی سازی دکمه منو آموزش داده می شود. در این راهنما دکمه منو تغییر داده شده و بجای آیکون سه خط، کلمه MENU روی دکمه درج می شود. با استفاده از این دستورالعمل می توانید عنوان دکمه منو را به هر عبارت دلخواهی تغییر دهید یا برای زبان های مختلف ویرایش لازم را انجام دهید.

از آنجایی که عده ای از کاربران آیکون سه میله را نمی شناسند، نمی دانند که مختص منو در صفحه نمایش کوچک است، بهتر است بجای این آیکون از دکمه ای با عنوان منو استفاده کرد.

می توان آیکون منو را از طریق ویرایش فایل index.php قالب پروتواستار اصلاح و تعدیل کرد. در اینجا کد مربوط به این عنصر در فایل index.php آمده است. همیشه قبل از هر گونه تغییری در این فایل، یک نسخه پشتیبان برای موارد ضروری ایجاد کنید.

<nav class="navigation" role="navigation">
    <div class="navbar pull-left">
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>

ابتدا هر سه خط حاوی <span class="icon-bar"></span> را حذف کنید.

سپس بجای آنها کلمه MENU یا کلمه مورد نظر خود را تایپ کنید.

<nav class="navigation" role="navigation">
    <div class="navbar pull-left">
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            MENU
        </a>
    </div>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>

حال فایل index.php را ذخیره کرده و به جای خود در دایرکتوری تمپلیت جوملا برگردانید. سایت خود را امتحان کنید. حالا به جای آیکون سه میله بایستی دکمه منو را ببینید.

چگونه رنگ دکمه منوی موبایل قالب پروتواستار را عوض کنیم؟

رنگ پس زمینه دکمه منو موبایل (منو نمایشگر کوچکتر از 979 پیکسل) را می توانید با اضافه کردن استیل منطبق با رنگ قالب خود عوض کنید. به لیست عناصر بخش فایل index.php قالب خود نام دو کلاس .navigation a.btn را اضافه کنید. همانند قطعه کد زیر:

.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-primary, .navigation a.btn
{
    background: <?php echo $this->params->get('templateColor'); ?>;
}

با اضافه کردن این دو نام کلاس، رنگ پس زمینه دکمه منو با رنگ قالب شما یکسان خواهد شد.

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.