آموزش : راست چین کردن قالبهای جوملا: تفاوت بین نسخه‌ها   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
(←‏قدم ششم , بررسی و ویرایش float ها)
 
(۱ نسخهٔ میانی ویرایش شده توسط ۱ کاربر نشان داده نشده)
سطر ۱: سطر ۱:
 
=نحوه راست چین کردن قالب های جوملا=
 
=نحوه راست چین کردن قالب های جوملا=
−
امروزه با گسترش استفاده از سیستم مدیریت محتوای [[جوملا]] تعداد طراحان و مدیرانی که سیستم مدیریت محتوای جوملا را به عنوان وب سایت خود انتخاب میکنند به صورت روز افزون در حال رشد است. همانطور که مستحضر هستید جوملا یک سیستم Open Source است یعنی ما قادر خواهیم که منابع رایگان و تجاری این سیستم مدیریت محتوا در سطح وسیعی استفاده کنیم . یکی از کاربردی ترین , مهم ترین افزونه های جوملا که در واقع مشخص کننده شکل ظاهری سایت است قالب (template) است.
+
 
−
<br/>
+
امروزه با گسترش استفاده از سیستم مدیریت محتوای [http://www.joomlafarsi.com جوملا] تعداد طراحان و مدیرانی که سیستم مدیریت محتوای جوملا را به عنوان وب سایت خود انتخاب می‌کنند به صورت روز افزون در حال رشد است. همانطور که مستحضر هستید [[جوملا]] یک سیستم Open Source است یعنی ما قادر خواهیم که منابع رایگان و تجاری این سیستم مدیریت محتوا در سطح وسیعی استفاده کنیم . یکی از کاربردی ترین، مهم‌ترین افزونه‌های [[جوملا]] که در واقع مشخص کننده شکل ظاهری سایت است قالب (template) است.
−
سایتهای زیادی در سطح اینترنت قالبهای جوملا در اختیار کاربران قرار میدهند از آنجا که دامنه گسترده تری از کاربران جوملا انگلیسی زبان هستند این سرویس دهندگان بیشتر تمرکز خود را برروی پشتیبانی از زبان انگلیسی گذاشتند. در این مقاله قصد داریم راهکارهای تبدیل این قالب های انگلیسی به زبان فارسی یا هر زبان راست به چپ دیگر را مورد بررسی قرار دهیم .
+
 
−
<br/>
+
سایت‌های زیادی در سطح اینترنت قالب‌های جوملا را در اختیار کاربران قرار می‌دهند از آنجا که دامنه گسترده‌تری از کاربران [[جوملا]] انگلیسی زبان هستند این سرویس دهندگان بیشتر تمرکز خود را بر روی پشتیبانی از زبان انگلیسی گذاشتند.
 +
 
 +
در این مقاله قصد داریم راهکارهای تبدیل این قالب‌های انگلیسی به زبان فارسی یا هر زبان راست به چپ دیگر را مورد بررسی قرار دهیم .
 +
 
 
=LTR چیست ؟=
 
=LTR چیست ؟=
−
LTR مخفف عبارت Left To Right است. برخی از زبانها مانند زبان انگلیسی زبان فرانسه از چپ به راست خوانده میشوند. ویژگی صفحات وب که به این زبانهای LTR ایجاد شده اند اینست که همه اجزا (مانند منوها و عناوین و برچسب ها و نوشته) برعکس زبان ها RTL است . در واقع قالب LTR همان قالبی است که دانلود کردیم که در زبانهای راست به چپ  قابل استفاده نیست .
+
 
−
<br/>
+
LTR مخفف عبارت Left To Right است. برخی از زبان‌ها مانند زبان انگلیسی، فرانسه از چپ به راست خوانده می‌شوند. ویژگی صفحات [[وب]] که با این زبان‌های LTR ایجاد شده‌اند اینست که همه اجزا (مانند منوها و عناوین و برچسب‌ها و نوشته‌ها) برعکس زبان‌های RTL است . در واقع قالب LTR همان قالبی است که دانلود کردیم که در زبان‌های راست به چپ  قابل استفاده نیست .
 +
 
 
=RTL چیست ؟ =
 
=RTL چیست ؟ =
−
RTL مخفف عبارت Right To Left است. برخی از زبانها مانند زبان پارسی و عربی و ... از راست به چپ خوانده میشوند مانند همین صفحه که ابتدای تمام اجزا (منوها , نوشته ها و ...) از سمت راست و انتهای آنها در سمت چپ است . قالب RTL همان قالبی است که برای زبانها راست به چپ سودمند است .
+
 
−
<br/>
+
RTL مخفف عبارت Right To Left است. برخی از زبان‌ها مانند زبان فارسی، عربی و ... از راست به چپ خوانده می‌شوند مانند همین صفحه که ابتدای تمام اجزا (منوها، نوشته‌ها و ...) از سمت راست و انتهای آنها در سمت چپ است . قالب RTL همان قالبی است که برای زبان‌های راست به چپ سودمند است.
−
هدف از ارائه این مقاله تبدیل Template های LTR به RTL است و توانایی تبدیل آنها به یکدیگر است.
+
 
−
<br/>
+
هدف از ارائه این مقاله تبدیل Templateهای LTR به RTL است و توانایی تبدیل آنها به یکدیگر است.
−
قبل از هر اقدامی باید از یک نسخه فارسی جوملا استفاده کنیم یا یک package فارسی ساز برروی نسخه انگلیسی نصب کنیم. و از مدیریت زبانها در جوملا زبان پیش فرض سایت را فارسی set کنیم.
+
 
−
<br/>
+
قبل از هر اقدامی باید از یک نسخه فارسی [[جوملا]] استفاده کنیم یا یک package فارسی ساز بر روی نسخه انگلیسی نصب کنیم و از مدیریت زبان‌ها در [[جوملا]] زبان پیش فرض سایت را فارسی تنظیم کنیم.
−
=قدم اول , فایلهایی که باید ویرایش کنیم =
+
 
−
<br/>
+
=قدم اول، فایل‌هایی که باید ویرایش کنیم=
−
==فایل index.php قالب ==
+
 
−
فایل index.php استخوان بندی و ساختار قالبهای جوملا را  مشخص میکند. برای ویرایش آن باید [[HTML]] و کمی هم [[PHP]] بدانیم . کاری که باید برروی فایل index.php یک قالب LTR انجام دهیم اینست که کد
+
==فایل index.php قالب==
 +
 
 +
فایل index.php استخوان بندی و ساختار قالب‌های [[جوملا]] را  مشخص می‌کند. برای ویرایش آن باید [[HTML]] و کمی هم [[PHP]] بدانیم. کاری که باید بر روی فایل index.php یک قالب LTR انجام دهیم اینست که کد
 +
 
 +
 
 
<source lang="php" >
 
<source lang="php" >
 
<?php if($this->direction == 'rtl') : ?>
 
<?php if($this->direction == 'rtl') : ?>
سطر ۲۵: سطر ۳۳:
 
<?php endif; ?>
 
<?php endif; ?>
 
</source>
 
</source>
−
به انتهای تگ headیعنی قبل از بسته شد آن اضافه کنیم . این تکه کد مشخص میکند اگر در مدیریت جوملا زبان پیش فرض سایت فارسی انتخاب شد سیستم جوملا فایل template_rtl.cssرا مورد استفاده قرار دهد و اگر انگلیسی انتخاب شد فایل template.css را مورد استفاده قرار دهد.
+
 
−
<br/>
+
 
−
==فایلهای css قالب==
+
به انتهای تگ head یعنی قبل از بسته شدن آن اضافه کنیم. این تکه کد مشخص می‌کند اگر در مدیریت [[جوملا]] زبان پیش فرض سایت فارسی انتخاب شد سیستم جوملا فایل template_rtl.css را مورد استفاده قرار دهد و اگر انگلیسی انتخاب شد فایل template.css را مورد استفاده قرار دهد.
−
قالبهای جوملا عمدتا از یک فایل css به نام template.css استفاده میکنند برخی از قالبها از فایلهای css بیشتری استفاده میکنند که مسلما برای تبدیل کردن آن قالب ها به یک قالب راست چین باید تمام این css هارا ویرایش کنیم. وقتی قرار باید یک قالب LTR را به RTL تبدیل کنیم باید در ابتدا یک کپی از فایل template.css بگیریم و نام آنرا template_rtl.css بگذاریم . در این مقاله هر کجا که قرار شد دستوری به css اضافه کنیم یا css را ویرایش کنیم منظورمان ویرایش فایل template_rtl.css است .
+
 
−
<br/>
+
==فایل‌های css قالب==
−
=قدم دوم , دستور مشخص کننده راست چین یا چپ چین بودن=
+
 
−
دستور مشخص کننده راست چین یا چپ چین بودن در CSS دستور direction است. که به صورت زیر مورد استفاده قرار میگیرد.<br/>
+
قالب‌های [[جوملا]] عمدتا از یک فایل css به نام template.css استفاده می‌کنند برخی از قالب‌ها از فایل‌های css بیشتری استفاده می‌کنند که مسلما برای تبدیل کردن آن قالب‌ها به یک قالب راست چین باید تمام این css‌ها را ویرایش کنیم. وقتی بنا داریم یک قالب LTR را به RTL تبدیل کنیم باید در ابتدا یک کپی از فایل template.css بگیریم و نام آنرا template_rtl.css بگذاریم. در این آموزش هر کجا که قرار شد دستوری به css اضافه کنیم یا css را ویرایش کنیم منظورمان ویرایش فایل template_rtl.css است .
 +
 
 +
=قدم دوم، دستور مشخص کننده راست چین یا چپ چین بودن=
 +
 
 +
دستور مشخص کننده راست چین یا چپ چین بودن در CSS دستور direction است. که به صورت زیر مورد استفاده قرار می‌گیرد.
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
body{
 
body{
سطر ۳۷: سطر ۵۱:
 
     }
 
     }
 
</source>
 
</source>
−
'''راهنما''' : منظور ما از element در این مقاله عنصر [[html]] که در این مثال body - منظور ما از property در این مقاله یک استایل [[css]] که در این مثال  direction - منظور ما از value در این مقاله مقدار (value) برای استایلها که در این مثال rtl میباشد.
+
 
−
<br/>
+
 
−
اما اگر به منظور راست کردن کردن یک قالب چپ چین(LTR) این دستور direction را به یک قالب LTR اضافه کنیم به احتمال زیاد صفحه scroll میخورد (در عرض , scroll در طول طبیعی است) و این اصلا اتفاق خوبی نیست راه حل اینست که در صورت scroll شدن صفحه (در عرض) باید این دستور را از body حذف کرد به علاوه چند دستور css دیگر که در قدم های بعدی به آنها خواهیم پرداخت به عناصر صفحه اضافه کنیم. در صورتی که توانایی که با ابزار fire bug را دارید این توانایی در مراحل بعدی کمک زیادی به شما خواهد کرد.
+
'''راهنما''' : منظور ما از element در این آموزش عنصر [[html]] که در این مثال body - منظور ما از property در این مقاله یک استایل [[css]] که در این مثال  direction - منظور ما از value مقدار (value) برای استایل‌ها که در این مثال rtl می‌باشد.
−
=قدم سوم , عنوان ماژولها و text-align ها =
+
 
−
عنصر h3(در HTML) عنوان تمام ماژول ها در قالبهای جوملا است. این به معنی است که اگر ما تصمیم داریم تمام عنوانها را  راست چین کنیم باید در css دستور  
+
اما اگر به منظور راست کردن یک قالب چپ چین (LTR) این دستور direction را به یک قالب LTR اضافه کنیم به احتمال زیاد صفحه scroll می‌خورد (در عرض، scroll در طول طبیعی است) و این اصلا اتفاق خوبی نیست راه حل اینست که در صورت scroll شدن صفحه (در عرض) باید این دستور را از body حذف کرد به علاوه چند دستور css دیگر که در قدم‌های بعدی به آنها خواهیم پرداخت به عناصر صفحه اضافه کنیم. در صورتی که توانایی که با ابزار firebug را دارید این توانایی در مراحل بعدی کمک زیادی به شما خواهد کرد.
 +
 
 +
=قدم سوم، عنوان ماژول‌ها و text-align‌ها=
 +
 
 +
عنصر h3 (در HTML) عنوان تمام ماژول‌ها در قالب‌های [[جوملا]] است. این به معنی است که اگر ما تصمیم داریم تمام عنوان‌ها را  راست چین کنیم باید در css دستور  
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
h3 {
 
h3 {
سطر ۴۷: سطر ۶۷:
 
  }
 
  }
 
</source>
 
</source>
 +
 +
 
را اضافه کنیم .
 
را اضافه کنیم .
−
<br/>
+
 
−
'''یک نکته در ویرایش css ها''' , ممکن است در فایل css خود h3 از قبل دارای property هایی باشد اگر مابین آن propertyها  
+
'''یک نکته در ویرایش css‌ها'''، ممکن است در فایل css خود h3 از قبل دارای property‌هایی باشد اگر مابین آن propertyها  
 +
 
 
<div dir=ltr>
 
<div dir=ltr>
 
text-align:left;
 
text-align:left;
 
</div>
 
</div>
−
یا هر چیزی دیگری بود فقط کافیست (value)مقدار left را به right تبدیل کنیم . اما اگر مابین propertyها;text-align:right اصلا وجود نداشت ما فقط عبارت ";text-align:right" را به انتهای property های h3 اضافه میکنیم و{} h3 را دیگر اضافه نخواهیم کرد.
+
 
−
=قدم چهارم , عناصری که بیشتر مورد استفاده قرار میگیرند =
+
یا هر چیزی دیگری بود فقط کافیست (value) مقدار left را به right تبدیل کنیم. اما اگر مابین propertyها;text-align:right اصلا وجود نداشت ما فقط عبارت ";text-align:right" را به انتهای property‌های h3 اضافه می‌کنیم و {} h3 را دیگر اضافه نخواهیم کرد.
−
برای هریک از این از element ها باید جدا گانه(مثلا input به تنهایی و label به تنهایی و ...) در فایل template_rtl.css جستجو (کلید f3) کنیم اگر هر کدام از عناصر دارای property بود این دو خصوصیت را به خصوصیتهای قبلی آنها اضافه میکنیم یا اگر این 2 خصوصیت را داشت ولی مقدارش فرق میکرد value آنها را تغییر میدهیم .
+
 
 +
=قدم چهارم، عناصری که بیشتر مورد استفاده قرار می‌گیرند=
 +
 
 +
برای هریک از این از element‌ها باید جدا گانه (مثلا input به تنهایی و label به تنهایی و ...) در فایل template_rtl.css جستجو (کلید f3) کنیم اگر هر کدام از عناصر دارای property بود این دو خصوصیت را به خصوصیت‌های قبلی آنها اضافه می‌کنیم یا اگر این 2 خصوصیت را داشت ولی مقدارش فرق می‌کرد value آنها را تغییر می‌دهیم.
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
input, button, select, td, th, a, label , p , span , ul , div {
 
input, button, select, td, th, a, label , p , span , ul , div {
سطر ۶۲: سطر ۹۰:
 
  }
 
  }
 
</source>
 
</source>
−
=قدم پنجم , بررسی و تغییر padding و margin =
+
 
−
margin و  padding به چند شکل میتوانند مورد استفاده قرار گیرند ما فقط موارد زیر را مورد بررسی قرار خواهیم داد یعنی باید در فایل template_rtl.css عبارات  " margin-left " و " padding-left " و  " margin-right " و " padding-right " را جستجو کنیم و تمام موارد پیدا شده را برعکس کنیم به ترتیب تبدیل به " margin-right " و " padding-right "  و " margin-left " و " padding-left " کنیم.
+
 
−
<br/>
+
=قدم پنجم، بررسی و تغییر padding و margin =
−
دقت کنید اگر جستجو شما نتیجه ای در بر نداشت عبارات " margin " و " padding " هریک را به طور جدا گانه جستجو کنید .ممکن است برای این propertyها با مقادیری همچون  
+
 
 +
margin و  padding به چند شکل می‌توانند مورد استفاده قرار گیرند ما فقط موارد زیر را مورد بررسی قرار خواهیم داد یعنی باید در فایل template_rtl.css عبارات  " margin-left " و " padding-left " و  " margin-right " و " padding-right " را جستجو کنیم و تمام موارد پیدا شده را برعکس کنیم به ترتیب تبدیل به " margin-right " و " padding-right "  و " margin-left " و " padding-left " کنیم.
 +
 
 +
دقت کنید اگر جستجو شما نتیجه‌ای در بر نداشت عبارات " margin " و " padding " هر یک را به طور جدا گانه جستجو کنید. ممکن است برای این propertyها با مقادیری همچون  
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
padding : 12px 8px 13px 9px;
 
padding : 12px 8px 13px 9px;
 
margin : 12px 8px 13px 9px;
 
margin : 12px 8px 13px 9px;
 
</source>
 
</source>
 +
 +
 
رو به رو شوید که این مقادیر به صورت  
 
رو به رو شوید که این مقادیر به صورت  
 +
 +
 
<source lang="css" >
 
<source lang="css" >
 
margin : TOP RIGHT BOTTOM LEFT;
 
margin : TOP RIGHT BOTTOM LEFT;
 
padding : TOP RIGHT BOTTOM LEFT;
 
padding : TOP RIGHT BOTTOM LEFT;
 
</source>
 
</source>
 +
 +
 
یعنی هر عددی که به جای RIGHT قرار گیرد بیانگر مقدار  padding-right یا margin-right و هر عددی که ... به همین صورت برای TOP , BOTTOM و LEFT .
 
یعنی هر عددی که به جای RIGHT قرار گیرد بیانگر مقدار  padding-right یا margin-right و هر عددی که ... به همین صورت برای TOP , BOTTOM و LEFT .
−
<br/>
+
 
−
بنابراین مقادیری که به جای RIGHT و LEFT نوشته شده اند باید بایکدیگر جابجا شوند.
+
بنابراین مقادیری که به جای RIGHT و LEFT نوشته شده‌اند باید با یکدیگر جابجا شوند.
−
<br/>
+
 
−
'''نکته''' : ممکن است در فایلهای css با دستوراتی همچون  
+
'''نکته''' : ممکن است در فایل‌های css با دستوراتی همچون  
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
margin : 10px 15px;
 
margin : 10px 15px;
 
padding : 10px 15px;
 
padding : 10px 15px;
 
</source>
 
</source>
−
رو به رو شویم یعنی margin و padding هایی که 2تا مقدار دارند چون در این دستورات مقدار چپ و راست باهم برابرند نیازی به تغییر آنها '''نیست''' .
+
 
−
<br/>
+
رو به رو شویم یعنی margin و padding‌هایی که 2 تا مقدار دارند چون در این دستورات مقدار چپ و راست با هم برابرند نیازی به تغییر آنها '''نیست'''.
−
دقت کنید(در این مرحله و مراحل قبل) بجای اعداد ( مثلا 10pxو  15px ) هر عددی میتوند باشد .
+
 
−
<br/>
+
دقت کنید (در این مرحله و مراحل قبل) بجای اعداد ( مثلا 10pxو  15px ) هر عددی می‌تواند باشد.
−
=قدم ششم , بررسی و ویرایش float ها =
+
 
−
در css ها باید خصوصیت های
+
=قدم ششم، بررسی و ویرایش float‌ها=
 +
 
 +
در css‌ها باید خصوصیت‌های
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
float:left;
 
float:left;
 
</source>
 
</source>
 +
 +
 
را جستجو کنیم و هر موردی که پیدا کردیم تبدیل به
 
را جستجو کنیم و هر موردی که پیدا کردیم تبدیل به
 +
 +
 
<source lang="css" >
 
<source lang="css" >
 
float:right;
 
float:right;
 
</source>
 
</source>
−
کنیم .
+
 
−
در این مرحله بایددر فایلهای  css بدنبال  
+
 
 +
کنیم .سپس
 +
 
 +
در این مرحله بایددر فایل‌های css بدنبال
 +
 
 +
 
 
<source lang="css" >
 
<source lang="css" >
 
left: هرعددی;
 
left: هرعددی;
 
</source>
 
</source>
 +
 +
 
و آنرا تبدیل به  
 
و آنرا تبدیل به  
 +
 +
 
<source lang="css" >
 
<source lang="css" >
 
right: هرعددی;
 
right: هرعددی;
 
</source>
 
</source>
−
کنید.<br/>
+
 
−
بعد از اتمام این مراحل باید ممکن برخی از عکسها نیاز به ویرایش داشته باشند. که میتوانید با photoshop با استفاده از امکانات rotate این کارا انجام دهید.
+
 
−
<br/>
+
کنید.
 +
 
 +
بعد از اتمام این مراحل باید ممکن برخی از عکس‌ها نیاز به ویرایش داشته باشند. که می‌توانید با photoshop با استفاده از امکانات rotate این کار را انجام دهید.
 +
 
 
----
 
----
 +
 
جمع آوری شده توسط: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]
 
