Home-theater-designers![Kleine ergernissen op internet oplossen met stijlvol [Firefox en Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
Webdesigners hebben een bijna onmogelijke taak. Ze moeten met één ontwerp komen dat iedereen bevalt. Als je het hebt over een service als Gmail, die door talloze miljoenen mensen over de hele wereld wordt gebruikt, kun je het 'bijna'-gedeelte echt laten vallen - het is gewoon onmogelijk. Zelfs als een herontwerp door de meeste mensen goed wordt gevonden, zullen er altijd gebruikers zijn die de nieuwe look echt niet leuk vinden.
Soms zijn er genoeg van deze gebruikers om een bedrijf te dwingen terug te gaan, zoals Google onlangs deed met de Gmail-pictogramknoppen. Maar wat als er iets is dat je Echt haat, en het bedrijf verandert het niet terug? Zit je er voor altijd aan vast? Dankzij gebruikersstijlen kunt u dergelijke problemen zelf oplossen.
Introductie van Stijlvol
Stijlvol is een gratis add-on die beschikbaar is voor zowel: Firefox en Chroom , en het laat je iets magisch doen - je eigen stijlen toepassen op webpagina-elementen. Zelfs als je geen webontwikkelaar bent en nog nooit een beetje CSS in je leven hebt geschreven, is dit veel eenvoudiger dan het klinkt. Je kunt Stijlvol gebruiken om websites volledig te transformeren (zoals ik je in de volgende sectie zal laten zien), maar nog belangrijker, je kunt Stijlvol gebruiken om kleine ergernissen in enkele minuten op te lossen.
Ik had bijvoorbeeld een probleem met de standaard lettergrootte in Gmail. De interface was prima - ik wilde niet inzoomen (Ctrl +) met mijn browser, omdat dat de grootte van alle interface-elementen zou vergroten en echt lelijk zou zijn. Ik wilde gewoon een manier om het berichtlettertype iets groter te maken.
Met Stijlvol was het heel eenvoudig, en ik zal je laten zien hoe. Maar voordat we kijken naar het maken van uw eigen gebruikersstijlen, laten we het hebben over het gebruik van andermans werk.
UserStyles.org
Als er iets op je zenuwen werkt, is het heel goed mogelijk dat je niet de enige bent. UserStyles.org is een website waarmee gebruikers stijlen kunnen delen die ze hebben gemaakt. Hierboven zie je een stijl ( Labels toevoegen aan werkbalkpictogrammen ) aanbevolen door MakeUseOf-commentator RandyN als antwoord op ons verhaal over de Gmail-pictogramknoppen. Met deze stijl kunt u de pictogrammen behouden, maar tekstlabels toevoegen - iets wat Google u niet laat doen.
UserStyles.org is geweldig, maar niet perfect. Sommige ontwerpen proberen te veel te doen (het uiterlijk van een website volledig veranderen), en sommige zijn voor oude versies van websites en zijn nu kapot. Als je iets kleins probeert te repareren en het niet kunt vinden op UserStyles.org, kun je het misschien het beste zelf doen.
Uw eigen eenvoudige gebruikersstijl creëren
Om uw eigen gebruikersstijl te creëren, moet u eerst weten welk element van de pagina u probeert te wijzigen en vervolgens welke wijziging u wilt aanbrengen. Dus, om te beginnen, klik met de rechtermuisknop op wat u ook wilt wijzigen en kies Inspecteer element . Je zou zoiets als dit moeten zien:
Firefox maakt de rest van de pagina donkerder en tekent een heel duidelijk kader rond het element dat u hebt geselecteerd. Boven dat element, de tekst die zegt div#2d6.ii.gt.adP.adO , is een aantal CSS-klassen, samen met één ID (het deel dat begint met #). Dit is de selector die de styling voor dit element beïnvloedt. Onderaan het scherm bevindt zich een navigatiebalk waarmee u ' doorkruis de DOM-boom ', of in eenvoudiger woorden, ga op en neer in de hiërarchie van elementen die leiden naar het element dat je hebt gekozen.
De naam van het spel hier is om het element te kiezen dat je wilt stylen, en de selectie niet zo smal te maken dat het niet alles beïnvloedt wat je wilt beïnvloeden, noch zo breed dat het andere dingen zou verknoeien.
Ik klikte een element hoger, div.gs , gewoon omdat ik de naam leuk vind (lijkt iets dat niet snel zal veranderen, maar dat is een volledige gok van mijn kant). Het beïnvloedt het hele berichtgebied. Zodra het gebied dat u wilt stylen is geselecteerd, klikt u op de Stijl knop in de rechterbenedenhoek om de . te openen Reglement brood:
Ik weet het, in het begin is het eng. Maar hier ziet u de verschillende CSS-regels die van invloed zijn op het element dat u hebt geselecteerd, en hier kunt u uw eigen tijdelijke wijzigingen aanbrengen en hun impact op de pagina in realtime zien, zonder deze opnieuw te laden. Maar wat moet je veranderen? Klik op de Eigendommen knop en verwijder het vinkje Alleen gebruikersstijlen :
Hier ziet u een volledige lijst van alle CSS-regels. Je kunt door de lijst scrollen totdat je een regel vindt die logisch is voor wat je nodig hebt (lettergrootte in ons geval), en zelfs op het vraagteken ernaast klikken om een uitlegpagina te openen. Dus nu weten we dat we de eigenschap font-size willen aanpassen voor alle div-elementen met de klasse ' gs ' (in steno geschreven als div.gs ).
De enige vraag die overblijft is wat we willen dat de waarde ervan is. Daarvoor gaan we terug naar het paneel Regels en beginnen we te spelen:
40 pixels is misschien een beetje gek, maar je krijgt het algemene idee. Speel hiermee en voel je vrij om andere eigenschappen toe te voegen, totdat je de look krijgt waar je naar op zoek was. Zorg ervoor dat u de pagina niet sluit, want uw wijzigingen zijn niet overal opgeslagen.
Je nieuwe stijl opslaan
Zodra dit deel van de site er precies zo uitziet als u wilt, is het tijd om het op te slaan. Klik op de Stijlvol pictogram in de add-onbalk en selecteer Schrijf nieuwe stijl . Stijlvol zou dan willen weten op welke pagina's het de nieuwe stijl moet toepassen - kies in ons geval de tweede optie, mail.google.com . Vervolgens ziet u dit dialoogvenster:
Ik heb hem al ingevuld. Uiteraard heb ik een naam en enkele tags gekozen voor de stijl. Maar het echte werk gebeurt binnen de code: regel 3 was er al - Stijlvol plaatste het zodat het weet op welke pagina's de stijl van toepassing is. Maar regel 5-7 is van mij. Laten we ze analyseren:
Lijn 5: div.gs { – dit deel moet je herkennen. Dit is het element dat we hebben besloten te stylen. De openingsaccolade betekent dat we nu enkele CSS-regels gaan schrijven. Regel 6: lettergrootte: 20px !belangrijk; – dat is de regel die we willen veranderen (lettergrootte), gevolgd door de nieuwe definitie (20 pixels), en dan door een !important-verklaring, wat betekent dat Firefox deze regel zou gehoorzamen, zelfs als een element dat dichter bij de tekst ligt probeert in te stellen de lettergrootte naar iets anders. Regel 7: } – het sluiten van de stijldefinitie.
Klik vervolgens op Voorbeeld en bewonder uw werk:
En tot slot, als je eenmaal ziet dat het werkt, klik je op Opslaan.
Dit is geen complete gids
Ik ben me er terdege van bewust dat ik een aantal sprongen en sprongen moest maken om deze korte tutorial binnen de grenzen van een enkele post te houden. Als je onderweg in de war was, bied dan mijn excuses aan. CSS is in het begin lastig, maar het is niet zo ingewikkeld als je het eenmaal onder de knie hebt - en het lokaal aanpassen van websites blijft een van de beste manieren om te leren.
Als je ergens door in de war was, vraag het me dan hieronder en ik zal mijn best doen om te helpen.
beste code voor raspberry pi 3Deel Deel Tweeten E-mail 5 tips om uw VirtualBox Linux-machines een boost te geven
Moe van de slechte prestaties van virtuele machines? Dit is wat u moet doen om uw VirtualBox-prestaties te verbeteren.
Lees volgende Gerelateerde onderwerpen- Browsers
- Webontwikkeling
- Webmasterhulpprogramma's
- Mozilla Firefox
- Google Chrome
- Webdesign
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren