Як налаштувати вигляд помаранчевої кнопки меню Firefox

Ви втомилися дивитися на помаранчеву кнопку меню Firefox? Інтерфейс Firefox повністю настроюється, тому ви можете змінити колір, текст і інші властивості кнопки меню Firefox, щоб створити свій власний вигляд.

Щоб змінити вигляд кнопки меню Firefox, ми будемо редагувати файл userChrome.css. Цей файл дозволяє змінювати зовнішній вигляд будь-якої частини Firefox, а також його функціональність.

Перед тим, як зануритись у редагування файлу userChrome.css, ми встановимо додатковий компонент, який називається ChromEdit Plus, який дозволить нам легко редагувати файл і зберігати його у правильному форматі. Щоб перейти на веб-сторінку ChromEdit Plus, перейдіть за цим посиланням.

http://webdesigns.ms11.net/chromeditp.html

Натисніть кнопку Додати до Firefox на сторінці.

Може відображатися таке повідомлення. Натисніть Allow (Дозволити), щоб продовжити встановлення надбудови ChromEdit Plus.

ПРИМІТКА. Будьте дуже обережні щодо можливості встановлення розширень та іншого програмного забезпечення. Якщо ви не впевнені в продукті або не довіряєте компанії, не встановлюйте її. Ми перевірили ChromEdit Plus і визнали його безпечним і надійним.

Відобразиться діалогове вікно "Встановлення програмного забезпечення". Натисніть кнопку "Встановити зараз", який може бути недоступним до завершення відліку.

ПРИМІТКА. Можна змінити тривалість зворотного відліку за допомогою кнопки Встановити, але ми не рекомендуємо вимикати його.

Щоб завершити встановлення, потрібно перезапустити Firefox. Натисніть Перезапустити зараз у спливаючому діалоговому вікні.

Після перезавантаження Firefox кнопка ChromEdit Plus додана праворуч від поля Адреса. Натисніть її, щоб відкрити вікно ChromEdit Plus.

За промовчанням у вікні ChromEdit Plus є три вкладки. Ми будемо редагувати файл userChrome.css, який знаходиться на першій вкладці. Якщо вкладка порожня, скопіюйте та вставте наступний текст на вкладку userChrome.css і натисніть Зберегти. Це дає вам файл за замовчуванням userChrome.css.

@namespace url (“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
# appmenu-button
background: #orange! important;

# appmenu-button dropmarker: до
зміст: "Firefox"! важливий;
колір: #FFFFFF!

# appmenu-button .button-text
display: none!

Можливо, у вас вже є файл 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", змінивши шлях у лапках до місця розташування зображення на вашому комп'ютері. Залиште файл "///" у шляху.

background-image: url (“file: /// C: /Users/Lori/Pictures/htg_background.png”)!

Натисніть Зберегти та перезапустити знову.

Тепер наша кнопка завершена.

Кнопку меню Firefox можна також налаштувати, перетворивши її на піктограму. Ми також опублікували багато інших порад та налаштувань для максимального використання Firefox.