Как да персонализирате външния вид на оранжевия бутон на менюто на Firefox

Омръзна ли ви се да гледате оранжевия бутон на менюто на Firefox? Интерфейсът на Firefox е напълно приспособим, така че можете да промените цвета, текста и другите свойства на бутона на менюто на Firefox, за да създадете свой собствен потребителски изглед.

За да промените вида на бутона на менюто на Firefox, ще редактираме файла userChrome.css. Този файл ви позволява да промените външния вид на която и да е част на Firefox, както и неговата функционалност.

Преди да се потопим в редактирането на файла userChrome.css, ще инсталираме добавка, наречена ChromEdit Plus, която ще ни позволи лесно да редактираме файла и да го запазим в правилния формат. Кликнете върху следната връзка, за да отидете на уеб страницата на ChromEdit Plus.

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

Кликнете върху бутона Добавяне към Firefox на страницата.

Може да се покаже следното съобщение. Щракнете върху Разрешаване, за да продължите инсталирането на добавката на 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
фон: #orange! значение;

# appmenu-button dropmarker: преди
съдържание: „Firefox“!
цвят: #FFFFFF!

# appmenu-button .button-text
дисплей: никой! важен;

Вероятно вече имате файл userChrome.css, в който случай вече ще има текст на табчето userChrome.css. Копирайте целия текст по-горе, с изключение на първия ред, на линията @namespace и го поставете в раздела някъде след линията @namespace. Ако искате да запазите това, което вече имате, можете да поставите горния текст в края на файла.

ВАЖНО: Уверете се, че всички кавички в userChrome.css НЕ са интелигентни кавички, включително тези в линията @namespace. Те трябва да са обикновени, прави цитати. Ако някой от тях е умен цитат, файлът няма да повлияе на изгледа на Firefox.

Кликнете върху Рестартиране, за да рестартирате Firefox, като използвате новия или преработен файл userChrome.css.

В този пример ще променим цвета на фона на тъмно синьо и ще сменим текста „Firefox“ на „Как да ...“.

За да промените цвета на фона, променете текста "#orange" в реда "background" в секцията "# appmenu-button" до различен цвят, като използвате шестнадесетичния цветен код или HTML цветовия код. Например, избрахме тъмно синьо с шестнадесетичен цветен код на # 2C4362.

ЗАБЕЛЕЖКА: За да разберете шестнадесетичния цветен код за желания от вас цвят, вижте нашите статии за получаване на шестнадесетични цветни кодове от десетични RGB цветове, избиране на цветове от всяко място на екрана и получаване на цветни кодове в различни формати.

За да промените текста на бутона, променете текста на „Firefox“ в реда „съдържание“ в секцията „# appmenu-button dropmarker: before“ до желания от вас текст, като например „How-To Geek“. Добавихме интервал след текста, за да имаме повече място между текста и стрелката на падащото меню върху бутона.

Можете да изберете и да промените цвета на текста, като промените линията "color" в същия раздел "# 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.