Met Stylish en GreaseMonkey is het mogelijk om websites naar je eigen hand te zetten, door eigen thema’s erop toe te passen en snelle en handige JavaScript-acties aan een website toe te voegen. We zetten de handigste stijlen en scripts voor je op een rij.

Je kunt websites natuurlijk gewoon bezoeken, maar wist je dat je er ook erg leuke dingen mee kunt doen? In deze masterclass laten we je zien hoe je aan de slag kunt gaan met Stylish. We laten zien wat het doet, hoe je stijlen kunt installeren en hoe je zelf aan de slag kunt met diverse stijlen voor websites. Lees ook: Je eigen WordPress-website - Deel 1.

Ook bekijken we GreaseMonkey, waarmee je met JavaScript handige acties kunt toevoegen aan verschillende websites, waarmee je productiever kunt werken. We nemen enkele handige acties met je door.

01 Stylish

Stylish is een extensie voor Mozilla Firefox, Google Chrome, Opera en Safari, waarmee je een eigen stijl op een website kunt toepassen. Het is mogelijk voor gebruikers om zelf thema’s in elkaar te zetten en daarmee dus websites aan te passen. Veel van die thema’s worden gedeeld op userstyles.org, waar meer dan 70.000 stijlen voor websites zijn te downloaden. Er is wel een klein functieverschil tussen de versie van Firefox en die van Chrome, maar in de toekomst worden de functionaliteiten van beide versies gelijkgetrokken. Zo is het in Firefox mogelijk om de browser-interface ook van een eigen stijl te voorzien. Je downloadt de extensie voor Chrome hier. Klik op Toev. aan Chrome / Extensie toevoegen. Voor Firefox ga je hiernaartoe en klik je op Toevoegen aan Firefox / Installeren / Nu herstarten.

©PXimport

02 Een stijl installeren

Na het herstarten van de browser verschijnt een bevestigingspagina van Stylish. Klik links op userstyles.org home om door de verschillende stijlen te kunnen bladeren. Deze stijlen zijn door andere gebruikers gemaakt en voor veel websites beschikbaar. Je kunt nu linksboven, onder de gele balk, een zoekterm invullen om een stijl te zoeken voor je favoriete website. Zoek bijvoorbeeld op youtube. Er verschijnen nu een hoop stijlen. Kies er eentje uit en klik op Install with Stylish en daarna op Installeren. De stijl is geïnstalleerd. Je kunt deze direct testen door naar www.youtube.com te gaan en de stijl in actie te zien. In ons geval zien we de Nyan Cat als voortgangsbalk in een YouTube-video, precies zoals we zagen op de voorbeeldpagina. Andere handige thema’s zijn bijvoorbeeld DarkTube waarmee YouTube helemaal in het donker wordt gehuld en een minimaal Facebook-thema genaamd Minimalist Facebook 2015. Maar er is natuurlijk veel meer beschikbaar op de website.

©PXimport

03 Zelf een stijl maken

Je kunt via de Stylish-knop in de browser zien welke stijlen er op dit moment op de website actief zijn. Om stijlen voor een specifieke website te zoeken, klik je op het Stylish-icoon en kies je voor de optie Stijlen zoeken voor deze website. Je wordt vervolgens doorgeleid naar de website van userstyles waar je, indien beschikbaar, alle stijlen voor die website kunt bekijken. Is er geen stijl beschikbaar, dan zou je zelf aan de slag kunnen. Daarvoor moet je wel CSS gaan gebruiken. Met een eigen stijl kunnen we bijvoorbeeld de Google-pagina aanpassen. Het zou leuk zijn om hier een eigen kleur en zelfs achtergrondafbeelding aan toe te voegen. Dat is met CSS zo gebeurd. Klik op het Stylish-pictogram en kies voor de optie Nieuwe stijl schrijven en daarna voor Voor deze URL (W), omdat we deze stijl nu alleen van toepassing willen hebben op de voorpagina van Google. Er opent een nieuw venster met daarin drie regels code, namelijk een namespace-definitie en een -moz-document-definitie waarin het domein bevindt voor waar de stijl gaan schrijven.

©PXimport

04 CSS

Voordat we doorgaan is het nodig om de basis van CSS te snappen. CSS is de taal om websites mee op te maken: om ze kleuren te geven, lettergroottes in te stellen en meer. HTML is de taal om websites in te delen in elementen, zoals H1 voor een header en DIV voor een onderdeel van een website. Met CSS is het de bedoeling om een element te ‘selecteren’ waarna je er een eigen stijl op kunt toepassen. Eén zo’n element is de ‘body’, dat is de gehele webpagina. Om de body te selecteren, typ je tussen de twee accolades bij @-moz-document simpelweg body { }.