جمع آوری شده توسط: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]
 +
 +
{{آموزش}}
  
 
{{معرفی پشتیبانی}}
 
{{معرفی پشتیبانی}}

نسخهٔ کنونی تا ‏۲۵ ژوئیهٔ ۲۰۱۳، ساعت ۱۴:۰۹

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

امروزه با گسترش استفاده از سیستم مدیریت محتوای جوملا تعداد طراحان و مدیرانی که سیستم مدیریت محتوای جوملا را به عنوان وب سایت خود انتخاب می‌کنند به صورت روز افزون در حال رشد است. همانطور که مستحضر هستید جوملا یک سیستم Open Source است یعنی ما قادر خواهیم که منابع رایگان و تجاری این سیستم مدیریت محتوا در سطح وسیعی استفاده کنیم . یکی از کاربردی ترین، مهم‌ترین افزونه‌های جوملا که در واقع مشخص کننده شکل ظاهری سایت است قالب (template) است.

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

در این مقاله قصد داریم راهکارهای تبدیل این قالب‌های انگلیسی به زبان فارسی یا هر زبان راست به چپ دیگر را مورد بررسی قرار دهیم .

LTR چیست ؟

LTR مخفف عبارت Left To Right است. برخی از زبان‌ها مانند زبان انگلیسی، فرانسه از چپ به راست خوانده می‌شوند. ویژگی صفحات وب که با این زبان‌های LTR ایجاد شده‌اند اینست که همه اجزا (مانند منوها و عناوین و برچسب‌ها و نوشته‌ها) برعکس زبان‌های RTL است . در واقع قالب LTR همان قالبی است که دانلود کردیم که در زبان‌های راست به چپ قابل استفاده نیست .

