Sådan tilpasses udseendet af Orange Firefox Menu Button

Bliver du træt af at se på den orange Firefox menuknap? Firefox-grænsefladen er helt tilpasset, så du kan ændre farve, tekst og andre egenskaber i Firefox-menuknappen for at oprette dit eget brugerdefinerede udseende.

For at ændre udseendet af Firefox-menuknappen redigerer vi filen userChrome.css. Denne fil giver dig mulighed for at ændre udseendet af enhver del af Firefox, såvel som dens funktionalitet.

Inden du dyker til redigering af filen userChrome.css, installerer vi et tilføjelsesprogram, kaldet ChromEdit Plus, som gør det muligt for os at redigere filen nemt og gemme det i det korrekte format. Klik på følgende link for at gå til ChromEdit Plus-websiden.

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

Klik på knappen Tilføj til Firefox på siden.

Følgende meddelelse kan blive vist. Klik på Tillad for at fortsætte med at installere ChromEdit Plus-tilføjelsen.

BEMÆRK: Vær meget forsigtig med hvad du tillader, når du installerer udvidelser og anden software. Hvis du ikke er sikker på produktet eller ikke har tillid til virksomheden, skal du ikke installere. Vi testede ChromEdit Plus og fandt det sikkert og pålideligt.

Dialogboksen Softwareinstallation vises. Klik på Installer nu, som muligvis ikke er tilgængelig, før en nedtælling er færdig.

BEMÆRK: Du kan ændre længden af ​​nedtællingen på Install-knappen, men vi anbefaler ikke at deaktivere den.

Du skal genstarte Firefox for at afslutte installationen. Klik på Genstart nu i popup-dialogboksen.

Når Firefox genstarter, tilføjes ChromEdit Plus-knappen til højre for adressefeltet. Klik på den for at åbne ChromEdit Plus-vinduet.

Der er som standard tre faner i ChromEdit Plus-vinduet. Vi redigerer userChrome.css filen, som er på den første fane. Hvis fanen er tom, skal du kopiere og indsætte den følgende tekst på fanen userChrome.css og klikke på Gem. Dette giver dig en standard userChrome.css fil.

@namespace url ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# appmenu-knap
baggrund: #orange! vigtigt;

# dropdowner til appmenu-knap: før
indhold: "Firefox"! vigtigt;
farve: #FFFFFF! vigtigt;

# appmenu-knap. knap-tekst
display: ingen! vigtigt;

Du har måske allerede en userChrome.css-fil, i hvilket tilfælde der allerede er tekst på fanen userChrome.css. Kopier al teksten ovenfor, undtagen for den første linje, linjen @namespace og indsæt den på fanen et sted efter @namespace-linjen. Hvis du vil beholde det, du allerede har, kan du indsætte ovenstående tekst i slutningen af ​​filen.

VIGTIGT: Sørg for, at alle citater i userChrome.css ikke er smarte citater, herunder dem i @namespace-linjen. De skal være almindelige, lige citater. Hvis nogen af ​​dem er smarte citater, vil filen slet ikke påvirke Firefox.

Klik på Genstart for at genstarte Firefox ved hjælp af den nye eller reviderede brugerChrome.css-fil.

I dette eksempel skal vi ændre baggrundsfarven til en mørk blå og ændre "Firefox" -teksten til "How-To Geek".

Hvis du vil ændre baggrundsfarven, skal du ændre "#orange" -teksten på linjen "baggrund" i afsnittet "# appmenu-knappen" til en anden farve ved hjælp af hex-farvekoden eller HTML-farvekode. For eksempel valgte vi en mørk blå med hex farvekode på # 2C4362.

BEMÆRK: For at finde ud af hex farvekoden for en farve, du ønsker, kan du se vores artikler om at få hex farvekoder fra decimale RGB farver, vælge farver fra hvor som helst på skærmen og få farvekoder i flere formater.

Hvis du vil ændre teksten på knappen, skal du ændre "Firefox" -teksten på linjen "indhold" i afsnittet "# appmenu-knap-markør: før" til den ønskede tekst, f.eks. "Hvordan-til-geek". Vi tilføjede et mellemrum efter at teksten har mere plads mellem teksten og rullemenuen på knappen.

Du kan også vælge at ændre farven på teksten ved at ændre linjen "farve" i samme "# appmenu-knap dropmarker: før" sektion. Vi forlod tekstfarven som hvid (#FFFFFF), men du kan ændre den til noget som en lysegrå (# F2F2F2) eller sådan noget.

Klik på Gem og genstart for at få ændringerne til at fungere.

Knappen er nu mørk blå og siger "How-To Geek".

Du kan også tilføje et baggrundsbillede til knappen, ud over at ændre baggrundsfarven. Vi har lavet et billede, der har How-To Geek favicon til venstre og en gennemsigtig baggrund, så den mørkeblå baggrundsfarve viser sig igennem. For at tilføje et baggrundsbillede til din knap, skal du føje følgende linje til afsnittet "# appmenu-knap" og ændre stien i citaterne til placeringen af ​​dit billede på din computer. Forlad filen "///" i stien.

baggrundsbillede: url ("file: /// C: /Users/Lori/Pictures/htg_background.png")! vigtigt;

Klik på Gem og genstart igen.

Nu er vores knap færdig.

Du kan også tilpasse Firefox-menuknappen ved at konvertere den til et ikon. Vi har også udgivet mange andre tips og tweaks for at få mest muligt ud af Firefox.