Вы устали смотреть на оранжевую кнопку меню 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: before {
содержание: «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» в строке «content» в разделе «# 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 («файл: /// C: /Users/Lori/Pictures/htg_background.png»)! important;
Снова нажмите «Сохранить и перезапустить».
Теперь наша кнопка готова.
Вы также можете настроить кнопку меню Firefox, преобразовав ее в значок. Мы также опубликовали много других советы и подсказки для максимально эффективного использования Firefox .
