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

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

Видео: Как да персонализирате външния вид на бутона

Видео: Как да персонализирате външния вид на бутона
Видео: 8 ПРИЛОЖЕНИЙ на Андроид, которые необходимо УДАЛИТЬ прямо сейчас! - 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" на линията "фона" в секцията "# 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".
Можете също така да добавите фоново изображение към бутона, освен да промените цвета на фона. Създадохме изображение, което има фаворит "Как да" Geek вляво и прозрачен фон, така че цветът на тъмносиния фон показва. За да добавите фоново изображение към бутона, добавете следния ред в секцията "# appmenu-button", като промените пътя в кавичките до мястото на вашето изображение на вашия компютър. Оставете "file: ///" в пътя.
Можете също така да добавите фоново изображение към бутона, освен да промените цвета на фона. Създадохме изображение, което има фаворит "Как да" Geek вляво и прозрачен фон, така че цветът на тъмносиния фон показва. За да добавите фоново изображение към бутона, добавете следния ред в секцията "# appmenu-button", като промените пътя в кавичките до мястото на вашето изображение на вашия компютър. Оставете "file: ///" в пътя.

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

Кликнете отново върху Запазване и рестартиране.

Препоръчано: