Вам не набридає дивитися на оранжеву кнопку меню Firefox? Інтерфейс Firefox повністю настроюється, тому ви можете змінити колір, текст та інші властивості кнопки меню Firefox, щоб створити свій власний вигляд.
Щоб змінити вигляд кнопки меню Firefox, ми будемо редагувати файл userChrome.css. Цей файл дозволяє змінити зовнішній вигляд будь-якої частини Firefox, а також його функціональні можливості.
Перш ніж зайнятися редагуванням файлу userChrome.css, ми встановимо надбудову під назвою ChromEdit Plus, яка дозволить нам легко відредагувати файл та зберегти його у правильному форматі. Клацніть на таке посилання, щоб перейти на веб-сторінку ChromEdit Plus.
Натисніть кнопку Додати у Firefox на сторінці.
Може відобразитися таке повідомлення. Клацніть Дозволити, щоб продовжити встановлення надбудови ChromEdit Plus.
ПРИМІТКА. Будьте дуже обережні щодо того, що дозволяєте встановлювати розширення та інше програмне забезпечення. Якщо ви не впевнені в продукті або не довіряєте компанії, не встановлюйте. Ми протестували ChromEdit Plus і виявили, що він безпечний і надійний.
З'явиться діалогове вікно Встановлення програмного забезпечення. Натисніть кнопку Встановити зараз, яка може бути недоступною, поки не закінчиться зворотний відлік.
ПРИМІТКА: Ви можете змініть тривалість зворотного відліку на кнопці Встановити , але ми не рекомендуємо його відключати.
Вам потрібно перезапустити Firefox, щоб закінчити встановлення. У спливаючому діалоговому вікні натисніть кнопку Перезапустити зараз.
Після перезапуску Firefox праворуч від поля Адреса додається кнопка ChromEdit Plus. Клацніть на ньому, щоб відкрити вікно ChromEdit Plus.
За замовчуванням у вікні ChromEdit Plus є три вкладки. Ми будемо редагувати файл userChrome.css, який знаходиться на першій вкладці. Якщо вкладка порожня, скопіюйте та вставте наступний текст на вкладку userChrome.css і натисніть Зберегти. Це дає вам файл userChrome.css за замовчуванням.
URL-адреса @namespace (“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
# appmenu-button {
фон: # апельсин! важливо;
}
# appmenu-button dropmarker: до {
зміст: “Firefox”! важливо;
колір: #FFFFFF! важливо;
}
# appmenu-button .button-text {
дисплей: немає! важливо;
}
Можливо, у вас вже є файл userChrome.css, і в цьому випадку на вкладці userChrome.css вже буде текст. Скопіюйте весь текст вище, крім першого рядка, рядок @namespace, і вставте його на вкладку десь після рядка @namespace. Якщо ви хочете зберегти те, що вже маєте, ви можете вставити наведений текст у кінець файлу.
ВАЖЛИВО: Переконайтесь, що всі лапки в userChrome.css НЕ є розумними лапками, включаючи ті, що в рядку @namespace. Вони повинні бути звичайними, прямими цитатами. Якщо будь-яка з них є розумними лапками, файл взагалі не вплине на зовнішній вигляд Firefox.
Клацніть Перезапустити, щоб перезапустити Firefox за допомогою нового або оновленого файлу userChrome.css.
У цьому прикладі ми збираємось змінити колір тла на темно-синій і змінити текст “Firefox” на “How-To Geek”.
Щоб змінити колір фону, змініть текст "#orange" на рядку "background" у розділі "# appmenu-button" на інший колір, використовуючи шістнадцятковий код кольору або HTML-код. Наприклад, ми вибрали темно-синій із шістнадцятковим кодом кольору # 2C4362.
ПРИМІТКА. Щоб дізнатись шістнадцятковий код кольору для потрібного кольору, див. Наші статті про отримання шістнадцяткових кодів кольорів із десяткових кольорів RGB , вибір кольорів з будь-якого місця на екрані , і отримання кольорових кодів у різних форматах .
Щоб змінити текст на кнопці, змініть текст “Firefox” у рядку “вміст” у розділі “# appmenu-button dropmarker: before” на потрібний текст, наприклад “How-To Geek”. Ми додали пробіл після тексту, щоб було більше місця між текстом і стрілкою спадного меню на кнопці.
Ви також можете змінити колір тексту, змінивши рядок “колір” у тому самому розділі “# appmenu-button dropmarker: before”. Колір тексту ми залишили білим (#FFFFFF), але ви можете змінити його на щось на зразок світло-сірого (# F2F2F2) або щось подібне.
Натисніть Зберегти, а потім Перезавантажте, щоб зміни набрали чинності.
Кнопка стала темно-синьою і написала “How-To Geek”.
Ви також можете додати фонове зображення до кнопки, окрім того, щоб змінити колір фону. Ми створили зображення, що має ліворуч значок How-To Geek та прозоре тло, щоб просвічувався темно-синій колір фону. Щоб додати фонове зображення до кнопки, додайте наступний рядок до розділу «# appmenu-button», змінивши шлях у лапках до місця розташування вашого зображення на вашому комп’ютері. Залиште “file: ///” у шляху.
background-image: url (“file: /// C: /Users/Lori/Pictures/htg_background.png”)!
Натисніть Зберегти та перезапустіть ще раз.
Тепер наша кнопка завершена.
Ви також можете налаштувати кнопку меню Firefox, перетворивши її на піктограму. Ми також опублікували багато інших поради та коригування, щоб отримати максимум користі від Firefox .
