راست چین کردن قالب در جوملا

امروزه به دلیل 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 کنید .