قابل چاپ کردن مطالب وبلاگ با استفاده از CSS و html

۳۰ ۰۲ ۱۳۸۸

مطالب مفید و خواندنی همیشه طرفداران زیادی دارند و البته عده‌ی زیادی برای چاپ و استفاده‌ی بهتر از این مطالب اقدام می کنند. پس قابل چاپ بودن مطالب برای یک وبلاگ خوب شرط مهمی است. اما چگونه می توانیم به سادگی مطالب خود را قابل چاپ کنیم؟ اصلا قابل چاپ کردن یعنی چه؟ اصولا مطالب چاپی (مثل یک متنی که در Word تایپ کرده ایم) در ساده ترین حالت باید به نحوی باشد که روی برگه‌ی کاغذ به خوبی قابل خواندن باشد یعنی دارای style خاصی نباشد و فقط دارای یک زمینه‌ی سفید، فونت مناسب چاپ و برای متون فارسی راست به چپ باشد کفایت می کند.

آیا می دانستید که با کمک css و html می‌توانید یک style خاص فقط برای صفحات چاپی تعریف کنید؟

با کمک یکی از خاصیت های برچسب link در هنگام تعریف style شما می توانید تعریف کنید که style مورد نظرتان برای صفحات چاپی استفاده می شود. به عنوان مثال اگر شما بخواهید این قابلیت را به وبلاگ خود اضافه کنید باید زیرِ خط مربوط به style پوسته‌تان این خط را اضافه کنید:

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

همانطور که در کد بالا مشاهده می کنید خاصیت media=”print” باعث می شود تا شیوه نامه (استایل) print.css به صفحات قابل چاپ اختصاص داده شود و برای صفحاتی که قرار است چاپ شود از این شیوه نامه استفاده خواهد شد.

قابل چاپ کردن مطالب وبلاگ با استفاده از CSS و html

اما خاصیت media ویژگی دیگری هم با نام screen دارد که این ویژگی برای شیوه نامه‌های عادی که روی صفحات وب نمایش داده می شود استفاده می شود.

نکته مهم: اما نکته‌ی مهمی در اینجا وجود دارد که باید حتما رعایت شود. زمانی که ما برای تعریف شیوه نامه هایمان از خاصیت media استفاده نمی کنیم، شیوه نامه‌ی تعریف شده، هم برای صفحات چاپی استفاده می شود و هم برای صفحات عادی. پس باید حتما حتما خاصیت media را برای شیوه نامه هایمان تعریف کنیم. به عنوان مثال:

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

ادامه‌ی مطلب »


رنگ آمیزی تصاویر سیاه و سفید

۲۹ ۰۱ ۱۳۸۸

چند روز پیش سر کلاس “گرافیک کامپیوتری” استاد از چند تا از بچه‌ها خواسته بود تا برای بخش عملی کلاس قسمت‌هایی از نرم افزار فوتوشاپ رو توضیح بدهند. در ادامه یکی از دوستانی که در حال توضیح دادن بود رسید به جایی که یه عکس سیاه و سفید آورد و استاد ازش پرسید که آیا میتونه این عکس رو رنگی کنه؟ متاسفانه دوستمون روش انجام این کار رو نمی‌دونست و مابقی دوستان هم همینطور و البته خود استاد هم این ترفند رو بلد نبود (کلا سطح علمی رو دارید یا نه!!).

من با اطلاعاتی که از قبل داشتم از چگونگی انجام این کار آگاهی داشتم و برای دوستانم هم روش این کار رو توضیح دادم. نکته ای که برام جالب بود استقبال دوستان از این ترفند بود تا اندازه‌ای که تا انتهای کلاس خودشون رو با این ترفند سرگرم کردند و حسابی هم برای خودشون هنرنمایی کردند. این تجربه جالب باعث شد تا من به این فکر بیفتم که آموزش “رنگ آمیزی تصاویر سیاه و سفید” رو اینجا هم بنویسم تا شاید برای شما هم جالب باشه.

رنگ آمیزی تصویر سیاه و سفید

تصویری که در بالا مشاهده می‌کنید یک تصویر سیاه و سفید بوده که به حالت رنگی در اومده البته این تصویر اولِ اولش رنگی بوده (تصویر اصلی) ولی برای نوشتن این آموزش ابتدا سیاه و سفید شده (تصویر سیاه و سفید) و دوباره رنگ آمیزی شده (تصویر رنگ آمیزی شده‌ی نهایی).

