قسمت چهارم آموزش :
تو عکس پایین همه قسمتهای لازم در کار با inspect element نشون داده شده یعنی شما بعد از رفتن روی این قسمتها این قسمتها هایلایت میشه ابنکه هر بخش مال کدوم دیو هست با رنگ قرمز نوشته شده .
خب اول قسمت breadcrumbs که نشون دهنده مراتبط صفحات هست رو راست چین می کنیم کار خاصی نمی خواد فقط چپ چینش می کنیم پس کد پایین رو به فایل rtl.css امون اضافه می کنیم
کد HTML:
#breadcrumbs { text-align: right; }
خب سایت ما دارای 3 تا ستون هست و می تونیم به دلخواه جاشون رو عوض کنیم یا همونجور بذاریم باشه برا اینکه تمرین ها بیشتر بشه کلا جاشون رو عوض می کنیم و کتگوری رو می بریم سمت چپ و اسلاید رو میاریم سمت راست .
Html این قست به این شکلیه
کد HTML:
<div id="main"> <div id="breadcrumbs"> <div id="content"> <div id="sidebar">
دیو با آی دی content شامل اسلایدر و پست های زیرینش میشه
Div با آی دی sidebar شامل دو ستون کتگوری و لاست نیوز اینا میشه
پس ما اول باید دیو content رو بچسبونیم به سمت راست و دیو sidebar رو به سمت چپ
بعد از انتخاب دیو با آیدی content به وسیله inspect element استایل اون که کد پایین هست لود میشه :
کد HTML:
#content { float: left; height: auto; margin: 0px; padding: 0px 0px 3em; width: 550px; }
تو این کد float:left; این قسمت رو به سمت راست چسبونده که باید با right عوض کنید
پس کد زیر رو به فایل rtl.css اضافه می کنیم :
کد HTML:
#content { float: right; }
به padding داده شده دقت کنید همونطور که قبلا گفته بودیم دستور padding یا margin وقتی بطور عمومی نوشته میشه به معنای زیر هست
کد HTML:
Padding: azBala azRast azPayin azChap;
این برای margin هم صادقه اینجا کد ما
padding: 0px 0px 3em;
نکته : em واحد اندازه گیری بر اساس اندازه فونت هست (هر em معادل اندازۀ فونت عنصر مادر اون المان هست. مثلا اگه دو div تو در تو داشته باشیم و font-size اون رو 2em بدیم، و همین خصوصیت رو در در div داخلی برابر 2.1em بزاریم، فونت ها در div داخلی 10% بزرگتر از div بیرونی نمایش داده میشن و مثل همون مقدار دهی درصدی هست. یعنی میشه به جای 2.1 مقدار 110% رو نوشت.)
زیر دیو content یه دیو دیگه هست با آیدی contentinner این دیو از این نظر اهمیت داره که بهش مارجین داده شده و این باعث میشه که از سمت راست 10 پیکسل فاصله بگیره وقتی که ما این ستون رو می بریم به سمت راست پس باید این مقدار 10 پیکسل رو بجای چپ از راست فاصله بخوره
کد HTML:
#contentinner { height: auto; margin: 0px 10px 0px 0px; padding: 0px; width: auto; }
پس کد زیر رو به rtl.css اضافه می کنیم
کد HTML:
#contentinner { margin: 0px 0px 0px 10px; }
حالا بریم سر وقت دو ستون کتگوری و آخرین اخبار
چون دیو sidebar فلوت right خورده بود پس با تغییر دیو content میره سمت راست یعنی نیازی نیست تغییری بدیم بهش
ولی لازمه که جای ستون های توشون رو عوض کنیم یعنی کتگوری بره سمت چپ
پس اول دیو لاست نیوز اینارو میاریم سمت راست کد استایل این قسمت به شکل زیر هست .
کد HTML:
#sidebar-left { float: left; margin: 0px 10px 0px 0px; padding: 0px; width: 312px; }
باید float رو عوض کنیم مقدارش رو و به right تغییر بدیم
ولی یه مشکلی که هست فاصله 10 پیکسل هست که از سمت راست گرفته و باعث میشه که این ستون بره تو ستون کتگوری اینا
پس باید فاصله رو بجای راست به چپ بدیم
پس کد زیر رو به فایل rtl.css اضافه می کنیم:
کد HTML:
#sidebar-left { float: right; margin: 0px 0px 0px 10px; }
خب همونطور که دیدن فارسی سازی موقعیت المانها تموم شد .
و فقط باید متن ها رو راست چین کنیم .
خب تمامی پست های ما تو دیو post-meta لیست میشن برای اینکه متن داخلش رو راست چین کنیم کافی کد زیر رو به فایل rtl.css امون اضافه کنیم .
تمام متن راست چین شد یدونه عکس هم با کلاس thumb داره توش که اگه بخواین می تونید اینم ببرین سمت راست .
پس کد پایین رو هم به rtl.css اضافه می کنیم :
کد HTML:
#post-entry .post-meta .thumb { float: right; padding: 0px 0px 0px 10px; }
پدینگ داده شده واسه اینه که متن ها به عکس نچسبن.
خب حالا متن ساید بار رو هم راست چین می کنیم
یعنی کد زیر رو به فایل rtl.css اضافه می کنیم .
کد HTML:
#sidebar { Text-align:right; Direction:rtl; }
تو ساید بار همون طور که می بینید یه پست ها دارای thumb هستن شاید بخوایین که اینارم بیارین سمت راست با inspect element باز کلاس یا آیدی شون رو پیدا می کنیم و بهشون استایل میدیم
اما این عکسها کلاس خاصی ندارن و ناچارا از دیو مادرشون کمک می گیریم
پس کد زیر رو به rtl.css اضافه می کنیم :
کد HTML:
ul.sidebar_list .featured-category .feat-cat-entry .feat-cat-meta img { margin: 3px 0px 6px 10px !important; float:right; }
نکته : وقتی یه استایلی داره بهتون زور میگه یا از یجایی دیگه فراخونی میشه و شما نمیدونید کجاست یعنی در کل هر کاری می کنید تغییرات شما رو اعمال نمی کنه می تونید خط استایلتون با واژه جادویی !important; ببندین این میگه که این خط مهمه و فقط اینو بخون .
و در آخر Headline ها و فوتر رو هم راست چین می کنیم و تمام
واسه فوتر بعد از پیدا کردن کلاس یا آیدی اون بوسیله inspect element کافیه بهش text-align:right; بدین
پس به فایل rtl.css این خط رو هم اضافه می کنیم :
کد HTML:
#footer-widget-area { Text-align:right; Direction:rtl; }
خوب در آخر به تمامی مواردی که نیازی به حساسیت زیادی ندارن یه نسخه کلی می پیچیم
این موارد می تونه تگ های p یا همون پاراگراف و تگ های H یا همون سرتیتر ها باشن
پس خط زیر رو هم به اول فایل rtl.css اضافه می کنیم
کد HTML:
p,h2,h3,h4,h5,h6{ text-align: right !important; direction:rtl !important; }
تصویر پایان درس 4 :
خب این درس هم تموم شد 
. امید وارم مفید واقع شده باشه
فایل اصلی بصورت Html و فایلهای پایان هر درس پیوست میشن و می تونید ازشون استفاده کنید .
آموزش فارسی سازی قالب
پاسخ با نقل قول
