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

[matroosoft]

Hero of Time schreef op donderdag 27 juli 2023 @ 22:14:
@matroosoft, de html class is iig dit:

code:

<twk-icon name="fa-thumbs-up" class="icon action-icon-inner thumbsup rated" title="Verwijder thumbs-up"><svg><use href="/x/build/images/icons-symbol.890ccb36.svg#fa-thumbs-up"></use></svg></twk-icon>

Onder deze node staat uiteindelijk iets met <path> en de fill attribuut daarvan is wat de kleur van de duim zelf kleurt. Omdat het in de html zelf staat en niet in css, zal dat wat lastig zijn, maar denk niet onmogelijk.

Dank je, maar kom er nog niet veel verder mee

[matroosoft]

Ik heb inmiddels ook een paar uur in een andere snippet gestoken. Hiermee kun je reacties op de frontpage inklappen net zoals op Reddit. Dus door boven op de reactie klikken, klap je die reactie plus alle onderliggende reacties in. Daardoor kan je snel naar de volgende thread als je de huidige thread niet interessant vind.

Reacties inklappen zoals op Reddit

Standaard was dit ook al mogelijk maar dan moest je 1x op de reactie klikken (op mobiel) en dan kwamen de buttons tevoorschijn.



Nu zijn de buttons verborgen en is het een onzichtbaar vlak tussen de username en de moderatiescore.



Het werkt ook bij de laatste reactie, dat was de grootste uitdaging aangezien dat een aparte knop was. Maar die heb ik uiteindelijk onder het andere vlak gelegd met een z-index. Omdat bij de laatste reactie van een thread alleen die knop beschikbaar is klik je dan daarop.

Edit: er zit nog wel een klein bugje in, in ieder geval op de mobiel wordt de moderatieknop geblokkeerd en kun je dus niet gebruiken. Morgen nog maar even kijken waar dat aan ligt.

Edit: gefixt

[ Voor 11% gewijzigd door matroosoft op 03-08-2023 22:51 ]

[Matis]

DaFeliX schreef op woensdag 26 juli 2023 @ 07:39:
Wat een slim idee om het title-attribute op deze manier te gebruiken

Het enige dat ik mij kan bedenken dat dit misgaat zodra er iemand op een topic reageert wiens gebruikersnaam "Matis" bevat. Als je nu de $= selector gebruikt, zouden deze false positives volgens mij niet meer voorkomen:

Cascading Stylesheet:

