[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[F.West98]

JBplap schreef op vrijdag 8 november 2024 @ 01:05:
[...]


Is hier inmiddels al een CSS oplossing voor?
Ik heb dezelfde vraag.

Cascading Stylesheet:

.listing tr:has(td.topic a[href*="1428598"]) {
    display: none;
}

Dit zou moeten werken. In de regel dan wel het topic ID vervangen door het ID van het topic dat je wil verbergen.

[JBplap]

F.West98 schreef op vrijdag 8 november 2024 @ 05:04:
[...]

Cascading Stylesheet:

.listing tr:has(td.topic a[href*="1428598"]) {
    display: none;
}

Dit zou moeten werken. In de regel dan wel het topic ID vervangen door het ID van het topic dat je wil verbergen.

Top, dit werkt!

[iCore]

Skit3000 schreef op donderdag 1 augustus 2024 @ 21:41:
Weer een paar kleine aanpassingen aan mijn Compactere reacties op frontpage snippet, na het een poosje dagelijks te hebben gebruikt.

Reageren
[Afbeelding]

[Afbeelding]

Eigen reacties
Duidelijk gemarkeerd met balk aan rechter zijde. Rechtsonder is de edit knop.
[Afbeelding]

Uitgelichte reacties
+2 en +3 reacties worden duidelijker getoond.

[Afbeelding]

Ingeklapte reacties

[Afbeelding]

Hover
Met je muis over de ster (edits) of tijd gaan, toont details van edit en/of volledige datum van post.

[Afbeelding]
[Afbeelding]
[Afbeelding]

Licht/donker thema
Zoals het er met het lichte thema uit ziet.

[Afbeelding]

Op dit moment ben ik aardig tevreden met hoe de frontpage er uit ziet met dit thema bij dagelijks gebruik. Als iemand nog suggesties heeft (voor aanpassingen óf promotie?) dan hoor ik het graag!

Dank voor je werk, erg mooi . Kwam alleen wel een klein probleempje tegen:

Als je een reactie modereert komt jouw gekoze score bobbel over de raporteer knop heen:

[Skit3000]

iCore schreef op vrijdag 8 november 2024 @ 15:57:
[...]

Dank voor je werk, erg mooi . Kwam alleen wel een klein probleempje tegen:

Als je een reactie modereert komt jouw gekoze score bobbel over de raporteer knop heen:

Dank je!

Dat is semi met opzet. Als je al een score hebt gegeven, denk ik dat de kans dat je óók nog de reactie wilt rapporteren denk ik vrij laag. Ik kon ook niet goed bedenken hoe ik als je hebt gemod, de tijd en het "report" icoon verder naar links op kan schuiven met enkel css.

Als je een betere plek weet voor het "report" icoon pas ik het graag aan!

[vanaalten]

Ik heb niet zo veel interesse in de Dev Summit, dus vraag mij af: kan je met custom CSS deze artikelen uit het nieuwsoverzicht verwijderen?

Ik heb zelf wat geprobeerd - eigenlijk een bestaande CSS snip gepakt en aangepast - maar deze deed het in elk geval niet:

Cascading Stylesheet:

.headlineItem:has(.headline--anchor[href*="Summit"]){
  display: none;
}

[Skit3000]

Je .headlineItem:has(.headline--anchor) geeft een div terug, geen a, dus heeft ook geen href attribute.

Dit is denk ik wat je wilt:

code:

.headlineItem:has(.headline--anchor) a[href*="summit"]{
  display: none;
}

[vanaalten]

Skit3000 schreef op maandag 25 november 2024 @ 11:04:
Je .headlineItem:has(.headline--anchor) geeft een div terug, geen a, dus heeft ook geen href attribute.

Dit is denk ik wat je wilt:

code:

.headlineItem:has(.headline--anchor) a[href*="summit"]{
  display: none;
}

Hmmm, dat doet het wat beter, maar het laat wel het icon en tijd staan, enkel de titel verdwijnt.

[Skit3000]

Dan wil je het waarschijnlijk inkorten tot:

code:

.headlineItem:has(a[href*="summit"]){
  display: none;
}

[vanaalten]

Skit3000 schreef op maandag 25 november 2024 @ 12:11:
Dan wil je het waarschijnlijk inkorten tot:

code:

.headlineItem:has(a[href*="summit"]){
  display: none;
}

Ja!
@Skit3000 dank, dit gaat in de toekomst nog wel vaker bruikbaar zijn.
Ik heb er maar meteen een publieke CSS-snip van gemaakt:
Verwijder Dev-Summit nieuws uit het overzicht

[segil]

Ik blokkeer .adv posts, maar vandaag is eentje toch zichtbaar:



Mijn code:

code:

a [src*="*gift*guide*"] { display: none;}
#bestBuyGuides {
display:none;
}
.adv {display:none;}
.Adv {display:none;}
.deals {display:none;}
.promo {display:none;}
#navMenu li a[href^="https://tweakers.net/carriere/"]{ 
 display: none;
}
#navMenu li a[href^="https://tweakers.net/pricewatch/deals/"]{ 
 display: none;
}
ul#navMenu a[href="https://tweakersgear.net"]
{
  display: none !important;
}

#navMenu li a[href^="https://tweakers.net/deals/black-friday/echte-techdeals"]{ 
 display: none;
}
etc...

Iemand een idee wat hier gebeurt?

[vanaalten]

segil schreef op dinsdag 3 december 2024 @ 08:53:
Ik blokkeer .adv posts, maar vandaag is eentje toch zichtbaar:

[Afbeelding]

Mijn code:

code:

a [src*="*gift*guide*"] { display: none;}
#bestBuyGuides {
display:none;
}
.adv {display:none;}
.Adv {display:none;}
.deals {display:none;}
.promo {display:none;}
#navMenu li a[href^="https://tweakers.net/carriere/"]{ 
 display: none;
}
#navMenu li a[href^="https://tweakers.net/pricewatch/deals/"]{ 
 display: none;
}
ul#navMenu a[href="https://tweakersgear.net"]
{
  display: none !important;
}

#navMenu li a[href^="https://tweakers.net/deals/black-friday/echte-techdeals"]{ 
 display: none;
}
etc...

Iemand een idee wat hier gebeurt?

Ik heb er geen verstand van, maar hier heb ik die onderdrukt met:

Cascading Stylesheet:

.headlineItem.nonspot {
    display: none;
}

[segil]

vanaalten schreef op dinsdag 3 december 2024 @ 11:35:
[...]

Ik heb er geen verstand van, maar hier heb ik die onderdrukt met:

Cascading Stylesheet:

.headlineItem.nonspot {
    display: none;
}

Bedankt, dat werkt. Blijkbaar is iets gewijzigd bij Tweakers. Geen idee hoe deze CSS werkt, maar het werkt

[WRT54G]

Ik probeer de rechter kolom te verwijderen van mijn front page maar krijg het niet voor elkaar.

code:

.sidebar {display: none !important;}

Haalt hem weg maar dan ben ik ook direct mijn sidebar kwijt in de instellingen van mijn gebruikersprofiel.

Iemand een idee?

[MatHack]

WRT54G schreef op maandag 9 december 2024 @ 14:38:
Ik probeer de rechter kolom te verwijderen van mijn front page maar krijg het niet voor elkaar.

code:

.sidebar {display: none !important;}