RTL چیست ؟

RTL مخفف عبارت Right To Left است. برخی از زبان‌ها مانند زبان فارسی، عربی و ... از راست به چپ خوانده می‌شوند مانند همین صفحه که ابتدای تمام اجزا (منوها، نوشته‌ها و ...) از سمت راست و انتهای آنها در سمت چپ است . قالب RTL همان قالبی است که برای زبان‌های راست به چپ سودمند است.

هدف از ارائه این مقاله تبدیل Templateهای LTR به RTL است و توانایی تبدیل آنها به یکدیگر است.

قبل از هر اقدامی باید از یک نسخه فارسی جوملا استفاده کنیم یا یک package فارسی ساز بر روی نسخه انگلیسی نصب کنیم و از مدیریت زبان‌ها در جوملا زبان پیش فرض سایت را فارسی تنظیم کنیم.

قدم اول، فایل‌هایی که باید ویرایش کنیم

فایل index.php قالب

فایل index.php استخوان بندی و ساختار قالب‌های جوملا را مشخص می‌کند. برای ویرایش آن باید HTML و کمی هم PHP بدانیم. کاری که باید بر روی فایل index.php یک قالب LTR انجام دهیم اینست که کد


<source lang="php" > <?php if($this->direction == 'rtl') : ?> <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_rtl.css" rel="stylesheet" type="text/css" /> <?php else: ?> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> <?php endif; ?> </source>


