Zet websites naar je hand met Stylish en GreaseMonkey

Door: Jochem de Goede | 10 november 2016 14:25

Apps & Software

Inhoudsopgave

  1. Inleiding
  2. Pagina 2

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.

01 Stylish is succesvol geïnstalleerd in onze browser.

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.

02 Een voorbeeld van een userstijl die in dit geval een leuke toevoeging doet aan YouTube.

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.

03 Na het aanmaken van een nieuwe stijl, opent een teksteditor in de browser om CSS toe te voegen.

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.

04 We selecteren de body van de pagina en stellen een eigen achtergrondafbeelding in.

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.

05 Je ziet rechtsboven in de broncode de div fbar, die we graag weg willen hebben.

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.

07 GreaseMonkey is zo geïnstalleerd in Firefox, voor Chrome zul je Tampermonkey moeten gebruiken.

0 Reactie(s) op: Zet websites naar je hand met Stylish en GreaseMonkey

  • Om te reageren moet je ingelogd zijn. Nog geen account? Registreer je dan en praat mee!
  • Er zijn nog geen reacties op dit artikel.

Wanneer je een reactie plaatst ga je akoord
met onze voorwaarden voor reacties.