opera-widgets

سلام

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

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

اگر مطالب آموزش طراحی سایت من رو خونده باشین حتمن الان دیگه آشنایی خیلی خوبی با 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) هم میدیم بهش.

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

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

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

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

ویدجت توییتر

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

به امید دیدار

درباره این نویسنده

طراح و گرافیست در زمینه وب، وبلاگنویس، علاقه مند به طراحی سایت، جی‌کوئری، مرورگر اپرا، وردپرس، تنیس و وبلاگ‌نویسی. مشغول به صورت آزاد ( freelance ) در زمینه طراحی سایت و اپلیکیشن های موبایل در «همراهیار»

مطالب مشابه

کروم یا فایرفاکس؟ #۱

سلام همونطور که میدونید _ یا حداقل امیدوارم بدونید! _ برای رفتن به سایتهای مختلف راههای زیادی هست به جز […]

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

  1. کاوشگر گفت:

    سیاوش جان خسته نباشی! خیلی مطلبت عالی بود! مرسی بابت وقتی که گذاشته بودی! :)
    فقط یه پیشنهاد! ای کاش این لوگوی جدید اپرا رو گذاشته بودی!

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ فروردین ۲۸ام, ۱۳۸۹ ۱۲:۰۳ ق.ظ:

    درست میگی کاوشگر عزیز، چون مربوط به ورژن جدید هم هست بهتره از لوگوی جدید استفاده بشه! الان درستش میکنم:D

    [پاسخ]

  2. a گفت:

    آقا سلام
    میخواستم ببینم چه طور میتونم در ورد پرس نوشته ها رو لینک گداری کنم.
    باید بگ نوشته هایی رو که مینویسم درست آدرس گذاری نمیشه
    در قسمت تعیین نوع لینک دهی به مطلب ( گزینه آرشیوی و عددی ) رو انتخاب کردم ، ولی خراب لینک میده .
    مثلا من نوشته دوم رو در سایت نوشتم و (هیچ پستی رو هم قبل از اون ننوشته و پاک نکردم ) ولی در هنگام مشاهده سایت عددی بغیر ۲ نشان میده مثلا ۲۵ مشکلم ابنه که میخوام به طور منظم عدد بده نه رندومی لطفا کمکم کنید !
    از طرق قالب شما با سایتتون آشنا شدم .
    تشکر !

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ خرداد ۳۱ام, ۱۳۸۹ ۷:۱۲ ب.ظ:

    اعدادی که به عنوان آی دی به پست ها داده میشه نمیدونم بر چه اساسی هستن اگه میخواهین به ترتیب باشه میتونین دستی تیتر مطلب رو اون عدد قرار بدین

    [پاسخ]

  3. ramin گفت:

    سلام دوست عزیز
    در وردپرس چگونه میتونم یک مقدار ( زمینه دلخواه ) را در یک عدد ضرب کنم
    با تشکر
    در کد php معمولی چطور؟

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ تیر ۱۰ام, ۱۳۸۹ ۱۲:۱۰ ق.ظ:

    این کد مثلن زمینه دلخواه number1 رو میگیره و ضرب در number2 که ما در اینجا ۶ تعریف کردیم میکنه و چاپ میکنه

    ID, 'number1', true);

    $number2 =6;
    $number3 =$number1 * $number2;
    echo $number3;

    ?>

    [پاسخ]

    ramin پاسخ در تاريخ تیر ۱۱ام, ۱۳۸۹ ۹:۴۶ ب.ظ:

    سلام
    خیلی ممنون ولی این کد فقط ضرب در ۱۰ می کند!

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ تیر ۱۱ام, ۱۳۸۹ ۹:۵۴ ب.ظ:

    ۱۰ از کجا اومد؟ اگه میخواهین عددی که در اون ضرب میشه هم به عنوان زمینه دلخواه وارد کنید باید به یکم دستکاری کنید از اینجا کمک بگیرید http://codex.wordpress.org/Custom_Fields

پاسخ دادن به ramin لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>