Hoe de verschijning van de oranje Firefox-menuknop aan te passen

Ben je het beu om naar de oranje menuknop van Firefox te kijken? De interface van Firefox is volledig aanpasbaar, dus u kunt de kleur, tekst en andere eigenschappen van de menuknop van Firefox wijzigen om uw eigen aangepaste uiterlijk te creëren.

Om het uiterlijk van de Firefox-menuknop te wijzigen, zullen we het userChrome.css-bestand bewerken. Met dit bestand kunt u het uiterlijk van elk deel van Firefox, evenals de functionaliteit ervan, wijzigen.

Voordat we gaan duiken in het bewerken van het userChrome.css-bestand, zullen we een invoegtoepassing, genaamd ChromEdit Plus, installeren, waarmee we het bestand gemakkelijk kunnen bewerken en in de juiste indeling kunnen opslaan. Klik op de volgende koppeling om naar de ChromEdit Plus-webpagina te gaan.

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

Klik op de knop Toevoegen aan Firefox op de pagina.

Het volgende bericht kan worden weergegeven. Klik op Toestaan ​​om door te gaan met het installeren van de ChromEdit Plus-add-on.

OPMERKING: wees voorzichtig met wat u toestaat bij het installeren van extensies en andere software. Als u niet zeker bent van het product of als u het bedrijf niet vertrouwt, installeer het dan niet. We hebben ChromEdit Plus getest en hebben vastgesteld dat het veilig en betrouwbaar is.

Het dialoogvenster Software-installatie verschijnt. Klik op Nu installeren, dit is mogelijk niet beschikbaar totdat het aftellen is voltooid.

OPMERKING: U kunt de afteltijd op de knop Installeren wijzigen, maar we raden af ​​om deze uit te schakelen.

U moet Firefox herstarten om de installatie te voltooien. Klik op Nu opnieuw opstarten in het pop-upvenster.

Zodra Firefox opnieuw is opgestart, wordt de ChromEdit Plus-knop rechts van het vak Adres toegevoegd. Klik erop om het ChromEdit Plus-venster te openen.

Er zijn standaard drie tabbladen in het ChromEdit Plus-venster. We gaan het userChrome.css-bestand bewerken, dat zich op het eerste tabblad bevindt. Als het tabblad leeg is, kopieert en plakt u de volgende tekst op het tabblad userChrome.css en klikt u op Opslaan. Dit geeft u een standaard userChrome.css-bestand.

@namespace url ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# appmenu-button
achtergrond: #oranje! belangrijk;

# dropdownknop voor dropdown-menu: vóór
inhoud: "Firefox"! belangrijk;
kleur: #FFFFFF! belangrijk;

# appmenu-button .button-text
display: geen! belangrijk;

Mogelijk hebt u al een userChrome.css-bestand. In dat geval is er al tekst op het tabblad userChrome.css. Kopieer alle bovenstaande tekst behalve de eerste regel, de regel @ namespace en plak deze op het tabblad ergens achter de regel @ namespace. Als je wilt behouden wat je al hebt, kun je de bovenstaande tekst aan het einde van het bestand plakken.

BELANGRIJK: zorg ervoor dat alle aanhalingstekens in de userChrome.css GEEN slimme aanhalingstekens zijn, inclusief de aanhalingstekens in de regel @ namespace. Het moeten gewone, rechte citaten zijn. Als een van hen slimme aanhalingstekens zijn, heeft het bestand helemaal geen effect op de weergave van Firefox.

Klik op Opnieuw opstarten om Firefox opnieuw te starten met behulp van het nieuwe of herziene userChrome.css-bestand.

In dit voorbeeld gaan we de achtergrondkleur wijzigen in een donkerblauw en de tekst "Firefox" wijzigen in "How-To Geek".

Als u de achtergrondkleur wilt wijzigen, wijzigt u de tekst "#orange" op de regel "background" in de sectie "# appmenu-button" in een andere kleur met behulp van de hex-kleurcode of HTML-kleurcode. We kozen bijvoorbeeld voor een donkerblauw met de hex-kleurcode van # 2C4362.

OPMERKING: als u de hex-kleurcode voor een gewenste kleur wilt achterhalen, raadpleegt u onze artikelen over het verkrijgen van hex-kleurcodes uit decimale RGB-kleuren, het selecteren van kleuren vanaf elke plek op het scherm en het ophalen van kleurcodes in meerdere indelingen.

Als u de tekst op de knop wilt wijzigen, wijzigt u de tekst "Firefox" op de regel "inhoud" in het gedeelte "# appmenu-knop dropmarker: before" in de gewenste tekst, zoals "How-To Geek". We hebben na de tekst een spatie toegevoegd om meer ruimte tussen de tekst en de vervolgkeuzepijl op de knop te hebben.

U kunt ook kiezen om de kleur van de tekst te wijzigen door de "kleur" -regel in dezelfde "# appmenu-knop dropmarker: before" -sectie te veranderen. We hebben de tekstkleur als wit (#FFFFFF) laten staan, maar je kunt dit veranderen in iets als een lichtgrijs (# F2F2F2), of iets dergelijks.

Klik op Opslaan en vervolgens op Opnieuw opstarten om de wijzigingen van kracht te laten worden.

De knop is nu donkerblauw en zegt "How-To Geek".

U kunt ook een achtergrondafbeelding toevoegen aan de knop, naast de achtergrondkleur wijzigen. We hebben een afbeelding gemaakt met het How-To Geek-favicon aan de linkerkant en een transparante achtergrond zodat de donkerblauwe achtergrondkleur zichtbaar is. Als u een achtergrondafbeelding aan uw knop wilt toevoegen, voegt u de volgende regel toe aan de sectie "# appmenu-button", waarbij u het pad in de aanhalingstekens verandert in de locatie van uw afbeelding op uw computer. Laat het bestand "file: ///" in het pad staan.

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

Klik nogmaals op Opslaan en opnieuw opstarten.

Nu is onze knop voltooid.

U kunt de Firefox-menuknop ook aanpassen door het in een pictogram om te zetten. We hebben ook veel andere tips en tweaks gepubliceerd om het meeste uit Firefox te halen.