پارس جوم :: انجمن های تخصصی جوملا

نسخه‌ی کامل: نحوه فارسی کردن قالب ها انگلیسی
شما در حال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب بندی مناسب.
قدم اول، فایل‌هایی که باید ویرایش کنیم

فایل index.php قالب

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

<?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; ?>

به انتهای تگ 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 است. که به صورت زیر مورد استفاده قرار می‌گیرد.

body{
direction : rtl;
}

راهنما : منظور ما از element در این آموزش عنصر html که در این مثال body - منظور ما از property در این مقاله یک استایل css که در این مثال direction - منظور ما از value مقدار (value) برای استایل‌ها که در این مثال rtl می‌باشد.
اما اگر به منظور راست کردن یک قالب چپ چین (LTR) این دستور direction را به یک قالب LTR اضافه کنیم به احتمال زیاد صفحه scroll می‌خورد (در عرض، scroll در طول طبیعی است) و این اصلا اتفاق خوبی نیست راه حل اینست که در صورت scroll شدن صفحه (در عرض) باید این دستور را از body حذف کرد به علاوه چند دستور css دیگر که در قدم‌های بعدی به آنها خواهیم پرداخت به عناصر صفحه اضافه کنیم. در صورتی که توانایی که با ابزار firebug را دارید این توانایی در مراحل بعدی کمک زیادی به شما خواهد کرد.
قدم سوم، عنوان ماژول‌ها و text-align‌ها

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

h3 {
text-align:right;
}

را اضافه کنیم .
یک نکته در ویرایش 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 آنها را تغییر می‌دهیم.

input, button, select, td, th, a, label , p , span , ul , div {
direction:rtl;
text-align:right;
}

قدم پنجم، بررسی و تغییر 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ها با مقادیری همچون

padding : 12px 8px 13px 9px;
margin : 12px 8px 13px 9px;

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

margin : TOP RIGHT BOTTOM LEFT;
padding : TOP RIGHT BOTTOM LEFT;

یعنی هر عددی که به جای RIGHT قرار گیرد بیانگر مقدار padding-right یا margin-right و هر عددی که ... به همین صورت برای TOP , BOTTOM و LEFT .
بنابراین مقادیری که به جای RIGHT و LEFT نوشته شده‌اند باید با یکدیگر جابجا شوند.
نکته : ممکن است در فایل‌های css با دستوراتی همچون

margin : 10px 15px;
padding : 10px 15px;
رو به رو شویم یعنی margin و padding‌هایی که 2 تا مقدار دارند چون در این دستورات مقدار چپ و راست با هم برابرند نیازی به تغییر آنها نیست.
دقت کنید (در این مرحله و مراحل قبل) بجای اعداد ( مثلا 10pxو 15px ) هر عددی می‌تواند باشد.
قدم ششم، بررسی و ویرایش float‌ها

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

float:left;

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

float:right;

کنیم .سپس
در این مرحله بایددر فایل‌های css بدنبال

left: هرعددی;

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

right: هرعددی;

کنید.
درود
این آموزش نه تنها درست نیست بلکه اشتباه هم هست.لطفا از انتشار چنین آموزش های قدیمی و اشتباه خودداری کنید.البته قبلا چنین اموزش هایی در انجمن منتشر شده که بسیار بهتر هم هست.
در قالب هرجا نیاز است باید float ها و تراز متن ها و ... تغییر داد
درآخر عرض کنم در قالب های جدید این روش ها کارساز نیست.باید بهینه سازی بوتستراپ و کار با فرم ورک ها و فایل های less رو فرا بگیرید
باتشکر
سلام

اقا رضا

گفتین این اموزش قدیمی شده؟؟؟؟میشه لینکی چیزی بدین از اموزش جدید بی بهره نشیم....
بهترین کار اینه شما سی اس اس رو فرابگیرید و همچنین کار با فایل های less .اگر قالب شما با فرم ورک ایجاد شده باشه شما باید در سایت سازنده مستندات کافی درمورد اون مشاهده کنید و روش های ویرایش و استفاده از سی اس اس های دلخواه را در اونجا ببینید.

بهترین سایت برای آموزش سایت W3Schools Online Web Tutorials است که میتونید از اون استفاده کنید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
سلام

کار با فایل های less تو این لینکی دادین هست؟؟؟

و اینکه ببخشید یه سوالی دارن.....این لنکی دادین ادم تنهایی بدون کمک گرفتن از کسی یا کلاسهای اموزشی خصوصی بیرون...میشه تنهایی یاد گرفت؟؟؟ تنهایی گفتم که خود من کمی میدونم از html سی اس اس هم میدونم که ظاهر و زیبایی سایت رو بر عهده داره و طرز چینش قسمتهای سایت؟؟درسته؟؟؟
درود
توضیحاتی داده ولی نیاز نیست فول بشید.برخی تغییرات رو در این فایل ها ممکنه نیاز باشه اعمال کنید.
توجه داشته باشید سایت سازنده فرم ورک نحوه ویرایش و سفارشی سازی قالب هارو حتما توضیح داده است و براحتی میتونید استفاده کنید.
سلام من برداشت شخصیم و از less میگم

من اینو تجربه کردم و ممکنه برای اون وب سایت خاص این طور بوده

less برای هر روزولیشن یا اندازه تصویر و یا هر دیوایس یک سری فایل CSS تولید میکنه
معمولا قالب هایی که از این روش استفاده میکنند به مراتب سریع تر هستند.
و وقتی برای فارسی کردن یا حتی اضافه کردن فونت از css استفاده میکنید بعد از پاک کردن کش فایل ها دوباره تولید و اعمال تغییرات بی فایده هستند.

و وقتی که در less کار میکنید در هر بار تولید css به همراه تغییرات شما خواهد بود.

اصلا هم سخت نیست 90% میشه گفت با css برنامه نویسیش مشترکه
بله همینطوره.
اکثر فرم ورک ها یک فایل خالی بنام کاستوم سی اس اس یا کاستوم less دارند که البته بیشتر کاستوم سی اس اس دارند.
اگر در پوشه سی اس اس هم نباشه میتونید این فایل رو ایجاد کنید.
هر دستوری در این فایل وارد کنید مقدم بر سی اس اس پیش فرض خواهد شد.
من شخصا از فرم ورک سایت جوملا مانستر خوشم میاد چون علاوه براین میتونید فونت دلخواه رو آپلود و استفاده کنید مانند فونت یکان یا هر فونت فارسی دیکری
لینک مرجع