مد (Mode) تصاویر سیاه و سفید در ابتدا به صورت Grayscale تنظیم شده است و در این Mode نمی‌توان از رنگ‌های مختلف استفاده کرد (فقط سیاه و سفید). پس در گام اول باید مد تصویر سیاه و سفید را به RGB تغییر دهیم تا بتونیم از رنگ‌های مختلف در عکس استفاده کنیم٬ برای این کار به Image->Mode رفته و RGB Color را انتخاب کنید (+). در مرحله‌ی بعدی باید یک لایه‌ی جدید ایجاد کنید (Ctrl+Shift+N) و Mode این لایه را هم روی Color تنظیم کنید (+).

حالا نوبت به رنگ آمیزی تصویر می‌رسد برای رنگ آمیزی قسمت‌های مختلف تصویر باید از رنگ‌های مختلف و مناسب استفاده کنید. مثلا برای رنگ آمیزی آسمان ابتدا یک رنگ آبی انتخاب کرده و با ابزار Brush تصویر خود را رنگ کنید حالا خواهید دید که چگونه تصویر شما رنگی می‌شود. برای بالا بردن دقت در رنگ آمیزی می‌توانید با استفاده از ابزارهای Select (+) قسمت‌هایی را که می‌خواهید رنگ آمیزی کنید را ابتدا انتخاب کنید و سپس آن ها را رنگ کنید. همچنین برای منظم‌تر شدن کارتان می‌توانید رنگ آمیزی هر قسمت را در یک لایه‌ی مجزا انجام دهید.

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

پی‌نوشت: راستی این اولین مطلب من در سال ۱۳۸۸ هست امیدوارم مفید بوده باشه؛ یک باره دیگه سال جدید رو بهتون تبریک میگم.


اینترنت مسافرتی در نوروز ۸۸

۲۸ ۱۲ ۱۳۸۷

آخرین روز‌های سال ۱۳۸۷ رو داریم پشت سر می‌گذاریم و آماده می‌شویم تا به نوروز ۱۳۸۸ سلام کنیم. این روزها بازار سفرهای نوروزی داغ داغه و اکثر خانواده‌ها سعی می‌کنند برای چند روزی هم که شده از این تعطیلات به خوبی استفاده کنند و به سفر بروند. اما برای ماهایی که یکی از قسمت‌های مهم زندگیمون رو اینترنت تشکیل می‌ده دوری از این بلای خانمان سوز برامون خیلی سخته٬ به خاطر همین تصمیم گرفتم تا در یک مطلب به شدت نوروزی پیشنهادها و راهکارهای خودم رو برای هرچه بهتر استفاده کردن از اینترنت در سفرهای نوروزی بیان کنم.

اینترنت مسافرتی در نوروز ۸۸

خب در ابتدا بگم که اینترنت در سفر به دو قسمت تقسیم میشه٬ یکی اینترنت همراه که با استفاده از GPRS تلفن‌های همراه انجام می‌شه و کاربردش در سفر کارهایی مثل چک کردن ایمیل و یا استفاده از سایت‌هایی همچون توییتر می‌باشد که در گذشته مطلبی در رابطه با این موضوع با عنوان «اینترنت موبایلی» منتشر کرده بودم. اما روش دوم استفاده از اینترنت٬ همون استفاده معمولی ما از اینترنت هست که برای این کار به یک کافی نت احتیاج داریم که چیز غریبی هم نیست و این روزها تو هر شهری هم پیدا می‌شه.

اما کافی‌نت ها معمولا یکسری مشکلات دارند که از مهمترین اونها میشه به مساله امنیت در کافی‌نت ها اشاره کرد که به هیچ وجه قابل اطمینان نیستند. اما این مشکلات هم قابل حل هستند و در ادامه راه حل هایی را برای استفاده مطمئن و لذت بخش از اینترنت در کافی‌نت ها معرفی می‌کنم.