.listing tr:has( .topic a[title$="door Matis"] ) td { 

Bedankt voor de suggestie, heb het aangepast. Nu maar hopen dat Tweakers zijn title-attribuut niet gaat aanpassen.

CodeCaster schreef op woensdag 26 juli 2023 @ 11:27:
Die "laatste reactie door"-feature gebruik ik ook in mijn custom CSS, maar dan iets subtieler: lichtgrijze titel en schuingedrukt:

Cascading Stylesheet:

/* topics waarin ik als laatste heb gereageerd cursief */
.listing .topic a[title$="door CodeCaster"] 
{ 
    color: #aaaaaa !important; 
    font-style: italic; 
}

Subtiliteit is aan mij niet besteed

Ik was jouw snippet inderdaad al tegengekomen in de zoektochten naar dergelijke constructies.

Ik heb mijn snippet aangepast toen ik merkte dat een topic-warning (nagenoeg) dezelfde kleur geel was als mijn color-mix in de css. Dus die heb ik overgenomen. Met de wijziging van @DaFeliX komt het totaal uit op

Cascading Stylesheet:

.listing tr:has( .topic a[title$="door Matis"] ) td { 
  background-color: var(--surface-warning-color);
}

[mindwarper]

Heb wat werk verricht om vooral de text Hyperlinks van nieuwe Tweakers dark een neutralere kleur te geven - anders dan blauw....

en heb nog wat andere leuke trucjes uitgehaald...
Echt teveel om op te noemen....

Een greep uit mijn inmiddels complexe CSS code - te groot om hier neer te zetten

• Normale link kleur = #B0B0B0
• Kopjes kleur (Tracker, ankeilers, FP, en desbetreffende links, etc...) = #c5c5c5
• Visited kleur = lightsalmon
• Hover voor Hyperlinks (visited ook) alles wat linkable of toggable is = skyblue
• sommige ctaButtons goud-gele kleur gegeven - palegoldenrod
• comment counter - ankeilers lichtoranje = #FCC178
• comment counter - ankeirers randje orangered
• overige comment counters goud-gele kleur - palegoldenrod
• ankeiler hover bij prijs balkje - lichtgrijs en skyblue text hover kleur
• FP comment counter randje (overige) licht groen = #72AB7E
• Crew leden naam link = orangered
• Members naam link = Groen = #64B307
• In forum is dat ook met de toevoeging van dat Members die abonnee zijn in iets lichtere kleur groen = #72AB7E
• topicstarter naam = paars = #CE3AE5
• etc...

Te vinden - hier...
Tweakers NEW Dark | Links colour + Customisations
Daarnaast gebruik ik ook nog deze snippet erbij - Tweakers NEW Dark | D4NG3R Tweaks AANGEPAST
Als ik sommige dingen beter kan doen, laat het mij weten middels de feedback op mijn CSS

---

[ Voor 53% gewijzigd door mindwarper op 02-08-2023 18:19 . Reden: Typo's + Screenshots ]

[mindwarper]

Heb nog wel een klein vraagje:

• als ik weet dat deze CSS selector bestaat voor forum posts gemaakt door Crew leden - zie woordje crew in de link class
  
  Cascading Stylesheet:
  

  div.wrap div#content div.message div.poster.avatar div.userheader p.username a.user.ellipsis.crew

• Hoe kan ik dan middels CSS de hele post van een andere format kleur of wat dan ook voorzien... ???
  Ondersdtaand is maar een voorbeeld dan wat ik wil doen...
  
  Cascading Stylesheet:
  

  div.wrap div#content div.message div.post
  {
    background-color: lightcyan;
    color: magenta;
  }

• heb meerdere pogingen gedaan ook met :has() selector, maar ik mis iets wellicht ???
  
  Cascading Stylesheet:
  

  div.message:has(> div.poster.avatar > div.userheader > p.username > a.user.ellipsis.crew) div.post
  {
      box-shadow: -0.25rem 0 0 lightcyan;
      background-color: magenta;
  }

[ Voor 14% gewijzigd door mindwarper op 02-08-2023 21:04 ]

[Hero of Time]

@mindwarper, hoe? Niet. Want de selector is voor de gebruikersnaam en die van de post valt er naast, waardoor je geen enkele relatie meer hebt met de gebruiker van wie de post is.

De selector die je hebt gevonden is van div class "poster avatar". In de DOM tree staat op dezelfde hoogte div class "post" en daar staat het bericht zelf. Die twee staan dus los van elkaar en kan je derhalve niet tegelijk een kleur geven. Alleen de gebruikersnaam kan je een kleur geven. De rest is hetzelfde voor alle gebruikers.

[Matis]

Gisteren ineens heel mijn custom CCS naar de getver.

Blijkt dat (ineens) var(--warning-50) uit het kleurenpalet van Tweakers is gehaald.

Bleek in een stukje externe CSS snippet te zitten, gelukkig heeft de eigenaar het snel gefixt

Ik zie overigens geen .plan die de wijziging heeft aangekondigd.

[Zeror]

mindwarper schreef op woensdag 2 augustus 2023 @ 21:00:
Heb nog wel een klein vraagje:

• als ik weet dat deze CSS selector bestaat voor forum posts gemaakt door Crew leden - zie woordje crew in de link class
  
  Cascading Stylesheet:
  

  div.wrap div#content div.message div.poster.avatar div.userheader p.username a.user.ellipsis.crew

• Hoe kan ik dan middels CSS de hele post van een andere format kleur of wat dan ook voorzien... ???
  Ondersdtaand is maar een voorbeeld dan wat ik wil doen...
  
  Cascading Stylesheet:
  

  div.wrap div#content div.message div.post
  {
    background-color: lightcyan;
    color: magenta;
  }

• heb meerdere pogingen gedaan ook met :has() selector, maar ik mis iets wellicht ???
  
  Cascading Stylesheet:
  

  div.message:has(> div.poster.avatar > div.userheader > p.username > a.user.ellipsis.crew) div.post
  {
      box-shadow: -0.25rem 0 0 lightcyan;
      background-color: magenta;
  }

Dit zou moeten werken mits je browser :has ondersteunt.

code:

div.message:has(a.crew) { .. }

[mindwarper]

Hero of Time schreef op woensdag 2 augustus 2023 @ 21:59:
@mindwarper, hoe? Niet. Want de selector is voor de gebruikersnaam en die van de post valt er naast, waardoor je geen enkele relatie meer hebt met de gebruiker van wie de post is.

De selector die je hebt gevonden is van div class "poster avatar". In de DOM tree staat op dezelfde hoogte div class "post" en daar staat het bericht zelf. Die twee staan dus los van elkaar en kan je derhalve niet tegelijk een kleur geven. Alleen de gebruikersnaam kan je een kleur geven. De rest is hetzelfde voor alle gebruikers.

dank voor de toelichting...
Dat zou eens heel goed mogelijk kunnen zijn op de manier zoals je het omschrijft en uitlegt hehehe

Al zijn de div class "post" en div class "poster avatar" wel beide childs van dezelfde parent div class "message", dus ik gokte erop dat het zou moeten werken, maar misschien verkeerd gedacht dus...

Nogmaals dank voor je tijd en uitleg @Hero of Time

EDIT - and yet I tried again en kijk - Thanks voor de tip @Zeror

Cascading Stylesheet:

div.message:has(a.crew)
{
  /* box-shadow: -0.25rem 0 0 lightcyan;
  background-color: magenta; */
  font-style: italic;
  color: cyan !important;
}

EDIT 2 - zo heb ik het nu gemaakt met CSS code
Over schuingedrukte tekst en cyan kleur ga ik nog even nadenken hehe

Cascading Stylesheet:

/* Crew Posts */
div.message:has(a.crew)
{
  /**
  --brand-extra-dark-color: var(--brand-15);
  --brand-dark-color: var(--brand-25);
  --brand-color: var(--brand-35);
  --brand-light-color: var(--brand-45);
  --surface-card-color: var(--grey-20);
  --brand-95: #fce8ed;-
  --brand-90: #fad1db;
  --brand-80: #f5a3b8;
  --brand-45: #cf1745;
  --brand-40: #b8143d;
  --brand-35: #a11236;
  --brand-30: #8a0f2e;
  --brand-25: #730d26;
  --brand-20: #5c0a1f;
  --brand-15: #450817;
  --grey-20: #2e3338;  
  **/
  box-shadow: -0.25rem 0 0 var(--brand-35);
  background-color: color-mix(in srgb, var(--brand-40) 5%, var(--surface-card-color));
}

div.message:has(a.crew) div.messagecontent
{
  color: cyan !important;
  font-style: italic;
}

[ Voor 53% gewijzigd door mindwarper op 03-08-2023 10:09 . Reden: extra info ]

[Hero of Time]

mindwarper schreef op donderdag 3 augustus 2023 @ 07:28:
[...]

dank voor de toelichting...
Dat zou eens heel goed mogelijk kunnen zijn op de manier zoals je het omschrijft en uitlegt hehehe

Al zijn de div class "post" en div class "poster avatar" wel beide childs van dezelfde parent div class "message", dus ik gokte erop dat het zou moeten werken, maar misschien verkeerd gedacht dus...

Nogmaals dank voor je tijd en uitleg @Hero of Time

Om de reden dat het childs zijn van dezelfde parent was mijn beredenering dat het niet zomaar kan. Je kan niet in 'omhoog', alleen 'omlaag'.

EDIT - and yet I tried again en kijk - Thanks voor de tip @Zeror

Cascading Stylesheet:

div.message:has(a.crew)
{
  /* box-shadow: -0.25rem 0 0 lightcyan;
  background-color: magenta; */
  font-style: italic;
  color: cyan !important;
}

[Afbeelding]

EDIT 2 - zo heb ik het nu gemaakt met CSS code
Over schuingedrukte tekst en cyan kleur ga ik nog even nadenken hehe

Cascading Stylesheet:

/* Crew Posts */
div.message:has(a.crew)
{
  /**
  --brand-extra-dark-color: var(--brand-15);
  --brand-dark-color: var(--brand-25);
  --brand-color: var(--brand-35);
  --brand-light-color: var(--brand-45);
  --surface-card-color: var(--grey-20);
  --brand-95: #fce8ed;-
  --brand-90: #fad1db;
  --brand-80: #f5a3b8;
  --brand-45: #cf1745;
  --brand-40: #b8143d;
  --brand-35: #a11236;
  --brand-30: #8a0f2e;
  --brand-25: #730d26;
  --brand-20: #5c0a1f;
  --brand-15: #450817;
  --grey-20: #2e3338;  
  **/
  box-shadow: -0.25rem 0 0 var(--brand-35);
  background-color: color-mix(in srgb, var(--brand-40) 5%, var(--surface-card-color));
}

div.message:has(a.crew) div.messagecontent
{
  color: cyan !important;
  font-style: italic;
}

Nice. En volgens de link van @Zeror is het bij Firefox achter een config flag beschikbaar.

[mindwarper]

Hero of Time schreef op donderdag 3 augustus 2023 @ 19:10:
Nice. En volgens de link van @Zeror is het bij Firefox achter een config flag beschikbaar.

Het jammere is dat Firefox voor mobiel :has() niet ondersteunt
heb nu in mijn snippet de :has() code los apart neergezet - dus als het niet ondersteund wordt dan gaat de overige code gewoon wel goed....

en mijn Firefox-fork kloon PaleMoon voor op de desktop ook niet - ik kan niet direct vinden waar ik het kan aanzetten in PaleMoon browser...

Kan er wel mee leven eventueel - al zou voor de stukken code die ik wellicht ooit eens zal neerzetten - een oplossing kunnen zijn om dedicated class attributen te coderen hehehe dan zou het makkelijk zijn...
maar ja too easy is ook weer niet zo de bedoeling...

[ Voor 34% gewijzigd door mindwarper op 03-08-2023 20:23 . Reden: extra info ]

[GerardVanAfoort]

Hoe ziet jouw t.net eruit

Nou, gewoon:
blackened
😎

[Zeror]

mindwarper schreef op donderdag 3 augustus 2023 @ 20:19:
[...]

Het jammere is dat Firefox voor mobiel :has() niet ondersteunt

Firefox desktop officieel ook nog niet. Je kan het aanzetten, dat wel.

[F.West98]

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!

• Hybride donker/licht thema
• "Traditionele" header
• Menu dropdowns on hover
• Pricewatch: Filters aan de rechterkant
• Forum:
  • Volledige forum redesign
  • Bring Back Devschuur
  • Bookmarks "Folders" menu inklappen
  • Navigatielinks als tabs
  • Dubbele posts niet meer samenvoegen
  • Verbeterde paginanavigatie
  • Kleurtjes in de forumlijst

.

Hybride donker/licht thema

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

"Traditionele" header

"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:

:root {
    brand-color: <wat je maar wil>;
}

Snippet: "Traditionele" header met aanpasbare kleur

Menu dropdowns on hover

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 klik

Pricewatch: Filters aan de rechterkant

As the title says; dus de filters aan de rechterkant zoals het "vroeger" was.

[Pricewatch] Filters aan de rechterkant

Volledige forum redesign

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:

body {
    --message-radius: 0px;
}

Foto's zijn klikbaar en openen een gallery

Bring Back Devschuur

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

Bookmarks "Folders" menu inklappen

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

Navigatielinks als tabs

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

Dubbele posts niet meer samenvoegen

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 samenvoegen

Verbeterde paginanavigatie

De 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

Kleurtjes in de forumlijst

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

[Zeror]

Holy sh*t, F.West. Dat ziet er netjes uit man! Kuddo's.

[Yorinn]

F.West98 schreef op donderdag 10 augustus 2023 @ 21:50:
[...]

Kleurtjes in de forumlijst

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

[Afbeelding]

Is het een bewuste keuze om General Chat geel-achtig te maken ipv de blauw die de icoontjes hebben?

[F.West98]

Yorinn schreef op donderdag 10 augustus 2023 @ 22:59:
[...]


Is het een bewuste keuze om General Chat geel-achtig te maken ipv de blauw die de icoontjes hebben?

Vroeger was het geel Dus vooral nostalgie eigenlijk, en mede om het duidelijker te onderscheiden van Feedback.

[Yorinn]

F.West98 schreef op donderdag 10 augustus 2023 @ 23:00:
[...]

Vroeger was het geel Dus vooral nostalgie eigenlijk, en mede om het duidelijker te onderscheiden van Feedback.

Hoe werkt dat met die nummers? Gaat dat op volgorde van de forumlijst, dan pas ik hem zelf aan en voeg ik voor mezelf nog wat toe.

Dat werkt dus inderdaad zo.

[ Voor 5% gewijzigd door Yorinn op 10-08-2023 23:06 ]

[F.West98]

Yorinn schreef op donderdag 10 augustus 2023 @ 23:01:
[...]


Hoe werkt dat met die nummers? Gaat dat op volgorde van de forumlijst, dan pas ik hem zelf aan en voeg ik voor mezelf nog wat toe.

Dat is inderdaad op volgorde van de forumlijst. Ik heb de snippet even aangepast zodat je heel gericht maar één variabele hoeft aan te passen: "--forum-color-gc". Dus:

Cascading Stylesheet:

:root {
  --forum-color-gc: <color>;
}

[mindwarper]

@F.West98
Lijkt het erop dat link naar je snippet voor volledig forum redesign mist - of heb ik er gewoon overheen gekeken ???

heb gelijk maar een aantal van je snippets aangeklikt om te gebruiken - thanks voor het uitzoeken en het maken ervan!
Kudos !!!

[erwn]

mindwarper schreef op vrijdag 11 augustus 2023 @ 09:03:
@F.West98
Lijkt het erop dat link naar je snippet voor volledig forum redesign mist - of heb ik er gewoon overheen gekeken ???

Die zocht ik ook: [Forum] Moderne posts redesign . Het is wel een licht redesign, dus niet ideaal voor dark mode.

Dank @F.West98 ! Ik heb ook wat snippets aangezet en meteen ook naar andere snippets gekeken en aangezet.

[Rubman]

Wat een waanzinig werk @F.West98
Ik heb direct wat snippets gebruikt, nu hopen dat er niet teveel met mijn eigen CSS bijt, nu moet die ook eens goed op de schop eigenlijk

[F.West98]

erwn schreef op vrijdag 11 augustus 2023 @ 09:18:
[...]


Die zocht ik ook: [Forum] Moderne posts redesign . Het is wel een licht redesign, dus niet ideaal voor dark mode.

Dank @F.West98 ! Ik heb ook wat snippets aangezet en meteen ook naar andere snippets gekeken en aangezet.

De redesign zou ook moeten werken in dark mode! Alle kleuren zouden theme-agnostic moeten zijn. Als je issues tegenkomt, laat het dan even weten
(ik bedenk me nu dat het zou kunnen dat het mis gaat als je automatische themadetectie hebt, ipv handmatig dark theme selecteert... ik kan dat niet goed testen bij mij)

[erwn]

F.West98 schreef op vrijdag 11 augustus 2023 @ 15:03:
[...]

(ik bedenk me nu dat het zou kunnen dat het mis gaat als je automatische themadetectie hebt, ipv handmatig dark theme selecteert... ik kan dat niet goed testen bij mij)

Blijkbaar was dat de oorzaak. Als ik expliciet dark mode instel, is de redesign ook dark

[F.West98]

erwn schreef op vrijdag 11 augustus 2023 @ 15:41:
[...]


Blijkbaar was dat de oorzaak. Als ik expliciet dark mode instel, is de redesign ook dark

Ik heb het inmiddels trouwens gefixt voor de automatische detectie!

[joint_me]

Ben een beetje het kleuren schema van de dark mode aan het aanpassen naar Nord Theme kleuren. En de font heb ik naar mijn system font gezet.

Ik heb voornamelijk de css variabelen overschreven, verdere tweaks misschien in de toekomst, maar vind dit er al erg chill uitzien.

[Help!!!!]

Als je op het forum scrolled blijft de rode balk bovenin staan. Voor mijn gevoel was dat gisteren nog niet zo en verdween deze automatisch als ik naar beneden scrollde. En was die balk dus niet persistent als je naar beneden scrolled. Maar misschien was het altijd al zo en stoor ik me er nu pas aan. :x

Dat rood vind ik veel te veel aandacht trekken als je aan het lezen bent en het neemt schermruimte in.....

Anyway, weet iemand of er een CSS regel /snippet is die dit met name op het forum non-persistent kan maken of evt er een zachtgrijze kleur van maken.

[crisp]

Help!!!! schreef op maandag 20 november 2023 @ 09:08:
Als je op het forum scrolled blijft de rode balk bovenin staan. Voor mijn gevoel was dat gisteren nog niet zo en verdween deze automatisch als ik naar beneden scrollde. En was die balk dus niet persistent als je naar beneden scrolled. Maar misschien was het altijd al zo en stoor ik me er nu pas aan. :x

Dat is niet veranderd. Alleen op mobiele devices (lees: lagere resoluties) verdwijnt de navigatiebalk bij scrollen.

[Rubman]

Ik hoop dat iemand mij hier kan helpen, want ik zie het niet meer in mijn allegaartje van CSS en snippets bij elkaar verzameld.

Sinds de nieuwe zijbalk is ook de Best Buy een dropdown menu geworden en nu zit hier een vrij irritante streep naast die ik weer in de fijne blauwe kleur wil hebben zoals de rest.
Ik krijg het echter in mijn CSS niet voor elkaar om die streepjes weg te poetsen, alles waar de blauwe kleurcode voor komt staat voor zover ik zie zoals het moet maar mis vast ergens een pixel opvulling ofzo.



Deze is dus nu dropdown en daar komt de rode Tweakers kleur tussendoor.

[vanaalten]

Rubman schreef op donderdag 1 februari 2024 @ 10:28:
Ik hoop dat iemand mij hier kan helpen, want ik zie het niet meer in mijn allegaartje van CSS en snippets bij elkaar verzameld.

Sinds de nieuwe zijbalk is ook de Best Buy een dropdown menu geworden en nu zit hier een vrij irritante streep naast die ik weer in de fijne blauwe kleur wil hebben zoals de rest.
Ik krijg het echter in mijn CSS niet voor elkaar om die streepjes weg te poetsen, alles waar de blauwe kleurcode voor komt staat voor zover ik zie zoals het moet maar mis vast ergens een pixel opvulling ofzo.

[Afbeelding]

Deze is dus nu dropdown en daar komt de rode Tweakers kleur tussendoor.

Als eerste... zie je die streepjes ook als je alle CSS eens uit zet? Want zelf zie ik die streepjes niet rondom "Best Buy Guides", dus wellicht wordt het veroorzaakt door iets wat je al in je CSS hebt. En dan moet je misschien stapsgewijs uitzoeken wat het veroorzaakt en of dat misschien onnodig is.

[Rubman]

vanaalten schreef op donderdag 1 februari 2024 @ 11:16:
[...]

Als eerste... zie je die streepjes ook als je alle CSS eens uit zet? Want zelf zie ik die streepjes niet rondom "Best Buy Guides", dus wellicht wordt het veroorzaakt door iets wat je al in je CSS hebt. En dan moet je misschien stapsgewijs uitzoeken wat het veroorzaakt en of dat misschien onnodig is.

Nee die zie ik niet want dan is alles gewoon rood en zijn de streepjes of niet aanwezig, of niet zichtbaar, waar ik de bovenste balk van Tweakers blauw heb gemaakt.
Elke CSS waar die kleurcode in zit heb ik nagelopen en helaas zonder resultaat

[Yorinn]

Rubman schreef op donderdag 1 februari 2024 @ 10:28:
Ik hoop dat iemand mij hier kan helpen, want ik zie het niet meer in mijn allegaartje van CSS en snippets bij elkaar verzameld.

Sinds de nieuwe zijbalk is ook de Best Buy een dropdown menu geworden en nu zit hier een vrij irritante streep naast die ik weer in de fijne blauwe kleur wil hebben zoals de rest.
Ik krijg het echter in mijn CSS niet voor elkaar om die streepjes weg te poetsen, alles waar de blauwe kleurcode voor komt staat voor zover ik zie zoals het moet maar mis vast ergens een pixel opvulling ofzo.

[Afbeelding]

Deze is dus nu dropdown en daar komt de rode Tweakers kleur tussendoor.

Ik heb (met dank aan @darkrain) onderstaande toegevoegd aan m'n custom css en daarmee zijn de rode strepen weg.

code:

#menu > ul > li.more
{
  border-left: 1px solid #145A32;
  border-right: 1px solid #145A32;
}

Zie Tweakers Groene Menubalk voor de volledige css die ik gebruik.

[Rubman]

Helpt iets meer, heb nu ipv mijn gele box-shadow met rode streep een gele box-shadow met blauwe streep, maar stuk minder opvallend dan het rood dus neem het even voor lief en ga later wel uit vogelen hoe ik die box-shadow netjes goed krijg

[segil]

Over die Best Buy Guides gesproken, hoe haal ik die weg? Voorheen gebruikte ik dit, maar dat werkt nu niet meer.
#bestBuyGuides {
display:none;
}
Het is ook geen link naar een aparte pagina, anders kon ik dat wel blokken. Iemand een idee?

[MatHack]

@segil

Cascading Stylesheet:

#navMenu :nth-child(4) { display: none; }

[DaFeliX]

MatHack schreef op vrijdag 2 februari 2024 @ 13:27:
@segil

Cascading Stylesheet:

#navMenu :nth-child(4) { display: none; }

Zo haal je niet de BBG's weg, maar 't vierde menu-item.

Beter doe je:

Cascading Stylesheet:

#menu > ul > li[data-link-name="Best Buy Guides"] {
  display: none;
}