به انتهای تگ head یعنی قبل از بسته شدن آن اضافه کنیم. این تکه کد مشخص می‌کند اگر در مدیریت جوملا زبان پیش فرض سایت فارسی انتخاب شد سیستم جوملا فایل template_rtl.css را مورد استفاده قرار دهد و اگر انگلیسی انتخاب شد فایل template.css را مورد استفاده قرار دهد.

فایل‌های css قالب

قالب‌های جوملا عمدتا از یک فایل css به نام template.css استفاده می‌کنند برخی از قالب‌ها از فایل‌های css بیشتری استفاده می‌کنند که مسلما برای تبدیل کردن آن قالب‌ها به یک قالب راست چین باید تمام این css‌ها را ویرایش کنیم. وقتی بنا داریم یک قالب LTR را به RTL تبدیل کنیم باید در ابتدا یک کپی از فایل template.css بگیریم و نام آنرا template_rtl.css بگذاریم. در این آموزش هر کجا که قرار شد دستوری به css اضافه کنیم یا css را ویرایش کنیم منظورمان ویرایش فایل template_rtl.css است .

قدم دوم، دستور مشخص کننده راست چین یا چپ چین بودن

دستور مشخص کننده راست چین یا چپ چین بودن در CSS دستور direction است. که به صورت زیر مورد استفاده قرار می‌گیرد.