اینترنت مسافرتی در نوروز ۸۸ راه حل پیشنهادی من برای بالا بردن امنیت در کافی‌نت ها استفاده از نرم‌افزارهای قابل حمل (portable) هست که فقط کافیه آن ها را روی یک Flash Memory یا هر نوع حافظه‌ی قابل حمل دیگه‌ای نصب کنید. برای مثال با داشتن یک مرورگر (browser) قابل حمل شما با خیالی آسوده می‌توانید از اینترنت استفاده کنید چرا که تمام یوزر و پسوردها واطلاعات مهم شما همراه خودتان حمل می‌شوند و اگر از مرورگر فایرفاکس استفاده می‌کنید به راحتی می‌توانید افزونه‌های مورد نیاز خودتان را هم روی فایرفاکس همراهتان نصب کنید تا به بهترین شکل از اینترنت در کافی‌نت‌ها استفاده کنید.

یکی دیگر از برنامه‌های پر کاربرد در کافی‌نت ها برنامه‌های پیام رسان (messenger) هستند که استفاده از این برنامه‌ها هم ریسک بالایی است ولی شما می‌توانید از یک پیام رسان قابل حمل مثل pidgin استفاده کنید تا خطری شما را تحدید نکند. و برای پیدا کردن انواع مختلف نرم‌افزارهای قابل حمل می‌توانید به PortableApps برید و برنامه‌هایی که به نظرتون در طول سفر لازم میشه رو دانلود و روی حافظه همراهتون نصب کنید. فایرفاکس و pidgin قابل حمل رو هم از اینجا و اینجا دانلود کنید.

البته استفاده از نرم‌افزارهای همراه مزیت‌های دیگری هم دارد که به قول معروف در این مقال نگنجید. در آخر هم امیدوارم سال ۱۳۸۸ سال خوبی برای شما و خانواده محترمتان باشد.


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

۲۶ ۱۲ ۱۳۸۷

تا به حال شده بخواهید مطالبی را که جستجو (search) می‌کنید دنبال کنید؟! یعنی از جدیدترین نتایجی که به جستجوی یک واژه مربوط می‌شود با خبر شوید. برای مثال من می‌خواهم هر مطلبی که در وبلاگستان منتشر می‌شود و واژه‌ی «محسن چاوشی» را در تیتر خود دارد مشاهده کنم و یا به نوعی تمام مطالب مربوط به محسن چاوشی را در سرتاسر وبلاگستان و یا اینترنت دنبال کنم. شاید به نظر عجیب بیاید ولی گوگل این کار را برای شما انجام می‌دهد.

جستجوهای خود را دنبال کنید Google Blog Search یکی از سرویس‌های گوگل است که قابلیت‌های خوبی دارد و می‌تواند این کار را برای شما انجام دهد. شما در Google Blog Search می‌توانید برای نتایج جستجویی که انجام می‌دهید یک خروجی RSS و یا ATOM داشته باشید پس با وجود این خروجی‌ها می‌توانید به آسانی نتایج جستجوی خود را دنبال کنید.

اما اگر خواستید مثل من از تمام مطالبی که در تیتر آنها واژه‌ی «محسن چاوشی» یا هر واژه‌ای که شما می‌خواهید وجود داشته باشد با خبر شوید کافی است تا محسن چاوشی را در Google Blog Search به صورت زیر جستجو کنید:

inposttitle:"محسن چاوشی"

و اگر می‌خواهید نتایج جستجوی شما به ترتیب زمان مرتب شود می‌توانید گزینه‌ی sort by date را انتخاب کنید و سپس خروجی RSS مربوطه را انتخاب کرده و آن را در خوراک خوان (Feed Reader) خود قرار دهید تا از این به بعد بتوانید آخرین مطالب مربوط به واژه‌ی مورد نطر خود را دنبال کنید. در ضمن اگر خواستید نتایج جستجو های شما دقیقتر باشد می‌توانید از قسمت جستجوی پیشرفته استفاده کنید.

مرتبط: برای درک بیشتر از محیط می‌توانید نگاهی به این تصویر پیش نمایش هم بیاندازید.


تبدیل آسان DVD به AVI

۸ ۱۰ ۱۳۸۷

