28Jun
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 look te creëren.
Om het uiterlijk van de Firefox-menuknop te veranderen, zullen we het userChrome.css-bestand bewerken. Met dit bestand kunt u de weergave 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 opslaan in de juiste indeling. 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 over 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 wordt weergegeven. 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{
background: #orange! Important;
}
# appmenu-knop dropmarker: before{
content: "Firefox"! Important;
kleur: #FFFFFF! Belangrijk;
}
# appmenu-knop. Knop-tekst{
display: none! Important;
}
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 deze 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: Om de hex-kleurcode voor een gewenste kleur te achterhalen, bekijk onze artikelen over het verkrijgen van hex-kleurcodes uit decimale RGB-kleuren, het selecteren van kleuren vanaf elke plek op het scherm en het verkrijgen 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 te hebben tussen de tekst en de vervolgkeuzepijl op de knop.
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 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 favicon How-To Geek 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: ///" in het pad.
achtergrondafbeelding: url( "bestand: /// C: /Users/Lori/Pictures/ htg_background.png")! Belangrijk;
Klik op Opslaan en opnieuw opstarten.
Nu is onze knop voltooid.
U kunt de Firefox-menuknop ook aanpassen door deze in een pictogram om te zetten. We hebben ook veel andere tips en tweaks gepubliceerd om het meeste uit Firefox te halen.