Nadat mijn oude stylesheet het jarenlang heeft volgehouden, begon het toch wel aardig in elkaar te storten op mobiel en desktop sinds de laatste wijzigingen. Dus de afgelopen week de tijd genomen om alles te refurbishen, updaten, en modulariseren naar de nieuwe snippets feature. Dus bij dezen presenteer ik de volgende lijst met 11 snippets. Allemaal individueel te gebruiken, onderling compatibel, hier en daar customizable, en zo goed mogelijk getest compatibel met mobile en dark mode. Mocht je issues hebben, stuur dan even een DM!
.
Voor de liefhebbers van tekst die zwart op wit is, maar toch ook hun ogen niet willen pesten met een volledig wit scherm, is hier een tussenoplossing: een hybride licht/donker kleurenschema! De tekst en andere inhoud van de website blijft een licht thema, maar de achtergrond en tracker zijn donker - een beetje hoe het "vroeger" was!
Snippet: Hybride donker/licht thema
:fill(white):strip_exif()/f/image/r16b7w4jvjPttNH1XWISZFkY.png?f=user_large)
"Vroeger" was de header van de website wat interessanter: het had nog een donkere balk met alle navigatieopties, met wat meer contrast, en het logo was wat groter. Deze stijl brengt de oude look&feel terug, en verplaatst de zoekbalk direct ook naar wat loze ruimte, om zo wat verticale ruimte te besparen! Je kan ook zelf de kleur van deze header aanpassen met de volgende code in je "extra CSS":
Cascading Stylesheet:
1
2
3
| :root {
brand-color: <wat je maar wil>;
} |
Snippet: "Traditionele" header met aanpasbare kleur
:fill(white):strip_exif()/f/image/1cL3hG6uEangcrqWkq6wHioQ.png?f=user_large)
In het menu van tweakers moet je normaal klikken op "meer" en je gebruikersnaam om het menu uit te klappen. Met deze stijl gaat dat vanzelf bij hoveren.
Menu/header dropdowns bij hover ipv klikAs the title says; dus de filters aan de rechterkant zoals het "vroeger" was.
[Pricewatch] Filters aan de rechterkant
:fill(white):strip_exif()/f/image/OQbbRzKZpynloXEzbodtlR0d.png?f=user_large)
Dit is een volledige post redesign voor het forum, die het forum een frissere en modernere look and feel geeft.
Features:
- Modern uiterlijk

- Beter toegankelijke knoppen bij elke post
- Indicaties voor eigen post en topicstarter-post
- Modernere quickreply en nieuw-bericht-melding
- Customisation in je eigen CSS
Werkt ook goed op mobile en met dark mode!
[Forum] Moderne posts redesign
Voor degenen die niet zo'n fan zijn van afgeronde hoeken, met de volgende style in je "extra CSS" kan je dat aanpassen:
Cascading Stylesheet:
1
2
3
| body {
--message-radius: 0px;
} |
Foto's zijn klikbaar en openen een gallery
Recentelijk zijn helaas de mooie paarse kleuren van de Devschuur verdwenen van het forum. Dat grote verlies kan nu gelukkig gecompenseerd worden met deze stylesheet: weer de oude, vertrouwde paarse forumicoontjes in je topiclijsten.
[Forum] Bring Back Devschuur
:fill(white):strip_exif()/f/image/I7DepRaiQArIpQE2cqSSqk39.png?f=user_large)
Het menu "folders" op de bookmarkspagina wordt hiermee ingeklapt tot een knop die uitklapt bij hover. Hierdoor is er meer ruimte voor de bookmarks zelf. Dit werkt ook op de pagina met alle DMs, en in individuele DM-gesprekken.
[Forum] Bookmarks "Folders" menu inklappen
:fill(white):strip_exif()/f/image/M1TnhFpuuQdS0tORmm6fy1RZ.png?f=user_large)
Op verschillende plekken op de website (profiel, Pricewatch, V&A) wordt er gebruik gemaakt van een grijze "headerbalk" met daarin productgegevens, userinformatie, én tabs. Op het forum zijn er ook navigatielinkjes (Bookmarks, Actieve topics, etc), maar die zijn niet op dezelfde manier opgemaakt als tabs of soms zijn het helemaal geen tabs maar kleine tekstuele linkjes rechtsbovenin.
Deze stijl zorgt ervoor dat ook het forum mee gaat met de tijd, en dezelfde tabs krijgt als elders op de website.
[Forum] Navigatielinks opmaken als tabs elders op de website
:fill(white):strip_exif()/f/image/hxFSCsc824s706jI1GRWOh8T.png?f=user_large)
Sinds een tijd worden dubbele posts op het forum, snel na elkaar geplaatst, samengevoegd tot één "grote" post. Dit ziet er wat onhandig uit, en het blijkt dat het samenvoegen niets meer is dan een cosmetische wijziging: alle onderliggende informatie is er nog. Deze snippet herstelt de oude stijl weer: dubbele posts staan er gewoon in als losse posts, alsof er niets aan de hand is.
[Forum] Dubbele posts niet meer samenvoegenDe paginanavigatie op het forum is soms wat lastig, zeker voor touchscreens. Deze stijl maakt elke pagina een fatsoenlijke "knop", en haalt de tekst uit de knoppen "vorige" en "volgende" weg, zodat het enkel pijltjes zijn.
[Forum] Verbeterde paginanavigatie
:fill(white):strip_exif()/f/image/bhj8B9TWDA6qbDPLofFs3eSE.png?f=user_large)
Deze stijl voegt de "forumkleuren" toe aan de grote forumlijst, zodat het makkelijker is om te herkennen waar je moet zijn.
[Forum] Kleurtjes in de forumlijst