شاید تا به حال برایتان پیش آمده باشد که بخواهید یک فیلم DVD را به فرمت AVI تبدیل کنید. بدون هیچ گونه مقدمه‌ای می‌خواهم آموزش تبدیل آسان DVD به AVI را برایتان شرح دهم. برای شروع کار به دو نرم افزار احتیاج داریم اول نرم افزاری برای استخراج فایل های DVD روی کامپیوتر و دوم نرم افزاری برای تبدیل این فایل‌ها به فرمت AVI ما برای این کار از دو نرم افزار کاملا رایگان استفاده می‌کنیم برای استخراج فایل‌های DVD از DVD Decrypter و برای تبدیل به AVI از Vidomi استفاده می‌کنیم.

برای شروع ابتدا این دو نرم افزار را دانلود و نصب کنید. سپس DVD Decrypter را اجرا کنید و از منوی Toolbar->Mode->IFO را انتخاب کنید *. سپس از تب Source (شماره ۱) باید DVD R/W مربوطه را انتخاب کنید پس از این کار از تب Destination (شماره ۲) محلی که می‌خواهید فایل‌ها روی کامپیوترتان ذخیره شود را انتخاب کنید. سپس از تب Input (شماره ۳) باید فایل مربوط به فیلم را انتخاب کنیم در این قسمت ممکن است فایل‌های زیادی باشد شما باید بزرگ ترین فایل را از نظر زمانی انتخاب کنید پس از این کار به تب Stream Processing (شماره ۴) رفته و گزینه Enable Stream Processing را تیک بزنید سپس از قسمت زیر آن فایل‌های مورد نیاز را انتخاب کنید برای این کار به طور معمول یک فایل ویدئو و یک فایل صوتی کافی است. (نمونه تصویر) و در آخر هم روی کلید تبدیل (شماره ۵) کلیک کنید تا تبدیل آغاز شود.

DVD Decrypter

خوب تا اینجا فایل ها را از روی DVD استخراج کردید حالا باید این فایل ها را به AVI تبدیل کنید برای این کار باید از برنامه Vidomi استفاده کنیم. وقتی vidomi را برای اولین بار اجرا می‌کنیم با چنین تصویری روبرو می‌شویم پس از این که این صفحه را دیدید روی این دکمه کلیک کنید* تا به محیط تبدیل برنامه بروید. سپس برای اعمال برخی تنظیمات به اینجا بروید Options->General Options سپس تنظیمات این صفحه را مطابق این تصویر انجام دهید*.

حالا باید فایل هایی که از DVD استخراج کردید را به Vidomi بدهید برای این کار روی این کلید کلیک کنید سپس تمام فایل‌هایی که با DVD Decrypter استخراج کردید انتخاب کنید. حالا روی این کلید کلیک کنید و محلی که می‌خواهید فایل نهایی یا خروجی در آنجا ذخیره شود را انتخاب کنید. حالا به Options->Video Options بروید و از منوی کشویی که در تب Video Codec Settings وجود دارد XVID VBR (Tow Pass) را انتخاب کنید و سپس روی دکمه Set XVID Codec Parameters کلیک کنید و مطابق این تصویر تنظیمات مربوطه را انجام دهید. حالا به Options->Output Size Options رفته و تنظیمات آن را مطابق این تصویر انجام دهید.

اما در صورتی که ویدئو شما شامل قسمت‌هایی اضافی باشد می‌توانید آن را حذف کنید برای مثال خطوط تیره‌ای که در بالا و پائین معمول فیلم‌ها قرار دارد برای این کار Options->Select Source Range را انتخاب کرده و با استفاده از کلیک‌هایی که در این تصویر مشخص شده قسمت اصلی فیلم را انتخاب کنید و سپس کلید Done را فشار دهید.

حالا دیگر زمان آن رسیده است که کار را شروع کنیم برای این کار روی Start Encoding کلیک کنید و منتظر بمانید تا عمل تبدیل انجام این کار اغلب وقت گیر است و برای هر فیلم زمانی در حدود ۲ ساعت را طلب می‌کند البته بستگی به وضعیت سیستم شما هم دارد.

نکته: لازم به ذکر است که اگر اطلاعات کافی در این ضمینه دارید می‌توانید تنظیمات را دستکاری کنید تا خروجی شما نیز بهتر شود ولی اگر در این ضمینه اطلاعات کافی را ندارید پیشنهاد می‌کنم از همین تنظیماتی که گفته شد استفاده کنید.

نکته: تمام تنظیماتی که با * مشخص شده است فقط یکبار نیاز به انجام دارد.


