28Jun

Jak dostosować wygląd przycisku menu Orange Firefox

Czy masz już dość patrzenia na pomarańczowy przycisk menu Firefox? Interfejs Firefoksa jest w pełni konfigurowalny, więc możesz zmienić kolor, tekst i inne właściwości przycisku menu Firefox, aby stworzyć własny, niestandardowy wygląd.

Aby zmienić wygląd przycisku menu Firefox, edytujemy plik userChrome.css. Ten plik pozwala zmienić wygląd dowolnej części Firefoksa, a także jego funkcjonalność.

Przed przystąpieniem do edycji pliku userChrome.css zainstalujemy dodatek o nazwie ChromEdit Plus, który umożliwi nam łatwą edycję pliku i zapisanie go w odpowiednim formacie. Kliknij poniższy link, aby przejść do strony ChromEdit Plus.

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

Kliknij przycisk Dodaj do przeglądarki Firefox na stronie.

Wyświetlana może być następująca wiadomość.Kliknij Zezwalaj, aby kontynuować instalację dodatku ChromEdit Plus.

UWAGA: Zachowaj szczególną ostrożność podczas instalacji rozszerzeń i innego oprogramowania. Jeśli nie masz pewności co do produktu lub nie ufasz firmie, nie instaluj. Testowaliśmy ChromEdit Plus i stwierdziliśmy, że jest bezpieczny i niezawodny.

Wyświetlane jest okno dialogowe Instalacja oprogramowania. Kliknij Zainstaluj teraz, które może być niedostępne do czasu zakończenia odliczania.

UWAGA: Możesz zmienić długość odliczania na przycisku Instaluj, ale nie zalecamy wyłączania go.

Musisz ponownie uruchomić Firefoksa, aby zakończyć instalację.Kliknij przycisk Uruchom ponownie teraz w wyskakującym oknie dialogowym.

Po ponownym uruchomieniu przeglądarki Firefox przycisk ChromEdit Plus zostanie dodany po prawej stronie pola Adres. Kliknij, aby otworzyć okno ChromEdit Plus.

Domyślnie są trzy zakładki w oknie ChromEdit Plus. Będziemy edytować plik userChrome.css, który znajduje się na pierwszej karcie. Jeśli karta jest pusta, skopiuj i wklej następujący tekst na karcie userChrome.css i kliknij przycisk Zapisz. To daje domyślny plik userChrome.css.

@namespace url( "http: //www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul");
# appmenu-button{
background: #orange! Important; important;
}
# dropmarker przycisku menu aplikacji: przed{ zawartość
: "Firefox"! Important;
kolor: #FFFFFF! Ważne;
}
# przycisk menu. button-text{ Wyświetlanie
: brak! Ważne;
}

Być może już masz plik userChrome.css, w którym to przypadku na karcie userChrome.css będzie już tekst. Skopiuj cały tekst powyżej, z wyjątkiem pierwszego wiersza, linii @namespace i wklej go na kartę gdzieś po linii @namespace. Jeśli chcesz zachować to, co już masz, możesz wkleić powyższy tekst na końcu pliku.

WAŻNE: Upewnij się, że wszystkie cytaty w userChrome.css NIE są cytatami inteligentnymi, w tym znakami z linii @namespace. Powinny być zwykłymi, prostymi cytatami. Jeśli którykolwiek z nich to inteligentne cytaty, plik w ogóle nie wpłynie na wygląd Firefoksa.

Kliknij przycisk Uruchom ponownie, aby ponownie uruchomić przeglądarkę Firefox, używając nowego lub poprawionego pliku userChrome.css.

W tym przykładzie zmieniamy kolor tła na ciemnoniebieski i zmieniamy tekst "Firefox" na "How-To Geek".

Aby zmienić kolor tła, zmień tekst "#orange" na linii "background" w sekcji "# appmenu-button" na inny kolor, używając kodu koloru hex lub kodu koloru HTML.Na przykład wybraliśmy kolor ciemnoniebieski z kodem heksadecymalnym # 2C4362.

UWAGA: Aby obliczyć kod koloru hex dla żądanego koloru, zobacz nasze artykuły o uzyskiwaniu kodów kolorów szesnastkowych z kolorów dziesiętnych RGB, wybieraniu kolorów z dowolnego miejsca na ekranie i uzyskiwaniu kodów kolorów w różnych formatach.

Aby zmienić tekst na przycisku, zmień tekst "Firefox" w wierszu "content" w sekcji "# appmenu-button dropmarker: before" na żądany tekst, na przykład "How-To Geek".Dodaliśmy spację po tekście, aby uzyskać więcej miejsca między tekstem a strzałką w dół na przycisku.

Możesz również zmienić kolor tekstu, zmieniając wiersz "kolor" w tym samym "# przycisku upuszczania przycisku menu aplikacji:" przed ".Zostawiliśmy kolor tekstu jako biały( #FFFFFF), ale można go zmienić na kolor jasnoszary( # F2F2F2) lub coś w tym stylu.

Kliknij przycisk Zapisz, a następnie Uruchom ponownie, aby zmiany zostały wprowadzone.

Przycisk jest teraz granatowy i mówi "How-To Geek".

Do przycisku można również dodać obraz tła, oprócz zmiany koloru tła. Stworzyliśmy obraz, który ma favikon How-To Geek po lewej stronie i przezroczyste tło, dzięki czemu ciemnoniebieski kolor tła jest widoczny. Aby dodać obraz tła do przycisku, dodaj następujący wiersz do sekcji "# appmenu-button", zmieniając ścieżkę w cudzysłowie do lokalizacji obrazu na komputerze. Pozostaw "plik: ///" w ścieżce.

background-image: url( "file: /// C: /Users/Lori/Pictures/ htg_background.png")! Important;

Kliknij przycisk Zapisz i ponownie uruchom ponownie.

Teraz nasz przycisk jest kompletny.

Możesz również dostosować przycisk menu Firefox, przekształcając go w ikonę.Opublikowaliśmy także wiele innych wskazówek i usprawnień, które pozwalają w pełni wykorzystać możliwości Firefoksa.