نحوه ادیت کردن ویدجت های اپرا + ویدجت فارسی توییتر

۲۷ فروردین ۱۳۸۹

دسته: برجسته / وب / مرورگر اینترنت

برچسب ها : ادیت ویدجت / افزونه اپرا / اپرا / توییتر / ویدجت اپرا

سلام

من مدتیه مطلب ننوشتم و دلیلش هم اینه که ترجیح میدم ۱ مطلب خیلی خوب بنویسم تا ۱۰ تا مطلب خوب یا ۱۰۰ تا معمولی! _حداقل از نظر خودم خوب باشه کافیه! هرچند امیدوارم شما هم خوشتون بیاد.

امروز به ذهنم رسید یک ویدجت اپرا که برای توییت کردن برای خودم و بعضی از دوستان ادیت کرده بودم رو به شما معرفی کنم و در عین حال آموزشی باشه برای اینکه چطور ویدجت های اپرا رو ادیت کنیم!

اگر مطالب آموزش طراحی سایت من رو خونده باشین حتمن الان دیگه آشنایی خیلی خوبی با html و css دارین و میتونین کاملن بفهمین من چی میگم.

ما برای این آموزش به آخرین ورژن مرورگر اپرا _که در حال حاضر ورژن ۱۰٫۵۰ است _ نیاز داریم، که از سایت اصلی اپرا به آدرس www.opera.com قابل دریافته

برای دانلود ویدجت ها هم که حتمن میدونین از منوی   opera>widgets>Get widgets یا از آدرسhttp://widgets.opera.com/ میتونین به ویدجت های اپرا دسترسی داشته باشین، ویدجت مورد نظر این پست هم از آدرس http://goo.gl/b4Qu قابل دسترسیه.

خب از اینجا میریم سراغ ادیت ویدجت، برای اینکار اول از همه اپرا رو باز میکنیم و کلیدهای ترکیبی ctrl+shift+i رو میزنیم. صبر میکنیم تا dragonfly لود شه.

توضیح بدم که dargonfly تقریبن کاری مشابه inspect elements در کروم و افزونه ی فایرباگ در فایرفاکس انجام میده.

بعد از اینکه dragonfly لود شد وارد تب settings میشیم و روز Remote Debug کلیک میکنیم و تیک مربوطه رو میزنیم، در قسمت port هم هر پورت آزادی که بخواهین رو میتونین وارد کنین و در آخر هم روی apply کلیک میکنیم.

بعد وارد ویدجت مورد نظر میشیم و روش کلیک راست میکنیم و از قسمت settings وارد Remote Debugger  میشیم، اگه دقت کنید الان inspect element یا همون dargonfly روی ویدجت فعال شده و ما میتونیم به راحتی بفهمیم کدوم قسمت ویدجت با چه تگ، آی دی و یا کلاسی نوشته شده.

الان ما دیگه کارمون مثل ادیت کردن یک صفحه ی html ساده است و کاری که ما میخواهیم انجام بدیم هم که فقط با css کار داره، اما فایلهای این ویدجت کجا هستن؟

اگه زمانی که این ویدجت رو دانلود کردین با مرورگر اپرا بوده باشین که خب میتونین وارد قسمت دانلود ها شده و بعد روی ویدجت کلیک راست کنین و open folder رو بزنین تا فایل ویدجت رو پیدا کنین، اگر هم با مرورگر های دیگه دانلود کردین که خب حتمن میدونین کجا دانلود شده!

من میرم و فایل ویدجت رو کپی میکنم توی دسکتاپم و بعد فرمتش رو از wgt به zip تغییر میدم، و فایل رو آنزیپ میکنم.

همونطور که میبینید فایلهای مربوط به ویدجت همه در یک فولدر هستند که البته ما فقط با یکی از فایلها کار داریم و اون هم در پوشه ی styles و با نام v2.css هست.