[segil]

DaFeliX schreef op vrijdag 2 februari 2024 @ 13:51:
[...]


Zo haal je niet de BBG's weg, maar 't vierde menu-item.

Beter doe je:

Cascading Stylesheet:

#menu > ul > li[data-link-name="Best Buy Guides"] {
  display: none;
}

Bedankt, dat doet 'm!

[vanaalten]

DaFeliX schreef op vrijdag 2 februari 2024 @ 13:51:
[...]


Zo haal je niet de BBG's weg, maar 't vierde menu-item.

Beter doe je:

Cascading Stylesheet:

#menu > ul > li[data-link-name="Best Buy Guides"] {
  display: none;
}

Een verlate 'dankjewel'!

Ik begon mij vandaag te storen aan de "Deals" knop in de menubalk. Geen idee hoe lang die daar al zit (weken? Of pas sinds vandaag?) maar ik wilde hem weghebben, want ik hou niet zo van dingen die proberen mij iets te verkopen.

En jouw voorstel werkt dus ook voor Deals:

code:

#menu > ul > li[data-link-name="Deals"] {
  display: none;
}

Mooi.

[alex3305]

Wederom verlate, maar andere oplossing:

Cascading Stylesheet:

@media screen and (min-width: 800px) { ul#navMenu { display: flex; } }
li[data-link-name="Nieuws"]          { order: 0; }
li[data-link-name="Reviews"]         { order: 1; }
li[data-link-name="Pricewatch"]      { order: 2; }
li[data-link-name="Vraag & Aanbod"]  { order: 3; }
li[data-link-name="Forum"]           { order: 4; }
li[data-link-name="Deals"]           { display: none; }
li[data-link-name="Best Buy Guides"] { order: 6; }
li[data-link-name="Meer"]            { order: 7; }

Hierbij verander ik de volgorde van het menu zoals het vroegah was . En als je deals niet weg wilt hebben, kun je die de display: none ook vervangen door order: 5 .

[sjorsjuhmaniac]

Heeft iemand een oplossing om op een telefoon het top menubalk zo aan te passen dat ik met 1 klik de notificaties open? Nu krijg ik eerst dat het zij-menu opent en dan kan ik pas op het belletje klikken. Ik zou graag direct ‘op het belletje’ willen kunnen klikken

Nu:

[Hahn]

sjorsjuhmaniac schreef op zaterdag 8 juni 2024 @ 13:12:
Heeft iemand een oplossing om op een telefoon het top menubalk zo aan te passen dat ik met 1 klik de notificaties open? Nu krijg ik eerst dat het zij-menu opent en dan kan ik pas op het belletje klikken. Ik zou graag direct ‘op het belletje’ willen kunnen klikken

Nu:

[Afbeelding]

[Afbeelding]

[Afbeelding]

Dat ga je met alleen (custom) CSS niet kunnen oplossen. Kan wel, zie hieronder

[sjorsjuhmaniac]

Hahn schreef op zaterdag 8 juni 2024 @ 13:30:
[...]

Dat ga je met alleen (custom) CSS niet kunnen oplossen.

jammer thnx voor de feedback.

[erwn]

Kun je de font size niet kleiner maken? Ik vond dit ook irritant, maar sinds een tijd heb ik wel een los icoon en werkt het met een klik. Overigens zonder CSS wijzigingen, dus weet niet waarom het toen anders werd.

[sjorsjuhmaniac]

erwn schreef op zaterdag 8 juni 2024 @ 17:23:
Kun je de font size niet kleiner maken? Ik vond dit ook irritant, maar sinds een tijd heb ik wel een los icoon en werkt het met een klik. Overigens zonder CSS wijzigingen, dus weet niet waarom het toen anders werd.

Nee het is echt een icoon/img waar ik over praat.
Heb het nu soort van gefixed met

Cascading Stylesheet:

#userbar li.notifications{
  display: flex;
}

