Soms gebruik je regelmatig een website, maar vind je de lay-out niet prettig. Je vraagt je dan misschien af of het mogelijk is om die lay-out aan te passen. Hoewel het aanpassen van een website die je niet beheert misschien onmogelijk lijkt zonder toegang tot de broncode, kun je met de juiste tools wel degelijk de weergave veranderen in je eigen browser.
In dit artikel leer je:
- Hoe je de weergave van een website die je niet beheert, kunt aanpassen.
- Hoe je een website kunt aanpassen met browserextensies, zonder de broncode te veranderen.
De basis: wat zit er achter een website en waarom zou je het willen aanpassen?
Elke website bestaat eigenlijk uit drie hoofdelementen: tekst, scripts en stylesheets. Het zijn de stylesheets die bepalen hoe alles op het scherm wordt weergegeven wanneer je een website bezoekt. Denk aan de grootte van de letters, het lettertype en zelfs de lay-out. Soms kan een lettertype te klein zijn of is een menubalk te groot. Als je dit soort zaken wilt aanpassen, moet je dus de stylesheet wijzigen. Maar hoe doe je dat als de stylesheet zich op de servers van de website bevindt en je geen toegang hebt tot de broncode?
Hoe je de lay-out van een website wijzigt zonder de broncode te bewerken
Gelukkig worden de stylesheets door je browser geladen wanneer je een webpagina bezoekt. De browser gebruikt deze stylesheets om te bepalen hoe de pagina op het scherm moet verschijnen. Hier kunnen we gebruik van maken. Dit betekent namelijk dat we via de browser wijzigingen kunnen doorgeven voordat de pagina wordt geladen. Het enige dat je nodig hebt, is een browserextensie en wat basiskennis van stylesheets.
De beste browserextensie om websites aan te passen
Er zijn verschillende browserextensies waarmee je de weergave van een website kunt aanpassen, maar wij raden Page Manipulator aan. Deze extensie is eenvoudig te gebruiken, en wij zijn grote voorstanders van het KISS-principe: Keep It Simple and Stupid. Het moet gemakkelijk en doeltreffend zijn!
Je kunt de extensie eenvoudig vinden in de Chrome Webstore of op de Microsoft Edge Add-ons website. Mocht je hem niet direct vinden, zoek dan gewoon naar “Page Manipulator” met Google voor een snel resultaat.
Enkele voorbeelden om duidelijk te maken hoe je de extensie gebruikt
Laten we veronderstellen dat je niet tevreden bent met de lay-out van een website die je vaak gebruikt, zoals onze eigen website. Stel bijvoorbeeld dat je de letters van de tekst veel te klein vindt. Hoe pas je dit aan met Page Manipulator?
- Open de extensie door op het Page Manipulator-icoon te klikken in je browser.
- Klik op “CSS”.
- Klik op “New” om een nieuw stijlbestand te maken.
- Onder “Filename”, geef een naam naar keuze in, bijvoorbeeld de naam van de website die je wilt aanpassen.
- Klik op “Make” om het bestand te creëren.
- Vul in het veld “Active Websites” in voor welke websites de aanpassingen moeten gelden. Vul bijvoorbeeld “all” in als je de lettergrootte op alle websites wilt aanpassen, of de specifieke URL (bijvoorbeeld decomputer.be) als je alleen de lettergrootte op die website wilt wijzigen.
- Bij “Matching Pages” maak je de keuze enkel voor de exacte url of “Recursive” voor alle pagina’s van een website.
- Schrijf in het vak rechts de CSS-code om de lettergrootte aan te passen, bijvoorbeeld:
p {font-size: 26px;} - Klik op “Active” om de aanpassing in te schakelen.
- Klik op “Reload” en je zult merken dat de letters nu groter zijn. Je kunt natuurlijk zelf bepalen hoe groot je de letters wilt door 26 te vervangen door een ander getal.
Ja, maar dat is belachelijk gemakkelijk!
Ok, laten we wat moeilijker css code gebruiken om te illustreren wat mogelijk is.
De website naam verbergen
.main-title { display: none; }
De breedte van de afbeelding beperken
.wp-block-image img { max-width: 500px; }
En natuurlijk kan je nog veel meer doen! Het trucje is om met de rechtermuisknop op het gedeelte van de website te klikken dat je wilt aanpassen en “Inspecteren” te kiezen in het menu dat verschijnt. De CSS-code verschijnt dan in het ontwikkelconsole, en op die manier kun je achterhalen wat je moet aanpassen.
