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

[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 ]