Je hebt nu de gehele webpagina geselecteerd. Stel dat je nu een andere achtergrondkleur wilt instellen. Daarvoor bestaat het CSS-commando background-color: KLEUR;. Typ dat letterlijk zo tussen de haken van body, maar vervang KLEUR door bijvoorbeeld orange voor oranje. Klik op Voorbeeld om de stijl nu toe te passen. Als je nu terug naar het Google-tabblad gaat, zie je dat de achtergrond van Google oranje is geworden. Stel dat je nu een eigen afbeelding als achtergrond wilt instellen. Daarvoor gebruik je het volgende CSS-commando: background-image: url(‘PAD-NAAR-BESTAND’);. Vervang het pad naar het bestand door het daadwerkelijke pad. Staat het bestand op jouw harde schijf, dan zet je er file:/// voor, en zorg je dat je van alle slash-tekens in het pad forward slashes maakt. Afhankelijk van de grootte van het plaatje, kan het zijn dat je er maar een gedeelte van ziet.

Gelukkig gebruik je een moderne browser en kunnen we met CSS3 die fout eenvoudig corrigeren, namelijk door het commando background-size: cover; onder background-image toe te voegen. Heb je overigens gekozen voor een afbeelding van je harde schijf, dan is de afbeelding uiteraard alleen op deze computer zichtbaar.

©PXimport

05 Ontwikkelaarstools Chrome

