آموزش غیر ریسپانسیو کردن قالب پروتو استار جوملا

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

رفع ریسپانسیو بودن قالب پروتواستار جوملا چیزی فراتر از تغییر پیکربندی آن از شناور به استاتیک است. زمانی که پیکربندی وبسایت استاتیک است، پروتواستار اقلام منو را با کلاس nav-pills روی هم چیده و ستون کناری در زیر ستون اصلی قرار می گیرد. سایر فراخوان های media@ در فایل template.css برای تغییر حاشیه ها، فاصله ها و عرض ستون ها است.

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

مراحل حذف سبک ریسپانسیو قالب پروتواستار

گام اول: ابتدا از فایل های موجود در ریشه دایرکتوری تمپلیت پروتو استار خود یک نسخه بک آپ بگیرید. حداقل فایل index.php را پشتیبان بگیرید. می توان با استفاده از یک برنامه FTP یا فایل منیجر کنترل پنل هاستینگ خود پشتیبان تهیه کرد.

گام دو: فایل index.php موجود در ریشه دایرکتوری پروتواستار در پوشه تمپلیت را با یک ویرایشگر متن باز کنید. کد زیر را پیدا کنید:

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

خط زیر را به زیر آن اضافه کنید:

$doc->addStyleSheet('templates/'.$this->template.'/css/remove-responsive.css');

این کد به جوملا می گوید که استیل شیت جدید را بارگذاری کنید. از آنجایی که استیل شیت جدید پس از استیل شیت پیش فرض جوملا (template.css) بارگذاری می شود، هر گونه سبک تعریف شده در فایل remove-responsive.css اولویت داشته و سبک های نوشته شده در template.css را لغو و رونویسی می کند. بنابراین استیل درج شده در این فایل اعمال می شود.

گام 3: یک سند خالی جدید در ویرایشگر متن خود باز کرده و با نام remove-responsive.css ذخیره کنید.

گام 4: کد زیر را به این سند جدید اضافه کنید:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 960px;
    max-width: 960px;
}
@media (max-width: 980px) { 
    .header .brand {text-align: left;float: left;}
    .header .nav.pull-right, .header-search {float: right;}
    .nav-pills > li {float: left;}
    [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {width: 23.4043%; }
    .row-fluid .span6 {width: 48.9362%; }
    .row-fluid [class*="span"] {float: left;margin-left: 2.12766%;}
    .row-fluid .span4 {width: 31.9149%}
    .row-fluid .span9 {width: 74.4681% ;}
    .row-fluid .span9 {width: 100% ;}
    .well {padding: 19px;}
}

گام 5: سند جدید را ذخیره کرده و از طریق برنامه FTP یا فایل منیجر کنترل پنل هاستینگ خود در پوشه css دایرکتوری تمپلیت جوملا (templates/protostar/css/) بارگذاری کنید. بایستی فایل template.css را در این پوشه ببینید.

گام 6: حال سایت جوملا خود را باز کرده و سایر پنجره مرورگر را تغییر دهید. می توانید این تست را بر روی موبایل و تبلت خود نیز انجام دهید. تغییر سایز نباید روی نمایش وبسایت تاثیر بگذارد.

خلاصه و نکات مهم

این سبک بندی فقط یک نقطه شروع است. ممکن است مسائل دیگری در سایت خود پیدا کنید که هنوز سبک دهی ریسپانسیو دارند. از ابزارهای تشخیصی مثل فایرباگ یا کنسول گوگل استفاده کنید و سبک آنها را تعیین کنید.

سبک تعیین شده در فایل remove-responsive.css اندازه کانتینر سایت را به 960px ست می کنید. اگر نیاز دارید می توانید آن را ویرایش کنید.

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