نحوهی ایجاد تغییر در ظاهر دکمهی نارنجیرنگ فایرفاکس
همانطور که میدانید در مرورگر Firefox، دکمهی نارنجیرنگی در بالای سمت چپ مرورگر قرار دارد که با کلیک بر آن امکان دسترسی به گزینههای مختلف مرورگر فراهم میشود. در این ترفند قصد داریم به معرفی نحوهی ایجاد تغییراتی در ظاهر این دکمه بپردازیم. تغییراتی شامل تغییر رنگ پشتزمینهی دکمه، تغییر متن آن و تغییر رنگ این متن.
بدین منظور:
ابتدا بر روی این دکمهی نارنجیرنگ کلیک کرده و از منوی Help بر روی Troubleshooting Information کلیک کنید.
در تب باز شده، در بخش Application Basics و قسمت Profile Folder بر روی دکمهی Show Folder کلیک نمایید.
اکنون (ترفندستان) در پنجرهی باز شده، وارد پوشهی chrome شوید (در صورتی که چنین پوشهای موجود نیست خودتان آن را ایجاد کنید).
در این مرحله اطمینان پیدا کنید قابلیت دیدن پسوند فایلها در محیط ویندوز فعال است. بدین منظور از طریق Control Panel وارد Folder Options شده و در پنجره باز شده به تب View بروید. اکنون اطمینان پیدا کنید گزینهی Hide extensions for known file types تیک نخورده باشد.
حال در این پوشه، بر روی فضای خالی از صفحه راست کلیک کرده و New > Text Document را فعال کنید.
نام این فایل را userChrome و پسوند آن را css قرار دهید (userChrome.css).
اکنون بر روی userChrome.css راست کلیک کرده و Open With > Notepad را انتخاب کنید تا این فایل با Notepad باز شود.
اکنون در محیط Notepad کدهای زیر را Copy و Paste کنید:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appmenu-button
{
background: #FFA500 !important;
}
#appmenu-button dropmarker:before {
content: "Firefox" !important;
color: #FFFFFF !important;
}
#appmenu-button .button-text {
display: none !important;
}
در این قست از کد شما میتوانید رنگ پشتزمینهی دکمه را تغییر دهید:
background: #FFA500 !important;
دقت کنید FFA500 کد رنگ نارنجی بر مبنای کد HEX است. در صورتی که قصد تغییر رنگ را دارید بایستی کد رنگ مورد نظر خود را به جای این کد رنگ کنونی وارد کنید.
لیست کد رنگهای HEX بدین صورت است:
مشکی:
#000000
قرمز:
#FF0000
سبز:
#00FF00
آبی:
#0000FF
زرد:
#FFFF00
فیروزهای:
#00FFFF
صورتی:
#FF00FF
خاکستری:
#C0C0C0
سفید:
#FFFFFF
به عنوان مثال اگر قصد تغییر رنگ دکمه به آبی را داشته باشیم کد ما در این خط بدین صورت خواهد بود:
background: #0000FF !important;
همچنین در این خط میتوانید متن دکمه را تغییر دهید:
content: "Firefox" !important;
کافی است به جای Firefox عبارت مورد نظر خود را وارد کنید.
برای تغییر رنگ متن دکمه نیز بایستی این خط را ویرایش کنید:
color: #FFFFFF !important;
در این خط نیز بایستی کد رنگ در مبنای HEX را وارد کنید.
در نهایت فایل را Save کرده و برای ایجاد تغییر در مرورگر یکبار مرورگر را به طور کامل بسته و آن را از نو باز کنید.
سطح ترفند: پیشرفته