Haalt hem weg maar dan ben ik ook direct mijn sidebar kwijt in de instellingen van mijn gebruikersprofiel.

Iemand een idee?

[Afbeelding]

probeer eens

Cascading Stylesheet:

.fp-grid-areas .sidebar {display: none !important;}

[WRT54G]

@MatHack
Je bent een topper, thanks! Het werkt.

[vanaalten]

MatHack schreef op maandag 9 december 2024 @ 14:57:
[...]


probeer eens

Cascading Stylesheet:

.fp-grid-areas .sidebar {display: none !important;}

@MatHack Dank, da's beter dan mijn gevonden oplossing!

Heb er een publieke snip van gemaakt:
Verwijder sidebar (Best Buy Guides, prijsdalers)

[WRT54G]

Ik heb mijn CSS nu bijna zover als ik hem wil hebben echter op mijn iPhone krijg ik rechts boven een (druk/click) pijl die vervolgens niks doet. Deze zou ik nog weg willen hebben. Iemand een idee hoe?

[Wiethoofd]

WRT54G schreef op maandag 9 december 2024 @ 16:03:
Ik heb mijn CSS nu bijna zover als ik hem wil hebben echter op mijn iPhone krijg ik rechts boven een (druk/click) pijl die vervolgens niks doet. Deze zou ik nog weg willen hebben. Iemand een idee hoe?

[Afbeelding]

Dat zou de .sidebar-trigger moeten zijn die je dan wil verbergen.

[WRT54G]

Wiethoofd schreef op maandag 6 januari 2025 @ 21:11:
[...]

Dat zou de .sidebar-trigger moeten zijn die je dan wil verbergen.

Gelukt! Thanks

[Yorinn]

Tweakers Groene Menubalk

Als ik nu hover over een menu-item, is die rood ipv. groen. Ik denk dat dit een aanpassing met het nieuwe menu is geweest, maar hoe verander ik dit terug?

[vanaalten]

Er is denk ik nog wel meer veranderd.
Ik gebruik o.a. Sidebar links en merk nu dat het de tracker in/uitklappen de hele menubalk ook mee-schuift. Waardoor het rechterdeel met oa notifications en persoonlijke instellingen niet meer zichtbaar is.

[DaFeliX]

Yorinn schreef op donderdag 23 januari 2025 @ 10:40:
Tweakers Groene Menubalk

Als ik nu hover over een menu-item, is die rood ipv. groen. Ik denk dat dit een aanpassing met het nieuwe menu is geweest, maar hoe verander ik dit terug?

Volgens mij zou dit werken:

code:

twk-site-menu > menu > li:hover {
  background-color: inherit;
}

[Rubman]

Gaat sowieso niet heel lekker met de bovenbalk en CSS,
Dropdown van notificaties flipt behoorlijk van links naar rechts met muis naar rand bewegen waardoor je feitelijk niets aan kan klikken.
ook de teller is vrij inacuraat geeft heel veel notificaties terwijl ik er maar 1 heb.
De flippende dropdown ligt waarschijnlijk aan de Hover snippet van @F.West98

[ Voor 22% gewijzigd door Rubman op 23-01-2025 11:14 ]

[Yorinn]

DaFeliX schreef op donderdag 23 januari 2025 @ 11:09:
[...]


Volgens mij zou dit werken:

code:

twk-site-menu > menu > li:hover {
  background-color: inherit;
}

Dat was hem bijna, maar heeft me wel in de goede richting geholpen. Onderstaande doet het hem.

code:

twk-site-menu > menu > li:hover {
background:#1D8348;
background-color:#1D8348;
border-bottom:1px solid #333;
border-bottom:1px solid #333;
height:43px
}

[GieltjE]

Heb van de week een eigen css gemaakt: Verberg scroll/jump button op mobiel

Ben absoluut geen frontend programeur (eerder het omgekeerde), dus als de css beter kan hoor ik het graag.

[vanaalten]

vanaalten schreef op donderdag 23 januari 2025 @ 10:49:
Er is denk ik nog wel meer veranderd.
Ik gebruik o.a. Sidebar links en merk nu dat het de tracker in/uitklappen de hele menubalk ook mee-schuift. Waardoor het rechterdeel met oa notifications en persoonlijke instellingen niet meer zichtbaar is.

Voor wie hier ook tegenaan loopt: ik heb die CSS snip vervangen door Fix de nieuwe verslechterde sidebar / sidebar weer links en dan werkt het weer zoals het hoort.

[segil]

Om één of andere reden is de "custom css" optie verdwenen uit mijn profiel, ik zie 'm er niet meer tussen staan als ik ga naar mijn profiel -> Instellingen.

Deze werkt ook niet bij mij: https://tweakers.net/instellingen/layout/#Customstyle

Nu is er een kleine kans dat mijn eigen custom CSS hiervoor verantwoordelijk is Alhoewel ik geen aanpassingen heb gedaan aan het instellingen menu, zover ik weet.

Iemand een idee hoe ik weer mijn custom CSS settings kan bereiken?

[crisp]

segil schreef op donderdag 23 januari 2025 @ 14:47:
Om één of andere reden is de "custom css" optie verdwenen uit mijn profiel, ik zie 'm er niet meer tussen staan als ik ga naar mijn profiel -> Instellingen.

Deze werkt ook niet bij mij: https://tweakers.net/instellingen/layout/#Customstyle

Nu is er een kleine kans dat mijn eigen custom CSS hiervoor verantwoordelijk is Alhoewel ik geen aanpassingen heb gedaan aan het instellingen menu, zover ik weet.

Iemand een idee hoe ik weer mijn custom CSS settings kan bereiken?

Misschien via deze link: https://tweakers.net/instellingen/customcss/

[ Voor 80% gewijzigd door crisp op 23-01-2025 15:19 ]

[segil]

crisp schreef op donderdag 23 januari 2025 @ 15:19:
[...]


Misschien via deze link: https://tweakers.net/instellingen/customcss/

Thanks! Nu weet ik zeker dat mijn CSS code dat linker menu bij Instellingen verbergt. ff puzzelen waardoor dat komt.

[Dennis1812]

Tweakers heeft de layout vandaag weer behoorlijk verkloot.
Op mobiel (chrome, Android, pixel fold) heb ik ineens 4 icoontjes bovenin en is de bel van notificaties fors kleiner geworden.
En met dikke vingers is t echt niet makkelijker geworden.

Iemand hier al d.m.v customCSS een fix voor om terug naar de situatie van gisteren te kunnen?
Die knop voor Nederland/België hoeft echt niet in het zicht te staan. Dat kan prima ver weg in een menuutje ergens. Of gewoon weg.

[Yorinn]

Dennis1812 schreef op donderdag 23 januari 2025 @ 22:05:
Tweakers heeft de layout vandaag weer behoorlijk verkloot.
Op mobiel (chrome, Android, pixel fold) heb ik ineens 4 icoontjes bovenin en is de bel van notificaties fors kleiner geworden.
En met dikke vingers is t echt niet makkelijker geworden.

Iemand hier al d.m.v customCSS een fix voor om terug naar de situatie van gisteren te kunnen?
Die knop voor Nederland/België hoeft echt niet in het zicht te staan. Dat kan prima ver weg in een menuutje ergens. Of gewoon weg.

Voor die weergave-opties is Verberg Weergave-opties in menu al gedeeld om die te verbergen.

[F.West98]

