فارسی سازی قالب با css - تالار گفتمان تخصصی آی تی و کامپیوتر [ITTOP.IR]

**مهرداد نایب** · 9th February 2010

فرض می کنیم یک قالبی از این آدرس دانلود کرده ایم و می خواهیم از آن برای سایتمان که با نیروی وردپرس کار می کند استفاده کنیم. در این پست با هم قدم به قدم تا فارسی کردن این قالب پیش می رویم.
در ابتدای امر، دو مورد در قالب های خارجی نمود زیادی دارد. اول هماهنگ نبودن آن با زبان فارسی و دوم، که ممکن است برای بعضی ها آزار دهنده باشد، وجود منوی سایت در سمت چپ. شما با حل این دو مشکل قدم بسیار بزرگی را بر خواهید داشت. اتفاقا این کار به راحتی نیز ممکن است. شما برای اینکه مطالب را از راست به چپ تنظیم کنید چند راه پیش رو دارید:
راه اول این است که در قسمت body استایل قالب خود(CSS) این خط (direction: rtl) را اضافه کنید:

کد:

body {
text-align:  center;
direction: rtl;
font-family:tahoma;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
{

با این کار می توانید مطمئن باشید تمام وبلاگ شما، از راست به چپ تنظیم خواهد شد. حتی ممکن است منوی سایت نیز به سمت راست نقل مکان کند! همان طور که احتملا متوجه شدید، با این کار، دست شما کاملا بسته است و در واقع شما اختیاری ندارید. در ضمن ممکن است نیاز داشته باشید قسمتی از وبلاگ به طور پیش فرض و از چپ به راست تنظیم شود. بنابراین توصیه می شود فقط در قسمت هایی که نیاز دارید تگ direction: rtl را اضافه کنید. مثلا قسمت اصلی وبلاگ که مطالب شما قرار میگیرد حتما باید از راست به چپ تنظیم شده باشد. بنابراین شما باید به این قسمت که بسته به قالب، ممکن است با عناوین و id های مختلفی نام گذاری شود، تگ راست به چپ را اضافه کنید.
نکته: وقتی به قسمت CSS می روید، قسمت های مختلفی را مشاهده می کنید که هر کدام شامل چند دستور هستند. به این صورت:

کد:

#content {
margin-top: 20px;
margin-bottom: 0px;
direction:rtl;
text-align:right;
margin-left: 180px;
margin-right: 180px;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
line-height:  15px;
color: #333333;
{

به قسمتی که پر رنگ شده است دقت کنید. منظور از id همین است. در این مثال، تمام دستوراتی که در داخل علامت } قرار گرفته اند، نحوه ی چیدمان مطالب بلاگ بنده را مخشص می کنند.
دقت کنید هر جایی که از direction: rtl استفاده کردید، باید از text-align:right نیز استفاده کنید تا مطالب را راست چین کند. با انجام این کار ها، لااقل محتوای سایت شما به درستی به نمایش در خواهد آمد.
کار دیگری که باید بکنید، این است که فونت ها را به Tahoma تغییر دهید. علت این امر هم که کاملا واضح است! برای اینکه منو ی سایت نیز به سمت راست بیاید، می توانید در قسمت مربوطه که معمولا با عناوینی مانند side# مشخص می شود، از تگ float: right استفاده نمایید. به احتمال زیاد جواب خواهید گرفت.
همچنین ممکن است بخواهید که در قسمت نظرات، وقت کسی مشغول نوشتن نظر است، مطالب از راست به چپ تنظیم شوند و مشکلی برای نویسنده به وجود نیاید. این کار نیز به راحتی صورت می پذرید:

کد:

input, textarea {
direction:  rtl;
text-align: right;
font-family:tahoma;
margin:  1px;
{

با افزودن این چند خط به CSS خود، نه تنها تمام فیلد های متنی، از راست به چپ و با فونت تاهوما تنظیم می شوند، بلکه این تغییرات بر روی دکمه هایی مانند ارسال نظر نیز اعمال می شود که مسلما جلوه ی قالب شما را عوض می کنند.
حال یک سوال پیش میاید و آن اینکه ما چگونه بفهمیم هر قسمت از قالب که قصد انجام تغییر در آن را داریم، با چه id مشخص شده است؟ این سوال دو جواب دارد. اول اینکه اگر کمی وارد باشید و با قالب ور بروید، خودتان می توانید id مربوطه را پیدا می کنید! اما علاوه بر اینکه این راه وقت گیر است، ممکن است عده ای، زیاد به این کار وارد نباشد. راه حل بهتر در استفاده از مرورگر فایرفاکس و استفاده از افزونه ی Web Developer نهفته است. شما می توانید با استفاده از این افزونه مدت ها ذوق زده باشید! البته من نحوه ی استفاده از قسمت های مختلف این افزونه را به خودتان واگذار می کنم اما یک توضیح برای پیدا کردن id ها بدهم. بعد از نصب این افزونه، از طریق گزینه ی information و انتخاب Display ID & Class Dtails می توانید به هدف خود برسید!
توجه کنید این پست به شدت مختصر نوشته شده است. ممکن است برای به دست آوردن یک قالب کاملا فارسی، مجبور به انجام کار های دیگری هم بشوید، اما در مجموع مهمترین کار ها همین ها بودند. فراموش نکنید موارد گفته شده، اصلا موضوع حادی نیستند. اصلا. مطمئنا اگر بودند، خود بنده چیزی ازشون سر در نمیاوردم! پس نگران نشوید. هیچ چیز پیچیده ای وجود ندارد. تنها کلید موفقیت، تکرار و پا فشاری است. در ضمن، اگر قصد فارسی کردن قالبی را دارید و با مشکل مواجه شدید، می توانید روی من حساب کنید.

منبع:دهکده آی تی � فارسی سازی قالب با CSS

ابزارهای موضوع	جستجو در موضوع
پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان	جستجو در موضوع: جستجوی پیشرفته
نحوه نمایش
حالت خطی تعویض به حالت ترکیبی تعوض به حالت رشته ای

کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)