Naarmate software van de desktop naar de cloud wordt verplaatst, brengen we steeds meer tijd door in webbrowsers, met behulp van allerlei webapps en -services. Elke dag naar dezelfde websites kijken kan heel snel saai worden. Wist u dat u het uiterlijk van elke afzonderlijke website die u bezoekt kunt veranderen?

Stylish is een populaire en verbazingwekkend krachtige invoegtoepassing voor Firefox (en Chrome!) Waarmee u kunt wijzigen hoe verschillende websites in uw browser worden weergegeven. Uiteraard verandert Stylish de websites niet rechtstreeks op hun servers, noch heeft het invloed op hoe ze op andere gebruikers lijken; de wijzigingen zijn alleen lokaal van toepassing. Ze zijn geschreven in CSS en functioneren ongeveer zoals het concept skins voor desktoptoepassingen.

Stijlvolle 'skins' worden gebruikersstijlen genoemd en letterlijk duizenden zijn gratis beschikbaar op de officiële Userstyles.org-website. Het is echter ook mogelijk om je eigen stijlen te schrijven, en het is niet zo moeilijk.

Hoe werkt stijlvol werken?

U kunt Stylish installeren zoals elke andere add-on van Firefox: via de officiële add-onswebsite of vanaf de about:addons pagina door op het tabblad "Add Add-ons" te klikken. Stijlvol maakt een werkbalkpictogram en het menu is toegankelijk door erop te klikken. Alle gebruikersstijlen die u hebt geïnstalleerd of gemaakt bevinden zich in het tabblad "Gebruikersstijlen" op de pagina Add-ons.

Hier kun je ze bewerken en tijdelijk uitschakelen of helemaal verwijderen. Firefox zal u op de hoogte stellen wanneer het een update voor uw stijlen vindt, omdat het dit automatisch kan doen voor degenen die zijn geïnstalleerd vanaf Userstyles.org. Als u uw eigen stijlen wilt maken, vindt u daarvoor opties in het menu Stijl.

Omdat gebruikersstijlen stukjes CSS zijn, kunnen ze alleen de elementen van de interface beïnvloeden die CSS toestaat; namelijk lettertypen, kleuren, transparantie, afbeeldingen en de rangschikking van elementen op een webpagina. Voordat u uw eerste stijlvolle script schrijft, is het misschien een goed idee om kennis te maken met de soorten stijlen die door Stylish worden ondersteund.

Typen gebruikersstijlen

Er zijn drie soorten gebruikersstijlen: App, Global en Site.

  • App-stijlen wijzigen het uiterlijk van Firefox zelf; terwijl ze niet zo veelzijdig zijn als Firefox-thema's, kunt u ze gebruiken om het uiterlijk van lege tabbladen en snelkeuzelijsten te wijzigen, uw startpagina te personaliseren, de kleur en grootte van schuifbalken en enkele andere elementen van het browservenster aan te passen.
  • Globale stijlen beïnvloeden alle websites die u bezoekt vanuit de browser waarin ze zijn geïnstalleerd. Ze veranderen meestal lettertypen, wijzigen tekst- en achtergrondkleuren of transformeren uw cursor.
  • Sitestijlen zijn het populairst en ze zijn van toepassing op afzonderlijke websites, specifieke URL's, domeinen of subdomeinen. De wijzigingen variëren van eenvoudige lettertypen en kleuraanpassingen tot complete revisies van het uiterlijk en het gevoel. Sitestijlen worden vaak gebruikt door nostalgische mensen die het nieuwe ontwerp van YouTube of Facebook 'haten', maar ze zijn ook handig voor het verbergen van advertenties, knoppen voor sociale media en overlays.

Als u op de optie "Nieuwe stijl schrijven" klikt in het menu Stijlen, wordt de editor geopend. Er zijn twee bewerkingsmodi: Orion (hieronder afgebeeld) en standaard, die kunnen worden geactiveerd door de extensions.stylish.editor waarde in about:config in 1 te veranderen.

