[arsenal-champion]

آموزش ساخت یک اسکریپت برای تغییر ظاهر tooltip ها

تا حالا ما فقط بهتون لینک میدادیم و شما کلیک میکردید روش و اسکریپت لود میشد توی گریز مانگی یا استایلیش شما. اما فکر کنم الان وقتش باشه که خودتون یه دونه اسکریپت بسازید! خیلی راحته.من فقط کد رو به شما میدم و شما با یکسری دستکاری سلیقه ای ، اسکریپتتون رو میسازید.
tooltip به همون کادر محاوره ای میگن که وقتی روی یک شی یا بعضی لینکها با موس بایستید ظاهر میشه.در ویندوز این منو به رنگ زرد هست و داخلش اطلاعاتی از فایل مثل حجم و شرکت سازده و ... رو مینویسه.در فایرفاکس هم این منوی محاوره ای برای نشان دادن اطلاعاتی هست که براش تعریف کردن .اما ممکنه رنگش با توجه به تمی که استفاده میکنید فرق داشته باشه. ما میخوایم در اینجا رنگ متن، میزان شفافیت ، حاشیه، فونت و اندازه فونت ، و ... همین toolitip ها را با استفاده از یکسری کد که در داخل استایلیش میریزیم، عوض کنیم.
برای شروع، در صورتیکه افزونه Stylish را نصب کرده اید، بر روی آیکن آن که در پایین و سمت راست پنجره فایرفاکس است کلیک کرده و از گزینه Write Style ،بر روی Blank Style کلیک کنید.هم اکنون پنجره ای که در وسط آن هیچ کدی نوشته نشده است ظاهر میگردد.کد زیر را دقیقاً در آن وارد کنید:

#btTooltip,
#un-toolbar-tooltip,
#tooltip,
.tooltip,
#aHTMLTooltip,
#urlTooltip,
tooltip,
#aHTMLTooltip,
#urlTooltip,
#brief-tooltip,
#brief-tooltip-last-updated,
#brief-tooltip-no-unread,
#brief-tooltip-feed-name,
#brief-tooltip-unread-count,
#brief-tooltip-unread-desc,
#brief-tooltip-rows,
#showcaseTooltipLeftArrow,
#showcaseTooltipRightArrow,
#linkReporterTitleTooltip,
#linkReporterURLTooltip,
#linkReporterURLIconTooltip,
#btTooltipTextBox,
#abp-tooltip,
#un-toolbar-tooltip
/*tooltip **/

{
   /*font-weight: normal !important; */
   font-size: 10px !important; 
  font-family: tahoma !important;
  background-color: #D2D1D2 !important;
  color: #FFFFFF !important;
   -moz-border-radius-bottomleft: 7px;
  -moz-border-radius-bottomright: 7px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 7px;
  -moz-appearance: none !important;
  /*border: 1px solid #888888 !important;*/
  border-color: #414141 !important;
  -moz-opacity: 1 !important;
}

اکنون برای نمایش تغییراتی که این کد بر روی tooltip ها اعمال میکند، گزینه Preview رو برگزینید. حال بر روی یک شئ یا لینک رفته (مثلاً همین لینکهای موجود در بخش جستجوی ترفندستان) و مشاهده کنید که چه تغییراتی بر روی tooltip ها اعمال شده.
در ادامه به شما خواهم آموخت که چگونه سایر ویژگیهای ظاهری tooltip ها را براحتی عوض کنید

رنگ متن
برای اینکار در سطری که color: #FFFFFF !important; نوشته شده است، عبارت #FFFFFF را با کلیک موس انتخاب کنید تا هایلایت شود.حال در همین پنجره در بالا از قسمت Insert به بخش Color رفته و رنگ مورد علاقه خود را انتخاب کنید. اکنون بر روی Previw کلیک کنید تا تغییرات اعمال شود.برای دیدن تغییرات، همانطور که در بالا گفتم بر روی یک شئ یا لینک بایستید تا tooltip با رنگ منتخب شما نشان داده شود.

فونت متن
به سطر font-family: tahoma !important; رفته و به جای عبارت tahoma ،یکی یا همه فونتهای Segoe UI, SegoeUI, calibri, verdana, helvetica, Arial را بگذارید.البته بهترین گزینه همین فونت tahoma است.

اندازه فونت
به سطر font-size: 10px !important; بروید و مقدار 10 را به هر مقداری که مایل بودید، عوض کنید.

میزان شفافیت
به سطر -moz-opacity: 1 !important; بروید.عدد یک نشانگر شفافیت 100% است. برای کاهش آن، کافیست که یک عدد اعشاری بین 0 و 1 را برگزینید.مثلاً 0.7