GMail خود را به Gadget آغشته کنید

۱۲ ۰۸ ۱۳۸۷

احتمالا از امکان جدیدی که گوگل برای GMail فعال کرده با خبر هستید این امکان که Gadget های iGoogle را برای Gmail فعال می‌کند هم اکنون به قسمت آزمایشگاه GMail اضافه شده و قابل فعال سازی می‌باشد و با فعال سازی این امکان می‌توانید GMail خود را برای خود کاربردی‌تر کنید. اما شاید سوالی که برای برخی وجود داشته باشد این است که Gadget ها را چگونه به GMail اضافه کنیم؟؟

چگونه Gadget را به Gmail اضافه کنم؟

ابتدا روی آیکون آزمایشگاه Gmail در بالای صفحه و مطابق شکل زیر کلیک کنید تا به صفحه آزمایشگاه هدایت شوید.

GMail خود را به Gadget آغشته کنید

پس از آنکه وارد صفحه آزمایشگاه شدید حالا باید امکان Gadget را برای Gmail فعال کنید برای این کار دنبال شکل زیر بگردید و آن را در حالت Enable قرار داده و سپس روی Save Changes کلیک کنید تا تغییرات ذخیره شود.

GMail خود را به Gadget آغشته کنید

ادامه‌ی مطلب »


فارسی سازی پوسته‌های وردپرس (بخش ششم)

۲ ۰۷ ۱۳۸۷

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

همانطور که می‌دانید پوسته‌ها نمای ظاهری سایت یا وبلاگ را تشکیل می‌دهند و مشکلات ظاهر را از طریق مشاهده کردن می‌توان تشخیص داد و در حقیقت اصل فارسی سازی یا rtl کردن پوسته‌های وردپرس هم با مشاهده کردن انجام می‌گیرد به این ترتیب که شما مشاهده می‌کنید مثلا فونت قسمتی زیادی بزرگ است و باید کوچک شود پس با کمک ابزارهایی که در مطالب قبل به آنها اشاره شد آدرس css ی آن را پیدا می‌کنید و با استفاده از کدهای css مشکل را حل می‌کنید.

حالا میرویم سر همان ادامه فارسی سازی پوسته کلاسیک خودمان؛ برای شروع نگاه می‌کنیم ببینیم کجای کار مشکل دارد (این مشکلات در ظاهر٬ می‌تواند سلیقه‌ای هم باشد) در نگاه اول چسبندگی زیادی حروف در متن مطالب زیاد توی ذوق می‌زند پس با کمک ابزار firebug میرویم تا آدرس محل خراب را پیدا کنیم و به دنبال کد letter-spacing در css میگردیم چرا که همه چیز زیر سر این کد است و فاصله‌ی بین حروف را با استفاده از این کد در css تعیین می‌کنند. آدرس را پیدا می‌کنیم٬ آدرس اینجاست

p, li, .feedback

یعنی محلی که این کد

letter-spacing:-1px;

در آن قرار داده شده پس برای حل مشکل فایل rtl.css را باز می‌کنیم و کد زیر را به انتهای آن اضافه می‌کنیم

p, li, .feedback { letter-spacing:0; }

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

کلید طلایی: برای آنکه بتوانید پوسته ای را rtl (راست به چپ) کنید باید بتوانید با کدهای css و html سر و کله بزنید و یکی از اهداف مهم این سری آموزش ها هم همین است یعنی روش سر و کله زدن اما برای یادگیری و آشنایی بیشتر با کدهای css و html می‌توانید مطالعاتتان را در این زمینه بیشتر کنید و یا تجربه‌هایتان را در این افزایش دهید (یعنی برای خودتان پوسته فارسی کنید) و هر جا که به مشکل خوردید از انجمن‌های مختلف مخصوصا انجمن‌های وردپرس فارسی کمک بگیرید.

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


فارسی سازی پوسته‌های وردپرس (بخش پنجم)

۱۳ ۰۵ ۱۳۸۷

اول از همه شرمنده ام که این سری مطالب انقدر طولانی شده اما نکته ای که وجود داره اینه که ممکنه دیر و زود داشته باشه اما سوخت و سوز نداره این هم یه توجیه قشنگ که امیدوارم مورد قبول واقع شده باشه.