Dit forceert dat het 'belletje' altijd zichtbaar blijft. Hij staat nu alleen niet 'helemaal' rechts. Heb al even zitten spelen met de positie maar die is lastig omdat hij dan ook de positie veranderd als ik op de PC kijk. Voor nu voldoende voor mij.

[Hahn]

sjorsjuhmaniac schreef op zondag 9 juni 2024 @ 15:11:
[...]


Nee het is echt een icoon/img waar ik over praat.
Heb het nu soort van gefixed met

Cascading Stylesheet:

#userbar li.notifications{
  display: flex;
}

Dit forceert dat het 'belletje' altijd zichtbaar blijft. Hij staat nu alleen niet 'helemaal' rechts. Heb al even zitten spelen met de positie maar die is lastig omdat hij dan ook de positie veranderd als ik op de PC kijk. Voor nu voldoende voor mij.

Dat kan je verhelpen door er een media-query omheen te zetten met een max-width. Bijvoorbeeld:

Cascading Stylesheet:

@media screen and (max-width: 500px) {
  #menu {
    margin-right: 0 !important;
 }
}

[erwn]

sjorsjuhmaniac schreef op zondag 9 juni 2024 @ 15:11:
[...]


Nee het is echt een icoon/img waar ik over praat.
Heb het nu soort van gefixed met