<source lang="css" > body{ direction : rtl; 

    }

</source>


راهنما : منظور ما از element در این آموزش عنصر html که در این مثال body - منظور ما از property در این مقاله یک استایل css که در این مثال direction - منظور ما از value مقدار (value) برای استایل‌ها که در این مثال rtl می‌باشد.

اما اگر به منظور راست کردن یک قالب چپ چین (LTR) این دستور direction را به یک قالب LTR اضافه کنیم به احتمال زیاد صفحه scroll می‌خورد (در عرض، scroll در طول طبیعی است) و این اصلا اتفاق خوبی نیست راه حل اینست که در صورت scroll شدن صفحه (در عرض) باید این دستور را از body حذف کرد به علاوه چند دستور css دیگر که در قدم‌های بعدی به آنها خواهیم پرداخت به عناصر صفحه اضافه کنیم. در صورتی که توانایی که با ابزار firebug را دارید این توانایی در مراحل بعدی کمک زیادی به شما خواهد کرد.

قدم سوم، عنوان ماژول‌ها و text-align‌ها

عنصر h3 (در HTML) عنوان تمام ماژول‌ها در قالب‌های جوملا است. این به معنی است که اگر ما تصمیم داریم تمام عنوان‌ها را راست چین کنیم باید در css دستور


