استایل بده بابا!

بسی حال بردیم از این اکستنشنی که دوستان ITباز وبلاگی معرفی کرده‌اند و بد ندیدیم که استفاده ابزاری بکنیم ازش ;)

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

فرض کنیم شما در حال مشاهده doxdo.com باشین. و دلتون میخواد در طرحی که میبینین اصلاحاتی انجام بدین. مثلا دوست دارین فونتهاش درشت‌تر از حالت الان باشند.

یک) روی آیکون استایلیش راست کلیک می‌کنیم.
دو) گزینه Wrtie Style و for This URL رو انتخاب میکنیم.
سه) در صفحه جدید یک اسم بهش میدیم. مثلا doxdo-enhance
چهار) در جعبه تکستش کدهای CSS دلخواهمان را اضافه میکنیم.

کدهای CSS باید به المانها اضافه شوند. ستون وسط دودردو اسمش content است. بنابراین برای اینکه متون داخل این ستون رو اونجوری که میخواهیم تغییر بدهیم. در باکس مربوطه این رو مینویسیم:

#content { }

کاراکتر شارپ (#) نشان دهنده یک المان اصلی است که بهش یک ID میگند. کانتنت اسم ستون وسط هست. دستورات CSS هم باید در بین آکولاد باز و آکولاد بسته نوشته‌شوند.

#content { font-size: 20px; }

اندازه فونتها رو بکنه 20 پیکسل. که خیلی زیادی درشته و باعث میشه که سطور در هم بروند و خوانا نباشند. و حالا بهش فاصله بین سطور هم میدیم:

#content { font-size: 20px; line-height: 40px; }

خب حالا این اندازه فونت و این اندازه بین سطور باید برای کم‌بینایان هم مناسب باشه ;)

*دستورات CSS رو از کجا یاد بگیریم؟
جواب: CSS یک چیز کاملاً رایگان هست. و توسط w3.org گسترش داده میشه. بنابراین شما میتونید کتابهاش رو رایگان از همین کنسرسیوم وب دریافت کنید.

برای گوگل ریدر Xray.ir یک تکمله خوب نوشته. ولی اگر مثل بنده فقط به دایرکشن راست به چپ و اندازه فونت درشترنیاز دارین. کافیه یک استایل برای Google Reader تعریف کنید و اینها رو توش بنویسید:

.item-body { font-size: 16px; font-weight: bold; direction: rtl; text-align: right; padding: 0 10px 0 0; }

برای NetVibes.com هم:

.moduleContent { direction: rtl; text-align: right; }

برای Google IG یا i.doxdo.com هم:

.contentitem { direction: rtl; text-align: right; }

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