گوشه های tooltip
برای خمیده کردن گوشه های کادر tooltip باید اعدادی را که قبل از واژه px در 4 سطر زیر نوشته شده اند مطابق میلتان عوض کنید.

   -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 5px;

رنگ حاشیه دور کادر tooltip
دور تا دور کادر tooltip نواری باریک وجود دارد.برای عوض کردن رنگ آن:
به سطر border-color: #414141 !important; بروید و رنگ را همانطور که در در قسمت "رنگ متن" توضیح دادم، عوض کنید.


بعد از اعمال تنظیمات و تغییرات خودتون، در فیلد Description توضیحی درباره اسکریپت خودتون بدید و در آخر ، بر روی Save کلیک کنید تا اسکریپت ذخیره شود.

================================================== ========
دیدید که چقدر کار کردن با اسکریپتها آسونه.شما از این به بعد میتونید خودتون هر اسکریپتی رو که دوست داشتید، مطابق میل خودتون ویرایشش کنید.البته ویرایش در حد و حدود همین آموزش که من دادم نه اینکه مثلاً باهاش بازی "خونه سازی" بسازید!!
برای ویرایش اسکریپتها و استایلهای بارگذاری شده در Stylish کافیست بر روی آیکن Stylish آن کلیک کرده و به گزینه Manage Styles رفته و بعد از دابل کلیک بر روی استایل مورد نظر، اون رو ویرایش کنید. کافیه یک کمی سر در بیارید ازش تا غرق در ویرایش استایلها بشید!

[arsenal-champion]

ویرایش شکل ظاهری Adress bar و Search bar

در اینجا میخوایم چند تا تغیییر کوچولو توی نوار آدرس و نوار جستجوی فایرفاکس بدیم. به دو عکس زیر نگاه کنید تا تفاوت رو متوجه بشید:

قبل از عمل!:

بعد از عمل!

با این استایلی که بهتون میدم، شما میتونید گوشه ی هر دو فیلد آدرس و سرچ بار رو گرد کنید(در دو عکس بالا قابل مشاهده نیست!) و به فیلد ها حالت داخل رفته بدهید.
برای شروع ابتدا پس از کلیک بر روی آیکن Stylish ،از گزینه Write Style بر روی Blank Style کلیک کنید و در پنجره باز شده کد زیر را وارد کنید:

#urlbar {
    -moz-appearance: none !important;
    -moz-border-radius: 7px !important;
    padding-right: 1px !important; }

#searchbar .searchbar-textbox {
    -moz-appearance: none !important;
    -moz-border-radius: 3px !important;
    -moz-border-radius: 5px !important; }

سپس بر روی دکمه Preview کلیک کنید تا تغییرات ظاهری را ببینید.
برای ویرایش و دستکاری ، میتوانید عدد 7 که در کد بالا گذاشته ام ، به عددی بیشتر یا کمتر تغییر دهید تا گوشه های فیلد آدرس بار و سرچ بار به شکل منحنی یا به شکل گوشه دار نزدیکتر شوند.
در آخر ، بر روی Save کلیک کنید تا استایل در Stylish ذخیره شود.

[arsenal-champion]

گذاشتن تصویر هنگامیکه صفحه در حال لود شدن است

با این استایل فایرفاکس میتونید قدمی دیگر به سمت شخصی سازی فایرفاکس بردارید. با اجرای این استایل بر روی مرورگر، هنگامیکه یک صفحه یا لینک رو میخواید در یک تب خالی باز کنید، تا هنگامیکه اجزای صفحه یا لینک نشون داده نشود، یک عکس در وسط صفحه نمایش داده میشه.
برای اینکار ابتدا کد زیر را برای ایجاد یک استایل جدید، در استایلیش بارگذاری کنید(در 2 پست قبلی اینکار را آموزش داده ام) :

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);