Ik bedoel de font size van de hele header, zodat er misschien voldoende ruimte vrijkomt voor het icoon. Maar goed, je hebt een werkbare oplossing 👌

[sjorsjuhmaniac]

Hahn schreef op zondag 9 juni 2024 @ 15:18:
[...]

Dat kan je verhelpen door er een media-query omheen te zetten met een max-width. Bijvoorbeeld:

Cascading Stylesheet:

@media screen and (max-width: 500px) {
  #menu {
    margin-right: 0 !important;
 }
}

Thanks! it works

Cascading Stylesheet:

@media screen and (max-width: 500px) {
  #menu .rightSidebarToggle {
    order: 2;
    display: none;
  }

  #menu .leftSidebarToggle {
    display: none;
  }

  #menu .leftSidebarToggle {
    order: 0;

  }

  #menu #logo {
    order: 1;
  }

  #menu #userbar {
    order: 2;
    margin-left: auto;
    margin-right: 0;

  }

  #userbar .icon.display {
    display: none;

  }

  #userbar li.notifications {
    display: flex;
    order: 3;
  }

  #userbar li.messages {
    display: flex;
    order: 2;
  }

  #userbar li.compare {
    display: flex;
    order: 1;
  }

  #userbar li.more {
    display: flex;
    order: 0;
  }
}

