Как настроить внешний вид кнопки меню Orange Firefox

Как настроить внешний вид кнопки меню Orange Firefox
Как настроить внешний вид кнопки меню Orange Firefox

Видео: Как настроить внешний вид кнопки меню Orange Firefox

Видео: Как настроить внешний вид кнопки меню Orange Firefox
Видео: Пару слов про Microsoft MSN Messenger - YouTube 2024, Апрель
Anonim
Вы устали смотреть на оранжевую кнопку меню Firefox? Интерфейс Firefox полностью настраивается, поэтому вы можете изменить цвет, текст и другие свойства кнопки меню Firefox, чтобы создать свой собственный внешний вид.
Вы устали смотреть на оранжевую кнопку меню Firefox? Интерфейс Firefox полностью настраивается, поэтому вы можете изменить цвет, текст и другие свойства кнопки меню Firefox, чтобы создать свой собственный внешний вид.

Чтобы изменить внешний вид кнопки меню Firefox, мы будем редактировать файл userChrome.css. Этот файл позволяет вам изменять внешний вид любой части Firefox, а также ее функциональность.

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

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

Нажмите кнопку «Добавить в Firefox» на странице.

Может отображаться следующее сообщение. Нажмите «Разрешить», чтобы продолжить установку дополнения ChromEdit Plus.
Может отображаться следующее сообщение. Нажмите «Разрешить», чтобы продолжить установку дополнения ChromEdit Plus.

ПРИМЕЧАНИЕ. Будьте очень осторожны с тем, что вы разрешаете при установке расширений и другого программного обеспечения. Если вы не уверены в продукте или не доверяете компании, не устанавливайте его. Мы протестировали ChromEdit Plus и нашли его безопасным и надежным.

Откроется диалоговое окно «Установка программного обеспечения». Нажмите «Установить сейчас», что может быть недоступно до окончания обратного отсчета.
Откроется диалоговое окно «Установка программного обеспечения». Нажмите «Установить сейчас», что может быть недоступно до окончания обратного отсчета.

ПРИМЕЧАНИЕ. Вы можете изменить длину обратного отсчета на кнопке установки, но мы не рекомендуем отключать его.

Для завершения установки необходимо перезапустить Firefox. Нажмите «Перезагрузить сейчас» во всплывающем диалоговом окне.
Для завершения установки необходимо перезапустить Firefox. Нажмите «Перезагрузить сейчас» во всплывающем диалоговом окне.
После перезагрузки Firefox кнопка «ChromEdit Plus» добавляется справа от поля «Адрес». Щелкните по нему, чтобы открыть окно ChromEdit Plus.
После перезагрузки Firefox кнопка «ChromEdit Plus» добавляется справа от поля «Адрес». Щелкните по нему, чтобы открыть окно ChromEdit Plus.
В окне ChromEdit Plus по умолчанию есть три вкладки. Мы будем редактировать файл userChrome.css, который находится на первой вкладке. Если вкладка пуста, скопируйте и вставьте следующий текст на вкладку userChrome.css и нажмите «Сохранить». Это дает вам файл userChrome.css по умолчанию.
В окне ChromEdit Plus по умолчанию есть три вкладки. Мы будем редактировать файл userChrome.css, который находится на первой вкладке. Если вкладка пуста, скопируйте и вставьте следующий текст на вкладку userChrome.css и нажмите «Сохранить». Это дает вам файл userChrome.css по умолчанию.

@namespace url(“https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”); #appmenu-button { background: #orange !important; } #appmenu-button dropmarker:before { content: “Firefox” !important; color: #FFFFFF !important; } #appmenu-button.button-text { display: none !important; }

Возможно, у вас уже есть файл userChrome.css, и в этом случае на вкладке userChrome.css уже будет текст. Скопируйте весь текст выше, за исключением первой строки, строки @namespace и вставьте ее на вкладку где-то после строки @namespace. Если вы хотите сохранить то, что у вас уже есть, вы можете вставить указанный выше текст в конце файла.

ВАЖНО: убедитесь, что все кавычки в userChrome.css не являются умными кавычками, в том числе те, что указаны в строке @namespace. Они должны быть обычными, прямыми цитатами. Если какой-либо из них является смарт-кавычками, файл вообще не повлияет на внешний вид Firefox.

Нажмите «Перезагрузить», чтобы перезапустить Firefox, используя новый или измененный файл userChrome.css.

В этом примере мы изменим цвет фона на синий и изменим текст «Firefox» на «How-To Geek».
В этом примере мы изменим цвет фона на синий и изменим текст «Firefox» на «How-To Geek».

Чтобы изменить цвет фона, измените текст «#orange» в строке «background» в разделе «# appmenu-button» на другой цвет, используя шестнадцатеричный цветовой код или код цвета HTML. Например, мы выбрали синий цвет с шестнадцатеричным цветовым кодом # 2C4362.

ПРИМЕЧАНИЕ. Чтобы узнать размер шестнадцатеричного цвета для нужного цвета, см. Наши статьи о получении шестнадцатеричных цветовых кодов из десятичных цветов RGB, выборе цветов из любого места на экране и получении цветовых кодов в нескольких форматах.

Чтобы изменить текст на кнопке, измените текст «Firefox» в строке «контент» в разделе «# appmenu-button dropmarker: before» до нужного вам текста, например «How-To Geek». Мы добавили пробел после текста, чтобы иметь больше места между текстом и стрелкой раскрывающегося списка на кнопке.

Вы также можете изменить цвет текста, изменив строку «цвет» в том же разделе «# addmenu-button dropmarker: before». Мы оставили цвет текста белым (#FFFFFF), но вы можете изменить его на что-то вроде светло-серого (# F2F2F2) или что-то в этом роде.

Нажмите «Сохранить» и затем «Перезагрузка», чтобы изменения вступили в силу.

Теперь кнопка темно-синяя и говорит «How-To Geek».
Теперь кнопка темно-синяя и говорит «How-To Geek».
Вы также можете добавить фоновое изображение к кнопке, в дополнение к изменению цвета фона. Мы создали изображение, в котором есть значок «How-To Geek» слева и прозрачный фон, благодаря чему проходит синий цвет фона. Чтобы добавить фоновое изображение к вашей кнопке, добавьте следующую строку в раздел «# appmenu-button», изменив путь в кавычках на местоположение вашего изображения на вашем компьютере. Оставьте «файл: ///» в пути.
Вы также можете добавить фоновое изображение к кнопке, в дополнение к изменению цвета фона. Мы создали изображение, в котором есть значок «How-To Geek» слева и прозрачный фон, благодаря чему проходит синий цвет фона. Чтобы добавить фоновое изображение к вашей кнопке, добавьте следующую строку в раздел «# appmenu-button», изменив путь в кавычках на местоположение вашего изображения на вашем компьютере. Оставьте «файл: ///» в пути.

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

Нажмите «Сохранить» и «Перезапустить» еще раз.

Рекомендуемые: