طریقه تغییر رنگ پس زمینه قالب پروتواستار

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

چرا سبک تعریف شده در استایل شیت عمل نمی کند؟

وقتی در استایل شیت سفارشی (custom.css) یا فایل استایل شیت اصلی قالب (template.css) سعی می کنیم رنگ پس زمینه یا رنگ و فونت هدینگ ها را عوض کنیم، در عمل نتیجه نمی دهد. این مسئله به خاطر دو چیز رخ می دهد:

مورد اول – تغییر نکردن رنگ پس زمینه براساس رنگ تعریف شده در استایل شیت

در مدیر قالب جوملا (Template Manager) قالب پروتواستار را از منوی Template و زیر منوی Style باز کنید. حال روی برگه Advanced کلیک کنید. صفحه ای مشابه زیر را خواهید داشت:

همانطور که می بینیم جایی برای تغییر رنگ قالب (Template Colour) و تغییر رنگ پس زمینه (Background Colour) مهیا شده است. در این برگه همچنین می توانید لوگو و هدر وبسایت را تغییر داده یا متنی برای عنوان و شرح وبسایت وارد کنید. در این برگه می توان سبک فونت گوگل را تعیین کرد و چیدمان قالب را به وضعیت ایستا (Static Layout) یا شناور (Fluid Layout) ست کرد.

همانطور که می بینیم جایی برای تغییر رنگ قالب (Template Colour) و تغییر رنگ پس زمینه (Background Colour) مهیا شده است. در این برگه همچنین می توانید لوگو و هدر وبسایت را تغییر داده یا متنی برای عنوان و شرح وبسایت وارد کنید. در این برگه می توان سبک فونت گوگل را تعیین کرد و چیدمان قالب را به وضعیت ایستا (Static Layout) یا شناور (Fluid Layout) ست کرد.

این تنظیمات رنگ مقادیری را به متغیرهای PHP تخصیص می دهد که توسط فایل index.php برای ایجاد هر یک از وب پیج های وبسایت استفاده می شود.

این مسئله ما را به عامل دومی می رساند که موجب می شود تغییرات استایل شیت روی رنگ پس زمینه یا عنوان و رنگ متن هدینگ سایت تاثیری نداشته باشد.

مورد دوم – عدم تغییر رنگ پس زمینه و فونت قالب پروتواستار با تغییر استایل شیت

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

استایل شیت template.css توسط فایل index.php قبل از این کدها بارگذاری شده است. این کدها یک بخش <style> اضافه می کنند که در بخش <head> تمامی صفحات سایت ظاهر می شود. این بخش <style> تنظیمات ایجاد شده در استایل شیت را رونویسی می کند. اگر بخواهیم رنگ پس زمینه سایت را با فایل استایل شیت تعیین کنیم، بایستی این خط کد را از فایل index.php حذف کنیم (قبل از هر کاری یک نسخه پشتیبان تهیه کنید)

حالا این کد را تشریح می کنیم و اتفاقات حاصله را مرور کنیم:

  • استایل شیت template.css توسط فایل index.php قبل از این کدها بارگذاری شده است.
  • این کدها یک بخش <style> اضافه می کنند که در بخش <head> تمامی صفحات سایت ظاهر می شود. این بخش <style> تنظیمات ایجاد شده در استایل شیت را رونویسی می کند.
  • اگر بخواهیم رنگ پس زمینه سایت را با فایل استایل شیت تعیین کنیم، بایستی این خط کد را از فایل index.php حذف کنیم (قبل از هر کاری یک نسخه پشتیبان تهیه کنید)
background-color: " . $this->params->get('templateBackgroundColor')

چگونه بفهمیم که سبکی از صفحه HTML یا استایل شیت بارگذاری شده است؟

می توان از ابزار تشخیصی فایرباگ (Firebug) فایرفاکس، ابزارهای توسعه وب (developer tools) مرورگرهای کروم یا سفری برای اینکار استفاده کرد.

زمانی که وب پیج کمپایل می شود، به صورت کد HTML به مرورگر ارسال می شود. مثلا در مرورگر کروم می توان روی عنصری که می خواهیم منشاء سبک آن را بدانیم کلیک راست کرده و inspect element را می زنیم. بدین ترتیب ابزار توسعه وب کروم باز می شود (می توان با فشردن کلید F12 کیبورد این ابزار را فعال کرد).

در این لیست کد HTML، کد css و سایر مشخصات عنصر دیده می شود. می توان بدین ترتیب منشاء سبک های اعمال شده به عناصر تشکیل دهنده وب پیج را فهمید.

یک نکته را نباید فراموش کرد که همیشه سبک سرخود (Inline styling) بر سایر سبک های ایجاد شده در فایل های استایل شیت اولویت دارد. زمانی که عنصری از صفحه یا تگ HTML دارای بخش <style> باشد، سبک موجود در این بخش بر سبک های مشخص شده در فایل های استایل شیت قالب یا فایل استایل شیت سفارشی رونویسی می شود.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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