[vanaalten]

Heb maar even wat moeite gedaan om onzin uit de newsfeed te filteren.
Om ".actie" te filteren (commercieele acties met partners enzo):

code:

.headlines .headlineItem.promo {
  display: none;
}

Om ".deals" te filteren (iets nieuws sinds gisteren, overzicht van prijsdalers in de Pricewatch):

code:

.headlines .headlineItem.deals {
  display: none;
}

Is niet heel spannend, maar misschien bruikbaar voor anderen.

[Skit3000]

Ik heb denk ik wel een leuk custom snippet voor wie de vormgeving van reacties op frontpageartikelen te afleidend vindt. Ik heb alles teruggebracht tot het minimale, terwijl alle bestaande functionaliteit gewoon beschikbaar is gebleven.

Custom CSS toevoegen: Compactere reacties op frontpage

Overzicht:



Features:

• Datum/tijd toont volledig als je er overheen gaat met je muis.
• Moderatiestatus is nu een kleine indicator in plaats van het grote getal.
• Reacties met een +2 of hoger zijn duidelijk herkenbaar door de verticale groene rand.
• [i]Je eigen moderatie is zichtbaar als klein puntje naast de berekende score.[/li]
• Reactie rapporteren is nu een icoon ipv tekst.
• Reageren is nu een knop ipv een tekst.
• Gewijzigde reacties worden nu getoond met een icoon. Ga je er met je muis overheen, zie je de geschiedenis.

Nog even een voor/na, waar je goed kunt zien hoeveel meer ruimte er is:

[ Voor 16% gewijzigd door Skit3000 op 17-07-2024 22:06 ]

[Hero of Time]

Skit3000 schreef op woensdag 17 juli 2024 @ 22:02:
Ik heb denk ik wel een leuk custom snippet voor wie de vormgeving van reacties op frontpageartikelen te afleidend vindt. Ik heb alles teruggebracht tot het minimale, terwijl alle bestaande functionaliteit gewoon beschikbaar is gebleven.

Custom CSS toevoegen: Compactere reacties op frontpage

Kijk eens in je snippet naar regels 43 en 47. De selector is hetzelfde. Hierdoor geef je 2x dezelfde margin-top mee, bij de eerste een max-height van 10px, bij de tweede een height van 10px.

[Skit3000]

Aangepast. Gelijk ook wat andere aanpassingen gedaan. Zo is de "Bewerken" tekst bij je eigen berichten omgezet naar een knop (zelfde plek als de reply knop) en worden je eigen berichten duidelijk gemarkeerd. Verder wat dingen beter uitgelijnd en popup teksten beter leesbaar gemaakt.

[Skit3000]

Weer een paar kleine aanpassingen aan mijn Compactere reacties op frontpage snippet, na het een poosje dagelijks te hebben gebruikt.