<source lang="css" > h3 { text-align:right; 

}

</source>


را اضافه کنیم .

یک نکته در ویرایش css‌ها، ممکن است در فایل css خود h3 از قبل دارای property‌هایی باشد اگر مابین آن propertyها

text-align:left;

یا هر چیزی دیگری بود فقط کافیست (value) مقدار left را به right تبدیل کنیم. اما اگر مابین propertyها;text-align:right اصلا وجود نداشت ما فقط عبارت ";text-align:right" را به انتهای property‌های h3 اضافه می‌کنیم و {} h3 را دیگر اضافه نخواهیم کرد.

قدم چهارم، عناصری که بیشتر مورد استفاده قرار می‌گیرند

برای هریک از این از element‌ها باید جدا گانه (مثلا input به تنهایی و label به تنهایی و ...) در فایل template_rtl.css جستجو (کلید f3) کنیم اگر هر کدام از عناصر دارای property بود این دو خصوصیت را به خصوصیت‌های قبلی آنها اضافه می‌کنیم یا اگر این 2 خصوصیت را داشت ولی مقدارش فرق می‌کرد value آنها را تغییر می‌دهیم.


<source lang="css" > input, button, select, td, th, a, label , p , span , ul , div { direction:rtl; text-align:right; 

}

</source>