در تصویر قبلی ما میخواستیم کلاس قسمتی که آخرین توییت نوشته میشه رو پیدا کنیم و اون رو در فایل css ویرایش کنیم، برای این کار روی قسمت مورد نظر کلیک کردیم و در dragonfly ویرایش مورد نظرمون رو روش اعمال کردیم (البته این فقط به منظور تست بوده و بعد از بستن ویدجت تغییرات ایجاد شده به حالت اول برمیگردن، برای همین ما فایل ویدجت رو آنزیپ کردیم تا بتونیمم تغییرات رو در فایلهاش اعمال کنیم!

v2.css رو باز میکنیم و کد آی دی و کلاس مورد نظر که در تصویر قبل مشخص کرده ام رو پیدا میکنیم.

#latest .text

برای پیدا کردن یک عبارت در ادیتور های متن هم حتمن میدونین که میتونیم از کلیدهای ترکیبی Ctrl+F استفاده کنیم

در خط ۹۴ آی دی latest و در زیر مجموعه ی اون کلاس text رو داریم که باید direction رو به راست به چپ یا همون rtl تغییر بدیم! برای این کار خط زیر رو به این قسمت اضافه میکنیم:

direction:rtl;

تا داشته باشیم:

#latest .text {

        direction:rtl;

        height: 65px;

        padding: 5px;

        background: transparent url(‘../images/status_bg_middle.png’) 0 0 repeat-x;

}

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

با کلیک بر روی قسمتی که توییت یکی از دوستان شما در توییتر رو در بر میگیره میفهمیم که کلاس قسمت توییتهای دوستان entry هست، با این حساب باز به ویرایشگر متن خودمون برمیگردیم و direction کلاس entry رو هم به rtl تبدیل میکنیم.

الان در خط ۳۶۶ داریم:

.entry {

  direction:rtl;

  background: #fff url(../images/bg_tweet_separator.png) 50% 100% no-repeat;

  padding: 8px 5px 8px 10px;

  line-height: 1.4em;

  overflow: hidden;

}

حالا فونت رو هم تاهوما کنیم که این یکی خیلی منو آزار میده! میریم و توی فایل v2.css تگ body رو که معمولن در قسمت های بالایی فایلهای استایل یا همون css ها هستند پیدا میکنیم و کد زیر رو بهش اضافه میکنیم:

font-family: tahoma;

به همین راحتی تمام متنهای داخل ویدجت تبدیل به تاهوما میشن(برای تست میتونین در همون dragonfly این کارها رو انجام بدین و بعد وارد فایل ویدجت بشین تا خیالتون راحت باشه که کار درست رو انجام دادین! )

حالا تقریبن شکل و قیافه ی بهتری داره ویدجتمون، اما میتونیم بهترش هم بکنیم! اگه دقت کنید توییت ها یه کم چسبیده اند به عکسهای نویسنده هاشون، برای اینکه بفهمیم توی چه کدی باید تغییر ایجاد کنیم میریم و روی یکی از عکسها کلیک میکنیم، همونطور که توی عکس هم مشخصه سمت راست یک padding داره که اگه توی dragonfly نگاه کنید ۱۰ پیکسل از راست هست، من اون رو به ۳ پیکسل تغییر میدم و از این طرف هم برای اینکه یک فاصله ای از متن داشته باشه یک margin-left برابر با ۵ پیکسل بهش میدم.

حالا دیگه شکل و شمایل خیلی بهتر از قبل شده، و تقریبن مشکلی نداره، ولی اگر هم باشه میتونیم خیلی راحت با همین روش هرکاری که دوست داریم انجام بدیم، مثلن موقع توییت کردن همچنان متن توییتی که در حال نوشتنش هستیم چپ به راسته و فونتش هم تاهوما نیست! بعد از پیدا کردن تگ مربوطه و کلاس مربوط بهش میتونیم خیلی راحت این مشکل هم حل کنیم:

با بررسی قسمت textarea که محل توییت کردنه میفهمیم که آی دی مربوط به این قسمت doing هست که در فایل css فونتش مشخص شده که sans-serif است که میریم و به tahoma تغییرش میدیم و یک direction راست به چپ (rtl) هم میدیم بهش.

این هایی که گفتم در حد یک آشنایی بود برای شما که میخواهین شروع کنین به کارهای این چنینی!

ینی مثلن یک افزونه ی فایرفاکس، کروم هم که میبینین میتونین به راحتی ادیتش کنین، و همین طور ویدجت های اپرا، کم کم از ادیت میتونین دست به کار بشین و برسین به ساخت ویدجت یا افزونه! که البته نوشتن اصلن قابل مقایسه با ادیت کردن نیست!

امیدوارم این مطلب کمکی به شمایی که به این کار علاقه دارین کرده باشه!

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

ویدجت توییتر

موفق و پیروز و خوشحال باشید

به امید دیدار