خوب دیگه بهتره بریم سر اصل مطلب و برای شروع هم بهتره یه مروری روی بخش قبلی داشته باشیم. برای شروع این بخش اول میریم میبینیم چه چیزهایی هنوز راست به چپ نشده و با فارسی سازگار نیست٬ اولین نکته ای که نظر من رو به خودش جلب کرد عنوان سربرگ بود که هنوز راست به چپ نشده بود پس با کمک فایرباگ میرم ببینم عنوان سربرگ به چه ID یا Class یا tag ی مربوط هست که پس از بررسی متوجه میشیم که به

#header

(یعنی ID ی با نام header) مربوط هست پس به این صورت اون رو rtl میکنیم

#header { direction: rtl; }

اما پس از این که rtl کردیم متوجه میشیم که سربرگ در جای مناسب خودش قرار نگرفته و وقتی علل رو بررسی میکنیم متوجه میشیم که باید مقداری اون رو به سمت چپ هل بدیم و این کار رو میتونیم با استفاده از padding انجام بدیم و از اون جایی که این ID خودش padding داشت padding اون رو به صورت زیر تغییر میدیم و از سمت راست یه مقدار بیشتر هلش میدیم (یعنی عدد مربوط به سمت راست رو بزرگتر میکنیم) تا در جای مناسب قرار بگیرد.

#header {
direction:rtl;
padding:15px 240px 15px 10px;
}

اما شاید بخواهید بیشتر راجع به دستور padding بدونید ؟

padding یه دستوری از css هست که با استفاده از اون میتوانید از اطراف به element مورد نظرتون فاصله بدید که این دستور بسیار شبیه دستور margin هست اما تفاوت اون رو میتونید در شکل زیر مشاهده کنید.

فارسی سازی پوسته‌های وردپرس (بخش پنجم)

روش استفاده از padding به شکل زیر است:

padding: top right bottom left;

برای مثال:

padding: 2px 3px 1px 4px;

البته روش های دیگری هم برای نوشتنش هست اما فعلا تا همین جا کافیه و امیدوارم که مفید واقع شده باشه.


فارسی سازی پوسته‌های وردپرس (بخش چهارم)

۲۰ ۰۳ ۱۳۸۷

جلسه پیش تا سر تغییر فونت ها به فونت Tahoma گفتیم و اما قسمت بعدی قسمت راست به چپ کردن متن‌ها است برای این کار ابتدا می‌بینیم کدام قسمت ها نیاز به راست به چپ شدن داره برای مثال همونطور که در این تصویر مشاهده می‌کنید بدنه‌ی مطالب و بدنه‌ی سایدبار نیاز به راست به چپ شدن داره پس از این که فهمیدیم کدام قسمت ها را باید راست به چپ کنیم با کمک فایرباگ به دنبال تگ٬ کلاس و یا آی‌دی مربوطه میگردیم. که در اینجا آی‌دی بخش مطالب ما content هست پس برای راست به چپ کردن این بخش کد زیر رو به فایل rtl.css اضافه می‌کنیم.

#content { direction: rtl; }

با انجام این کار مشاهده می‌کنیم که متن بخش مطالب به صورت راست به چپ چیده شد. حالا نوبت به ستون کناری هست تا راست به چپ بشه نام آی‌دی این قسمت menu هست حالا عملیات بالا رو برای این آی‌دی هم انجام می‌دیم اما مشاهده می‌کنیم که تنها تیترها راست به چپ شد؟؟ دلیل این کار احتمالا این هست که یک

text-align: left;

در این بدنه وجود دارد که با استفاده از افزونه‌ی فایرباگ در بدنه آی‌دی menu به دنبال این text-align می‌گردیم که پس از مقداری کنکاش متوجه می‌شویم که text-align مورد نظر در آدرس

#menu ul ul

قرار دارد پس٬ کد زیر رو به ادامه کدهای فایل rtl.css اضافه می‌کنیم.

#menu ul ul { text-align: right; }

حالا دیگه متن‌های ما راست به چپ شده و کار ما تقریبا در این قسمت تموم شده و نتیجه کار هم تا اینجای کار به این صورت در اومده و کدهای فایل rtl.css هم باید به صورت زیر باشه تا اینجای کار:

body,p, li, .feedback , #menu ul ul li {
     font-family: tahoma;
}
#content, #menu {
     direction: rtl;
}
#menu ul ul {
     text-align: right;
}