Reageren




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


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



Ingeklapte reacties



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





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



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!

[wizai]

Heeft iemand tips om mijn buttons of tekst een andere kleur te geven via CSS?

Het gaat om css class ctaButton


Edit: gefixt door thema Licht in te stellen, in plaats van Donker.

[ Voor 10% gewijzigd door wizai op 05-08-2024 13:43 ]

[Hero of Time]

wizai schreef op maandag 5 augustus 2024 @ 13:13:
Heeft iemand tips om mijn buttons of tekst een andere kleur te geven via CSS?

Het gaat om css class ctaButton
[Afbeelding]

Edit: gefixt door thema Licht in te stellen, in plaats van Donker.

Alternatief is .ctaButton een color: black; mee te geven. Of gewoon geen kleur overrulen, dan krijg je de standaard regel die gewoon voldoet (ik gebruik dark mode en de tekst op knoppen is bij mij gewoon donker). Waarde in css:

code:

color: var(--button-default-text-color);

[JBplap]

Bastien schreef op zondag 13 september 2020 @ 14:02:
Weet iemand of het op de een of andere manier mogelijk is om topics te verbergen, behalve via het verboden teken in 'Mijn topics'? Dat laatste is niet functioneel want dan moet je er eerst in gepost hebben. Ik wil bepaalde topics gewoon nooit zien, maar zie daar nu geen mogelijkheden voor. Behalve dan een heel subforum eruit te gooien maar da's ook niet de bedoeling. Dus eigenlijk een topic ID geheel verbergen, al is het maar enkel bij de 'Actieve topics'. Dat ik dat af en toe uit moet breiden met nieuwe id's maakt mij niet heel veel uit.

Heb wel gevonden (in een snippet) hoe het kan met user id's maar zie daar niet iets in overeen komen voor gehele topics. Maar mijn CSS kennis is ook op een diep droevig niveau dus dat helpt niet mee.

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

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