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, dzięki czemu 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, będziemy edytować 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 pozwoli nam z łatwością edytować plik i zapisać go w odpowiednim formacie. Kliknij poniższy link, aby przejść do strony ChromEdit Plus.

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

Kliknij przycisk Dodaj do Firefox na stronie.

Może wyświetlić się następujący komunikat. Kliknij Zezwalaj, aby kontynuować instalację dodatku ChromEdit Plus.

UWAGA: Zachowaj szczególną ostrożność podczas wprowadzania 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świetlone zostanie okno dialogowe Instalacja oprogramowania. Kliknij Zainstaluj teraz, które może być niedostępne do czasu zakończenia odliczania.

UWAGA: Możesz zmienić czas 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 go, 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
tło: #orange! important;

# dropmarker przycisku aplikacji: przed
treść: "Firefox"! ważne;
kolor: #FFFFFF! important; important;

# appmenu-button .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 Uruchom ponownie, aby ponownie uruchomić przeglądarkę Firefox przy użyciu 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 heksadecymalnego dla wybranego koloru, zobacz nasze artykuły o uzyskiwaniu kodów kolorów szesnastkowych z dziesiętnych kolorów RGB, wybieraniu kolorów z dowolnego miejsca na ekranie i uzyskiwaniu kodów kolorów w wielu formatach.

Aby zmienić tekst na przycisku, zmień tekst "Firefox" na linii "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 "# appmenu-button dropmarker: before" sekcji. Zostawiliśmy kolor tekstu jako biały (#FFFFFF), ale można go zmienić na kolor jasnoszary (# F2F2F2) lub coś podobnego.

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

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

Możesz również dodać obraz tła do przycisku, 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; important;

Kliknij Zapisz i ponownie uruchom ponownie.

Teraz nasz przycisk jest kompletny.

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