اما شاید تا اینجای کار سوالی برای شما پیش اومده باشه که تفاوت direction و text-align چیه؟ direction در حقیقت کل عصمت اون بخش رو راست به چپ یا چپ به راست میکنه ولی text-align اون قسمت رو فقط سمت راست یا چپ میاره و حتی ممکنه direction ش تفاوت داشته باشه اما برای این که بهتر متوجه بشید یک مثال می‌زنم٬ ممکن تا به حال دیده باشید که دارید یه جایی مثلا یه متنی رو از راست به چپ می‌نویسید و وقتی یک کلمه انگلیسی وسطش می‌نویسید نظم و ترتیب متنتون به هم میخوره و خوندنش مشکل میشه این مشکل به خاطره اینه که اونجا تنها text-align شما راست چین هست و direction تون چپ به راست یا ltr هست.

خوب در آخر امیدوارم که این جلسه هم مثل جلسه های قبل :D براتون مفید بوده باشه و مشقاتون رو هم خوش خط بنویسید که به خوش خطها خوب نمره می‌دم٬ خوب دیگه تا جلسه دیگه برید خونه‌هاتون. ;)


فارسی سازی پوسته‌های وردپرس (بخش سوم)

۲۱ ۰۲ ۱۳۸۷

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

استاندارد ما برای فارسی سازی پوسته های وردپرس این هست که فایل های اصلی وردپرس دست کاری نشه البته بیشتر منظورمون فایل استایل یا همون style.css به همین منظور یک فایل rtl.css به فایل های پوسته اضافه میکنیم و عملیات مربوط به راست به چپ سازی و همگن سازی پوسته رو در این فایل انجام می‌دیم پس اولین استاندارد ما اینه که فایل style.css دست نخورده بمونه و بجاش تغییرات در فایل rtl.css انجام بشه.

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

<?php language_attributes(); ?>

در خط دوم فایل header.php است که ویژگی‌ها

dir="rtl" lang="fa-IR"

را به تگ html اضافه میکند که کد “dir=”rtl باعث راست به چپ شدن میشه که برای جلوگیری از این کار این قسمت رو با کد

<?php //language_attributes(); ?>

تعویض میکنیم و فایل header.php رو ذخیره می‌کنیم.

حالا دیگه میریم سراغ کار اصلیمون البته امیدوارم قبل از شروع ملزومات کار رو هم فراهم کرده باشید؛ در مرحله اول فونت متن ها رو باید تغییر بدیم که برای این کار ابتدا می‌گردیم ببینیم فونت ها از کدوم تگ html فراخوانی شدند که برای این کار از افزونه firebug کمک میگیریم روش کار هم اینجوریه که اول به صورت کلی یعنی از قسمت body شروع میکنیم فونت رو تغییر میدیم بعد میبینیم کجا تغییر کرده٬ کجا تغییر نکرده و اونهایی که تغییر نکرده به کدوم تگ html مربوط میشه. برای پوسته کلاسیک هم ابتدا قسمت body رو به این صورت فونتش رو تغییر میدیم

body { font-family: Tahoma; }

و در فایل rtl.css ذخیره میکنیم. اما هنوز فونت بعضی از قسمت ها تغییر نکرده برای مثال فونت مطالب و ساید بار که پس از جستجو با فایرباگ به این نتیجه میرسیم که تگ های p , li , body و کلاس feedback و تگ li در آدرس menu ul ul li# فونت هاشون رو به صورت زیر تغییر میدیم:

p, li, .feedback , #menu ul ul li { font-family: Tahoma; }

خوب حالا دیگه فونت هامون تقریبا با فارسی همگن شده.

فکر کنم برای این جلسه دیگه کافی باشه برای این هفته این ها رو خوب تمرین کنید که جلسات آینده به مشکل بر نخورید؛ البته من یه نکته رو هم همین اول کار بگم که بیشتر این کار سلیقه ای و کسی قرار نیست حتما اون کارهایی که من میگم رو انجام بده مثلا یکی دلش میخواد فونت پوسته اش arial باشه و حتما قرار نیست فونت پوسته اش رو Tahoma بزاره و در اصل هدف من اینه که شما دوستان روش کار رو یاد بگیرید.