قدم پنجم، بررسی و تغییر padding و margin

margin و padding به چند شکل می‌توانند مورد استفاده قرار گیرند ما فقط موارد زیر را مورد بررسی قرار خواهیم داد یعنی باید در فایل template_rtl.css عبارات " margin-left " و " padding-left " و " margin-right " و " padding-right " را جستجو کنیم و تمام موارد پیدا شده را برعکس کنیم به ترتیب تبدیل به " margin-right " و " padding-right " و " margin-left " و " padding-left " کنیم.

دقت کنید اگر جستجو شما نتیجه‌ای در بر نداشت عبارات " margin " و " padding " هر یک را به طور جدا گانه جستجو کنید. ممکن است برای این propertyها با مقادیری همچون


<source lang="css" > padding : 12px 8px 13px 9px; margin : 12px 8px 13px 9px; </source>


رو به رو شوید که این مقادیر به صورت


<source lang="css" > margin : TOP RIGHT BOTTOM LEFT; padding : TOP RIGHT BOTTOM LEFT; </source>


یعنی هر عددی که به جای RIGHT قرار گیرد بیانگر مقدار padding-right یا margin-right و هر عددی که ... به همین صورت برای TOP , BOTTOM و LEFT .

بنابراین مقادیری که به جای RIGHT و LEFT نوشته شده‌اند باید با یکدیگر جابجا شوند.