Elke gebruikersstijl begint met de @ namespace-verklaring, gevolgd door url(http://www.website.com); . Sitespecifieke stijlen bevatten ook een @ -moz-documentregel, die uit vier typen ( url, url-prefix, domain, regexp ) kan bestaan, afhankelijk van of u alle URL's in een domein of alleen de opgegeven URL wilt beïnvloeden . Bij het definiëren van URL's kunt u geen jokertekens gebruiken (u kunt bijvoorbeeld geen domain(*.website.com) schrijven domain(*.website.com) ), maar reguliere expressies met jokertekens zijn toegestaan. De stijlvolle wikipagina op GitHub biedt meer informatie over het instellen van een gebruikersstijl.

Om te bepalen welke elementen van een website moeten worden opgenomen in de gebruikersstijl, kunt u vertrouwen op de hulpmiddelen van Firefox Web Developer; meer specifiek, de Inspector die u opent door op "Ctrl + Shift + C" te drukken. In de console die onder aan het venster wordt geopend, kunt u verschillende elementen van een website selecteren, hun namen controleren en de benodigde code kopiëren naar uw gebruikersstijl op het editor-tabblad.

Tenzij u iets echt specifiek wilt wijzigen of een stijl wilt toepassen op een obscure website, is de kans groot dat u de exacte stijl vindt waarnaar u op zoek bent in de Userstyles.org-collectie. Hun stijlen bestrijken de meest populaire websites voor sociale media, nieuwsportals en web-apps. Hoewel er een paar pijnlijk slechte exemplaren zijn (voornamelijk in de categorie Tumblr), zijn de meeste gebruikersstijlen mooi, volledig functioneel en vaak bijgewerkt. Hier zijn een paar aanbevelingen om mee te beginnen.

App Styles

Simpele about:home - aanpasbaar about:home huisstijl met optioneel geanimeerd logo.

Inkleuren Firefox-knoppen - brengt wat kleur in het nieuwe Firefox-menu.

Firefox Panorama Metro - zorgt ervoor dat uw Firefox-tabbladen in de weergave Panorama (Alle tabbladen) eruit zien als Metro UI-tegels uit Windows 8.

Probeer ook Australis Rounded Small Tabs als u de vorm en het formaat van tabbladen in de tabbladbalk wilt wijzigen.

Wereldwijde stijlen

Wereldwijde donkere stijl - maakt alle websites donker, zodat ze goed bij uw donkere Firefox- of desktopthema passen. Evenzo dwingt Global Font Size alle websites om zich te houden aan de instellingen van uw browserlettertype.

Sitestijlen

Perfect Facebook Theme - een van de vele fantastische facelifts op Facebook die beschikbaar zijn op Userstyles.org.

Minimaal Twitter en Tweetdeck Metro Light brengen het beste van Material Design en Metro UI naar uw favoriete web-apps.

Andere sociale media:
Reddit Revamped - een minimalistisch redesign van Reddit dat het minder rommelig en aangenamer maakt om te lezen.

Tumblr, The Old Design - voor alle Tumblr-gebruikers die niet blij zijn met de nieuwe look.

Onthoud Goodreads en zijn ouderwetse sfeer? Goodreads Personalized zorgt ervoor dat het er veel moderner uitziet.

Voor verbeterde leesbaarheid op Wikipedia, probeer Wikipedia Minimalistic en Wikipedia Readable Hyphenation.

Met Trello Clear en Trello Ultimate Flat hebt u geen Pro-versie nodig om uw favoriete productiviteitsapp aan te passen.

Last but not least, met Stylish kun je Gmail en Google Search op Outlook laten lijken:

Vind je het leuk om je webbrowser aan te passen? Heb je Stylish geprobeerd? Laat het ons weten over andere coole en nuttige Stijlvolle scripts in de reacties.