Als je zelf meer wijzigingen wilt maken, is het nodig om de ontwikkelaarsgereedschappen van Firefox en/of Chrome te gebruiken. Dat klinkt misschien eng, maar het valt reuze mee. Stel je wilt op google.nl die balk onderaan weg hebben, dan ga je als volgt aan de slag (we kiezen nu even Chrome). Je klikt met de rechtermuisknop op deze balk in Google Chrome en kiest voor Inspecteren. Vervolgens opent er aan de rechterkant een blok. We zijn geïnteresseerd in het gedeelte bovenaan, dat is de broncode van de webpagina. Als het goed is, is er nu een div geselecteerd met als class genaamd fbar. Als je nu teruggaat naar Stylish, kun je die balk onderaan selecteren met .fbar { }. De punt voor de naam is om elementen met een specifieke class te selecteren. Je gebruikt een hekje (#) als je een element op een id wilt selecteren. Typ vervolgens display: none; tussen de haken van fbar om de div te laten verdwijnen. Klik opnieuw op Voorbeeld en de onderste balk is weg.

©PXimport

06 Ontwikkelaarstools Firefox

Afhankelijk van wat voor plaatje je hebt gekozen, kan sommige tekst onleesbaar zijn geworden doordat de afbeelding donker is. Om dat op te lossen gaan we als voorbeeld te tekst bovenaan de pagina wit maken. Dit keer zullen we dat in Firefox doen. Klik daarvoor met de rechtermuisknop op de tekst en kies voor Element inspecteren. Nu verschijnt onderaan in beeld de broncode van de pagina met een div geselecteerd. Als je met de muis over die broncode gaat, zie je het element dat die div representeert gemarkeerd op de webpagina zelf.

Om de kleur te wijzigen van de tekst, ga je – met de div geselecteerd – naar het tabblad Berekend dat je rechts in de ontwikkelaarstools vindt. Klap het attribuut color uit en je ziet dat de huidige kleur afkomstig is van #gb#gb a.gb_P. Dat is het element dat we moeten hebben. Ga terug naar Stylish en typ #gb#gb a.gb_P { }. Om de tekstkleur te veranderen, gebruik je het commando color: KLEUR; en vervang je het kleur-element met een daadwerkelijke kleur. In dit geval wordt het dan dus color: white;.

07 GreaseMonkey

Wat Stylish mogelijk maakt met opmaak en CSS, doet GreaseMonkey met JavaScript. GreaseMonkey maakt het mogelijk het web te verbeteren met handige acties. Denk aan extra functies voor websites als YouTube, Google en Facebook. GreaseMonkey is primair gericht op Firefox. Gebruikers van Google Chrome hebben als beste optie de extensie genaamd Tampermonkey. Daardoor kan het voorkomen dat niet alle scripts voor GreaseMonkey ook in Chrome werken. Je downloadt GreaseMonkey hier. Klik op Toevoegen aan Firefox / Installeren / Nu herstarten. Firefox start even opnieuw op, waarna je rechts een nieuw pictogram ziet dat van GreaseMonkey is. Tampermonkey voor Chrome vind je hier.

©PXimport

08 Scripts installeren

Om een script aan GreaseMonkey toe te voegen en actief te maken, moet je deze eerst weten te vinden. Er is geen centrale plek voor scripts, maar er zijn wel een aantal populaire websites waar zelfgemaakte scripts worden gedeeld. Een van die sites is www.greasyfork.org/nl. Een handig script is bijvoorbeeld het Spotify-webspeler-script dat je hier vindt. Dit script voegt notificaties toe voor elk liedje dat je afspeelt, met artiest, album en titel.

Je installeert dit script door op de knop Installeer dit script te klikken. Vervolgens klik je op Install en klik je op Ok. In Chrome klik je eveneens op Installeer dit script en daarna op Install. Als je nu naar de Spotify-webspeler gaat, zie je dat de website vraagt om notificaties te mogen tonen. Ga daarmee akkoord. Zodra je een liedje afspeelt, zie je de notificatie van de browser verschijnen. Om je scripts te beheren, klik je in Firefox op het pijltje van het GreaseMonkey-icoon. Onderaan zie je de actieve scripts, die je met een klik op de knop kunt uitschakelen. In Chrome klik je op het Tampermonkey-icoon en zie je direct het actieve script bovenaan, met ernaast een aan/uitschakelaar.

09 Bierdopje-ondertiteling

Bierdopje.com is een website waar je vroeger vaak zelfgemaakte Nederlandse ondertiteling vond voor veel populaire series. Helaas eiste BREIN dat er geen ondertiteling meer verspreid werd. Met het GreaseMonkey-script is het mogelijk om grotendeels de functionaliteit van het originele Bierdopje weer te herstellen. Je downloadt en installeert het script zoals beschreven in stap 8. Als je daarna naar Bierdopje.com gaat, zie je daar nu landvlaggen bij elke serie staan. Nog handiger: je ziet ernaast ook een downloadknop staan, waarmee je direct automatisch op de betreffende nzb-zoekmachine naar die serie zoekt met een optimale zoekopdracht. Dan hoef je dat dus zelf niet meer te doen en kun je de serie meteen binnenhalen.

©PXimport

10 Afbeeldingen

Een ander handig GreaseMonkey-script is die van Mouseover Popup Image Viewer. Hiermee wordt het mogelijk om automatisch een afbeelding in een pop-up weer te geven wanneer je met de muis over een afbeelding met een link gaat. Je vindt dit script hier. Om het te testen, kun je bijvoorbeeld naar www.reddit.com gaan. Wanneer je met de muis over een thumbnail van een post gaat, zie je direct de grote afbeelding. Hetzelfde geldt als je naar Google Afbeeldingen gaat en daar zoekt naar een foto, en het werkt ook prima op Twitter, Instagram, Tumblr, Wikipedia en veel meer diensten.

11 YouTube +

Veel scripts richten zich op YouTube. Een zo’n script is bijvoorbeeld YouTube +. Functies van dit script zijn onder andere dat video’s in een eigen pop-up afgespeeld kunnen worden en dat video’s frame voor frame bekeken kunnen worden. Ook handig is de mogelijkheid om de lijst met zoekresultaten om te toveren naar een roosterweergave, voor een duidelijker overzicht. De complete, en zeer lange, lijst van verbeteringen en functies die YouTube + doorvoert, kun je hier lezen. YouTube + heeft wel alleen ondersteuning voor de HTML5-speler van YouTube, maar die is op het platform toch al standaard, dus dat zou geen probleem moeten zijn.

Als je na de installatie naar www.youtube.com gaat, zie je naast de Sign in-knop een afspeelknop, dat is de knop om dit script mee in te stellen. Klik op de ballon om het script te configureren. Op de configuratiepagina vind je links tabbladen voor de verschillende opties: General, Video en Blacklist. Op General vinden wij de opties Disable hovercards handig, evenals Hide footer en helemaal al Hide recommended channels sidebar. Klik op Save om de wijzigingen op te slaan en direct actief te maken. Bij Video is het handig om Disable annotations aan te zetten. Je kunt hier ook de standaardvideokwaliteit instellen, door die bij Default video quality te selecteren.

12 Meer YouTube

Er zijn nog meer handige YouTube-scripts. Wil je dat bij elke YouTube-video een downloadlinkje wordt toegevoegd om de video te downloaden? Geen extra websites, vreemde diensten of dubieuze downloadknoppen, gewoon een no-nonsense-script. Eenzelfde script om mp3’s te downloaden bestaat ook. Kijk je YouTube-filmpjes liever in een donker thema zodat het iets rustiger aan de ogen is en de video meer tot leven komt? Ga dan hiernaartoe. Nog eentje: hier vind je een ander handig script dat YouTube-links overal op het web vertaalt naar de titel van de video. Als je vervolgens op die link klikt, speelt de video direct in een pop-up op de pagina af, zodat je niet naar YouTube hoeft om de video te bekijken.

©PXimport

13 Google

Op Greasy Fork en andere websites bevinden zich ook behoorlijk wat scripts om Google en de verschillende diensten van de zoekgigant mee te verbeteren. We sommen er een paar op. Met dit script ga je met een klik op een afbeelding van Google Afbeeldingen, direct naar de bronpagina in plaats van eerst naar Googles eigen miniweergave.

Met dit script worden de zoekresultaten van Google niet langer opgedeeld in pagina 1, 2, et cetera, maar blijf je oneindig lang scrollen en laden de volgende pagina’s automatisch.

Met Google site: Tool heb je meer opties om de zoekresultaten te beheren. Je kunt dan op de groene links van een resultaat klikken en bijvoorbeeld alleen op dit domein zoeken of dit domein juist uitsluiten van de zoekresultaten.

Met deze extensie worden directe links toegevoegd aan de zoekresultaten en word je niet eerst langs Google geleid en pas daarna naar de daadwerkelijke website, zodat je sneller bij je doel aankomt en meer privacy hebt.

GoogleMonkeyR verandert de pagina van zoekresultaten zelfs helemaal. Je kunt het aantal kolommen op de zoekpagina instellen, resultaten nummeren, automatisch meer resultaten laden, bepaalde Google-elementen verbergen en een achtergrondkleur instellen voor de zoekresultaten. Na installatie kun je GoogleMonkeyR configureren door op het tandwiel rechtsboven op de pagina te klikken en te kiezen voor GoogleMonkeyR Settings.

14 Adware

Om het web als geheel beter te gebruiken, kun je het AntiAdware-script gebruiken, dat je online hier vindt. Daarmee worden ongewenste extra aanbiedingen op veel websites geblokkeerd. Denk bijvoorbeeld aan een extra aanbieding als je Adobe Flash of Adobe Reader downloadt. Het script heeft ondersteuning voor ongeveer veertig sites, waaronder dus Adobe maar ook bijvoorbeeld voor SourceForge.

©PXimport

Veel gebruikers vragen hun kinderen of hun vrienden om iets te laten weten wanneer ze veilig zijn aangekomen. Uiteraard kan de ander een sms of een geruststellend appje sturen, maar in iOS zit een functie die hier speciaal voor is gemaakt.

Stap 1: Check-in toevoegen aan de chat

De functie heet toepasselijk Check-in. De optie maakt deel uit van de standaard berichten-app van Apple: iMessage. Voorwaarde is wel dat zowel de verzender als de ontvanger over een iPhone beschikken waarop minstens iOS 17 staat. Laten we er even van uitgaan dat jij degene bent die onderweg is en het thuisfront wilt geruststellen. Je opent de app Berichten. Daar ga je in de chat naar degene met wie je zo’n check-in wilt versturen en je tikt linksonder op het plusteken. Vervolgens kies je de optie Meer en kun je Check-in selecteren. Geef aan of je het bericht Beperkt of Volledig wilt delen. Eventueel kun je de voorbeeldgegevens vergelijken zodat je weet wat je moet kiezen.

De optie Check-in maakt deel uit van iMessage.

Stap 2: Op basis van reistijd of locatie

De andere persoon zal verschillende meldingen ontvangen: wanneer de sessie begint, wanneer je aankomt en als je vertraging hebt. Zelfs wanneer je iPhone een langere tijd offline is, zal er automatisch een melding verzonden worden. Standaard werkt Check-in met een timer waarin je aangeeft hoelang je onderweg denkt te zijn. Tik op Wijzig om deze duur aan te passen. Het is ook mogelijk een melding te versturen op basis van de locatiegegevens. In dat geval moet je in een volgend scherm het adres invullen waar je naartoe gaat. Op de kaart verschijnt een cirkel die je op drie groottes kunt instellen. Op die manier bepaal je de actieradius waarop Check-in zich zal baseren om te melden dat je bent gearriveerd. Je kunt ook aangeven met welk vervoermiddel je reist.

Geef de bestemming in en het vervoermiddel.

Stap 3: Versturen

Je krijgt nog een overzicht van de volledige check-in. Tik op Gereed en daarna op Versturen. Met Check-in kun je slechts één chat tegelijk versturen. Het is mogelijk dat je tijdens de reis een waarschuwing ontvangt om je te melden. Als je daar niet op reageert, ontvangt de andere persoon een bericht met informatie zoals de afgelegde route en het batterijpercentage. Deze persoon kan dan via een berichtje of via de telefoon informeren of alles goed gaat.

Je ontvangt nog even een samenvatting van de check-in.

Als er één plek in huis is waar stof zich graag verzamelt, dan is het wel op de luxaflex. En hangen ze in de keuken, dan worden ze niet alleen stoffig, maar ook nog eens vettig. Gelukkig hoef je niet uren te schrobben om ze weer schoon te krijgen: met de tips uit dit artikel zijn ze zo weer blinkend schoon.

Luxaflex schoon? Lees dan: De 5 beste tips om snel en simpel je ramen te lappen

Regelmatig doen: even afstoffen

Regelmatig afstoffen voorkomt dat vuil zich ophoopt. Een plumeau of microvezeldoek werkt prima. Draai de lamellen open zodat je overal bij kunt en werk van boven naar beneden. Een oude sok over je hand schuiven is een handige manier om elke lamel afzonderlijk schoon te vegen.

Wil je tijd besparen?* Gebruik dan een speciale lamellenborstel. Hiermee kun je in één beweging meerdere lamellen tegelijk afnemen. Druk niet te hard, om beschadigingen te voorkomen. Stofzuigen kan ook, maar gebruik dan een meubelmondstuk op de laagste stand en ondersteun de luxaflex met je andere hand.

* Wie niet eigenlijk...?

©africaimages.com (Olga Yastremsk

Als stoffen alleen niet meer genoeg is, moet je een stapje verder gaan. Hoe je dat doet, hangt af van het materiaal waarvan de luxaflex gemaakt zijn.

Grondig schoonmaken: aluminium en kunststof

Gebruik het bad…

Haal de luxaflex voorzichtig uit het kozijn en leg in een bad met lauwwarm water en een scheutje allesreiniger. Laat kort weken en veeg de lamellen schoon met een zachte spons. Spoel goed af en laat de luxaflex hangend drogen. Zorg ervoor dat metalen onderdelen niet te lang nat blijven om roestvorming te voorkomen en droog aluminium luxaflex direct af om oxidatie te vermijden.

…of de douche

Als de luxaflex te groot is voor een bad, kan afspoelen in de douche een alternatief zijn. Gebruik een plantenspuit met een sopje voor hardnekkige vlekken en spoel daarna grondig af. Let op dat kunststof koorden niet te nat worden (want dan kunnen ze hun stevigheid verliezen of verkleuren). Laat goed drogen en ventileer de ruimte goed om schimmelvorming te voorkomen.

Met stoom

Soms is weken in bad of afspoelen in de douche geen optie. Een stoomreiniger kan dan uitkomst bieden, vooral bij aluminium en kunststof luxaflex. Gebruik de stoom op lage stand en houd voldoende afstand om schade te voorkomen. Een andere methode is een sopje met een plantenspuit op de luxaflex vernevelen en daarna droogwrijven met een microvezeldoek.

Grondig schoonmaken: houten luxaflex

Hout is gevoelig voor vocht, dus in bad leggen of onder de douche afspoelen is geen goed idee. Gebruik een licht vochtige doek met een mild schoonmaakmiddel en test nieuwe middelen altijd eerst op een onopvallende plek. Je kunt ook speciale houtzeep gebruiken. Doe dat wel met mate en kies bij voorkeur een variant die geen vettig laagje achterlaat, omdat sommige houtzepen een dun laagje vormen dat stof kan aantrekken.

Je kunt ook een doek met een klein beetje afwasmiddel gebruiken, maar zorg dat deze nauwelijks vochtig is. Droog de lamellen direct na met een schone doek om watervlekken te voorkomen. Behandel ze eventueel met een verzorgende houtolie of was, maar alleen als het materiaal daar geschikt voor is. Laat ze na behandeling open drogen en voorkom direct zonlicht om kromtrekken en verkleuring te vermijden.

©Rafael Ben-Ari

Bedieningskoorden schoonmaken

De koorden van luxaflex worden vaak vergeten bij het schoonmaken, maar kunnen door stof en vet behoorlijk groezelig worden. Wikkel een vochtige doek met mild schoonmaakmiddel om het koord en trek het koord er voorzichtig doorheen. Herhaal indien nodig en laat goed drogen.

Luxaflex langer mooi houden

Regelmatig afstoffen voorkomt dat vuil zich ophoopt. Maak ze in keukens vaker schoon. Vermijd overmatig watergebruik, vooral bij houten luxaflex. Laat ze open drogen na een schoonmaakbeurt en houd ze, als je ze niet gebruikt, opgetrokken om stofophoping te verminderen. Zo blijven je luxaflex langer mooi en schoon.