سلام کاربران گرامی ، حال شماخوب هست؟ امروز میخوام درمورد جوملا و راست چین کردن قالب جوملا کمی بیاموزیم .
امروزه به دلیل open source بودن جوملا – یعنی فراهم شدن امکان استفاده از منابع رایگان و تجاری این سیستم مدیریت محتوا در سطح وسیع – تعداد طراحانی که از هسته جوملا استفاده می کنند روزافزون است . اما به دلیل پشتیبانی بهتر جوملا از زبان انگلیسی ، برخی قالب ها نیاز به RTL (Right To Left) شدن دارند . در این مقاله به این موضوع خواهیم پرداخت .
راست چین کردن قالب در جوملا
فایل های CSS : قالب های جوملا اغلب از یک فایل CSS به نام template.css استفاده می کنند ، برخی هم از تعدادی فایل CSS استفاده می کنند که برای راست چین کردن قالب در جوملا ، می بایست تمامی آن فایل ها را ویریش کرد . وقتی می خواهیم یک قالب LTR (Left To Right) را به یک قالب RTL تبدیل کنیم ، ابتدا از فایل template.css یک کپی می گیریم و نام آن را template_rtl.css قرار می دهیم . در این مقاله هر جا صحبت از ویرایش کد CSS شد ، منظور ویرایش فایل template_rtl.css می باشد . ابزار firebug برای این منظور به شما کمک زیادی می کند .
اگر قالب شما به علت انگلیسی بودن LTR می باشد ، برای راست چین کردن قالب در جوملا (RTL) ، می بایست اقدامات زیر را انجام دهید :
اول : ویرایش فایل index.php
این فایل ساختار کلی قالب جوملا را مشخص می کند . برای ویرایش آن باید به HTML و PHP آشنا باشید . بر روی یک قالب LTR باید کدهای زیر را به انتهای تگ head یعنی قبل از بسته شدن آن اضافه کنیم :
راست چین کردن قالب در جوملا
این کدها مشخص می کنند اگر در مدیریت جوملا زبان فارسی انتخاب شد ، سیستم از فایل template_rtl.css استفاده کند و اگر زبان انگلیسی انتخاب شد ؛ از فایل template.css استفاده کند .
دوم : دستور راست چین یا چپ چین بودن قالب
دستور راست چین یا چپ چین بودن قالب در CSS ، کد direction است که به این صورت از آن استفاده می کنیم :
راست چین کردن قالب در جوملا
ممکن است با اضافه کردن این دستور ، صفحه شما از عرض scroll بخورد ؛ در این صورت این دستور را از body حذف می کنیم .
سوم : ویرایش برخی عناصر HTML برای راست چین کردن قالب در جوملا
عنصر h3 (در HTML) عنوان تمام ماژول ها در قالب های جوملا است . اگر می خواهیم عنوان تمام ماژول ها RTL شود ، این دستور را CSS اضافه می کنیم :
راست چین کردن قالب در جوملا
اگر در h3 عبارت text-align:left; وجود داشت ، کافیست left را به right تبدیل کنیم : text-align:right; و دیگر چیزی به h3 اضافه نمی کنیم .
در فایل template_rtl.css به عناصر زیر ، دو دستور direction:rtl; و text-align:right; را اضافه می کنیم :
راست چین کردن قالب در جوملا
مانند h3 ، اگر این دو دستور در عناصر مذکور وجود داشتند و مقدارشان متفاوت بود ، فقط مقدار را به right تبدیل می کنیم .
چهارم : margin و padding
در template_rtl.css ، تمامی margin-left و margin-right و padding-left و padding-right را برعکس می کنیم ؛ یعنی margin-left به margin-right و به همین ترتیب آن ها را تغییر می دهیم .
در padding و margin با مقادیری رو به رو می شوید :
راست چین کردن قالب در جوملا
که این مقادیر مربوط به این مکان ها هستند :
راست چین کردن قالب در جوملا
از آنجا که left و right ها را معکوس کردیم ، مقادیر مربوطه نیز باید جابجا شوند .
ممکن است در فایل های CSS با این دستور مواجه شوید :
راست چین کردن قالب در جوملا
یعنی margin و padding هایی که دو مقدار دارند و چون در آن ها مقدار left و right برابرند نیازی به تغییری آن ها نیست .
در این مقاله اعداد مذکور به عنوان مثال ذکر شدند و مقادیر در قالب های مختلف ، متفاوت است .
پنجم : بررسی و ویرایش float ها جهت راست چین کردن قالب در جوملا
در CSS ها باید تمام دستورات float را پیدا کرد :
راست چین کردن قالب در جوملا
و مقدار right به آن داد :
راست چین کردن قالب در جوملا
سپس :
راست چین کردن قالب در جوملا
را می یابیم و تبدیل به :
راست چین کردن قالب در جوملا
می کنیم .
پس از این اقدامات ، ممکن است عکس های شما نیاز به ویرایش داشته باشند که می توانید با photoshop آن ها را rotate کنید .