tabbrowser tabpanels
{
 background: 
url("http://www.imageurlhost.com/images/nz5x66qeswgbchm4hqmu.gif") !important; 

  background-color: #FFFFFF !important;
  margin: 0px !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

در بالا قسمتی را که با رنگ آبی نشان داده ام در واقع لینک همان عکسی است که قرار است نشان داده شود.شما میتوانید بجای آن لینک هر عکس دیگری را قرار دهید.عکسها میتواند با فرمتهای GIF,PNG,GPEG و .. باشد. بعد از گذاشتن لینک مورد نظر خودتان(یا اینکه همین لینک پیشفرض را دست نخورده باقی گذاشتید) بر روی دکمه Preview کلیک کنید.سپس آدرس یک صفحه وب را در یک تب خالی وارد کرده و اینتر بزنید تا برای واردشدن به سایت اقدام شود.مشاهده میکنید که در همین لحظه که صفحه در حال بارگذاری است همان عکسی را که لینکش را گذاشتید دیده میشود.این کار اصلی این استایل است.
یک نکته و ویژگی دیگر هم این استایل دارد.شما میتوانید عکس مورد نظر را به گونه ای تنظیم کنید که بصورت تکراری در همه جای صفحه پخش شود.برای اینکار کافیست که در سطر background-repeat: no-repeat عبارت no-repeat را به repeat تبدیل کنید.
در آخر با گذاشتن نام مناسب برای استایل خود (مثلاً Custom New Tab Loading Image) ، از طریق ردیف Description و Save کردن استایل، به این عملیات شریف پایان دهید!

• این هم یک استایل آماده با یک عکس آماده درون خودش! اگر حوصله انجام کارهای بالا را ندارید!

‌

[arsenal-champion]

در فایرفاکس تب های رنگی داشته باشید

این استایل بسیرا زیبا، تب های شما رو بصورت رنگی در میاره.البته رنگین کمان نه ها! وقتی روی تب با موس وایسید رنگش زرد میشه، وقتی روی یک تب غیر فعال وایسید، رنگش آبی میشه و ...

• رجوع به صفحه بارگذاری استایل ( برای Stylish )

‌

[arsenal-champion]

Find Bar خود را به جنب و جوش درآورید!

اگر میخواید که وقتی یک کلمه ای رو در Find bar (با زدن Ctrl+F در فایرفاکس) میزنید و اون کلمه در صفحه پیدا نمیشه، یک هشداری مثل عکس زیر بیاد کافیه که این استایل رو نصب کنید.

• رجوع به صفحه دانلود استایل

[hamid reza]

با تشکر

لینک پست آخر کار نمیکنه..............

[Alborz_New]

hamid reza
جان نصب شد مشکلی نداره لینک

[arsenal-champion]

حذف گزینه آزار دهنده "Open all in tabs" از منوهای بوکمارک ها

حتماً توی شاخه ها و پوشه های بوکمارکها که میگردید، یک گزینه کاملا بی استفاده به نام Open All in tabs رو مشاهده میکنید که شاید از بین هر 50 هزار کاربر فایرفاکس، فقط یک نفز از این دکمه استفاده کنیم و ما مجبوریم که جر اون یک نفر رو بکشیم! وقتش رسیده که از شر این دکمه خلاص بشیم! پس با این استایل، این کار پسندیده را انجام بدید!

• رجوع به صفحه بارگذاری استایل

[arsenal-champion]

ترکیب دو دکمه Stop و Reload

حتماً میدونید که وقتیکه صفحه در حال لود شدن باشه، دکمه Reload (رفرش) بدرد نمیخوره و وقتیکه صفحه کامل لود شده باشه، دکمه Stop بدرد نمیخوره و در واقع در این دو شرایط این دو دکمه غیر فعالن.پس در واقع در هر شرایطی که باشیم، چه در حال لود صفحه و چه در حالی که صفحه کامل لود شده، فقط یکی از این دو دکمه فعال هست.پس بیاید با این استایل، در موقعیتهای مختلف ، اون دکمه ای که غیرفعال هست رو حذف کنیم تا فضای بیشتری داشته باشیم.
قبل از اینکه بریم سراغ نصب استایل ، باید توجه کنید که دکمه Stop سمت چپ و دکمه Reload سمت راست قرار داشته باشه که استایل کار کنه. اگر اینطور نبود، باید خودتون با استفاده از کلیک راست کردن بر روی یکی از دکمه ها و انتخاب گزینه Customize ، جابجاشون کنید.یعنی اینطوری بشن در آخر:

• رجوع به صفحه دانلود استایل

این استایل یکی از قدیمیترین و پر طرفدار ترین استایلهای سایت userstyles.org هست

[arsenal-champion]

تغییر رنگ هایلایت

در حالت عادی وقتی یک متن رو در مرورگر انتخاب(هایلایت) میکنید، با رنگ آبی مشخص میشه.اگر دوست دارید این رنگ رو به رنگ دیگری عوض کنید، کد زیر را در استایلیش وارد کنید:

::-moz-selection { color: #FF0000 ! important; background-color: #FDFF00 ! important; }

در این کد رنگ پیشفرض ، زرد است.اگر دوست دارید آنرا تغییر دهید کافیست عبارتی که زیر آن خط کشیده شده است را با یک کد رنگ دیگر، از طریق منوی Insert و بخش Color عوض کنید.