نکته : ممکن است در فایل‌های css با دستوراتی همچون


<source lang="css" > margin : 10px 15px; padding : 10px 15px; </source>

رو به رو شویم یعنی margin و padding‌هایی که 2 تا مقدار دارند چون در این دستورات مقدار چپ و راست با هم برابرند نیازی به تغییر آنها نیست.

دقت کنید (در این مرحله و مراحل قبل) بجای اعداد ( مثلا 10pxو 15px ) هر عددی می‌تواند باشد.

قدم ششم، بررسی و ویرایش float‌ها

در css‌ها باید خصوصیت‌های


<source lang="css" > float:left; </source>


را جستجو کنیم و هر موردی که پیدا کردیم تبدیل به


<source lang="css" > float:right; </source>


کنیم .سپس

در این مرحله بایددر فایل‌های css بدنبال


<source lang="css" > left: هرعددی; </source>


و آنرا تبدیل به


<source lang="css" > right: هرعددی; </source>


کنید.

بعد از اتمام این مراحل باید ممکن برخی از عکس‌ها نیاز به ویرایش داشته باشند. که می‌توانید با photoshop با استفاده از امکانات rotate این کار را انجام دهید.

جمع آوری شده توسط: شهاب مطاع پور

Indent support.png
هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.
8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.


برگرفته از «https://docs.joomlafarsi.com/index.php?title=آموزش_:_راست_چین_کردن_قالبهای_جوملا&oldid=3877»