Rubman schreef op donderdag 23 januari 2025 @ 11:10:
Gaat sowieso niet heel lekker met de bovenbalk en CSS,
Dropdown van notificaties flipt behoorlijk van links naar rechts met muis naar rand bewegen waardoor je feitelijk niets aan kan klikken.
ook de teller is vrij inacuraat geeft heel veel notificaties terwijl ik er maar 1 heb.
De flippende dropdown ligt waarschijnlijk aan de Hover snippet van @F.West98

Er is inderdaad vrij veel kapot

Ik ga er dit weekend naar kijken!

[Bas170]

Voor de mensen die Aanvullingen Tweakers Perfect Dark gebruiken, ik heb wat aangepast.
Er gaat iets niet goed in dit stuk:

Cascading Stylesheet:

@media (min-width: 767px),(min-device-width: 767px) and (orientation: portrait),(min-device-width: 499px) and (orientation: landscape) {

#layout {
  background: rgb(39,40,40) !important;
}

.fixedHeader #menubar {
  width:100% !important;
}

#menu {
  width: 1000px !important;
}

#logo {
  left: -45px !important;
}

#menu .sitename + ul {
  margin-left: 120px !important;
  width:650px !important;
}

#userbar {
  right: 0px !important;
}

#top {
  margin: auto;
}
}

Door de @media was de bovenbalk naar rechts geschoven, maar ik zie niet 123 wat er fout gaat (de code die onder @media staat lijkt namelijk niet het issue), dus voor nu heb ik dat hele stuk uitgecomment. Op dit moment heb ik namelijk niet de tijd om daar in te duiken.

Menubalk zou nu in ieder geval weer bruikbaar moeten zijn.

[Meg]

Hey,

Er is vast iemand hier die weet of dit mogelijk is. Maar kun je op de GoT het logo van Tweakers vervangen met custom CSS door deze afbeelding van Henk?



Edit: @AW_Bos heeft deze custom CSS, maar die werkt op dit moment niet.
Henk in de header

[ Voor 29% gewijzigd door Meg op 27-04-2025 10:14 . Reden: Custom CSS gevonden die niet meer werkt ]

[Yorinn]

Meg schreef op zondag 27 april 2025 @ 10:09:
Hey,

Er is vast iemand hier die weet of dit mogelijk is. Maar kun je op de GoT het logo van Tweakers vervangen met custom CSS door deze afbeelding van Henk?

[Afbeelding]

Edit: @AW_Bos heeft deze custom CSS, maar die werkt op dit moment niet.
Henk in de header

Misschien dat je een stuk code uit Ode aan Henk kan halen om te gebruiken hiervoor?

[Meg]

Yorinn schreef op zondag 27 april 2025 @ 11:07:
[...]


Misschien dat je een stuk code uit Ode aan Henk kan halen om te gebruiken hiervoor?

Als ik weet, waar ik precies zou moeten zoeken.

[Paul]

@Meg Naar een URL Je zult het plaatje ergens vandaan moeten halen, dus als je in die CSS een URL ziet staan dan ben je op de goede weg.

Er staat maar één URL in, dus dat moet te doen zijn. Het commentaar is best duidelijk waar de tweede vermelding voor dient als je in gedachte houdt dat { t/m } een sectie aanduidt.

[Meg]

Dank, maar ook als ik de Ode aan Henk stijl gebruik, behoud je het normale logo van Tweakers.

[AW_Bos]

Meg schreef op zondag 27 april 2025 @ 10:09:
Hey,

Er is vast iemand hier die weet of dit mogelijk is. Maar kun je op de GoT het logo van Tweakers vervangen met custom CSS door deze afbeelding van Henk?

[Afbeelding]

Edit: @AW_Bos heeft deze custom CSS, maar die werkt op dit moment niet.
Henk in de header

Verhip. Is Henk opeens weggestuurd?
Mooi is dat!

Ik ga komende dagen ergens kijken of ik Henk weer terug kan krijgen.

[Meg]

AW_Bos schreef op zondag 27 april 2025 @ 12:04:
[...]

Verhip. Is Henk opeens weggestuurd?
Mooi is dat!

Ik ga komende dagen ergens kijken of ik Henk weer terug kan krijgen.

Ik vermoed dat Henk vakantie heeft, want ook de custom CSS van @Femme is Henk-loos.

[Hahn]

Even quick & dirty, en het is niet alleen op GoT, maar op heel Tweakers.net, maar het is een begin:

Cascading Stylesheet:

.site-logo, twk-site-menu .site-logo:hover {
  height: 45px;
  width: 100px;
  background: url(https://tweakers.net/fotoalbum/image/5Ox42ho8JvxT9r20zHJb98Tv.png) no-repeat 20px 0px;
}

.site-logo svg {
  display: none;
}

Wat eruit ziet als:


Uiteraard kan je de URL vervangen door een eigen plaatjes-URL, als je een ander logo wilt

[Meg]

Dat ziet er al een stuk beter uit!

Dit aanpassen naar andere maten werkt niet. Enig idee hoe dat komt?

[css] height: 45px;
width: 100px;[/css]

Gelukt, maar dat is niet mooi.

Ik ben bezig om het nog wat verder te Tweaken, maar zit nu met het volgende:

Cascading Stylesheet:

ttwk-site-menu .site-logo svg {
  display: none !important; /* Verberg het standaard Tweakers SVG-logo */
}

twk-site-menu .site-logo {
  height: 45px !important;
  width: 100px !important;
  background: url(https://tweakers.net/fotoalbum/image/5Ox42ho8JvxT9r20zHJb98Tv.png) no-repeat center/contain !important;
  background-color: transparent !important;
  border-left: 3px solid transparent !important; /* Zorgen dat de linkse rand bestaat voor hover */
  border-bottom: 1px solid transparent !important; /* Zorgen dat de onderste rand bestaat voor hover */
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Alleen transformatie met animatie */
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Mouse-over effect */
twk-site-menu .site-logo:hover {
  transform: rotateY(180deg) scale(1.1); /* Draai direct met geen vertraging */
  background-color: #730d26 !important; /* Achtergrondkleur direct na flip */
  border-left: 3px solid #730d26 !important; /* Lijn links direct na flip */
  border-bottom: 1px solid #730d26 !important; /* Lijn onderaan direct na flip */
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              background-color 0.8s ease, 
              border-left 0.8s ease, 
              border-bottom 0.8s ease; /* Vertraging voor de kleur- en randveranderingen */
}

Het bovenstaande is wat ik heb, dit werkt perfect (dank AI) maar bij de mouse over is de stijl nog niet helemaal goed, weet iemand hoe ik dat oplos?


Dit is met de "Ode aan Henk" template.

[ Voor 100% gewijzigd door Meg op 27-04-2025 16:26 . Reden: Ik was vergeten Henk te vermelden. ]

[Meg]

Met dank aan de "/me" in regenboog tekst heb ik mijn eigennaam ook met een regenboog effect, maar kan ej dit ook op de rest van de site doen en niet alleen het forum?

* Meg houdt van regenboogkleuren.

Cascading Stylesheet:

div.message[data-owner-id="821329"] a.user {
  background: linear-gradient(45deg, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s infinite linear;
  background-size: 200% 200%;
}
  
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

[Bas170]

Meg schreef op maandag 5 mei 2025 @ 14:28:
Met dank aan de "/me" in regenboog tekst heb ik mijn eigennaam ook met een regenboog effect, maar kan ej dit ook op de rest van de site doen en niet alleen het forum?

* Meg houdt van regenboogkleuren.

Cascading Stylesheet:

div.message[data-owner-id="821329"] a.user {
  background: linear-gradient(45deg, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s infinite linear;
  background-size: 200% 200%;
}
  
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

Ik heb ooit eens iets heel lelijks gemaakt, geen garantie dat het goed werkt:

Taste The Rainbow Of Eternal Suffering

[Meg]

Bas170 schreef op donderdag 15 mei 2025 @ 12:59:
[...]

Ik heb ooit eens iets heel lelijks gemaakt, geen garantie dat het goed werkt:

Taste The Rainbow Of Eternal Suffering

Ga thuis kijken. Dank.

Dat is te erg.

[ Voor 3% gewijzigd door Meg op 15-05-2025 18:29 ]

[evilution]

.

[ Voor 99% gewijzigd door evilution op 24-08-2025 09:01 ]

[Meg]

@Zerora kan het kloppen dat Henk zo geschrokken is tijdens Halloween dat hij verdwenen is en je nu weer een duimpje op berichten moet geven?

[Zerora]

Meg schreef op zondag 2 november 2025 @ 14:18:
@Zerora kan het kloppen dat Henk zo geschrokken is tijdens Halloween dat hij verdwenen is en je nu weer een duimpje op berichten moet geven?

Ja, ik zag het. Ik zal er deze week eens naar kijken.

[Meg]

Zerora schreef op zondag 2 november 2025 @ 17:44:
[...]

Ja, ik zag het. Ik zal er deze week eens naar kijken.

Super, dankjewel!

[vanaalten]

...dus... er moest zonodig een zwarte balk in beeld komen met Black Friday blaat, "Eerst Tweakers, dan shoppen! Bekijk onze selectie..." enzo. Kostbare nuttige ruimte wordt zo ingenomen.

Die moet met Custom CSS wel weg te krijgen zijn, lijkt mij - maar ik ben een amateur op CSS gebied.
Mijn poging was simpelweg:

Cascading Stylesheet:

.twk-alert-bar {display:none!important;}

...maar, dat doet het dus niet.

Ik had met F12 de inspectie-optie aangezet, op het muiswijzertje geklikt om de zwarte balk als element te selecteren en zag daar dus ".twk-alert-bar" als elementnaam genoemd. Maar goed, zoals gezegd werkt dit niet. Dan ben ik sowieso benieuwd naar een correcte oplossing, maar vooral ook uitleg daarbij waarom die wel werkt en hoe ik dit had kunnen bedenken. Iemand?

[THE_BASE]

vanaalten schreef op maandag 10 november 2025 @ 09:05:
...dus... er moest zonodig een zwarte balk in beeld komen met Black Friday blaat, "Eerst Tweakers, dan shoppen! Bekijk onze selectie..." enzo. Kostbare nuttige ruimte wordt zo ingenomen.

Die moet met Custom CSS wel weg te krijgen zijn, lijkt mij - maar ik ben een amateur op CSS gebied.
Mijn poging was simpelweg:

Cascading Stylesheet:

.twk-alert-bar {display:none!important;}

...maar, dat doet het dus niet.

Ik had met F12 de inspectie-optie aangezet, op het muiswijzertje geklikt om de zwarte balk als element te selecteren en zag daar dus ".twk-alert-bar" als elementnaam genoemd. Maar goed, zoals gezegd werkt dit niet. Dan ben ik sowieso benieuwd naar een correcte oplossing, maar vooral ook uitleg daarbij waarom die wel werkt en hoe ik dit had kunnen bedenken. Iemand?

Vast niet onbekend, maar met Safari in macOS en iOS kun je afleidende onderdelen verbergen. Werkt prima voor de amateur.

[MatHack]

vanaalten schreef op maandag 10 november 2025 @ 09:05:
...dus... er moest zonodig een zwarte balk in beeld komen met Black Friday blaat, "Eerst Tweakers, dan shoppen! Bekijk onze selectie..." enzo. Kostbare nuttige ruimte wordt zo ingenomen.

Die moet met Custom CSS wel weg te krijgen zijn, lijkt mij - maar ik ben een amateur op CSS gebied.
Mijn poging was simpelweg:

Cascading Stylesheet:

.twk-alert-bar {display:none!important;}

...maar, dat doet het dus niet.

Ik had met F12 de inspectie-optie aangezet, op het muiswijzertje geklikt om de zwarte balk als element te selecteren en zag daar dus ".twk-alert-bar" als elementnaam genoemd. Maar goed, zoals gezegd werkt dit niet. Dan ben ik sowieso benieuwd naar een correcte oplossing, maar vooral ook uitleg daarbij waarom die wel werkt en hoe ik dit had kunnen bedenken. Iemand?

Ik heb hem zelf verborgen met onderstaande, dat is echt puur voor de black-friday alert, want mogeijk zijn er alerts die ik de toekomst wel wil zien. De fout in jouw poging is dat je twk-alert-bar als class hebt geschreven ipv element (de punt ervoor moet weg).

Cascading Stylesheet:

twk-alert-bar[campaign-id="2"] {display:none!important} /* verbergt black friday alert */

[Help!!!!]

MatHack schreef op maandag 10 november 2025 @ 09:48:
[...]


Ik heb hem zelf verborgen met onderstaande, dat is echt puur voor de black-friday alert, want mogeijk zijn er alerts die ik de toekomst wel wil zien. De fout in jouw poging is dat je twk-alert-bar als class hebt geschreven ipv element (de punt ervoor moet weg).

Cascading Stylesheet:

twk-alert-bar[campaign-id="2"] {display:none!important} /* verbergt black friday alert */

Top, veel dank!
Die zwarte balk was echt zeer obnoxious!

[Meg]

Help!!!! schreef op maandag 10 november 2025 @ 10:19:
[...]

Top, veel dank!
Die zwarte balk was echt zeer obnoxious!

Maar daarmee behoud je wel de grijze balk.

[Help!!!!]

Kan ik prima mee leven, heb toch al een grijzige achtergrond:

[MatHack]

Meg schreef op maandag 10 november 2025 @ 10:39:
[...]

Maar daarmee behoud je wel de grijze balk.

Mocht je die ook nog wel willen halen:

Cascading Stylesheet:

.twk-site-menu-wrapper {height:3rem!important}

Maar ik heb dat zelf niet gedaan, omdat ik geen idee heb wat er, naast de alert-bar, nog meer de hoogte van die style-container aanpast. Ook ik kan, net als @Help!!!!, leven met een tijdelijke hogere grijze balk (in dark-mode in mijn geval).

[DaFeliX]

MatHack schreef op maandag 10 november 2025 @ 11:05:
[...]


Mocht je die ook nog wel willen halen:

Cascading Stylesheet:

.twk-site-menu-wrapper {height:3rem!important}

Maar ik heb dat zelf niet gedaan, omdat ik geen idee heb wat er, naast de alert-bar, nog meer de hoogte van die style-container aanpast. Ook ik kan, net als @Help!!!!, leven met een tijdelijke hogere grijze balk (in dark-mode in mijn geval).

Zou je dan niet beter

Cascading Stylesheet:

:root .has-alert-bar,
:root .has-alert-bar-desktop, 
:root .has-alert-bar-mobile {
    --alert-bar-height: 0;
    --site-menu-wrapper-height: var(--site-menu-height);
}

kunnen doen? Dan heb je ook geen !important nodig

[MatHack]

DaFeliX schreef op maandag 10 november 2025 @ 11:37:
[...]


Zou je dan niet beter

Cascading Stylesheet:

:root .has-alert-bar,
:root .has-alert-bar-desktop, 
:root .has-alert-bar-mobile {
    --alert-bar-height: 0;
    --site-menu-wrapper-height: var(--site-menu-height);
}

kunnen doen? Dan heb je ook geen !important nodig

Hehe, ik neem aan dat dat veel beter werkt, zover had ik niet door de DOM en de CSS gekeken

[Toet3r]

DaFeliX schreef op maandag 10 november 2025 @ 11:37:
[...]


Zou je dan niet beter

Cascading Stylesheet:

:root .has-alert-bar,
:root .has-alert-bar-desktop, 
:root .has-alert-bar-mobile {
    --alert-bar-height: 0;
    --site-menu-wrapper-height: var(--site-menu-height);
}

kunnen doen? Dan heb je ook geen !important nodig

Werkt bij mij niet

[Meg]

Toet3r schreef op maandag 10 november 2025 @ 12:05:
[...]


Werkt bij mij niet

Die werkt hier ook niet helaas.

[Meg]

MatHack schreef op maandag 10 november 2025 @ 11:05:
[...]


Mocht je die ook nog wel willen halen:

Cascading Stylesheet:

.twk-site-menu-wrapper {height:3rem!important}

Maar ik heb dat zelf niet gedaan, omdat ik geen idee heb wat er, naast de alert-bar, nog meer de hoogte van die style-container aanpast. Ook ik kan, net als @Help!!!!, leven met een tijdelijke hogere grijze balk (in dark-mode in mijn geval).

Helaas werkt dat niet, zal straks eens gaan spelen.

[DaFeliX]

Toet3r schreef op maandag 10 november 2025 @ 12:05:
[...]


Werkt bij mij niet

Misschien omdat je een ander element dan ik verberg?

Ik heb dit dat de alert-bar zelf en de witruimte weghaald:

Cascading Stylesheet:

twk-alert-bar {
  display: none;
}
:root .has-alert-bar,
:root .has-alert-bar-desktop, 
:root .has-alert-bar-mobile {
    --alert-bar-height: 0;
    --site-menu-wrapper-height: var(--site-menu-height);
}

[Bart ®]

Deze snippet lost voor mij het probleem op:
Verberg de altijd zichtbare Black Friday banner.

[Room42]

Bart ® schreef op maandag 10 november 2025 @ 12:56:
Deze snippet lost voor mij het probleem op:
Verberg de altijd zichtbare Black Friday banner.

Top, maar daarmee verwijder je wel alle 'twk-alert-bar' zaken. Het lijkt erop dat die bar voor meer opties gebruikt kan worden, maar die zul je dan ook niet meer zien.

Ik vind het, qua UX, raar dat er geen 'verberg melding'-knopje aanwezig is. Hoe heet jullie UX designer ook alweer? Misschien die even taggen?

[Meg]

Bart ® schreef op maandag 10 november 2025 @ 12:56:
Deze snippet lost voor mij het probleem op:
Verberg de altijd zichtbare Black Friday banner.

Deze werkt perfect!

[AW_Bos]

Room42 schreef op maandag 10 november 2025 @ 13:48:
[...]

Top, maar daarmee verwijder je wel alle 'twk-alert-bar' zaken. Het lijkt erop dat die bar voor meer opties gebruikt kan worden, maar die zul je dan ook niet meer zien.

Ik vind het, qua UX, raar dat er geen 'verberg melding'-knopje aanwezig is. Hoe heet jullie UX designer ook alweer? Misschien die even taggen?

Voor welke doeleinde wordt die balk nog meer gebruikt? Ik hoop niet dat ik straks belangrijke informatie zal missen?

[Room42]

AW_Bos schreef op maandag 10 november 2025 @ 14:00:
[...]

Voor welke doeleinde wordt die balk nog meer gebruikt? Ik hoop niet dat ik straks belangrijke informatie zal missen?

Met deze CSS aan zullen we het nooit weten.

[Bart ®]

Room42 schreef op maandag 10 november 2025 @ 13:48:
Hoe heet jullie UX designer ook alweer? Misschien die even taggen?

https://tweakers.net/info/over-tweakers/wie/
Daar staan er een paar.

[Toet3r]

Room42 schreef op maandag 10 november 2025 @ 13:48:
[...]

Top, maar daarmee verwijder je wel alle 'twk-alert-bar' zaken. Het lijkt erop dat die bar voor meer opties gebruikt kan worden, maar die zul je dan ook niet meer zien.

Ik vind het, qua UX, raar dat er geen 'verberg melding'-knopje aanwezig is. Hoe heet jullie UX designer ook alweer? Misschien die even taggen?

Ik heb deze snippet gemaakt die alleen de black friday alert-bar verbergt niet de volledige alert-bar.
Daarnaast verbergt ie ook de black friday knop in de menubar en zwarte achtergrond op pricewatch product pagina.

[Meg]

Toet3r schreef op maandag 10 november 2025 @ 14:23:
[...]

Ik heb deze snippet gemaakt die alleen de black friday alert-bar verbergt niet de volledige alert-bar.
Daarnaast verbergt ie ook de black friday knop in de menubar en zwarte achtergrond op pricewatch product pagina.

De knop wordt niet verborgen in de menubalk met deze.

[Toet3r]

Meg schreef op maandag 10 november 2025 @ 15:28:
[...]

De knop wordt niet verborgen in de menubalk met deze.

lol, linkte naar de verkeerde snippet. Dit is de goede
Weg met Black Friday

[Meg]

Nice, alhoewel ik met die button zelf geen moeite heb.

[jdh009]

Voor degene die het gemist hebben:
WouterdR in "Feedbacktopic voor advertenties (banners)"

WouterdR schreef op maandag 10 november 2025 @ 16:35:
Bedankt voor alle feedback. Voor nu hebben we de alert bar uitgezet bij nieuwsberichten en in het forum, je kunt hem nog wel zien op de homepage. Verschillende afdelingen gaan met elkaar in gesprek hoe we dit product kunnen verbeteren. Wanneer er meer te delen is dan doen we wat.

[ Voor 62% gewijzigd door jdh009 op 10-11-2025 17:22 ]

[Maarten21]

Voor wie games op de frontpage niet interessant vindt:

code:

.headlineItem:has(twk-icon[title*="Nieuws | Games"]){
  display: none;
}

Geen Games op frontpage

[Resistor]

Ik ben niet echt handig met CSS, en ik heb een hekel aan alles wat met AI te maken heeft.

Heeft iemand al een CSS die de AI samenvatting uit de PW weg kan slopen? Dan hoef ik die rotzooi niet te zien.



Zoeken op 'AI' in de snippets helpt niet echt.

[ Voor 8% gewijzigd door Resistor op 03-02-2026 14:48 ]

[MatHack]

Resistor schreef op dinsdag 3 februari 2026 @ 14:40:
Ik ben niet echt handig met CSS, en ik heb een hekel aan alles wat met AI te maken heeft.

Heeft iemand al een CSS die de AI samenvatting uit de PW weg kan slopen? Dan hoef ik die rotzooi niet te zien.

[Afbeelding]

Zoeken op 'AI' in de snippets helpt niet echt.

Cascading Stylesheet:

.pdp-ai-product-text-container { display:none }

Vrij makkelijk zelf te vinden met F12 en/of inspect element in de HTML overigens.

[ Voor 7% gewijzigd door MatHack op 03-02-2026 19:54 ]

[Help!!!!]

Iemand enig idee hoe je die rode balk en de tekst erin op het Forum en de Frontpage kunt verwijderen / vervangen door zelfde grijze achtergrond.

Mijn retina's branden er anders uit...

Ik kom wel snippets tegen die de hele footer eruit halen maar voor mij is alleen die balk ergerlijk.

[Dennis1812]

Help!!!! schreef op maandag 30 maart 2026 @ 20:47:
Iemand enig idee hoe je die rode balk en de tekst erin op het Forum en de Frontpage kunt verwijderen / vervangen door zelfde grijze achtergrond.

Mijn retina's branden er anders uit...

Ik kom wel snippets tegen die de hele footer eruit halen maar voor mij is alleen die balk ergerlijk.

[Afbeelding]

synoniem in "[feedback] Nieuwe footer"

Hier staan enkele opties. Met succes in gebruik bij mij in ieder geval.

[Help!!!!]

^
Thx. Die opties had ik wel al gevonden maar die deleten dus de rode balk en alles eronder.

Mij gaat het alleen om de rode balk en de tekst erin. Had zelf al wat geprobeerd maar krijg het niet voor elkaar. Heb hier verder ook nul verstand van.

Maar goed als dit niets oplevert dan hide ik de hele footer maar gewoon.

[MatHack]

Help!!!! schreef op maandag 30 maart 2026 @ 21:11:
^
Thx. Die opties had ik wel al gevonden maar die deleten dus de rode balk en alles eronder.

Mij gaat het alleen om de rode balk en de tekst erin. Had zelf al wat geprobeerd maar krijg het niet voor elkaar. Heb hier verder ook nul verstand van.

Maar goed als dit niets oplevert dan hide ik de hele footer maar gewoon.

Cascading Stylesheet:

.footer-top {display:none!important}

[Help!!!!]

^
Thx! Dit werkt

[ Voor 7% gewijzigd door Help!!!! op 31-03-2026 08:43 ]

[Turismo]

Wellicht dat je mijn snippet wat vind, die behoud de footer nog enigzins, echter valt die meer netjes weg zoals het hoort.

Lightweight Footer dark grey

[Noxious]

Anderen hier ook wel eens last van 'hostile CSS'?

Een gebruiker heeft laatst z'n CSS snippet aangepast om de hele site knalroze te maken:
https://tweakers.net/inst...mcss/snippets/bekijk/130/

Daar was ik dus op geabonneerd weet niet eens wat het oorspronkelijk was.

Een berichtje gestuurd met dat dat geen leuke grap is; een lekker toxic antwoord terug gekregen ('cry about it').

Dat heb ik nog niet eerder meegemaakt op t.net..

[jack zomer]

Noxious schreef op vrijdag 17 april 2026 @ 12:00:
Anderen hier ook wel eens last van 'hostile CSS'?

Een gebruiker heeft laatst z'n CSS snippet aangepast om de hele site knalroze te maken:
https://tweakers.net/inst...mcss/snippets/bekijk/130/

Daar was ik dus op geabonneerd weet niet eens wat het oorspronkelijk was.

Een berichtje gestuurd met dat dat geen leuke grap is; een lekker toxic antwoord terug gekregen ('cry about it').
Dat heb ik nog niet eerder meegemaakt op t.net..

https://gathering.tweaker...message/85086056#85086056
we hadden last van het zelfde. ik had geel en zwart.
De tweakers crew is er mee bezig.

[Noxious]

jack zomer schreef op vrijdag 17 april 2026 @ 14:42:
[...]


https://gathering.tweaker...message/85086056#85086056
we hadden last van het zelfde. ik had geel en zwart.
De tweakers crew is er mee bezig.

Aha, dankjewel! Dat topic had ik gemist (had nog wel gezocht!). Vervelend inderdaad; wat een naar gedrag.

[jack zomer]

Noxious schreef op vrijdag 17 april 2026 @ 12:00:
weet niet eens wat het oorspronkelijk was.

ik weet het ook niet meer. het was toen der tijd handig.
Maar ik heb al mijn ccs (blijkbaar had ik er 5) verwijdert.

Want nu het 1 keer is gebeurd, kan het zomaar zijn dat het nog een keer gebeurd.
Jammer dat het zo is, misschien had de maker van de ccs een slechte dag )@alex3305
Dat het niet verwacht van een 14k reactie tweaker. maar goed les geleerd.

[mindwarper]

Hallo allemaal

ik heb al langer een CSS snippet willen maken die alle Shops in PriceWatch met ≤3 rating - een vorm van Rood maakt en wat EXTRA functies meegeeft gelijk...
Ook om anderen te helpen goede overwogen keuze te maken om wel of niet te bestellen daar - altijd persoonlijke keuze!

Dat heb ik gedaan op deze manier:

• Op basis van <li data-shop-id> en waar nodig ook tegelijk <a href*="shop-id=">
• Bovendien dan ook verder in zelfde <li> - op basis van <twk-star-rating title=>, waarbij "Geen shopreviews" dan niet wordt meegenomen...
• Daarnaast dan ook verder in zelfde <li> - op basis van zelfde <twk-star-rating data-score=>, waarbij dan ale ratings van 0 tot kleiner of gelijk 3 (met halve stappen ertussen) worden meegenomen voor CSS styling
  Het is misschien op een onorthodoxe manier, maar ik moet dat doen omdat ik ook nog andere CSS snippets gebruik waardor het anders om zeep geholpen wordt...

Dan nu styling effecten zelf:

• Voor de shop naam een bouncing (elke 2s) goudkleurig waarchuwingssymbool
• Waarschuwingssymbool gebruikt:
  https://www.w3schools.com/cssref/css_entities.php - CSS ID 26A0
• No breaking space gebruikt:
  https://www.w3schools.com/cssref/css_entities.php - CSS ID 00A0
• Een vorm van rood shop naam
• Bij hover de background check-out button in andere rode kleur met opacity
• Shop Tagline Title in een wat andere passende rode kleur ook en wat gespeeld met met passende opacity niveaus
• dan nog wat kleine andere effectjes

Werkt het beste uitsluitend op TWK NEW Dark - dat is wat ik gebruik ook i.c.m. met eigen hele grote CSS snippet voor overige kleur veranderingen - deze:
Tweakers NEW Dark | Links colour + Other Customisations

En voor deze snippet voor shops met ≤3 rating - Snippet URL is deze:
Shops met ≤3 rating - Licht Rood en EXTRA Functies voor TWK NEW Dark

ook deze van mijzelf heb ik in gebruik:
Oude Moderatie kleuren - ALERNATIEF - Tweakers NEW Dark

Screenshots komen wellicht later wel - nu overdue avondeten maken
ik moet even kijken hoe ik een GIF kan toevoegen

GIF toegevoegd - het is te zien hoe het waarschuwingssymbool springt in oude en nieuwe kleurstelling...

edit:
Andere kleurstelling gebruikt en gespeeld met opacity ook...
en specifiek voor TWK NEW Dark gecodeerd
Nieuwe GIF geplaatst + nieuwe screenshot ook

OUD:


NIEUW:


En hier een screenshot van de Hover functie bij Bekijk clickout button...
En o ja die van Megekko - is ook een CSS van mij - Heb die doorgestreept voor mij overwegende redenen (andere discussie hahaha )

OUD:


NIEUW:

[ Voor 49% gewijzigd door mindwarper op 24-04-2026 11:57 . Reden: Nieuwe setup uitgelegd & nieuwe plaatjes toegevoegd ]

[Meg]

Heeft iemand een CSS snippet om het oude lettertype (of deze weer op een normale grote i.p.v. standje 'een blind persoon kan dit lezen' te krijgen?

[Onbekend]

Meg schreef op vrijdag 22 mei 2026 @ 11:35:
Heeft iemand een CSS snippet om het oude lettertype (of deze weer op een normale grote i.p.v. standje 'een blind persoon kan dit lezen' te krijgen?

Ik kreeg het probleem niet met CSS opgelost. Ik heb nu de Firefox-extension "Stylus" geïnstalleerd. Voor Tweakers.net heb ik het volgende ingesteld:

code:

@font-face {
  font-family: "Roboto Flex";
  src: local("Arial");
}

Op zich wel handig dat het niet in mijn standaard CSS zit, want dan kan ik het af-en-toe gemakkelijk uitzetten om te zien of er een verbetering is.

[Meg]

Onbekend schreef op vrijdag 22 mei 2026 @ 19:17:
[...]

Ik kreeg het probleem niet met CSS opgelost. Ik heb nu de Firefox-extension "Stylus" geïnstalleerd. Voor Tweakers.net heb ik het volgende ingesteld:

code:

@font-face {
  font-family: "Roboto Flex";
  src: local("Arial");
}

Op zich wel handig dat het niet in mijn standaard CSS zit, want dan kan ik het af-en-toe gemakkelijk uitzetten om te zien of er een verbetering is.

Hopelijk kan iemand dit met CSS fixen.

[Meg]

Als het goed is zou het moeten werken met deze snippet: Vervang Roboto Flex voor Arial met de oude grote

[Bas170]

Het lukt mij om op het forum een icoontje voor mijn eigen naam te zetten (vind ik een fijnere oplossing dan een regel of naam kleuren + het past bij m'n avatar ), maar op mijn profiel of op de FP lukt mij dat voor geen meter

Iemand een tip?
Onderstaand wat ik allemaal al geprobeerd heb (de !important zal waarschijnlijk niet nodig zijn, maar voor testen was het handig):

Cascading Stylesheet:

/*Ander icon op GoT*/
p.subtitle a[href="https://tweakers.net/gallery/357174/aanbod/"]::before{
  content: '🤖 ' !important;
}
a.user[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}

/*Ander icon op FP en profiel?*/
userLink.a.userName[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
a.username[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
userLink.userName.a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
span.userLink.userName.a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
.userName.a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
.reactieHeader.userName.a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
.reactieHeader .userLink. a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
.reactionMeta span.userLink a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
span.userLink.a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}
.galleryHeading .memberInfo h1[h1="Bas170"]::before{ 
  content: '🤖 ' !important;
}
div > div.reactieHeader.reactionHead > span.reactionMeta > span.userLink > a[href="https://tweakers.net/gallery/357174"]::before{ 
  content: '🤖 ' !important;
}

[Hero of Time]

Dit is wat in m'n browser direct invoeren werkt voor de FP (getest bij een item van Downloads):

code:

a.userName[href="https://tweakers.net/gallery/<userid>/"]::before {
  content: '🤖 ';
}

Let hierbij op, er is een / aan het eind, dat is bij het forum niet in de href link.

[Bas170]

Hero of Time schreef op zaterdag 13 juni 2026 @ 16:34:
Dit is wat in m'n browser direct invoeren werkt voor de FP (getest bij een item van Downloads):

code:

a.userName[href="https://tweakers.net/gallery/<userid>/"]::before {
  content: '🤖 ';
}

Let hierbij op, er is een / aan het eind, dat is bij het forum niet in de href link.

Kanonne, daar heb ik dus 2 uur lang overheen gekeken

Dit werkt, thanks!

[mindwarper]

In navolging van CSS snippet wat ik heb gemaakt van Shops met een Ster-rating <= 3 om daar wat CSS code aan toe te voegen, heb im een poging gedaan om het zelfde te doen voor V&A advertenties listings...
Eerdere post van mij van de Shopratings <=3 is deze
mindwarper in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Ik heb dus een poging gedaan om iets soortgelijks voor V&A advertenties te doen met deze CSS code...
Heb hierbij een aantal keuzes gemaakt - en ik wilde vragen wat jullie ervan vinden - voordat ik mijn CSS public zet

• Heb gekozen voor oranje rood gevarendriehoek voor V&A users met een TWK ster rating <=3
• Een donker gouden gevarendriehoek voor users met nog geen rating
• Een gouden/gele gevarendriehoek voor V&A users met een rating >3 maar met minder dan 15 reviews
• Een groen vinkje voor V&A users met een rating >3 en met >=15 reviews
• Bounce effect voor alle genoemde icoontjes voor de V&A user name

Dan als men doorklikt op een advertentie dan heb ik dat in de dl.adverteerder class proberen mee te nemen...
Ik heb het ook willen doortrekken naar de betreffende advertentiepagina zelf - maar daar is de beoordeling tussen haakjes in dd.beoordeling niet te selecteren met CSS - dus heb ik dat niet kunnen doen
Laatste paar plaatjes maken het duidelijk wat ik bedoel.

Welke kleurstellingen zouden jullie het liefste willen zien? Ik kan het graag aanpassen

Dan is hieronder de CSS code zoals ik die heb gemaakt - okay met hulp van Gemini
Link is hier: Users met ≤3 V&A rating - Warning icon | met >3 V&A Rating - Good Checkmark -...

Hier een visuele weergave zoals ik het heb uitgewerkt
Dan de advertentiepagina zelf ook meegenomen - maar kan dat alleen voor de V&A users doen met nog geen reviews en mensen met een slechte (lees <=3) review-score doen...
Ik kan zoals gezegd geen onderscheid maken tussen V&A users met >3 review-score met met minder dan 15 reviews en die met 15 of meer...

Kan iemand van Tweakers (Misschien @DaFeliX ?) iets wijzigen in de HTML-code van dl.adverteerder dd.beoordeling dat de tekst tussen haakjes die de review-aantal weergeeft een id of liefst een class kan krijgen (iets van review-total.number of nog anders)?
Dan kan er met CSS op geselecteerd worden - en dat is precies wat ik wil om dat te kunnen doen...

Cascading Stylesheet:

/************************************************************
 * TWEAKERS V&A RATING FLAGS
 * Logic: 
 * Target the common parent (td.location or dl.adverteerder) 
 * to check the star rating, then style the child elements.
 ************************************************************/

/* ----------------------------------------------------------
   0) Declare used warning symbols + styles
   ---------------------------------------------------------- */
.twk-dark {
  /* V&A User Warning + CheckMark ICONS */
  --twk-va-user-warn-icon-01: "\26A0\00A0";  /* ⚠ + NBSP */
  --twk-va-user-good-icon-01: "\2714\00A0";  /* ✔ + NBSP */

  /* Icon Colors */
  --twk-va-user-zero-warn-icon-color: darkgoldenrod;
  --twk-va-user-warn-icon-color: orangered;  
  --twk-va-user-caution-icon-color: gold;
  /* --twk-va-user-okay-icon-color: #72AB7E; */
  --twk-va-user-good-icon-color: #64B307;

  /* Animation Variables (2s standard, 1.8 and 2.2s for others) */
  --twk-va-user-anim-01: icon-bounce 2s infinite ease-in-out;
  --twk-va-user-anim-02: icon-bounce 1.8s infinite ease-in-out;
  --twk-va-user-anim-03: icon-bounce 2.2s infinite ease-in-out;
}

/* ----------------------------------------------------------
   1A) ZERO-rating flag (= 0 stars)
      ONLY ORANGERED Warning.
   ---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
  twk-star-rating[title]:is([title*=" 0 " i]):is(
    [data-score="0 / 5"]
  )
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before,
dl.adverteerder:has(
  twk-star-rating:is(  
    [data-score="0 / 5"]
  )
) dd a[href*="https://tweakers.net/gallery/"]::before
{
  content: var(--twk-va-user-warn-icon-01);
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: var(--twk-va-user-anim-01);
  font-weight: bold !important;
  color: var(--twk-va-user-zero-warn-icon-color);
}

/* ----------------------------------------------------------
   1B) Low-rating flag ( > 0 AND <= 3 stars)
      Excludes 0 reviews. ONLY ORANGERED Warning.
   ---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
  twk-star-rating[title]:not([title*=" 0 " i]):is(
    [data-score="0.5 / 5"],
    [data-score="1 / 5"],
    [data-score="1.5 / 5"],
    [data-score="2 / 5"],
    [data-score="2.5 / 5"],
    [data-score="3 / 5"],
    [data-score="3.0 / 5"]
  )
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before,
dl.adverteerder:has(
  twk-star-rating:is(
    [data-score="0.5 / 5"],
    [data-score="1 / 5"],
    [data-score="1.5 / 5"],
    [data-score="2 / 5"],
    [data-score="2.5 / 5"],
    [data-score="3 / 5"],
    [data-score="3.0 / 5"]
  )
) dd a[href*="https://tweakers.net/gallery/"]::before
{
  content: var(--twk-va-user-warn-icon-01);
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: var(--twk-va-user-anim-02);
  font-weight: bold !important;
  color: var(--twk-va-user-warn-icon-color);
}

/* ----------------------------------------------------------
   2A) High-rating flag (> 3 stars) | 1-14 Reviews
       Gold Caution
   ---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
  twk-star-rating[title]:is(
    [title*=" 1 " i],
    [title*=" 2 " i],
    [title*=" 3 " i],
    [title*=" 4 " i],
    [title*=" 5 " i],
    [title*=" 6 " i],
    [title*=" 7 " i],
    [title*=" 8 " i],
    [title*=" 9 " i],
    [title*=" 10 " i],
    [title*=" 11 " i],
    [title*=" 12 " i],
    [title*=" 13 " i],
    [title*=" 14 " i]
  ):is(
    [data-score="3.5 / 5"],
    [data-score="4 / 5"],
    [data-score="4.5 / 5"],
    [data-score="5 / 5"],
    [data-score="5.0 / 5"]
  )
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before
{
  content: var(--twk-va-user-warn-icon-01);
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: var(--twk-va-user-anim-03);
  font-weight: normal !important;
  color: var(--twk-va-user-caution-icon-color);
}

/* ----------------------------------------------------------
   2B) High-rating flag (> 3 stars) | >= 15 Reviews
       ONLY Darker Green Checkmark
   ---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
  twk-star-rating[title]:not(
    [title*=" 0 " i],
    [title*=" 1 " i],
    [title*=" 2 " i],
    [title*=" 3 " i],
    [title*=" 4 " i],
    [title*=" 5 " i],
    [title*=" 6 " i],
    [title*=" 7 " i],
    [title*=" 8 " i],
    [title*=" 9 " i],
    [title*=" 10 " i],
    [title*=" 11 " i],
    [title*=" 12 " i],
    [title*=" 13 " i],
    [title*=" 14 " i]
  ):is(
    [data-score="3.5 / 5"],
    [data-score="4 / 5"],
    [data-score="4.5 / 5"],
    [data-score="5 / 5"],
    [data-score="5.0 / 5"]
  )
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before
{
  content: var(--twk-va-user-good-icon-01);
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: var(--twk-va-user-anim-01);
  font-weight: bold !important;
  color: var(--twk-va-user-good-icon-color);
}

/* ----------------------------------------------------------
   3) Fix Layout
   ---------------------------------------------------------- */
table.listing.valisting tr td.location p.subtitle a[href*="https://tweakers.net/gallery/"]
{
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}

table.listing.valisting tr td.location:not(.city) {
  width: 125px !important; 
}

/* Target the city/distance column */
table.listing.valisting tr td.location.city
{
  width: 115px !important;
  /* width: auto !important; */     /* Allows it to grow/shrink based on content */
  /* white-space: nowrap; */         /* Prevents the city name from wrapping */
  padding-left: 10px;        /* Adds breathing room between username and city */
  vertical-align: top;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}

/* ----------------------------------------------------------
   4) Functies Bounce
   ---------------------------------------------------------- */
@keyframes icon-bounce {
  0%   { transform: scale(1) translateY(0); }
  25%  { transform: scale(1.3) translateY(0px); }
  50%  { transform: scale(1) translateY(0); }
  75%  { transform: scale(1.3) translateY(0px); }
  100% { transform: scale(1) translateY(0); }
}

[ Voor 1% gewijzigd door mindwarper op 08-07-2026 12:12 . Reden: CSS code opnieuw toegevoegd - wat wijzigingen gedaan ]

[Meg]

Heeft iemand een werkende snippet om alles weer wat kleiner te maken voor de wijziging van vandaag?

[evilution]

Meg schreef op dinsdag 7 juli 2026 @ 18:46:
Heeft iemand een werkende snippet om alles weer wat kleiner te maken voor de wijziging van vandaag?

Staat in het artikel op de fp.

[Meg]

evilution schreef op dinsdag 7 juli 2026 @ 18:51:
[...]

Staat in het artikel op de fp.

Dank! Jammer dat het met custom CSS moet omdat het font nu 200 keer zo groot is.

[evilution]

Meg schreef op dinsdag 7 juli 2026 @ 19:02:
[...]

Dank! Jammer dat het met custom CSS moet omdat het font nu 200 keer zo groot is.

Ach, bij iedere UI update is er een zooi CSS nodig om de boel toonbaar te maken. Wel fijn dat de benodigde CSS nu meegeleverd wordt.

[sanderhak]

mindwarper schreef op woensdag 22 april 2026 @ 19:54:
Hallo allemaal

ik heb al langer een CSS snippet willen maken die alle Shops in PriceWatch met ≤3 rating - een vorm van Rood maakt en wat EXTRA functies meegeeft gelijk...
Ook om anderen te helpen goede overwogen keuze te maken om wel of niet te bestellen daar - altijd persoonlijke keuze!

Dit lijkt me een goed idee om breed uit te rollen. Zoals je voorstelde PW & V&A.

Het contrast tussen groene en grijze ster is niet op alle schermen in alle situaties goed zichtbaar, dit is minder subtiel.

Het is misschien een idee om grijze (lege) sterren weg te laten vallen naar achtergrondkleur, dan werkt het ook in geval van rood/groen kleurblindheid.