آموزش افزایش حداکثر عرض بخش محتوا در قالب پروتواستار

همانطور که می دانیم قالب پروتواستار جوملا به صورت دو پیکربندی استاتیک و شناور عرضه شده است. در حالت استاتیک محتوای وب پیج بخشی از صفحه نمایش را اشغال می کند. اما در حالت شناور کل صفحه مرورگر یا صفحه نمایش را اشغال می کند. اگر از چیدمان استاتیک (Static Layout) قالب پروتو استار در مدیر قالب جوملا استفاده کنید، تنظیمات کلاس محفظه ("class="container) در فایل template.css به صورت زیر خواهد بود:

.container {
    max-width: 960px;
}
و
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 940px;
}

بخاطر داشته باشید که کلاس کانتینر ("class="container) برای اولین <div> صفحه و همچنین برای دایو <footer> استفاده می شود.

همچنین توجه داشته باشید که در فایل template.css برای این کلاس تعریف های مختلفی تحت فراخوانی media@ برای صفحه نمایش های مختلف انجام شده است.

طریقه رونویسی تنظیم max-width در قالب پروتو استار

برای اینکار لازم است که یک استایل شیت سفارشی (custom.css) ایجاد کنید. ویرایش فایل template.css اورجینال قالب توصیه نمی شود و جز عملکرد برتر توسعه وب نیست زیرا با هر بار آپدیت جوملا کلیه تغییرات ایجاد شده در این فایل از بین می رود. همچنین این فایل بسیار طولانی بوده و مرور آن مشکل است.

در استایل شیت شخصی یا سفارشی خود، خطوط کد زیر را اضافه کنید تا تنظیمات فایل template.css رونویسی (لغو) شوند:

.container {
    max-width: 1150px;
}
و
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1150px;
}

نتیجه تغییرات استایل شیت سفارشی

زمانی که این سبک را اضافه می کنید، ممکن است به این نتیجه برسید که افراد دارای صفحه نمایش کوچکتر ممکن است تجربه دیداری خوبی از ظاهر سایت شما با این تنظیمات نداشته باشند یا ممکن است با توجه به تفسیر کد توسط مرورگر آنها، ظاهر به هم ریخته ای را ملاحظه کنند. حداکثر عرض 940px در حالت افقی (landscape mode) تبلت بخوبی کار می کند. پهنای جدیدی که ست کرده اید (1150px) ممکن است در تبلت بخوبی نمایش نیابد.

برای رفع این مسئله از فراخوانی media@ استفاده کرده و خطوط زیر را برای کاربران تبلت به استیل شیت سفارشی خود اضافه کنید:

@media (max-width: 960px) {
    .container {max-width: 960px;}
    .container {width: auto;}
}

استیل width: auto به مرورگر دستور می دهد که محتوای عنصر کل فضای موجود صفحه نمایشگر را پر کند و از آن بیرون نزند.

تفاوت max-width: و width: در فایل css چیست؟

مقدار ست شده برای :max-width در :width رونویسی شده و مقدار آن را لغو می کند. این بدین معنی است که اگر در جایی از استیل شیت خود max-width: 750px را ست کرده باشید، نمی توانید به همان عنصر اجبار کنید که از استیلی مثل width: 950px استفاده کند. اما از آنجایی که در فایل template.css از هر دو استفاده شده است، بایستی در استیل شیت سفارشی خود نیز هر دو را درج کنید که هر دو پیکربندی ست شده در استیل شیت قالب را رونویسی کنید.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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