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

[dec0de]

ik ben de laatste tijd bezig met een custom css, en heb heel veel aangepast, en ik zou graag wat feedback hebben. ik weet dat het een rotzooi is en dat ik dingen 2 keer benoem (anders doet die het SOMS niet, maar meestal wel) later komen er nog fotos bij

Cascading Stylesheet:

[li]
#menuwrapper {
background-image: none;
background-color: #2d2d2d;
}

#menubar {
background-image: none;
background-color: rgba(1,2,0,0.85);
border-bottom-width: 1px;
box-shadow: rgba(18,23,4,0.45) 0px -1px 0px 0px inset;

}

#searchbar {
box-shadow: rgba(18,23,4,0.45) 0px 0px 0px 2px inset;
min-width: 100%;
}

#contentArea {
box-shadow: 5px 10px 18px #888888;
padding: 15px;
background: #343033;
}

#categoryBrowser div {
border: 0px;
}


#categoryBrowser .sublist {
background: #343033;
}

#bottom div.hr {
background-color: #00000000;
height: 0px;
}

#layout {
}

div.bar div.notice {
border: 5px;
}

div.message {
background: #5a5a5a;
}

h1, h2 ,h3, h4, h5, h6, h7, h8, h9, h10, h11, p.mods a, #title, a{
color: #bbbbbb;
}

.crew {
color: #bbbbbb;
}

div.oldage {
color: #bbbbbb;
}

a {
color: #fff;
}

#bottom{
height: 200px;
}

#ticker {
height: 20px;
}

#about {
height: 120px;
}
body {
color: #fff;
}

form table td.label {
color: #fff
}

div.message.bestAnswer {
color: #505050;
}
table.forumlisting>tbody>tr>td {
background: #5a5656;
}

#true {
width: 0px;
}

.nextPrevLinks.large li a {
color: #0783ff;
}

table.forumlisting .preview>td {
padding: 9px 18px 16px;
}

.nextPrevLinks.large .label {
color: #fff;
}

.commentCount {
margin-right: 5px;
}
table.forumlisting>tbody>tr>td{
    padding: 2px 4px;
}
.darkFpBlock {
background-color: #676767;
}

#community .communityReviews .userReview .reviewContent .userReviewDescription{
    background-image: linear-gradient(to bottom, #484848, #42423f);
   border-radius: 15px;
box-shadow: none;
background-color: #676767;
}

#categoryBrowser  {
 background: #343033;
border: inherit;
width: inherit;
}

.bar {
border: 0px;
border-radius: 2px;
background: #676767;
}

.images li {
background: #343033;
}
#catagoryBrwoser .sublist {
background: #343033;
}
#categoryBrowser .images li  {
padding: 0px;
margin: 5px;
background: #fff;
}

#categoryBar li a {
color: #fff;
}

fotos css ez

[ Voor 34% gewijzigd door dec0de op 05-11-2018 16:26 ]

[Hahn]

Als het de ene keer wel werkt en de andere keer niet, dan heb je te maken met specificiteit. Dus de veranderingen of hoger neerzetten, of !important gebruiken om het af te dwingen. Dingen dubbel neerzetten heeft weinig nut

[dec0de]

nee, ik bedoel dat ik bijvoorbeeld de ene keer dit heb:


.tralala {
background-color: 0f0;
}
en dan een andere keer dit:

.tralalala li {
color: #fff;
}


en ik krijg het maar niet voormekaar om een achtergrond in te stellen! op een een of andere manier kun je nergens een achtergrond instellen. ik link gewoon op de juiste manier naar een website, het werkt namelijk wel bij de tryit! editor van w3schools...


en hoe krijg je die mooie blokken code die iedereen heeft, ik heb nu maar een quote ervan gemaakt zodat mensen het kunnen inklappen, maar heel handig is het ook niet!

[ Voor 56% gewijzigd door dec0de op 04-11-2018 17:44 ]

[Hero of Time]

Wat is je uiteindelijke doel om te maken? Het lijkt er in de eerste paar plaatjes naar uit dat je het monochroom wilt maken, maar daarna zie ik wat groen en voornamelijk donkere achtergrondkleuren, zoals o.a. ik en anderen hebben gemaakt.

Als je '.blabla' en '.blabla li' dubbel vindt, wordt het uiteindelijk nog heel leuk als je meer gaat doen. Je krijgt namelijk ook nog te maken met '#blabla' en zaken als 'td' en 'td tr'.

Waar wil je een achtergrond hebben eigenlijk? Heb je al met 'inspect element' van je browser gekeken hoe het deel heet wat je wilt aanpassen met 'background'?

Als je syntax weergave wilt doen met de code blokken, dan moet je dat apart aangeven welke taal het is. Je kan trouwens ook gewoon berichten bekijken en onder de post die je normaal ziet, staan dan twee vakken. Eentje is de post zoals die is getypt in het reageer veld, die eronder is om het bericht te quoten. Bij de eerste kan je dus zien hoe de opmaak is gemaakt e.d.

[Hahn]

Lets find it schreef op zondag 4 november 2018 @ 17:38:
nee, ik bedoel dat ik bijvoorbeeld de ene keer dit heb:


.tralala {
background-color: 0f0;
}
en dan een andere keer dit:

.tralalala li {
color: #fff;
}


en ik krijg het maar niet voormekaar om een achtergrond in te stellen! op een een of andere manier kun je nergens een achtergrond instellen. ik link gewoon op de juiste manier naar een website, het werkt namelijk wel bij de tryit! editor van w3schools...


en hoe krijg je die mooie blokken code die iedereen heeft, ik heb nu maar een quote ervan gemaakt zodat mensen het kunnen inklappen, maar heel handig is het ook niet!

Voor die blokken code kan je... en nu komt het hoor... [code] gebruiken. Of nog beter, [code=css]

En ik snap je voorbeeld niet helemaal. Background-color doet wat het zegt: de achtergrondkleur. En color is voor de tekstkleur. Dat zijn dus 2 verschillende dingen. En .tralala en .tralala li zijn ook verschillende dingen.

[ Voor 3% gewijzigd door Hahn op 04-11-2018 20:02 ]

[dec0de]

Hero of Time schreef op zondag 4 november 2018 @ 19:45:
Wat is je uiteindelijke doel om te maken? Het lijkt er in de eerste paar plaatjes naar uit dat je het monochroom wilt maken, maar daarna zie ik wat groen en voornamelijk donkere achtergrondkleuren, zoals o.a. ik en anderen hebben gemaakt.


Waar wil je een achtergrond hebben eigenlijk? Heb je al met 'inspect element' van je browser gekeken hoe het deel heet wat je wilt aanpassen met 'background'?

mijn plan is om een totaal anders iets te maken. maar gezien ik de achtergrond maar niet veranderd krijg! (de exact zelfde code werkt wel bij andere websites!!!!). ik wacht nog steeds op de tweakers night mode switch. zodra dat er is wil ik dit als night mode, en een totaal andere css voor overdag.


via inspect element kwam ik er achter dat het moet via layout, met deze code:

Cascading Stylesheet:

 background-image: url("http://s1.picswalls.com/wallpapers/2016/06/06/beach-desktop-wallpapers_090608503_305.jpg");
 

maar dat werkt dus niet, terwijl ik alle elementen heb uitgezet die in strijd zouden kunnen zijn, ook bij body heb ik maar hetzelfde neergezet, verandert niks. toen maar geprobeerd bij allerlei websites, maar daar werkt het wel (!)


IK BEN ER ACHTER! TWEAKERS CONTENT POLICY BLOCKT HET, DUS MISSCHIEN LUKT HET VIA HET FOTO ALBUM!

[ Voor 3% gewijzigd door dec0de op 05-11-2018 16:36 ]

[8088]

Lets find it schreef op maandag 5 november 2018 @ 16:32:
maar dat werkt dus niet

Waarschijnlijk omdat je browser mixed content ongewenst vindt. OH, JE BENT ER AL UIT!

[ Voor 6% gewijzigd door 8088 op 05-11-2018 16:42 ]

[dec0de]

ja, om een afbeelding als achtergrond in te stellen moet je de afbeelding upoaden naar het fotoalbum publieke deel. dan de publieke link copieren en die link gebruiken voor background image!

[8088]

Dat moet niet, dat is een mogelijkheid. Je kunt ook extern gehoste afbeeldingen gebruiken, zolang het maar over https aangeleverd wordt.

[DedSec85]

Hallo Tweakers,

Ik heb de custom CSS optie gekocht. Ik krijg het alleen niet voor elkaar om de kleur van de rode menubalk te wijzigen. Ik heb nu even deze code overgenomen:

[code=css]
#top {
background-color: #0052CC !important;
background-image: none !important;
}

h1, h2 {
color: #4775FF !important;
}

[code]

Doe ik iets verkeerd? Ik gebruik Mozilla Firefox als browser.

[Hero of Time]

@DedSec85, ja, in de eerste plaats sluit je tags met /tag. In de tweede is het niet #top maar #menubar. Dat kan je snel zien als je het element inspecteert.

[Floor-is]

Ik heb deze: incaz in "[feature request] Mute user op forum" in gebruik genomen.

Wat een rust

[NMe]

Floor-is schreef op zondag 23 december 2018 @ 12:09:
Ik heb deze: incaz in "[feature request] Mute user op forum" in gebruik genomen.

Wat een rust

Ik heb die eerder al eens op een andere manier uitgeschreven, geeft meer rust.

Cascading Stylesheet:

div.message {
    opacity: 1;
    transition: opacity 500ms ease;
}
div.message[data-owner-id="user-id-1-hier"]:not(:hover), /* username, voor jezelf */
div.message[data-owner-id="user-id-2-hier"]:not(:hover) /* username, voor jezelf */
{
    max-height: 20px;
    opacity: 0.4;
    overflow: hidden;
}

[911GT2]

Lets find it schreef op zondag 4 november 2018 @ 17:31:
ik ben de laatste tijd bezig met een custom css, en heb heel veel aangepast, en ik zou graag wat feedback hebben. ik weet dat het een rotzooi is en dat ik dingen 2 keer benoem (anders doet die het SOMS niet, maar meestal wel) later komen er nog fotos bij

Cascading Stylesheet:

\[li]
#menuwrapper {
background-image: none;
background-color: #2d2d2d;
}

#menubar {
background-image: none;
background-color: rgba(1,2,0,0.85);
border-bottom-width: 1px;
box-shadow: rgba(18,23,4,0.45) 0px -1px 0px 0px inset;

}

#searchbar {
box-shadow: rgba(18,23,4,0.45) 0px 0px 0px 2px inset;
min-width: 100%;
}

#contentArea {
box-shadow: 5px 10px 18px #888888;
padding: 15px;
background: #343033;
}

#categoryBrowser div {
border: 0px;
}


#categoryBrowser .sublist {
background: #343033;
}

#bottom div.hr {
background-color: #00000000;
height: 0px;
}

#layout {
}

div.bar div.notice {
border: 5px;
}

div.message {
background: #5a5a5a;
}

h1, h2 ,h3, h4, h5, h6, h7, h8, h9, h10, h11, p.mods a, #title, a{
color: #bbbbbb;
}

.crew {
color: #bbbbbb;
}

div.oldage {
color: #bbbbbb;
}

a {
color: #fff;
}

#bottom{
height: 200px;
}

#ticker {
height: 20px;
}

#about {
height: 120px;
}
body {
color: #fff;
}

form table td.label {
color: #fff
}

div.message.bestAnswer {
color: #505050;
}
table.forumlisting>tbody>tr>td {
background: #5a5656;
}

#true {
width: 0px;
}

.nextPrevLinks.large li a {
color: #0783ff;
}

table.forumlisting .preview>td {
padding: 9px 18px 16px;
}

.nextPrevLinks.large .label {
color: #fff;
}

.commentCount {
margin-right: 5px;
}
table.forumlisting>tbody>tr>td{
    padding: 2px 4px;
}
.darkFpBlock {
background-color: #676767;
}

#community .communityReviews .userReview .reviewContent .userReviewDescription{
    background-image: linear-gradient(to bottom, #484848, #42423f);
   border-radius: 15px;
box-shadow: none;
background-color: #676767;
}

#categoryBrowser  {
 background: #343033;
border: inherit;
width: inherit;
}

.bar {
border: 0px;
border-radius: 2px;
background: #676767;
}

.images li {
background: #343033;
}
#catagoryBrwoser .sublist {
background: #343033;
}
#categoryBrowser .images li  {
padding: 0px;
margin: 5px;
background: #fff;
}

#categoryBar li a {
color: #fff;
}

Vandaag begonnen deze te gebruiken! Eerste indruk is erg positief!

Edit: op de FP krijgen alle +2 reacties een kleur die niet matched met de tekstkleur... of eigenlijk juist wel en is dus niet leesbaar.

[dec0de]

911GT2 schreef op woensdag 2 januari 2019 @ 11:14:
[...]

Vandaag begonnen deze te gebruiken! Eerste indruk is erg positief!

Edit: op de FP krijgen alle +2 reacties een kleur die niet matched met de tekstkleur... of eigenlijk juist wel en is dus niet leesbaar.

Ik zal het aanpassen, morgen of misschien wel vandaag is dat gefikst

[dec0de]

ik heb het denk ik gevoden, maar omdat ik nu een andere css gebruik, weet ik het niet zeker, maar 99% kans dat het werkt, je moet gewoon onderaan de css dit lijntje toevoegen:

Cascading Stylesheet:

 
.reactieBody.spotlight {
    background: #f3faf5;
    border-color: #becfbe;
    color: black !important;
}

.reactieBody .spotlight {
color: black !important;
}

edit: getest en het werkt

[ Voor 11% gewijzigd door dec0de op 03-01-2019 13:37 ]

[dec0de]

ik gebruik nu een tijd deze:

Cascading Stylesheet:

#categoryBrowser .large ul {
width: 100%;
}
.messagecontent {width: inherit !important;}

.ind {
border-bottom-left-radius: 15px;
}


#messageBox {width: 100%;}
.timeshortleft {
border-bottom-right-radius: 15px;
}



#categoryBrowser .large {
    height: 384px;
    width: 78%;
}



#layout {
padding-top: 30px;
padding-bottom: 300px;
}



#categoryBrowser {
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    border-radius: 1px;
    font-size: 12px;
    margin-bottom: 20px;
    padding: 10px;
    width: 98%;
}
#contentArea .centered { max-width: none;}






html.js .toggleable.closed .toggleBtn {

    color: #666;
    border-radius: 600px;
    
}



.pwPortalPopularProductListing {
    float: left;
    margin-bottom: 15px;
    overflow: hidden;
    width: 49%;
    margin-right: 45px;
}



#logo a {
background: url("https://tweakers.net/ext/f/SU2jftw6lDnhBXDl7qXCIOWW/full.jpg") no-repeat center;
}



.mainColumn.frontpage {

 
    margin-right: 0;
    padding-right: 20px;
    padding-top: 15px;
    width: 80%;

}



.filterBlock {border-radius: 15px; 
margin-top: 75px; 
box-shadow: 0px 0px 20px 0px #bfbfbf;
}



.filterGroup {
border-radius: 15px;
box-shadow: 0px 0px 20px 0px #bfbfbf;
}



#top {
background: rgba(180, 181, 181, 0);
border: none;
}



body, #bottom div.hr, #entity, #heroBlock, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
background-color: rgba(255, 255, 255, 0);
}



.articleColumn.wide + .relevancyColumn {
width: 10%;
padding-right: 100px;
}



#listingContainer{
width: 80%;
}



body {
background-image: url("https://tweakers.net/ext/f/dFm5Tyhgssy57i4aaC3fGCrn/full.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}



#contentArea {
 box-shadow: 0px 10px 30px 10px #4f4f4f;
 border-radius: 15px!important;
Padding: 25px;
}



.fancyButton {box-shadow: 0px 1px 10px 1px #a1a1a1;}



.fpaItemsWrapper {
    border: 2px solid #bfbfbf;
    overflow: hidden;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0px 0px 40px 0px #4f4f4f;
    margin-bottom: 45px;
    margin-top: 35px;
}



#menu, #search, #contentArea, #ticker, #about {
width: 85%;
}



.bar {
  box-shadow: 0px 0px 20px 0px #bfbfbf;
 border-radius: 10px !important;
}




.settingsContent{
width: 75%;
}



.fancyButton {
border-radius: 14px;
}



#categoryBrowser div {
border-radius: 10px !important;
}



#categoryBrowser {
border-radius: 15px !important;
box-shadow: 0px 0px 20px 0px #bfbfbf;
}



table.listing {
border-radius: 15px;
box-shadow: 0px 0px 20px 0px #bfbfbf;
  padding: 5px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;

}



}

h2.bar.question + .message, h2.bar.answer + .message {
margin-top: 15px;
box-shadow: 0px 0px 20px 0px #bfbfbf;
border-radius: 15px;
}



div.info, div.error, div.message, div.faq, form.insertMessage, form.form1, form.form2, #folders, #myprofilecontainer {
border-radius: 15px;
box-shadow: 0px 0px 20px 0px #bfbfbf;
}



.darkFpBlock{
box-shadow: inset 0 0 13px 4px rgba(45, 45, 45, 0.3);
border-radius: 15px;
}



#search input.submit {
border: 1px solid #8f8f8fb3;
border-radius: 15px
}



input.text, select.text, textarea, .keywordSearch {
border-radius: 15px;
}



body.trackerRight #tracker .fakeTop .toggleVisibility {
border-bottom-right-radius: 15px;
}

.articleColumn.wide {
width: 75%;
}



#menubottombar {
height: 21px;
line-height: 0.6;
padding: 0px;
}



#menubottombar div.socialcount {
margin-top: -4px;
}



.reactieBody {
max-width: none;
}



#menubar {
background-color: rgba(2,2,2,0.59);
background-image: none !important;
border: 3px solid black;
box-shadow: none;
height: 40px;

met veel diepte en scaduwen, vooral gemaak voor desktop (in mijn geval ultrawide) om het volledige scherm te benutten, ik zal ook nog 1 css voor mijn ipad invoegen over een tijd...






psst, dat gekke lettertype komt door mijn browser settings, en zal anders zijn bij jullie!

[ Voor 5% gewijzigd door dec0de op 03-01-2019 13:58 ]

[911GT2]

Lets find it schreef op donderdag 3 januari 2019 @ 13:32:
ik heb het denk ik gevoden, maar omdat ik nu een andere css gebruik, weet ik het niet zeker, maar 99% kans dat het werkt, je moet gewoon onderaan de css dit lijntje toevoegen:

Cascading Stylesheet:

 
.reactieBody.spotlight {
    background: #f3faf5;
    border-color: #becfbe;
    color: black !important;
}

.reactieBody .spotlight {
color: black !important;
}

edit: getest en het werkt

Bij mij niet.

[dec0de]

911GT2 schreef op maandag 7 januari 2019 @ 11:40:
[...]

Bij mij niet.

heb je het letterlijk gekopieerd en geplakt? of overgetypt? bij mij werkt het wel, hoofdletters zijn belangerijk!

[911GT2]

Ik heb het hele stuk opnieuw gedaan, eerst je initiële post en vervolgens de update er onder.

Ik heb er zelfs een harde enter tussen gezet.

[nachtnet]

Toch maar hier even mijn vervolgvragen stellen: Feature: Custom CSS how-to?

Inmiddels heb ik wat gewenste aanpassingen kunnen maken:

• Hoe kan ik de Taalselectie (NL/BE) verbergen? Inspect element geeft mij niet genoeg duidelijkheid.
• Hoe de Twitter & Facebook button in het onderschrift verbergen?
• Tussen Alles & TS (rechts boven topic) zit nog een klein groen lijntje. Hoe die zelfde kleur geven als rest vd randen?
• Hoe de achtergrondkleur van de pagina nummering/navigatie veranderen naar andere kleur?
• Hoe de gekoppelde onderwerpen eruit laten zien als het TS / Karma badge? Dus met smalle gekleurde rand, gekleurde letters en witte achtergrond?
• En tenslotte: Hoe in de mobiele weergave dat grijze pijltje verbergen? (dat bij scrollen naar beneden of naar boven tevoorschijn komt en zorgt voor een sprong naar beneden of naar boven?) (ik wil nooit naar beneden springen, maar klik bij scrollen voortdurend op dat pijltje. )

---

quote: Custom CSS nachtnet

code:

/* Comment: Custom CSS tweakers nachtnet */
/* Comment: */

/* Comment: Related products Forum kleinere afbeeldingen */
#tweakbase_relations .rbProductlist .item .thumb,
#tweakbase_relations .rbProductlist .item .thumb img {
    height: 20px;
    width: 26px;
}
/* Comment: Kleinere tekst Related products Forum */
#tweakbase_relations .rbProductlist .item p.desc {
    font-family: "Roboto Condensed Medium","helvetica","Liberation Sans",sans-serif;
    font-size: 13px;
    margin-top: 15px;
}
#tweakbase_relations .rbProductlist .item p.desc {
    margin-top: 0;
}
/* Comment: einde related products Forum*/

/* Comment: Onderwerp koppelingen */
#tweakbase_relations .rbEntitylist .relatedSubject {
    border-radius: 2px;
    background: #014A93;
    background: url("../../../g/forum/images/icons/tslabel.png") no-repeat 5px center;
    background-size: 10px 9px;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
}

/*Comment: Frontpage Related subjects koppeling */
.relatedSubject {
    background: #014A93;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
}
/* Einde related products */

/* Filterknop Alle berichten Grijs ipv groen */
.filterPosts ul li.active {
        border-color: #d9d9d9;
    background: #DDDDDD;
}
.filterPosts ul li.active a {
    color: #666;
}
/* Einde Alle berichten */

/* Comment: Pagina telling niet blauw */
.pageDistribution b {
    background-color: #EEEEEE;
    border: 1px solid #014a93;
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 0 4px;
    text-align: center;
}
/* Comment: Einde pagina nummering */


/* Verbergen Pakkie link in V&A */
.userAanbod table.listing .pakkie {
    display: none;
    float: right;
}
/* Einde Pakkie */

/* Verbergen Facebook & twitterbutton in Footer Frontpage */
#about .button {
display:none;
}
/* Einde verbergen socials */

/*Einde custom CSS */


}

* nachtnet heeft uiteraard met "Inspect Element" geprobeerd duidelijkheid te krijgen over deze vragen, maar geen goede resultaten kunnen krijgen.

[Hero of Time]

Het tandwieltje, waar overigens meer achter zit dan alleen de taal, is te vinden onder "#userbar li.icon.flag.nl" voor NL en flag.be voor BE. Hoe heb je dat niet kunnen vinden? Het staat zo in de CSS regels als je het icoon inspecteert. Je moet wel letten op welk element je kiest, soms moet je de bovenliggende hebben.

FB en Twitter heb ik in m'n tweaks.css verborgen. Zoek even de link naar m'n Google drive, daar staat het met comment in. Iets met slogan, dan is de hele zwarte balk daar weg.

De rest is met juist gebruik van inspect element an sich ook wel te vinden. Het pijltje bij het scrollen op je mobiel is wat lastiger, dat is vziw javascript based om weer te geven. Het blijft een seconde ofzo staan, dus als je 't niet kan vinden is geduld een schonere zaak.

[Pjottski]

nachtnet schreef op zaterdag 19 januari 2019 @ 16:15:
Toch maar hier even mijn vervolgvragen stellen: Feature: Custom CSS how-to?

Inmiddels heb ik wat gewenste aanpassingen kunnen maken:

[Afbeelding]
[Afbeelding]

[Afbeelding]

• Hoe kan ik de Taalselectie (NL/BE) verbergen? Inspect element geeft mij niet genoeg duidelijkheid.
• Hoe de Twitter & Facebook button in het onderschrift verbergen?
• Tussen Alles & TS (rechts boven topic) zit nog een klein groen lijntje. Hoe die zelfde kleur geven als rest vd randen?
• Hoe de achtergrondkleur van de pagina nummering/navigatie veranderen naar andere kleur?
• Hoe de gekoppelde onderwerpen eruit laten zien als het TS / Karma badge? Dus met smalle gekleurde rand, gekleurde letters en witte achtergrond?
• En tenslotte: Hoe in de mobiele weergave dat grijze pijltje verbergen? (dat bij scrollen naar beneden of naar boven tevoorschijn komt en zorgt voor een sprong naar beneden of naar boven?) (ik wil nooit naar beneden springen, maar klik bij scrollen voortdurend op dat pijltje. )

---

[...]


* nachtnet heeft uiteraard met "Inspect Element" geprobeerd duidelijkheid te krijgen over deze vragen, maar geen goede resultaten kunnen krijgen.

Ben ff aan het stoeien geweest.

Cascading Stylesheet:

li.icon.display.flag.nl,li.icon.display.flag.be {display:none;} /*Hoe kan ik de Taalselectie (NL/BE) verbergen?*/
div.socialcount {display:none;}/*Hoe de Twitter & Facebook button in het onderschrift verbergen?*/
div.filterPosts ul li.active {border-color:#d9d9d9;}/*Tussen Alles & TS (rechts boven topic) zit nog een klein groen lijntje. Hoe die zelfde kleur geven als rest vd randen?*/
#tweakbase_relations .rbEntitylist .relatedSubject {border-radius: 4px;background-color:white;border: 1px solid #0f108c;color:#0f108c;}/*Hoe de gekoppelde onderwerpen eruit laten zien als het TS / Karma badge? Dus met smalle gekleurde rand, gekleurde letters en witte achtergrond?*/
span.pageDistribution b {background-color:red;border-color:red;background-image:none;}/*Hoe de achtergrondkleur van de pagina nummering/navigatie veranderen naar andere kleur?*/
@media screen and (max-width:720px){ div.scrollTo.show {display:none;} }/*En tenslotte: Hoe in de mobiele weergave dat grijze pijltje verbergen? (dat bij scrollen naar beneden of naar boven tevoorschijn komt en zorgt voor een sprong naar beneden of naar boven?) (ik wil nooit naar beneden springen, maar klik bij scrollen voortdurend op dat pijltje. :N )*/

[nachtnet]

@Hero of Time bij het zoeken naar het vlaggetje kon ik het tandwieltje wel wegkrijgen, maar bleef de vlag zelf staan. Later kreeg ik ook de vlag wel weg, maar verdwenen ook de notificatie iconen.

Zoals eerder gezegd, ik heb niet voldoende kaas gegeten van CSS om mij er vaardig in te voelen. Wel heb ik nu door de geleverde pointers en suggesties een voor mij betere tweakers ervaring kunnen maken met custom CSS.

@Pjottski +1 Top, met jouw css weer een stuk meer kunnen doen. (moest nog wel even zoeken naar de schaduw in de paginanummering om het helemaal scherp en netjes te krijgen.)

Cascading Stylesheet:

/* Comment: Pagina telling niet blauw */
.pageDistribution b {
    background-color: #FFFFFF;
background-image:none;
    border: 1px solid #b91330;
    border-radius: 2px;
    color: #014A93;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 0 4px;
    text-align: center;
text-shadow: none;
}

[Hero of Time]

@nachtnet, wat de vlag maakt, iig voor NL en ik vermoed hetzelfde voor BE maar dan net iets anders, is dit stuk:

Cascading Stylesheet:

#userbar li.icon.flag.nl::after {
  height: 3px;
  width: 12px;
  border-top: 3px solid #e7184c;
  background-color: #fff;
  border-bottom: 3px solid #014a93;
}

De rand boven is rood, de rand onder is blauw, de achtergrondkleur is wit. Allemaal met 3 pixels hoogte.

[Hahn]

Samengevat, met deze CSS is het vlaggetje weg, zonder dat je nl of be hoeft te includen:

Cascading Stylesheet:

#userbar li.icon.flag::after { 
    display: none;
}

[ Voor 15% gewijzigd door Hahn op 20-01-2019 12:34 ]

[Gropah]

Vanuit [Responsive] Tijd laatste reactie ipv aantal reactie's heb ik zelf maar een stukje CSS geschreven om bij kleine schermen de laatste reactie tijd te laten zien ipv een reply count in topic listings.

Cascading Stylesheet:

/* time of latest reaction instead of replycount in topiclistings */
@media (max-width: 499px),(max-device-width: 499px) and (orientation: portrait){
    /* Hide the reply counter */
    table.listing .replies{
        display:none
    }

    table.listing .replies,table.forumlisting .replies{
        overflow:hidden;
        padding:0px;
        width: 0px;
    }

    /* Show the last reply counter*/
    table.listing .time {
        width: 80px;
        border-right: 1px solid #d9d9d9;
        text-align: center;
    }

    table.listing .time,table.forumlisting .time{
        display: table-cell;
        padding: 10px;
        width: 60px;
    }
}

en nog een screengrab met het resultaat:

[dec0de]

DedSec85 schreef op vrijdag 7 december 2018 @ 17:09:
Hallo Tweakers,

Ik heb de custom CSS optie gekocht. Ik krijg het alleen niet voor elkaar om de kleur van de rode menubalk te wijzigen. Ik heb nu even deze code overgenomen:

[code=css]
#top {
background-color: #0052CC !important;
background-image: none !important;
}

h1, h2 {
color: #4775FF !important;
}

[code]

Doe ik iets verkeerd? Ik gebruik Mozilla Firefox als browser.

ja, je moet dit toevoegen aan #menubar

Cascading Stylesheet:

background-image: inherit;
background-image: inherit;
background-image: inherit;

[dec0de]

Rhier kom ik weer! maar nu met wat speciaals!

EEN SWITCHABLE DARK MODE!

deze is aardig compleet, maar nog niet af, alles is wel leesbaar, ik zal elke week een update plaatsen, om de experience te verbeteren.

demonstratie: YouTube: Tweakers custom css darkmode

als iets niet bevalt, ik heb overal comments om het makklijk te maken voor jou en mij

Met dank aan @B.O.C.K

LET OP: de menubalk word bij ipads en telefoons gebackdroped-blurd, dit werkt echter alleen op
safari(alle platformen) en chrome voor desktop als je dit ook op desktop wilt (ziet er sick uit in mijn opinie, maar ik gebruik firefox.. ga hier naartoe: https://developer.mozilla...ter#Browser_compatibility en zet Enable Experimental Web Platform Features flag op aan bij chrome::flags) en wijzig de css bij lijn 23 tot 28 naar

Cascading Stylesheet:

#menubar{
background-image: none;
background-color:#0004;
border-bottom: none;
box-shadow: inherit;
-webkit-backdrop-filter: blur(10px);
}

als je , de menubalk is erg doorzichtig, om dit aan te passen moet je naar benden scrollen en even de trasparantheid naar #090909cc zette, anders word het heel snel storend.

Cascading Stylesheet:

@media only screen and (min-width: 1220px) {
body{
background: #474747;
}

/*######################################################################## 
                                          BORDERS WEGWERKEN
#######################################################################*/
.keywordSearch, #userbar li.icon.flag.nl::after, .keywordSearch:hover, #top, #categoryBrowser div, #categoryBrowser.sidebar div, #categoryBrowser, .galleryHeadingContainer, .galleryHeadingContainer div, 
#entity, #entity div, #search input.submit, table.pwListTable td, #contentArea {
border: none !important;

}


/*########################################################################
                            BOVENSTE GEDEELTE EN ZOEKBAR EN MENU
########################################################################*/
.keywordSearch{
background: #474747;
}

#menubar{
background-image: none;
background-color:#090909cc;
border-bottom: none;
box-shadow: inherit;
}

.menubottom span{
display: none;
}


.menubottom:after{
content:' blokkeer alstublieft niet onze reclames';
}

#menubottombar .menubottom{
margin: 6px;
margin-left: 208px;
}

#menu, #search, #contentArea, #ticker, #about {
width: 80%;
}

/*################################
LELIJKE ICOONTJES VERANDEREN en social media
################################*/
#userbar li.notifications a {
background-position: 0 -25px;
background: url("https://tweakers.net/ext/f/fqKfrbeDGIEA5qj49Z2exz8J/full.png") no-repeat; 
background-position-y: 0%;
background-size: auto auto;
background-size: 20px;
background-position-y: 6.5px;
background-position-x: 4px
}

#menubottombar div.socialcount{
height: 0px;
width: 0px;
visibility: hidden;
left: 10000px;
}

#userbar li.icon.flag.nl::after{
height: 0px;
width: 0px;
background: none
left: 10000px;
}

#userbar li.messages a{
background: url("https://tweakers.net/ext/f/HpWcDHA5p7EbDAIzLBfrZvXg/full.png") no-repeat;
background-size: 20px;
background-position-y: 7.5px;
background-position-x: 5px;
}

.icon.compare.empty{
width: 0px !important;
height: 0px !important;
visibility: hidden;
left: 100000000px;
}
/*######################
EINDE LELIJKE ICOONTJES
######################*/


#mainSearch .submit{
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}


#searchbar{
background: #474747;
}


.keyword .text{
border-bottom-left-radius: 15px !important;
border-top-left-radius: 15px !important;
}

/*########################################################################
                                             ALGEMENE DINGEN
########################################################################*/
#bottom div.hr {
background: #474747
}

h1, h2 {
color: #000;
}


#contentArea {
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 150px;
border-radius: 5px; 
margin-top: 50px;
width: 80%
}


#layout {
background: #474747
}


/*########################################################################
                                                   SETTINGS
########################################################################*/
.settingsContent{
width: 80%
}


#categoryBrowser div, #categoryBrowser.sidebar div{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
backgound: #dedede !important;
}

#categoryBrowser div{
background-color: #dedede;
}


#categoryBrowser{
padding: inherit;
padding-left: 10px;
background: #dedede;
border-radius: 5px;
}


#categoryBrowser div ul{
border-radius: 5px;
}

#categoryBrowser ul{
background: #dedede;
}


/*##################################################################
                                          USER GALLERY
##################################################################*/

.galleryHeadingContainer, .galleryHeadingContainer div{
background: #474747;
}

.pageTabsContainer{
background: #474747;
}

.memberInfo h1, .memberInfo h2, .memberInfo h3 {
color: #fff;
}

.galleryHeading .karma{
color: #efefef;
}

.vaInfo .count a {
color: #000;
font-size: 15px;
font-weight: bolder;
}

/*#######################################################################
                                            PRICEWATCH
######################################################################*/


#entity, #entity div {
background: #474747;
}

#filterForm{
width: 210px;
}

.filterGroup .filters{
padding-left: 10px;
}


.entityHeader h1 {
color: white;
}

.sublist.images.no_scroll.large ul{
background-color: #fff !important;
}

#categoryBrowser .sublist{
top: 2px;
height: 380px;
}

/*########################################################################
                                                        FRONTPAGE
########################################################################*/


.fpaItemsWrapper, .fpaItems .fpaItem{
border: 0px;
}


#highlightedProducts .fpaItem{
border-top: none;
}

.mainColumn.frontpage{
width: 940px;
border-right: none;
margin-right: 50px;
}


.fpaItems{
margin: 0 auto;
}


#categoryBar h2{
padding-bottom: 10px;
font-size: 24px;
}


 #categoryBar{
text-align: center;
}


table.highlights .replies{
padding-right: 10px;
}


.publicationTime {
background: #dedede;
padding-right: 5px !important;
}

table.highlights .type{
background: #dedede
}


.secondColumn.frontpage{
width: 400px;
}


#highlightedProducts h2 {
text-align: center;
font-size: 24px;
}


table.highlights td, table.highlights{
border: none;
}


#jobs {
    width: 0px;
    height: 0px;
    padding: 0px;
    visibility: hidden;
    left: 10000px;
}

/*########################################################################
                                                             FORUM
########################################################################*/
h2.bar.question{
width: 0px;
height: 0px;
padding: inherit;
visibility: hidden;
left: 10000px;
background: inherit;
}
/*#######################################################################
                                             DARK MODE MET CUSTOM COLOR
#######################################################################*/

body.customColor #contentArea{
background: #575757;
}


body.customColor div.message{
background-color: #8d8d8d;
background-image: none;
border: none;
box-shadow: inherit;
}


body.customColor #searchbar, body.customColor{
background: #474747;
}

body.customColor form.form1{
background: #8d8d8d;
border: none;
box-shadow: inherit;
}

body.customColor #reageer{
background: #8d8d8d;
border: none;
}


/*#####################################################################
                                          TEXT COLOR  AANPASSEN VOOR DARKMODE
#####################################################################*/

body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label{
color: white;
}

body.customColor a {
color: #cbcbcb;
}


.customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
color: #eee;
}


 body.customColor h3{
color: black;
}

background-color: #8d8d8d;


/*########################################################################
                                          EINDE DESKTOP LAYOUT
########################################################################*/
}
/*####################DIT BRACKET LATEN STAAN! !! !! !! !! !! !! !!###############*/
@media  only screen and (max-width: 1220px) {
@media only screen and (min-width: 1000px){
#menubar{
background-image: none;
background-color:#0004;
border-bottom: none;
box-shadow: inherit;
-webkit-backdrop-filter: blur(10px);
}


body.customColor #contentArea{
background: #575757;
}


body.customColor div.message{
background-color: #8d8d8d;
background-image: none;
border: none;
box-shadow: inherit;
}


body.customColor #searchbar, body.customColor{
background: #474747;
}

body.customColor form.form1{
background: #8d8d8d;
border: none;
box-shadow: inherit;
}

body.customColor #reageer{
background: #8d8d8d;
border: none;
}


/*#####################################################################
                                          TEXT COLOR  AANPASSEN VOOR DARKMODE
#####################################################################*/

body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label{
color: white;
}

body.customColor a {
color: #cbcbcb;
}


.customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
color: #eee;
}


 body.customColor h3{
color: black;
}


/*#######################   DEZE BRACKETS LATEN STAAN##################*/
}
}
/*#######################   DEZE BRACKETS LATEN STAAN##################*/

#tracker .fakeTop{
background-image: none !important;
background-color: #474747;
}


@media  only screen and (max-width: 800px) {
@media only screen and (min-width: 80px){
#menubar{
background-image: none;
background-color:#0004;
border-bottom: none;
box-shadow: inherit;
-webkit-backdrop-filter: blur(10px);
}

filmpje en fotos komen

[ Voor 108% gewijzigd door dec0de op 01-02-2019 11:33 ]

[Hero of Time]

Je mag het oneens zijn met wat er is verandert, maar iets als dit in je CSS zetten zodat het op elke pagina staat vind ik wel erg respectloos:

.menubottom:after{
content:'wij hebben geen webdesigners in dienst, maar als je voldoende karma hebt mag je het fixen!';
}

[Rembock]

Lets find it schreef op donderdag 31 januari 2019 @ 20:14:
hier kom ik weer! maar nu met wat speciaals!

EEN SWITCHABLE DARK MODE!

Zou het wel waarderen als je in het vervolg ten minste aangeeft wie je dit verteld heeft.
Heb veel tijd gestoken in het uitzoeken hiervan, het is niet echt netjes om met creaties van anderen te pronken

[dec0de]

B.O.C.K schreef op donderdag 31 januari 2019 @ 22:33:
[...]


Zou het wel waarderen als je in het vervolg ten minste aangeeft wie je dit verteld heeft.
Heb veel tijd gestoken in het uitzoeken hiervan, het is niet echt netjes om met creaties van anderen te pronken

Je bedoelt dit: wie je en “kleine” tip in de juiste richting heeft gegeven
Ik wist helaas niet meer wie deze tip had gegeven, maar dat was jij dus.. haha

[dec0de]

Hero of Time schreef op donderdag 31 januari 2019 @ 20:46:
Je mag het oneens zijn met wat er is verandert, maar iets als dit in je CSS zetten zodat het op elke pagina staat vind ik wel erg respectloos:

[...]

Dit was een grapje, omdat iedereen moeilijk doet om t.net 7, ik ga dit aanpassen

Btw, dit is alleen op desktop. Ik kan er ook hetzelfde neerzetten als @b2vjfvj75gjx7, (wij stellen je geduld op de proef) maar dat is ook weer zo copycat...

Dus speciaal voor jou: Hero of time kan niet tegen een grapje

Nee, er staat nu dit: blokkeer ulstublieft niet onze reclames

[ Voor 10% gewijzigd door dec0de op 01-02-2019 10:07 ]

[Rembock]

Lets find it schreef op vrijdag 1 februari 2019 @ 09:56:
[...]


Je bedoelt dit: wie je en “kleine” tip in de juiste richting heeft gegeven
Ik wist helaas niet meer wie deze tip had gegeven, maar dat was jij dus.. haha

Je kunt het brengen hoe je zelf wilt en er omheen draaien, het blijft uiteindelijk niet netjes.

[dec0de]

Nu je zin?

[_Thanatos_]

Ik heb een donkere tweakers.net. Ik ga toch niet met custom styles zitten kliederen? Straks past T.net iets aan, en dan kun je puin gaan ruimen in je aanpassingen. Neh. Ik gebruik Dark Reader.

Die maakt aanpassingen aan een site dynamisch. Of "static", wat eigenlijk ook een soort van minder dynamisch is. Het werkt iig briljant.

Het is wel alleen voor dark mode. Andere aanpassingen kun je er wel mee doen, maar dan kom je toch weer op custom css, en dat zou ik afraden voor een site die zo vaak verandert.

[MarnickS]

Ik heb hier nog een hele simpele dark mode voor Tweakers die aardig compleet is. Werkt ook volledig op mobiel (ook de pricewatch filters).

https://del.dog/tweakersdarkcss

[mschol]

vraagje ik gebruik nu (o.a.) de volgende css:

Cascading Stylesheet:

#layout {    background-color: #edeeee;    margin: 0 auto;    width: 1200px;}

Die wordt, zover ik gezien heb, overal netjes toegepast behalve op https://tweakers.net/instellingen/layout/
andere css wordt wel toegepast op die pagina.

als ik in de developer tools kijk staat hij wel netjes erin, maar om de een of andere reden wordt hij niet toegepast, wat zie ik over het hoofd?

[Koozza]

mschol schreef op zondag 3 maart 2019 @ 23:42:
vraagje ik gebruik nu (o.a.) de volgende css:

Cascading Stylesheet:

#layout {    background-color: #edeeee;    margin: 0 auto;    width: 1200px;}

Die wordt, zover ik gezien heb, overal netjes toegepast behalve op https://tweakers.net/instellingen/layout/
andere css wordt wel toegepast op die pagina.

als ik in de developer tools kijk staat hij wel netjes erin, maar om de een of andere reden wordt hij niet toegepast, wat zie ik over het hoofd?

Als ik deze zelfde regel in mijn CSS zet werkt deze gewoon op instellingen/layout

[Beta]

Iemand al een stukje code om de nieuwe layout te verbeteren?

Ik heb het dan over het verbergen van fpAnkeiler en de "tr class" inBetweenContent.

[Rubman]

Ik ziel dat ik waarschijnlijk mijn CSS moet aanpassen gezien ik slechts 1 uitgelicht nieuwsbericht bovenin zie ipv de keuze om de andere artikelen te zien.

Zucht, dat ding is al zo'n allegaartje waar ik weinig meer van snap.
Maar verder is het precies zoals ik wil.

In deze afbeelding zie je duidelijk meerdere uitgelichte nieuwsberichten om uit te kiezen.
ik heb dus alleen dat eerste zwarte stukje met lees meer/review/whatever

Iemand die nog iets wijs kan worden uit mijn knip en plak knutselwerk van een CSS?

Cascading Stylesheet:

/* Menu / Header */
#menubar{
background: #2c3e50;
box-shadow: inset 0 -2px 0 #C9EF29;
}

 
/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

#logo a {
height: 42px;
}

#logo a:hover {
-webkit-animation-name: shake; 
animation-name: shake;
-webkit-animation-duration: 3.5s; 
animation-duration: 3.5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}

#menu li a:hover {
border-left:0px;
}
#menu li:hover,
#logo:hover{
height:43px;
background-image:-webkit-linear-gradient(#2c3e50,#C9EF29);
background-image:-moz-linear-gradient(#2c3e50,#C9EF29);
border-bottom:0px;
}

 /* Menu Dropdown */
#menu li.dropdown li:hover {
background-image:-moz-linear-gradient(#C9EF29,#C9EF29);
background-image:-webkit-linear-gradient(#C9EF29,#C9EF29);
}

#menu li.active a:hover {
color:#e0e2e2;
}

.dropdown li:hover,
dropdown li:hover a{
color:#000!important;
}

#menubottombar {
background-color: #2c3e50;
}

#menubottombar a.facebook {
background:url(http://www.eurosong.be/wp-content/themes/eurosongbe/images/icon_facebook.png) no-repeat;
}

#top #menubottombar a.twitter {
background:url(http://www.iknowuwill.com/images/Twitter_bird_icon.png) no-repeat;
background-size: 16px 16px;
background-position: 0px 0px !important;
}

#menubottombar span.slogan {
color: #EDEEEE;
text-shadow: 0px 2px 2px rgba(201, 239, 41, 1);
font-style: italic;
}
#menubottombar span.slogan:hover {
color: #C9EF29;
text-shadow: 0px 2px 2px rgba(237, 238, 238, 1);
}


@-webkit-keyframes shake { 
    0%, 80%, 100% {-webkit-transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {-webkit-transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 80%,100% {transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {transform: translateX(10px);} 
} 

#menubottombar span.arrow-left {
border-right: 5px solid #EDEEEE;
}
#menubottombar span.count {
background-color: #EDEEEE;
border: 1px solid #C8C8C8;
border-left:0;
}

#userbar li.icon.unread {
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-delay: 2s;
animation-delay: 2s;
} 

@-webkit-keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {-webkit-transform: translateY(0);} 
20%, 30% {-webkit-transform: translateY(-10px);} 
} 

@keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {transform: translateY(0);} 
20%, 30% {transform: translateY(-10px);}
}


/* Topics met laatste eigen reactie markeren */
td.topic a[title*="Rubman"] {
        font-style: italic;
        color: #D1D1D1 ;
}

/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

/* ### GoT ### */

/* ####Henk duim####*/ 
.action_list li.rating .thumbsup::before {
    background: rgba(0, 0, 0, 0) url("https://static.tweakers.net/ext/f/TlL6Zo91MiMutr9amUluNikj/full.png") no-repeat scroll 50% center;
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
}
/* Cascading stylesheet */
a.abonnee {color: #0A8FC4 !important;}
}

/* Logo vervangen, tekst "Tweakers" staat er nog wel bij, maar icoontje is vervangen. */
#logo a
{
background:url(../../ext/f/UcY5a82gNc5VAOkdXU120jGG/full.png) no-repeat 50%;
display:block;
height:44px;
width:156px;
}
}
.action_list li.rating .thumbsup.rated::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/XUQa8JbPDzdzsWTKxb4qX5Gm/full.png") no-repeat scroll 50% center;
}

.action_list li.rating .thumbsup {
    background: #e0e0e0 linear-gradient(#e0e0e0, #c4c4c4) repeat scroll 0 0;
    border: 1px solid #bfb9a9;
    border-radius: 1px;
    cursor: default;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    top: -2px;
    vertical-align: bottom;
    width: 26px;
}

.action_list li.rating .thumbsup.rated {
    background-color: #e0e0e0 repeat scroll 0 0;
    background-image: linear-gradient(#e0e0e0, #c4c4c4);
    border-color: #bfb9a9;
}

.action_list li.rating .ratingcount {
    min-width: 35px;
}

/* ####Overzicht####*/
 
/* Forumoverzicht kleuren, ieder deel andere achtergrond kleur (gradient indien mogelijk) */
.forumList:nth-child(2) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}
 
.forumList:nth-child(3) table.listing tr th {
        background-image: linear-gradient(#B4113C,#760D29);
}
 
.forumList:nth-child(4) table.listing tr th {
        background-image: linear-gradient(#573077,#2B0A46);
}


.forumList:nth-child(5) table.listing tr th {
        background-image: linear-gradient(#1BA53C,#074416);
}
 
.forumList:nth-child(6) table.listing tr th {
        background-image: linear-gradient(#FF5A00,#9E3B06);
}
 
.forumList:nth-child(7) table.listing tr th {
        background-image: linear-gradient(#50D7FA,#14505F);
}
 
.forumList:nth-child(8) table.listing tr th {
        background-image: linear-gradient(#21428B,#112551);
}
 
.forumList:nth-child(9) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}

/* NL vlaggetje weg */
.flagNL div{
   visibility: hidden !important;}
#bottom{display:none;}

}

/* Compactere forum tabellen */ 
table.listing td, table.listing th { 
 padding: 5px; /* is standaard 10px boven/onder en 5px links/rechts */ 
}

.ratingcount {
    color: #fff !important;
    border: 1px solid #bbbebe;
    border-radius: 1px;
    height: 22px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2),0 0 2px rgba(0,0,0,.2);

    background: #dcdfdf;
    background-image: -webkit-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: -moz-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: linear-gradient(#dcdfdf,#c5c8c8);
}

.can_be_rated .ratingcount {
    background: #929494;
    background-image: -webkit-linear-gradient(#929494,#7d8080);
    background-image: -moz-linear-gradient(#929494,#7d8080);
    background-image: linear-gradient(#929494,#7d8080);
    border-color: #7c7e7e;
}

.has_ratings .ratingcount {
    background: #cbda30;
    background-image: -webkit-linear-gradient(#cbda30,#c1d203);
    background-image: -moz-linear-gradient(#cbda30,#c1d203);
    background-image: linear-gradient(#cbda30,#c1d203);
    border-color: #b6c600;
}
#############
.spoiler {
    background-color: #DAE64A;
    color: rgba(218, 230, 74, 0);
    cursor: pointer;
    font-size: 1pt;
    height: 8px;
    padding: 8px;
    border-radius: 3px;
    margin-top: -10px;
    border: 1px dashed rgba(0,0,0,0);
}

.spoiler.visible {
    background-color: rgba(0,0,0,0);
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding-top: 28px !important;
    border: 1px dashed #C4C4C4;
}

.spoiler a,
.messagecontent div.spoiler a,
.messagecontent .message-quote-div div.spoiler a,
.messagecontent div.spoiler a:hover,
.messagecontent .message-quote-div div.spoiler a:hover {
    display: none;
}

.spoiler.visible a,
.messagecontent div.spoiler.visible a,
.messagecontent .message-quote-div div.spoiler.visible a,
.messagecontent div.spoiler.visible a:hover,
.messagecontent .message-quote-div div.spoiler.visible a:hover {
    display: inline;
    background-color: rgba(0,0,0,0) !important;
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding: 0 !important;
    border: 0;   
    border-radius: 0;
}

.messagecontent div:not([class]) small,
.message-quote-div div:not([class]) small {
    margin-top: 8px;
    padding: 4px;
    background-color: #DAE64A;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: capitalize;
    color: #434343;
}

div.spoiler div.resizewarning {
    display: none;
}

div.spoiler.visible div.resizewarning,
div.spoiler.visible div.resizewarning a,
div.spoiler.visible div.resizewarning a:hover {
    display: inline;
    font-size: 11px !important;
    color: white !important;
    background-color: rgba(0,0,0,0) !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small,
div.messagecontent a small,
div.messagecontent td div small {
    background-color: rgba(0,0,0,0) !important;
    border-radius: 0;
    font-weight: normal;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    text-transform: none !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small {
    color: white !important;
}

div.messagecontent a small {
    color: #014c93 !important;
}

div.messagecontent a:hover small {
    color: #b9133c !important;
}

@media and screen (max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape){
#menubar.hideheader {
animation: hide-menu 0.3s ease forwards;    -webkit-animation: none !important;
}
}

[Hero of Time]

Beta schreef op dinsdag 12 maart 2019 @ 13:49:
Iemand al een stukje code om de nieuwe layout te verbeteren?

Ik heb het dan over het verbergen van fpAnkeiler en de "tr class" inBetweenContent.

Wat houd je tegen om zelf met je browser via 'inspecteer element' de onderdelen te zoeken en met Google uitvogelen hoe je elementen verbergt met CSS? Er zijn in dit topic al zat voorbeelden voor.

In dit topic geld hetzelfde als in alle andere fora: het is geen afhaalchinees. Dus laat even zien wat je zelf hebt gevonden.


@Rubman, geen documentatie (in de vorm van comments) in je code, dus veel succes.

[Rubman]

Hero of Time schreef op dinsdag 12 maart 2019 @ 14:20:
[...]

Wat houd je tegen om zelf met je browser via 'inspecteer element' de onderdelen te zoeken en met Google uitvogelen hoe je elementen verbergt met CSS? Er zijn in dit topic al zat voorbeelden voor.

In dit topic geld hetzelfde als in alle andere fora: het is geen afhaalchinees. Dus laat even zien wat je zelf hebt gevonden.


@Rubman, geen documentatie (in de vorm van comments) in je code, dus veel succes.

Ik bedoel het ook niet van hier is het, fix het.

Ik ga zeker zelf zoeken waar het uit hangt en zoeken.
Comments staan er inderdaad niet in omdat het een knip en plakwerk is van meerdere CSS-en van anderen met wat eigen prutswerk er tussendoor.

moet maar even een momentje pakken om alles eens op orde te krijgen.

[Hero of Time]

Rubman schreef op dinsdag 12 maart 2019 @ 14:32:
[...]

Ik bedoel het ook niet van hier is het, fix het.

Dat was ook niet de strekking van m'n post.

Ik ga zeker zelf zoeken waar het uit hangt en zoeken.
Comments staan er inderdaad niet in omdat het een knip en plakwerk is van meerdere CSS-en van anderen met wat eigen prutswerk er tussendoor.

moet maar even een momentje pakken om alles eens op orde te krijgen.

Dat was mijn punt. Ga eerst even uitzoeken en benoemen wat welk stukje code doet, maakt het een stuk makkelijker vinden als je iets wilt wijzigen. Mijn code heeft al aardig wat comments met wat wat doet, al zou het ietsjes beter kunnen. Maar het is iig niet het niveau wat jij hebt.

[Rubman]

Blijkt het niet eens aan mijn code te liggen.

Even alles uitgeschakeld en de frontpage ververst krijg ik ook slechts 1 uitgelicht nieuws item,

Dan wachten we even rustig af

[Hero of Time]

Rubman schreef op dinsdag 12 maart 2019 @ 14:42:
Blijkt het niet eens aan mijn code te liggen.

Even alles uitgeschakeld en de frontpage ververst krijg ik ook slechts 1 uitgelicht nieuws item,

Dan wachten we even rustig af

*kuch* plan: Vernieuwde frontpage - Development-iteratie #151 *kuch*

[Rubman]

Ja zoals hij op de afbeelding in dat topic staat heb ik het niet.
Ik heb dus slechts 1 "ankler' met lees artikel, zoals hier te zien is

[segil]

Volgens mij is de font ook veranderd op de frontpage. Hoe verander ik dat terug? /css-noob
En is er een manier om de menubalk aan te passen en dat "Carrière" weg te halen. Ik klik daar steeds op als ik Forum wil hebben

[ Voor 42% gewijzigd door segil op 12-03-2019 15:08 ]

[Zeror]

Font is nog steeds hetzelfde. Misschien een regular <--> bold versie wisseling.

Ik heb trouwens bij die ankeilers de comment counter weggehaald. Zag daar bij die ankeilers niet echt de meerwaarde van in.

[ Voor 44% gewijzigd door Zeror op 12-03-2019 15:08 ]

[segil]

Zeror schreef op dinsdag 12 maart 2019 @ 15:07:
Font is nog steeds hetzelfde. Misschien een regular <--> bold versie wisseling.

Ik heb trouwens bij die ankeilers de comment counter weggehaald. Zag daar bij die ankeilers niet echt de meerwaarde van in.

Ik zie toch echt een compleet andere font, zowel in de menubalk als de header van het artikel:

[RobIII]

Dit is mijn huidige CSS; wat-waarvoor dient staat in de comments van de CSS.

Cascading Stylesheet:

/* Automatisch spoilers tonen bij hover */ 
div.spoiler:hover {   
    color: white !important;   
} 

/* Quotes donkerder dan posts */
.message-quote-div {
    background-color: #dddede !important;
    border: 1px solid #c8c8c8 !important;
    color: #000 !important;
}

/* Gekke speechbubbles weg */
.commentCount {
    color: #616464 !important;
    background: none !important;
}

/* Paging voor dikke vingers */
.pageIndex .pageDistribution a {
    padding: 3px 10px;
}

/* Usabillia dinges weg */
.giveFeedback { display: none; }

/* Notify icon bounce */
#userbar li.icon.unread {
    -webkit-animation-duration: 5s; 
    animation-duration: 5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
} 

@-webkit-keyframes bounce { 
    0%, 10%, 25%, 40%, 50%, 100% {-webkit-transform: translateY(0);} 
    20%, 30% {-webkit-transform: translateY(-10px);} 
} 

@keyframes bounce { 
    0%, 10%, 25%, 40%, 50%, 100% {transform: translateY(0);} 
    20%, 30% {transform: translateY(-10px);}
}

/* Bruikbare frontpage */
#categoryBar,
.fpAnkeiler,
.inBetweenContent,
#highlightedProducts,
#newsletter,
.secondColumn  {
    display: none;
}

table.highlights td {
    padding: 0;
    line-height: normal;
}

.mainColumn {
    width: 100% !important;
 }


.communityReviews,
.communityTopics,
.communityBlogs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#community .communityReviews .communityItem,
#community .communityTopics .communityItem,
#community .communityBlogs .communityItem {
    border: 0px;
    margin: 10px 10px;
}

#layout .mainColumn.frontpage {
    border: 0px;
}

[Hero of Time]

Rubman schreef op dinsdag 12 maart 2019 @ 14:58:
Ja zoals hij op de afbeelding in dat topic staat heb ik het niet.
Ik heb dus slechts 1 "ankler' met lees artikel, zoals hier te zien is
[Afbeelding]

Dat hoort zo. Er is nog geen extra informatie bij dat bewuste artikel/ankeiler vergeleken met de screenshot in het artikel.

[alex3305]

Mijn meest recente versie die voor mij goed werkt nu:

Cascading Stylesheet:

/** New Tweakers **/

/* Disable tracker */
#menubottombar, html.js body.hasTracker #tracker {display: none}
html.js body.hasTracker {margin-left:0;}

/* Frontpage tweaks */
.fpAnkeiler.fullWidth {height:165px;}

#categoryBar, .secondColumn.frontpage, #newsletter {display:none;}
.mainColumn.frontpage, .fpAnkeiler {width:100%;}
table.highlights td {font-size:1.2em;line-height:1.5em;}

/* Forum tweaks */
div.message.topicstarter {
    border-top: 3px solid #a61e39 !important;
    border-bottom: 3px solid #a61e39 !important;
}
div.message.ownpost {
    border-top: 2px dashed #a61e39 !important;
    border-bottom: 2px dashed #a61e39 !important;
    background-image: none !important;
}
table.listing .topic a[title$="alex3305"] {font-weight: bold}

/* Topic Action List customization */
#forumheading .topic_actions .action_list li:first-child, .topic_actions .action_list li a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px; display: inline-block; margin-right: 7px}
.topic_actions .action_list li a:hover {background: #0A8FC4; color: #fff; text-decoration: none;}
.topic_actions .action_list li:before {content: " "; margin: 0;}

.topic_actions .action_list li a[title^="Rapporteer dit topic"] {}
.topic_actions .action_list li a[title$="je laatste report is nog niet gelezen"] {background: #B9133C; color: #fff;}
.topic_actions .action_list li a[title$="je laatste report is afgehandeld"] {background: #42b913; color: #fff;}
.topic_actions .action_list li a[title="Rapporteer dit topic"] {background: #D9ECFF; color: #024368;}
.topic_actions .action_list li a[title^="Rapporteer dit topic"] img {display: none;}

Grootste issue met de nieuwe layout is vooral de font sizes. Deze zijn nog steeds met px gezet ipv punten of liever rem's. Dat komt de usability niet ten goede. Wanneer je namelijk vergroot browsed (bijv. 150%), gaat de layout gekke verschillen tonen met betrekking tot titels en tekst.

[WrR0n]

segil schreef op dinsdag 12 maart 2019 @ 15:00:
Volgens mij is de font ook veranderd op de frontpage. Hoe verander ik dat terug? /css-noob
En is er een manier om de menubalk aan te passen en dat "Carrière" weg te halen. Ik klik daar steeds op als ik Forum wil hebben

@segil Ja dat kan met deze regel:

Cascading Stylesheet:

 
#navMenu li a[href^="https://tweakers.net/carriere/it-banen/zoeken/"]{ 
 display: none;
}

[ Voor 21% gewijzigd door WrR0n op 13-03-2019 10:35 ]

[Rubman]

Maar klopt het dat er nu slechts 1 nieuws item bovenin wordt weergegeven Waar dat er eerder 4 waren naast elkaar?

Ik heb nog steeds het idee dat ik wat mis om door te klikken naar volgende nieuws items of dat het zo'n lopende pagina is waar hij ze steeds af gaat.

[Zeror]

Rubman schreef op woensdag 13 maart 2019 @ 10:50:
Maar klopt het dat er nu slechts 1 nieuws item bovenin wordt weergegeven Waar dat er eerder 4 waren naast elkaar?

Nee, je hebt er nog steeds 4. 1 grote ankeiler bovenaan en 3 kleinere ankeilers in de lijst van nieuwsberichten.

[Creesch]

Dat sommige mensen visueel zijn ingesteld snap ik, dat daardoor iedereen tegen een stel posters moet aankijken voor reviews e.d. snap ik dan weer niet helemaal. Daarom een wat subtielere implementatie van het huidige frontpage fiasco hieronder.

Cascading Stylesheet:

/* blurry achtergrond weg */
body .fpAnkeiler::before {
    display: none;
}


/* Comment count mag ook weg */
body .fpAnkeiler > a.commentCount {
  display: none;
}


/* "Lees verder", prijzen, etc. */
body .fpAnkeiler .fpaMeta {
  display: none;
}

/* Het algehele component */
body .fpAnkeiler {
    background: rgba(0,18,41,0.7);
}

/* De headline vormgeven */
body .fpAnkeiler .fpaTitle {
  display: inline-block;
  position: initial;
  background: rgba(255, 255, 255, 0);
  height: 60px;
  box-sizing: border-box;
  text-shadow: -1px -1px 0 rgba(0,18,41,0.7), 1px -1px 0 rgba(0,18,41,0.7), -1px 1px 0 rgba(0,18,41,0.7), 1px 1px 0 rgba(0,18,41,0.7);
}

/* Plaatje in een normaal formaat naast de headline */
body .fpaImage.review {
  display: inline-block;
  width: auto;
  height: 60px;
  vertical-align: top;
  float: right;
}

/* top banner  mag wat mij betreft gelijk aan de andere artikelen */
body .fpAnkeiler.fullWidth .fpaImage {
  display: inline-block;
  height: 60px;
}

body .fpAnkeiler.fullWidth .fpaImage img {
    height: 60px;
}


body .fpAnkeiler .fpaImage::before {
  display: none
}
body .fpAnkeiler.fullWidth {
  height: auto;
  width: 639px;
}

/* Aangezien de top banner hebben gefixed kan de rechter sidebar ook iets omhoog */
.secondColumn.frontpage.top {
    margin-top: -80px;
}

Daarnaast ook nog wat losse regels voor het verbergen van diverse elementen waar ik persoonlijk helemaal niks mee doe. Dat ziet er in totaal dan ongeveer zo uit

Cascading Stylesheet:

/* Ik hoef geen promo te zien */

body #fpPromo {
    display: none;
}

/* Ik hoef ook geen video suggesties die kom ik wel tegen in de artikelen zelf.  */
body .fpItem#videos {
    display: none;
}

/* "acties" heb ik ook geen interesse in */
body .fpItem#sponsored {
    display: none;
}

/* de category bar gebruik ik eigenlijk ook helemaal niet */
#categoryBar {
    display: none;
}

/* En waarom zou ik eigenlijk willen zien hoeveel twitter en facebook dingen er zijn? */
.socialcount {
    display: none;
}

[Zeehond]

Een tijdje terug heb ik een dark theme gemaakt. Zie hieronder hoe deze er uit ziet:



De css is redelijk bug vrij (kan altijd dat ik iets niet gezien heb). Wellicht moet ik nog wat zaken bij polijsten, dan zal ik de CSS code in deze post updaten. Actief ondersteuning ga ik uiteraard niet leveren, maar als je de CSS ook op de site wil gebruiken dan staat deze hieronder. De code heeft hier en daar wat coments die zaken aanpassen makkelijker zouden moeten maken.

code:

/*versie 5 18-04-2019*/
#forumheading .info, #forumheading #tweakbase_relations, #forumheading div.buttonnav {

}

#tweakbase_relations {
    background: #333;
    border: 1px solid #d9d9d9;
    box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2);
}

#tweakbase_relations {
    position: relative;
}

.arrow#tweakbase_relations::before {
    display: none;
}

/*bovenste balk instellingen pagina*/
html.js body.hasTracker {
    background-color: #1d1d1d;
}

.arrow#tweakbase_relations::before {
    background: url("../../../g/forum/images/layout/arrow_top_white.png") no-repeat;
    content: "";
    height: 8px;
    left: 60px;
    position: absolute;
    top: -8px;
    width: 15px;
}

#tweakbase_relations h2 {
    color: #fff;
    cursor: pointer;
    display: block;
    font: 12px "arial","helvetica","Liberation Sans",sans-serif;
    font-weight: bold;
    margin: 0;
    padding-right: 14px;
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 14px;
}

.collapsed#tweakbase_relations h2::before {
    transform: rotate(90deg);
}

#tweakbase_relations h2::before {
    background: url("../../../g/hidpi/icons/chevron_black.svg") no-repeat center/6px 10px;
    content: "";
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}

.collapsed#tweakbase_relations .relationbox {
    display: none;
}

#tweakbase_relations .relationbox {
    padding: 0 10px 10px;
}

#tweakbase_relations .relationbox {
    line-height: 20px;
    overflow: hidden;
}

.topic_actions {
    margin-bottom: 0px;
    overflow: hidden;
}

.topic_actions {
    margin-bottom: 3px;
    overflow: hidden;
}

#forumheading .info {
    margin-bottom: 0px;
}
/*forum categorie header */
h2, header .subheading {
    color: rgba(179, 117, 35, 1);
}

/* andere headers (pricewatch/ va)*/
#header h1 .subtitle {
    color: rgba(179, 117, 35, 1);
    display: block;
    font-size: 16px;
}

@media screen and (min-width: 1500px) {
   #tweakbase_relations {
       position: absolute;
       width: 200px;
       margin-left: -250px;
   }
}

/*dark mode*/
#menubar {
    background-color: #000;
    background-image: -webkit-linear-gradient(top, #a41e39, #9a0e36 68px);
    background-image: -moz-linear-gradient(#a41e39, #9a0e36 68px);
    background-image: linear-gradient(to bottom, #000, #000);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    box-shadow: inset 0 -1px 0 #000;
    height: 44px;
    left: 0;
    position: relative;
    z-index: 110;
}

/*verbergtmenubottombar 9slogan*/
#menubottombar {
    display: none;
}

#bottom div.hr {
    display: none;
}


#contentArea {
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #333;
}

/*5 b grote text en kleur*/
body {
    color: rgba(179, 117, 35, 1);
}

.messagecontent {
    font-size: 14px;
    word-wrap: break-word;
}

form table td.label {
    color: #fff;
}

#categoryBar ul li a {
    color: #fff;
    display: block;
    height: 42px;
    line-height: 17px;
    text-align: center;
}

h3 {
    color: #fff;
}

.messagecontent a {
    color: rgba(53, 159, 35, 1);
    text-decoration: underline;
}

.rbProductlist .item p.price a {
    color: rgba(179, 117, 35, 1);
}

.user, a.user:hover {
    color: #a0a0a0;
    font-weight: bold;
}

.menuHeaderPopup .notification .postInfo {
    max-height: 76px;
    overflow: hidden;
    padding-top: 4px;
    color: white;
}

.menuHeaderPopup .notification:hover .postInfo {
    max-height: 76px;
    overflow: hidden;
    padding-top: 4px;
    color: black;
}

.menuHeaderPopup .notification.unread .postInfo  {
    max-height: 76px;
    overflow: hidden;
    padding-top: 4px;
    color: black;
}


#header h1 .subtitle a {
     color: rgba(53, 159, 35, 1);
}

table.listing td.title a {
    color: rgba(53, 159, 35, 1);
}

table.listing td a {
    color: rgba(53, 159, 35, 1);
}

table.listing td.topic a {
    color: rgba(53, 159, 35, 1);
}

table.listing td.poster a {
    color: rgba(53, 159, 35, 1);
}

form a {
    color: rgba(53, 159, 35, 1);
    cursor: pointer;
    text-decoration: none;
}

.action_list li.viewcount {
    color: #a0a0a0;
}

.reactieContent blockquote {
    border-left: 3px solid #d7d7d7;
    color: #a0a0a0;
    margin: 10px 0 10px 10px;
    padding-left: 5px;
}

table.listing p.title, table.forumlisting p.title {
    color: rgba(0, 224, 217, 1);
    font-size: 14px;
    font-weight: normal;
}

/*auteur artikel */
.authorBlock .info {
    margin-left: 10px;
    padding: 3px;
}

.reactieHeader .userLink {
    color: #a0a0a0;
    font-weight: bold;
}

.messageheader .date a {
    color: #a0a0a0;
}

.authorBlock .info .name a {
    color: #a0a0a0;
}

.message .poster .title {
    color: #a0a0a0;
    font-size: 11px;
    margin-bottom: 5px;
    font-weight: bold;
}

.crew, a.crew:hover {
    color: #b9133d;
}

.mbr {
    color: rgba(0, 173, 78, 1);
}

/*forum messages */
div.info, div.error, div.message, div.faq, form.insertMessage, form.form1, form.form2, #folders, #myprofilecontainer {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #333 40px);
    background-image: -moz-linear-gradient(#333, #333 40px);
    background-image: linear-gradient(to bottom, #333, #333 40px);
    background-repeat: no-repeat;
    border: 1px solid #d9d9d9;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.33);
}

.reactieBody.informative {
    background: #333;
    border-color: rgba(130, 185, 19, 1);
}

.reactieBody.spotlight {
    background: #333;
    border-color: #00971f;
}

/*quotes*/
.messagecontent .message-quote-div {
    background-color: #1d1d1d;
    border: 1px solid #d9d9d9;
    border-radius: 1px;
    color: #a0a0a0;
    margin: 2px 0;
    padding: 10px;
}

/*links above topic*/
a {
    color: rgba(53, 159, 35, 1);
    text-decoration: none;
}

/*kleur crew*/
.crew, a.crew:hover {
    color: rgba(19, 154, 185, 1);
}


/*carousel 3 b*/
.fpaItem > a {
    display: block;
    position: relative;
    text-decoration: none !important;
}

.fpaItem .fpaTitle {
    background: rgba(255,255,255,0.9);
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 4px 10px 5px;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.fpaItem .fpaMeta {
    background: rgba(255,255,255,0.9);
    bottom: 0;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    position: absolute;
    width: 100%;
    display: none;
}

/*reageerbox*/
form dl dd textarea {
    font-size: 13px;
    height: 120px;
    width: 632px;
    background-color: rgba(196, 196, 196, 1);
}

/*meer & account dropdown,  blokken */
.dropdown ul {
    background: rgba(36, 36, 36, 1);
    border: 1px solid #e6e6e6;
    border-radius: 1px;
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.dropdown li, .dropdown li > a {
    color: #fff !important;
    text-decoration: none;
}

table.listing {
    background-color: rgba(0, 0, 0, 1);
    background-image: -webkit-linear-gradient(rgb(145, 145, 145), rgb(140, 140, 140));
    background-image: -moz-linear-gradient(#919191, #8c8c8c);
    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
    empty-cells: show;
    margin: 0 0 10px 0;
    table-layout: fixed;
    width: 100%;
}

body, #bottom div.hr, #entity, #heroBlock, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color: #1d1d1d;
}

.bar {
    background: #666;
    border: 1px solid #666;
    border-radius: 1px;
    color: #000;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    min-height: 18px;
    padding: 7px 20px 7px 10px;
}

#categoryBrowser {
    background: #666;
    border: 1px solid #666;
    border-radius: 1px;
    font-size: 12px;
    margin-bottom: 20px;
    padding: 10px;
    width: 958px;
}

#categoryBrowser div {
    background: #a0a0a0;
    border: 1px solid #a0a0a0;
    border-radius: 1px;
    height: 384px;
    position: relative;
    width: 280px;
}

table.pwListTable input, table.pwListTable select, table.pwListTable textarea {
    max-width: 280px;
    background-color: rgba(191, 191, 191, 1);
}

table.listing td {
    background-color: #f7f7f7;
    background-image: -webkit-linear-gradient(rgb(247, 247, 247), rgb(242, 242, 242));
    background-image: -moz-linear-gradient(#333, #333);
    background-image: linear-gradient(rgb(51, 51, 51), rgb(51, 51, 51));
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #fafafa;
    color: rgba(179, 117, 35, 1);
    line-height: 18px;
    padding: 10px 5px;
    text-align: left;
}

.fixedHeader .menuHeaderPopup {
    position: fixed;
    background-color: rgba(36, 36, 36, 1);
}

.reactieBody {
    border: 1px solid #d9d9d9;
    margin-bottom: 10px;
    max-width: 656px;
    padding: 10px 15px 8px;
    position: relative;
    box-sizing: border-box;
    background-color: #333;
}

body.hero #contentArea {
    background: none;
    background-image: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -webkit-linear-gradient(rgba(255, 255, 255, 0.85), rgb(255, 255, 255));
    background-image: -moz-linear-gradient(#fff, #fff),-moz-linear-gradient(rgba(255,255,255,0.85), #fff);
    background-image: linear-gradient(rgb(51, 51, 51), rgb(51, 51, 51)), linear-gradient(rgba(255, 255, 255, 0.85), rgb(255, 255, 255));
    background-repeat: no-repeat, no-repeat;
    background-position: 0 100px,0 0;
    background-size: 100% 100%, 100% 100px;
    margin-top: -250px;
    position: relative;
}

/*thumbs up*/
.action_list li.rating .ratingcount {
    color: rgba(179, 117, 35, 1);
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    min-width: 30px;
    vertical-align: top;
}

/*modbreak*/
fieldset.modbreak {
    background-color: #f2dde1;
    background-image: -webkit-linear-gradient(rgb(242, 221, 225), rgb(240, 216, 221));
    background-image: -moz-linear-gradient(#f2dde1, #f0d8dd);
    background-image: linear-gradient(rgb(242, 221, 225), rgb(240, 216, 221));
    border: 1px solid #e5b8c3;
    border-radius: 1px;
    box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2);
    font-size: 12px;
    line-height: 20px;
    margin: 0;
    padding: 5px 10px 10px 10px;
    width: auto;
    color: black;
}

/*modbreak legend tag*/
fieldset.modbreak legend {
    color: #b9133d;
    display: block;
    font-size: 13px;
    font-weight: 700;
    background-color: #f2dde1;
}

/*reviews*/
body.hero #contentArea {
    background: none;
    background-image: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -webkit-linear-gradient(rgba(255, 255, 255, 0.85), rgb(255, 255, 255));
    background-image: -moz-linear-gradient(#333, #333),-moz-linear-gradient(rgba(255,255,255,0.85), #333);
    background-image: linear-gradient(rgb(51, 51, 51), rgb(51, 51, 51)), linear-gradient(rgb(51, 51, 51), rgb(51, 51, 51));
    background-repeat: no-repeat, no-repeat;
    background-position: 0 100px,0 0;
    background-size: 100% 100%, 100% 100px;
    margin-top: -400px;
    position: relative;
}

/*kleur dm lijst*/
table.listing.dm td {
    background-color: #333;
}

/*titel kleur (FP)*/
.articleColumn.wide .headingContent .subheading {
    color: rgb(53, 159, 35);
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 10px;
}

/*subtitel (FP)*/
#contentArea .centeredContent h2.chapter {
    color: rgb(53, 159, 35);
    font-size: 21px;
    line-height: 1.1;
}

h1{
    color: rgb(53, 159, 35);
}

/*in text kop (FP)*/
.streamer {
    color: rgb(53, 159, 35);
    float: right;
    font-size: 21px;
    font-style: italic;
    line-height: 28px;
    margin: 20px;
    margin-right: 0;
    padding: 6px 0 11px;
    quotes: none;
    text-align: left;
    width: 285px;
}

/*Reactie ingeklapt FP*/
.reactieBody.hidden .reactieHeader a {
    color: #a0a0a0;
    text-decoration: none;
}

/*search*/
@media screen and (min-width: 1500px) {

#search .keywordSearch {
    height: 28px;
    line-height: 28px;
    /* margin: 0 auto; */
    width: 248px;
    margin-top: -25px;
    z-index: 200;
    position: fixed;
}

body.customColor #searchbar {
    background-color: #1d1d1d;
    height: 0px;
    z-index: 200;
    margin-top: -20px;
        margin-right: -725px;
        float: right;
    /* width: 300px; */
}

/*background*/
#layout {
    clear: both;
    background-color: #1d1d1d;
        padding-top: 18px;
}
}
@media screen and (max-width: 1499px) {
  #searchbar {
    background-color: #1d1d1d !important;
}

/*background*/
#layout {
    clear: both;
    background-color: #1d1d1d;
}
}

/*pricewatch*/
#categoryBrowser .large li {
    height: 118px;
    width: 122px;
    background-color: #a0a0a0;
}

.filterGroup .filters {
    padding: 0 8px;
    background-color: #a0a0a0;
}

.filterOption label {
    color: #000;
    cursor: pointer;
}

.filterOption.collapsed h4 {
    color: #666;
}

.sliderLabel, .sliderSecondLabel {
    font-size: 12px;
    left: 0;
    position: absolute;
    top: -27px;
    white-space: nowrap;
    color: #000;
}

.filterOption .hideLink, .filterOption .showLink {
    cursor: pointer;
    display: block;
    margin-left: 2px;
    padding-left: 15px;
    color: blue;
}

.sliderBar .selected {
    background: #960505;
    left: 106px;
    position: absolute;
    top: 0;
    width: 60px;
}

table.listing thead th {
    border-bottom: 0;
    font-weight: bold;
    min-height: 25px;
    text-align: left;
    padding-top: 3px;
}

#entity > div {
    border-top: 0px solid #d9d9d9;
    margin: 0 auto;
    min-width: 980px;
    padding: 15px 0 10px 0;
    width: 90%;
}
/*eind pricewatch*/

.galleryHeadingContainer > div {
    border-top: 0x solid #d9d9d9;
    margin: 0 auto;
    min-width: 980px;
    padding: 15px 0 10px 0;
    width: 90%;
}

De css is te lang om =css mee te geven aan ubb code

Edit versie 5: Kleine verbeteringen

[ Voor 255% gewijzigd door Zeehond op 18-04-2019 16:26 ]

[Bas170]

@Creesch Je ene screenshot toont de zoekbalk wel, de andere niet. Wordt die ergens weggefilterd (ik zie het zo 123 niet in de code) of komt het door scrollen?

[Creesch]

Bas170 schreef op vrijdag 15 maart 2019 @ 13:00:
@Creesch Je ene screenshot toont de zoekbalk wel, de andere niet. Wordt die ergens weggefilterd (ik zie het zo 123 niet in de code) of komt het door scrollen?

Dat komt door het scrollen. Mocht je die willen verbergen kan je twee dingen doen

Cascading Stylesheet:

body #search {
    display:none;
}

Dan houd je de grijze witruimte. Deze kan je aanpassen door de hoogte aan te passen van het parent element

Cascading Stylesheet:

body #searchbar {
    height: 55px;
}

Je kan als je helemaal geen witruimte wil ook onderstaande gebruiken.

Cascading Stylesheet:

body #searchbar {
    display:none;
}

[Bas170]

Creesch schreef op vrijdag 15 maart 2019 @ 13:10:
[...]


Dat komt door het scrollen. Mocht je die willen verbergen kan je twee dingen doen

Cascading Stylesheet:

body #search {
    display:none;
}

Dan houd je de grijze witruimte. Deze kan je aanpassen door de hoogte aan te passen van het parent element

Cascading Stylesheet:

body #searchbar {
    height: 55px;
}

Je kan als je helemaal geen witruimte wil ook onderstaande gebruiken.

Cascading Stylesheet:

body #searchbar {
    display:none;
}

Dank je!
Ik wil hem niet verbergen, maar wel jouw code overnemen.
Ik was bang dat de searchbar dan zou verdwijnen, maar dat is gelukkig niet zo

[Royy90]

Ik heb de menubar een volledig black/white theme gegeven en ben bijna tevreden over het eindresultaat. Maar toch zijn er nog een paar dingen die ik niet kan fixen. Hopelijk kan iemand me hier verder helpen.

De css:

Cascading Stylesheet:

/* - - - Menubar - - - */


@media (min-width: 1185px) {
a{
  color: #000;
}

/*menubar zwart maken en border toevoegen i.v.m. geselecteerd item*/
#menubar {
  height: 48px;
  box-shadow: none;
  background: #000;
  border-bottom: solid 3px #000;
}

/*carriere weghalen uit het menu*/
#navMenu li a[href^="https://tweakers.net/carriere/it-banen/zoeken/"]{ 
 display: none;
}

/*menu over de breedte van de content page verbreden*/
#menu {
  padding-left: 39px;
  padding-right: 39px;
}

/* - - - Logo - - - */
/*Logo iets lager zetten*/
#menu #logo {
  margin-top: 3.5px;
}

/*geen hover bij het logo(achtergrond zwart)*/
#logo:hover,#menu>ul>li:not(.selected):hover {
  background-color:#000;
  border-bottom:1px solid #000;
}

/* - - - Menu - - - */
/*menu items in lowercase*/
  ul#navMenu{
  text-transform: lowercase;
}

/*witte text color when hover*/
#menu :hover{
  color: #000;
}

/*reverse text color when hover "dropdowns" */
#menu li.more.last :hover{
  color: #000;
  border-bottom: none;
}

#menu>ul>li:not(.selected):hover{
  background-color: #fff;
  height: 100%;
  border-bottom: solid 3px #fff;
}

/*reverse color active item*/
#menu>ul>li.active :hover{
  background-color: #fff;
  color: #000;
  border-bottom: solid 3px #fff;
}

#menu>ul>li {
  line-height: 46px;
}

#menu .sitename+ul, #menu>ul>li, #menu>ul>li>a {
  height: 48px;
}

#menu>ul>li:not(.selected):hover { 
  height: 48px;
  border-bottom: solid 3px #fff;
}

 /* Menu Dropdowns black/white */
#menu li.dropdown li:hover {
  background-image:-webkit-linear-gradient(#000, #000);
}

/*witte underline bij actieve item*/
#menu li.active a {  
   border-bottom: solid 3px #fff;
}

/*witte tekst kleur actieve menu-item*/
#menu>ul>li.active a{
  color: #fff;
}

/* - - - Userbar - - - */
#userbar li.icon a {
  margin-top: 9px;
}

/*user>activiteit correct color */
#menu li.indent.more :hover{
  color: #fff;
}

#menubottombar{
  display: none;
}

/*onderstaande css maakt de icons zwart bij hover*/
#userbar li.compare :hover{
    background-position: -24px -152px;
}
#userbar li.icon.messages :hover{
    background-position: -24px 0;
}
#userbar li.notifications :hover{
    background-position: -24px -24px;
}
#userbar li.display :hover{
    background-position: -24px -128px
}

/*Usermenu lowercase*/
.profileNavigation{
    text-transform: lowercase;
}

/*pijltjes zwart bij hover*/
#menu > ul > li.more > span:hover::after {
    background: url("../../../g/hidpi/icons/chevron_black.svg") no-repeat center / 6px 10px;
    content: '';
    display: inline-block;
    height: 10px;
    margin-left: 4px;
    transform: rotate(90deg);
    vertical-align: middle;
    width: 10px
}
}

Nu de "bugs"…

- Bij het usermenu worden de icons prima zwart bij een hover. Alleen zodra je te ver boven het icon zit met je muis is het icoontje niet zwart.

Nu heb ik het volgende geprobeerd maar dan verspringt het icoontje halverwege de menubar en zie je een 2e icoon erbij.

Cascading Stylesheet:

  #userbar li.icon :hover{
   background-color: #fff;
   height: 100%;
   margin-top: -3px;
}

- Het actieve menu item is underlined met een witte lijn(border). Alleen wanneer je in een submenu zit van “meer”, bijvoorbeeld “profielen”, dan is “meer” niet wit onderstreept?

- Omdat er een border zit onder de menubar(3px) wordt de text niet zwart wanneer je precies hovert op deze border. Het zou mooier zijn als de text dan ook al zwart wordt.

- Kan je de radiobuttons ook zwart maken? Volgens mij ligt dit meer aan het os/browser dan dat het een css dingetje is.

De reden dat ik een border gebruik voor de underline is omdat de menu items anders omhoog springen wanneer het geselecteerd is. Als dit anders kan, maar er precies hetzelfde uitziet dan hoor ik het ook graag.

[Mic2000]

Druk bezig met een custom css te creëren, valt me nog tegen hoeveel qua css aangepast moet worden om de hele site goed te krijgen... Mijn css-skills zijn ook aardig roestig... lukt me al niet om de bovenste header "Vergelijk producten en prijzen" wat tevens een link is die visited is, toch de blauwe kleur te krijgen. Andere bezochte links doe ik wel grijs maken...

Ik heb nu

code:

/* rode headers */
h1, h2, header .subheading {
    color: #0091ea;
}
h1 a, h2 a, header .subheading a:visited {
    color: #0091ea;
}
     h1, h2, h3{
       a{
         color:#0091ea !important;
         &:visited{ color:#0091ea !important;}
       }
     }

Als iemand een tip heeft Ook de paarse kleur bij bezochte linkjes wilt niet grijs worden... heb simpel:

code:

a:visited {
  color: #afafaf;
}

Edit: oke ik heb er al

code:

table a:visited {
  color: #afafaf;
}

Nu is gelijk de header opgelost... man man man, wat een tijd geleden die css stuff... Maar wel leuk als het allemaal lukt aan te passen

Edit 23-3-2019:
---------------------------------------------------------------

Ondertussen al weer wat meer feeling met CSS gekregen. Het begint aardig leuk te worden. Ik dacht ik houd jullie up to date met de vorderingen. Ik release de CSS wanneer ik het meeste van de site heb weten te veranderen naar de 'dark side'.

[ Voor 32% gewijzigd door Mic2000 op 23-03-2019 21:35 ]

[MarnickS]

MarnickS schreef op vrijdag 15 februari 2019 @ 16:18:
Ik heb hier nog een hele simpele dark mode voor Tweakers die aardig compleet is. Werkt ook volledig op mobiel (ook de pricewatch filters).

https://del.dog/tweakersdarkcss

Een grote update van de bovenstaande css:
https://del.dog/d/tweakerscss_v26-3-2019
Ik heb behoorlijk wat veranderd, maar nog niet alles werkt super goed.

[Mr Nielsson]

Mic2000 schreef op zondag 17 maart 2019 @ 19:23:
Druk bezig met een custom css te creëren, valt me nog tegen hoeveel qua css aangepast moet worden om de hele site goed te krijgen... Mijn css-skills zijn ook aardig roestig... lukt me al niet om de bovenste header "Vergelijk producten en prijzen" wat tevens een link is die visited is, toch de blauwe kleur te krijgen. Andere bezochte links doe ik wel grijs maken...

Benieuwd naar het resultaat en de code

[mschol]

de "wij stellen technologie op de proef" balk was een mooie break tussen menu en content, heel irritant dat die weg is

hoe lossen jullie dat op?

[ Voor 10% gewijzigd door mschol op 27-03-2019 23:59 ]

[Hero of Time]

Als je dat wilt, #layout een padding-top geven van hoe groot je 't wilt hebben. Of #top padding-bottom.

[ Voor 13% gewijzigd door Hero of Time op 28-03-2019 07:56 ]

[mschol]

Hero of Time schreef op donderdag 28 maart 2019 @ 07:56:
Als je dat wilt, #layout een padding-top geven van hoe groot je 't wilt hebben. Of #top padding-bottom.

vanavond eens knutselen.

_{beetje offtopic wellicht, maar stelt tweakers technologie niet meer op de proef? dat die balk met slogan verwijderd is?}

[Bas170]

mschol schreef op donderdag 28 maart 2019 @ 08:29:
[...]

_{beetje offtopic wellicht, maar stelt tweakers technologie niet meer op de proef? dat die balk met slogan verwijderd is?}

Die is verwijderd om ruimte te besparen: plan: Bugbash en weghalen zwarte balk - Development-iteratie #152

[Jogai]

Een vermelding waard.

LankHoar schreef op maandag 14 januari 2019 @ 15:20:
Al enige tijd gebruik het thema van @EotT en die bevalt me prima: https://userstyles.org/st.../tweakers-dark-v2-by-eott

Hij reageert ook vlot op vragen/opmerking op zijn CSS (en staat ook open voor suggesties)

_{Native ondersteuning zou uiteraard nog steeds beter zijn!}

Een user met maar 100 reacties op heel tweakers, maar wel een netjes gepubliceerd via userstyles. Fijn voor mij is dat hij ook als userscript is te installeren, zodat ik niet een extensie extra hoef te installeren (ik heb alleen uBlock origin, Cookie autodelete,en violentmonkey).

[Fidelity]

Mic2000 schreef op zondag 17 maart 2019 @ 19:23:
Druk bezig met een custom css te creëren [...]

Wouw! Dat ziet er gelikt uit. Zou het graag willen gebruiken zodra je er klaar mee bent

[Mic2000]

Fidelity schreef op woensdag 17 april 2019 @ 22:24:
[...]


Wouw! Dat ziet er gelikt uit. Zou het graag willen gebruiken zodra je er klaar mee bent

Ja man, ik moet er nog eens even verder mee aan de slag

[Zeehond]

Vandaag heb ik wat bugs geplet in mijn dark CSS, de boel wat gepolijst en de searchbar verhuist naar rechts boven voor grotere schermen (min 1500px).



Code zie: Zeehond in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Zo te zien hing mijn muis net op het pricewatch linkje

[ Voor 30% gewijzigd door Zeehond op 18-04-2019 16:04 ]

[Hero of Time]

@Zeehond, heh, ik zie groen en oranje voor linkjes. Zou dat bij een van mijn eerste versies vandaan komen?

[Zeehond]

Hero of Time schreef op donderdag 18 april 2019 @ 15:57:
@Zeehond, heh, ik zie groen en oranje voor linkjes. Zou dat bij een van mijn eerste versies vandaan komen?

Nee, zelf bij uit gekomen dus we hebben toevallig gewoon dezelfde smaak . ik had in een van mijn eerste versies (niet hier neer gezet) lichtblauw voor linkjes en lichtgrijs voor de tekst, maar dat leest niet prettig op een duistere achtergrond voor langere tijd.

Ik weet eigenlijk niet of ik jouw eerste versie ooit gezien heb?

[Hero of Time]

Zeehond schreef op donderdag 18 april 2019 @ 16:02:
[...]

Nee, zelf bij uit gekomen dus we hebben toevallig gewoon dezelfde smaak . ik had in een van mijn eerste versies (niet hier neer gezet) lichtblauw voor linkjes en lichtgrijs voor de tekst, maar dat leest niet prettig op een duistere achtergrond voor langere tijd.

Ik weet eigenlijk niet of ik jouw eerste versie ooit gezien heb?

Plaatjes ervan vind je ergens in dit topic. Nu heb ik witte tekst, grijze links onbezocht en iets donkerder grijs voor bezocht.

[Zeehond]

Hero of Time schreef op donderdag 18 april 2019 @ 16:12:
[...]

Plaatjes ervan vind je ergens in dit topic. Nu heb ik witte tekst, grijze links onbezocht en iets donkerder grijs voor bezocht.

Dan heb je het zo te zien meerdere keren gewijzigd, jouw eerste post hier is Hero of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'" Maar daar zijn de linkjes nog niet groen.

Ook nog even snel het pricewatch/ v&a stuk onder handen genomen, elke keer als ik daar keek bedacht ik mij dat ik die nog moest aanpakken .

[ Voor 5% gewijzigd door Zeehond op 18-04-2019 16:30 ]

[Hero of Time]

@Zeehond, iig met https://tweakers.net/ext/f/NRiDDDXNkzG61SH7dMH5s9OB/full.png had ik oranje. Is dan wel voor de datum, maar het was wel voor meer zaken oranje iig. Nu heb ik nog voor de TS de datum van de post groen.

Reden dat ik het niet meer ben gaan gebruiken, was dat het wat rommelig oogde en soms slecht leesbaar was. Het contrast was net niet goed genoeg, bijvoorbeeld als het zonnetje of een andere lichtbron direct op je scherm scheen.

[Zeehond]

@Hero of Time jij hebt zo te zien meer de huisstijl groen van Tweakers gebruikt. Met dat oranje lastig leesbaar is heb ik geen las van, maar ik heb wel een andere tint oranje en een andere kleur voor de achtergrond gebruikt dus dat heeft wellicht nog invloed. Een forum topic ziet er bij mij zo uit: https://tweakers.net/ext/f/SF2MgTHtGPuQeRDPBByNk66l/full.jpg. (blauwe username is enkel bij mods).

[ Voor 10% gewijzigd door Zeehond op 18-04-2019 21:13 ]

[Hero of Time]

@Zeehond, kijk eens goed naar de datum van de posts in m'n plaatje. Dat oranje. Niet op andere plekken, zoals in de post zelf. Die zijn idd huisstijl 'groen'.

En het plaatje waar je naar linkt, kan niet in mijn fotoalbum gevonden worden.

[Zeehond]

Hero of Time schreef op donderdag 18 april 2019 @ 19:51:
@Zeehond, kijk eens goed naar de datum van de posts in m'n plaatje. Dat oranje. Niet op andere plekken, zoals in de post zelf. Die zijn idd huisstijl 'groen'.

Dat had ik gezien, vandaar ook: "Met dat oranje lastig leesbaar is heb ik geen las van, maar ik heb wel een andere tint oranje en een andere kleur voor de achtergrond gebruikt dus dat heeft wellicht nog invloed."

En het plaatje waar je naar linkt, kan niet in mijn fotoalbum gevonden worden.

Fixed

[Hero of Time]

Zeehond schreef op donderdag 18 april 2019 @ 19:54:
[...]

Dat had ik gezien, vandaar ook: "Met dat oranje lastig leesbaar is heb ik geen las van, maar ik heb wel een andere tint oranje en een andere kleur voor de achtergrond gebruikt dus dat heeft wellicht nog invloed."

Wat voor mij de exacte reden was om het te veranderen weet ik niet meer, maar het gebruik ervan was om meer 'kleur' op de pagina's te krijgen. Maar echt succesvol was dat dus niet.

[...]

Fixed

Heb je er ook een vergrootglas microscoop bij? Het idee is iig wel duidelijk, dat zag ik op je eerdere plaatjes al.

[Zeehond]

Hero of Time schreef op donderdag 18 april 2019 @ 19:58:
[...]

Wat voor mij de exacte reden was om het te veranderen weet ik niet meer, maar het gebruik ervan was om meer 'kleur' op de pagina's te krijgen. Maar echt succesvol was dat dus niet.

Opzicht vind ik het er niet verkeerd uit zien. Wellicht had je hooguit de blauwe linkjes gewoon licht grijs kunnen laten? Dat scheelt één kleur per post. Heb jij de reacties overigens breder gemaakt of waren ze eerst gewoon breder?

Heb je er ook een vergrootglas microscoop bij? Het idee is iig wel duidelijk, dat zag ik op je eerdere plaatjes al.

Geeft gaf toch een mooi in één oog opslag overzicht weer?

[Hero of Time]

Bij die plaatjes had ik de boel zelf breder gemaakt. Op m'n PC en HTPC doe ik dat ook met m'n browser via de ingebakken functionaliteit (HTPC vergroot ik ook de tekst naar een leesbare grootte ), maar in m'n standaard CSS in m'n profiel doe ik dat niet. Zie m'n Gdrive link eerder dit topic, daar heb ik twee CSS bestanden staan, met eentje dus als 't goed is tweaks e.d. met ook het breder maken van wat zaken.

[Zeror]

Laatste alinea bij plan: Upgrade naar Symfony 4 - Development-iteratie #154

quote: https://tweakers.net/plan...lopment-iteratie-154.html

We hebben een aantal ideeën om het uitwisselen van custom CSS, zoals dat nu al gebeurt in het Forum, beter te facilitieren, zodat jullie je eigen tweaks makkelijker kunnen delen. Zodra we daarover iets concreters kunnen melden, laten we het weten.

Ben erg benieuwd wat dit gaat zijn.

[ Voor 16% gewijzigd door Zeror op 23-04-2019 15:09 ]

[ikloon]

Zeror schreef op dinsdag 23 april 2019 @ 15:09:
Laatste alinea bij plan: Upgrade naar Symfony 4 - Development-iteratie #154

[...]

Ben erg benieuwd wat dit gaat zijn.

Een opvolging op de aankondiging hiervan doen we in Custom CSS snippets.

[Creesch]

Geen idee waarom het nodig was maar sommige css classes hebben bij de laatste iteratie een andere naam gekregen. Gelijk maar even de boel wat gefinetuned.

Dat ziet er dan zo uit:

Cascading Stylesheet:

@media (min-width: 1200px) {

    /* blurry achtergrond weg */
    body .fpAnkeiler::before {
        display: none;
    }

    /* Het algehele component */
    body .fpAnkeiler {
        background: rgba(0,18,41);
        width: 639px;
    }

    /* Comment count mag ook weg */
    body .fpAnkeiler > a.commentCount {
      display: none;
    }

    /* "Lees verder", prijzen, etc. */
    body .fpAnkeiler .meta {
      display: none;
    }

    body .fpAnkeiler.large {
        height: 60px;
    }


    /* Plaatje in een normaal formaat naast de headline */
    body .fpAnkeiler .image {
      display: inline-block;
      width: auto;
      height: 60px !important;
      vertical-align: top;
      float: right;
    }

    body .fpAnkeiler .image img {
        height: 60px;
        width: auto;
    }

    body .fpAnkeiler .fpaImage::before {
      display: none
    }
    
    /* Aangezien de top banner hebben gefixed kan de rechter sidebar ook iets omhoog */
    .secondColumn.frontpage.top {
        margin-top: -60px;
    }
    
    /* Ik kijk elke dag al nieuws, dit klinkt als een tweakers filter bubble om makkelijk dingen te missen die in de rest van medialand ook niet aan bod komen... */
    #popular_news {
        display: none;
    }
    
    /* Ik weet dat er een nieuwsbrief is, hoef ik niet */
    #newsletter {
        display: none;
    }
}

/* Ik hoef geen promo te zien */

body #fpPromo {
    display: none;
}

/* Ik hoef ook geen video suggesties die kom ik wel tegen in de artikelen zelf.  */
body .fpItem#videos {
    display: none;
}

/* de category bar gebruik ik eigenlijk ook helemaal niet */
#categoryBar {
    display: none;
}

/* En waarom zou ik eigenlijk willen zien hoeveel twitter en facebook dingen er zijn? */
.socialcount {
    display: none;
}

[ Voor 16% gewijzigd door Creesch op 07-05-2019 16:13 ]

[Felyrion]

Mic2000 schreef op zondag 17 maart 2019 @ 19:23:
Druk bezig met een custom css te creëren, valt me nog tegen hoeveel qua css aangepast moet worden om de hele site goed te krijgen... Mijn css-skills zijn ook aardig roestig... lukt me al niet om de bovenste header "Vergelijk producten en prijzen" wat tevens een link is die visited is, toch de blauwe kleur te krijgen. Andere bezochte links doe ik wel grijs maken...

Ik heb nu

code:

/* rode headers */
h1, h2, header .subheading {
    color: #0091ea;
}
h1 a, h2 a, header .subheading a:visited {
    color: #0091ea;
}
     h1, h2, h3{
       a{
         color:#0091ea !important;
         &:visited{ color:#0091ea !important;}
       }
     }

Als iemand een tip heeft Ook de paarse kleur bij bezochte linkjes wilt niet grijs worden... heb simpel:

code:

a:visited {
  color: #afafaf;
}

[Afbeelding: Tweakers theme css dark futuristic]

Edit: oke ik heb er al

code:

table a:visited {
  color: #afafaf;
}

Nu is gelijk de header opgelost... man man man, wat een tijd geleden die css stuff... Maar wel leuk als het allemaal lukt aan te passen

Edit 23-3-2019:
---------------------------------------------------------------

Ondertussen al weer wat meer feeling met CSS gekregen. Het begint aardig leuk te worden. Ik dacht ik houd jullie up to date met de vorderingen. Ik release de CSS wanneer ik het meeste van de site heb weten te veranderen naar de 'dark side'.

[Afbeelding]

Zou je hem anders niet vrij willen geven zoals je hem nu hebt? Dit is wel een stijl die me wel bevalt

[Mic2000]

Felyrion schreef op zaterdag 11 mei 2019 @ 21:45:
[...]


Zou je hem anders niet vrij willen geven zoals je hem nu hebt? Dit is wel een stijl die me wel bevalt

Bij deze, maar hij is nog verre van af

Cascading Stylesheet:

/* achtergrond kleur */
body, #bottom div.hr, #entity, #heroBlock, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color: rgb(27,31,40);
}

/* outline content area */
#contentArea, #top, #mainSearch, #entity > div, #toc.fixed .reviewToc .tocContent, .entityHeader .thumb, .galleryHeading .thumb, .pageTabs li, .pageTabs .more > ul {
    border-color: #252d3c;
}

/* kleur contect area */
#contentArea {

    background: #2e3441;
 filter: drop-shadow(0px 36px 27px #030c14);
}

/* search bar top */
#searchbar {
background-color:transparant;
}

/* menu balk Tweakers */
#menubar {
    background-color: #202530;
    background-image: -webkit-linear-gradient(top, #202530, #202530 68px);
    background-image: -moz-linear-gradient(#202530, #202530 68px);
    background-image: linear-gradient(to bottom, #202530, #202530 68px);
    background-repeat: no-repeat;
    border-bottom: 1px solid #202530;
  /*  box-shadow: inset 0 -1px 0 #404758;*/
    height: 44px;
    left: 0;
    position: relative;

    filter: drop-shadow(0px 4px 4px #030a17);
    z-index: 110;
}

/* menubalk onder */
#menubottombar {
    background-color: #161b24;
    height: 34px;
    line-height: 1.4;
    overflow: hidden;
    position: relative;
    z-index: 16;

    filter: drop-shadow(0px 4px 4px #030a17);
}

/*bottom balk onderaan site*/
#bottom {
    background: #161b24;
}

/* rode headers */
h1, h2, header .subheading {
    color: #0091ea;
}
h1 a, h2 a, header .subheading a:visited {
    color: #0091ea;
}
    

/* zwarte headers */
#header h1 .subtitle {
    color: #afafaf;
    display: block;
    font-size: 16px;
}

/* headline dag */
#news .dailyHeadlines:not(:first-of-type) > h2 {
    color: #ff5630;
    font-size: 14px;
    font-family: "arial","helvetica","Liberation Sans",sans-serif;
}

/* logo hosted by  tru */
#search #true {
 filter: invert(100%)  hue-rotate(190deg) saturate(3);
}

/*tekst categorie balk*/
#categoryBar ul li a {
    color: #221b0d;
}

/* tekste 'alle categorieën' */
#categoryBar p.more a {
    color: #dde4f2;
}

/* hele categorie balk */
#categoryBar ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;

filter: invert(100%);
}

/*pijltje meer */
#categoryBar p.more {
    background: url("../../../g/hidpi/icons/chevron_blue.svg") no-repeat right center/8px 13px;
    margin: 0;
    padding-right: 12px;
    position: absolute;
    top: 3px;
    right: 0;

 filter:  brightness(2.00);

}

/* links */
a {
    color: #dde4f2;
}
.useVisitedState a:visited {
 color:#959dad
}


/*Table laatste nieuws */
table.highlights {
    border-top: 1px solid #3a455a;

    
}
table.highlights td {
    border-bottom: 1px solid #3a455a;
  
}
.mainColumn.frontpage {
    border-right: 1px solid #3a455a;
  
}
#recentlyTested ul {
    border-top: 1px solid #3a455a;
   
}
#recentlyTested li {
    border-bottom: 1px solid #3a455a;
  
}
#bestBuyGuides .description {
    border-bottom: 1px solid #3a455a;
    color: #666;
  
}
/* tijd */
table.highlights .title span, table.highlights .publicationTime {
    color: #485b7f;

}

/* icoontje voor artikel*/
table.highlights .type .contentIcon {
    filter: brightness(1.50);
}

/* stripballon comment */
td.replies .commentCount {
filter: invert(100%);
}


/* Score bord rood*/
#recentlyTested li .scorecard {
/*filter: hue-rotate(55deg) saturate(1.8) brightness(1.4);*/

}

/* ankeiler drop shadow */

.fpAnkeiler {
outline: 1px solid #3f485c;
 filter: drop-shadow(0px 8px 10px #141821);
}

/* INPUT FIELDS - zoek balk bovenaan */

/* zoek veld achtergrond en tekst*/
#search input.text {
    background-color: #1b1f28;
    font-size: 14px;
   color: #8e9fc4;
}

/* border om zoek veld */
input.text, select.text, textarea, .keywordSearch {
    border: 1px solid #d9d9d9;
    border-radius: 0px;
}

/* vakje met zoek loop icoon*/
.keywordSearch input.submit {
background: #1b1f28 url("../../../g/if/v3/framework/menu_icons_v2.png") no-repeat -48px -106px;
    background-position-x: -48px;
    background-position-y: -106px;
border: 0;
    border-left-color: currentcolor;
    border-left-style: none;
    border-left-width: 0px;
border-left: 1px solid #252d3c;
}

/* NIEUWS PAGINA ---------------------------------------------------------- */
.article {
color:#b9c3d7;
}

/* heel article blok */
.newsPortal .newsContentBlock {
    border-bottom: 1px solid #3a455a;
}

/*border van plaatje in artikel */
.article img.border {
    background: #1b1f28;

    border: 1px solid #2b3242;

    filter: drop-shadow(0px 8px 10px #141821);


}

/* REACTIES ------------------------ */

#reacties #reactieContainer {

    border-left: 2px dashed #3a455a;

}

.reactieBody {

    border: 1px solid #2b3242;
   background-color: #161b24;

color: #b9c3d7;

    filter: drop-shadow(0px 8px 10px #141821);

}

.reactieBody.informative {

    background: #1d3135;
    border-color: #294347;

}
.reactieBody.spotlight {

    background: #37595c;
    border-color: #3a6664;

}

/* naam user reactie */
.reactieHeader .userLink {

    color: #ff5630;
    font-weight: bold;

}

[segil]

Hoe verwijder ik de .Actie topics van de frontpage? Bijvoorbeeld deze:

.Actie - Vakantiegadget Weggeefweken dag 6 en 7

Ik heb in mijn custom CSS het volgende opgenomen:

.adv {display:none;}
.plan {display:none;}
.deals {display:none;}
.actie {display:none;}

Voor adv, plan en deals werkt dit wel, maar voor actie niet.

Kan iemand mij helpen?

[Dannisi]

.Actie is .promo
Dus

code:

.promo{display:none;}

[segil]

Dannisi schreef op zaterdag 8 juni 2019 @ 09:28:
.Actie is .promo
Dus

code:

.promo{display:none;}

Top, het werkt. Thanks!

[Mr Nielsson]

Ooit een stukje code gekopieerd van iemand en vanuit daar zelf verder gegaan. Op wat kleine schoonheidsfoutjes na best een prima layout. Try yourself.

PS. Let niet op de zooi. Niks geordend etc.

code:

 .mainSearchSuggest .twk li p a {
    color: #fff !important;
}

.toggleable .toggleBtn {
    background-color: #294C7F !important;
}

#rightSidebar .icon.selected a::after, #rightSidebar .profileNavigationActive .username::after, #leftSidebar .toggleMenuButton.active::after {
    border-bottom: 9px solid #fff;
}

#rightSidebar h3 {
    background-color: #011532 !important;
}

#rightSidebarMenu>li.more {
    background-color: #011532 !important;
}

#rightSidebarMenu>li.more>span {
    color: #ffffff !important;
}

#rightSidebarMenu>li.icon {
    background-color: #011532 !important;
}

#rightSidebarMenu>li.icon.notifications a {
    background-position: 0px -44px;
}

#rightSidebarMenu>li.icon.messages a {
    background-position: 0 0;
}


table.forumlisting>tbody>tr:first-child>td {
    background: #011532 !important;
}

table.forumlisting>tbody>tr>td {
    background: #011532 !important;
}

#leftSidebar .toggleMenuButton {
    background: #011532 !important;
}

.site-sidebar ul li.more>span {
    background: #011532 !important;
}

#leftSidebar .toggleMenuButton.active {
    background: #011532 !important;
}

#leftSidebar .sidebarContent>.active {
    background: #00001a !important;
}

#rightSidebar .profileNavigationActive .username {
    background: #011532 !important;
}

ul.profileNavigation li a {
    background: #00001a !important;
}

body.rightSidebar #rightSidebar {
    background: #011532 !important;
}

.mainSearchSuggest .twk li p a {
    color: #000000;
}

a.laptops {
    background: #011532 !important;
}

a.smartphones {
    background: #011532 !important;
}

a.desktops {
    background: #011532 !important;
}

a.ssds {
    background: #011532 !important;
}

#bestBuyGuides .highlightedProduct {
    background: #011532!important;
}

#bestBuyGuides {
    background: #011532 !important;
}

.messagecontent .message-quote-div {
    background: #294C7F !important;
    color: #FFFFFF;
}

.bestTestedContainer .bestTestedProduct .info .intro {
    background-color: #294C7F !important;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.6em;
    margin-bottom: 20px;
    padding: 15px;
}

.popup .popupContent {
    padding: 15px 15px 5px 15px;
    background-color: #294C7F !important;
}

.aboShop .sideBar .subscriptionInfo {
    float: right;
    font-size: 14px;
    width: 315px;
    background-color: #294C7F !important;
}

.overviewFilter #filter {
    background: #294C7F !important;
    border: 1px solid #d9d9d9;
    border-radius: 1px;
}

.aboShop .sideBar .subscriptionInfo .perks {
    padding-bottom: 0;
    background-color: #00001a !important;
}
.mainColumn table.itemList {
    background: #294C7F !important;
}
.aboShop form .subscriptionType input[type=radio][value='1337']+label {
    background-image: url(../../../g/abo/tweakshield_elite.svg);
    background-color: #294C7F !important;
}

.aboShop form input[type=radio]+label {
    width: 254px;
    background-color: #294C7F !important;
}

.aboShop form .subscriptionType input[type=radio][value='16']+label {
    background-image: url(../../../g/abo/tweakshield_hero.svg);
    background-color: #294C7F !important;
}

.aboShop form .subscriptionType input[type=radio][value='15']+label {
    background-image: url(../../../g/abo/tweakshield_supporter.svg);
    background-color: #294C7F !important;
}

.aboShop form input[type=radio]:checked+label {
    background-position: 240px;
    background-color: #294C7F !important;
}


.aboShop form>.greyContainer {
    background-color: #294C7F;
    background-image: linear-gradient(#294C7F, #294C7F);
    border: 1px solid #d9d9d9;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.33) inset;
    margin-bottom: 25px;
    padding: 15px 15px 17px;
}

.reactieHeader .date, .reactieHeader .replyTo, .reactieHeader .replyToFlat {
    color: #fff !important;
    font-size: 11px;
    font-weight: normal;
}

.reactieBody {
    background: #294C7F !important;
}

.messageheader .date a {
    color: #008800 !important;
}

table.highlights .title span, table.highlights .publicationTime {
    color: white !important;

}

.article .infoBox .title {
    color: #fff !important;
}

.article h2 {
    color: #fff !important;
}

.article.fullWidth .breakOut.alignRight, .article.fullWidth .streamer {
    background-color: #294C7F;
}


.alternative_products.large .item .specline {
    color: white;
    
}

form table.tweakblog {
    background: #00001a !important;
}

h2.koophulp {
    color: #fff !important;
}

h2.chapter {
    color: #fff !important;
}

table.shop-listing.nonmatch .shop-name a, table.shop-listing.nonmatch .shop-price a, table.shop-listing .shop-bare-price a {
    color: white;
}

.bulletSeparatedList.sortLinks .current a {
    color: #294C7F !important;
    font-weight: bold;
}
.filterOption.collapsed h4 {
    color: #fff;
}
#campaignMenu .pageTabs>ul li.active a {
    border-color: #00001a
}

.filterGroup .filters {
    padding: 0 8px;
    background-color: #00001a;
}

.filterGroup .filters .filterOption {
    padding-left: 0;
    padding-right: 0;
    background-color: #294C7F !important;
}

#filterForm .filterOption:first-child {
    border-top: none;
    background-color: #294C7F !important;
}

table.pwListTable.profileLabels textarea.custom {
    height: 400px;
    max-width: 500px;
    width: 93%;
}


.article table {
    background: #294C7F !important;
}

.articleColumn.wide .headingContent .subheading {
    color: #294C7F;
}

.reviewToc .tocContent ul li.active a {
    color: #fff;
}

.authorBlock .info .name a {
    color: #294C7F;
}

.article .ScoreCard.Editorial .ScorecardView {

    background-color: #00001a !important;
}

.nextPrevLinks.large .label {
    color: #fff;
}

#toc.fixed.bottom {
    background-color: #00001a;
}

.article .ScoreCard.Editorial .productInfo .thumb {
    background-color: #00001a;
}

.article .ScoreCard.Editorial .productInfo {
    background-color: #00001a;
}

.tweakersElect {
    background: #294C7F !important; url(../../../g/gallery/tweakers_elect_bg.png) no-repeat right 18%;

}
form table td.label {
    color: #fff !important;
    vertical-align: top;
}

tr.activeSubscription td {
    background-color: #294C7F !important;
    color: white;
}

.jobListingContainer .jobItem .jobInfo .title h2 a.free {
    color: #fff !important;
}

.productSpecifications tbody tr:hover, .productSpecifications tbody tr.diff:hover {
    background-color: #00398e !important;
}

.specs td.spec-label, .specs td.spec {
    color: #fff !important;
    background-color: #011532 !important; 
}

@media (max-width: 1424px)
html.js body.hasTracker {
    min-width: 1000px;
    backgroud-color: #011532 !important; 
}

.filterGroup .filters {
    padding: 0 8px;
    background-color: #00001a;
}

table.listing td.topic a:hover {
    color: #00398e !important;
}

.jobListingContainer .jobItem.topJob {
    background-color: #eaf3f6;
    border: 1px solid #ccc;
    background-color: #00001a;
}
.fancySelect {

    background-color: #00398e;
}

Style Attribute {
    text-align: left;
    position: relative;
    width: 300px;
    height: 240px;
    background-color: #011532 !important;
}
#title p.mods a {
    color: #fff !important;
    text-decoration: none;
}

.videoGallery .videoPlayer {
    background-color: #011532;
}

.videoGallery {
    background-color:#011532;
    border-radius: 1px;
    height: 550px !important;
    margin-bottom: 20px;
}

.menuHeaderPopup .quickSetting label {
    color: #fff !important;
    line-height: 23px;
}

.toggleable .toggleBtn {
    color: #fff !important;
    display: inline-block;
}

.menuHeaderPopup .quickSetting {
    border-bottom: 1px solid #e6e6e6;
    padding: 12px;
    background-color: #011532;
}

div.message.ownpost, div.message.admin.ownpost {
    background-image: linear-gradient(#014a93 10px, #014a93 40px) !important;

}
div.message, div.faq, form.form1, form.form2, #folders, #myprofilecontainer, table.info {
    background: #00001a !important;
    color: #FFFFFF !important;
}

.textButton {
    background: none;
    border: none;
    color: #fff !important;
    cursor: pointer;
    margin: 0;
    padding: 40;
}
.galleryBody h2 {
    color: #fff !important;
}

/*####KARMA####*/

.galleryHeading .karmaCount+p {
    font-size: 13px;
    margin: 0;
    color: white !important;
}

.c3 svg {
    font-family: 'arial', 'helvetica', 'Liberation Sans', sans-serif;
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #014a93;
}

.galleryHeading .karmaCount {
    font-weight: bold;
    margin: 0 0 12px;
    color: white !important;
}

.galleryHeading .registered {
    color: #fff !important;
    
}



.pageTabs li a {
    color: #fff !important;
    background-color: #014a93 !important;
}

.galleryHeadingContainer, .pageTabsContainer {
    background-color: #011532 !important;
}

#top #entity, #top .pageTabsContainer {
    background: #011532 !important;
}

.scrollableList .no-items, .scrollableList .listItem {
    background-color: #011532 !important;
}

.menuHeaderPopup .footer {
    border-top: 1px solid #e6e6e6;
    padding: 10px;
    background-color: #011532;
}
.scrollableList .listItem:hover {
    background: #00398e !important;
}

.menuHeaderPopup .notification .postInfo .date {
    color: white !important;

}
.menuHeaderPopup .header {
    border-bottom: 1px solid #011532;
    background-color: #011532;
}

.menuHeaderPopup .scrollArea {
    max-height: 460px;
    background-color: #011532;
}

table.listing td.poster a {
    color: #fff !important;
}

table.listing td.title a:hover {
    color: #00398e !important;
}

table.listing td.tags a {
    color: #fff !important;
}

.rateButtons span {
    color: #fff !important;
    font-size: 14px;
}

#forum_tabs li a {
    color: #fff !important;
}

#forum_tabs li#tab_reset a {
    background-color: #014a93 !important; 
    padding: 5px;
}

#forum_tabs li.active a {
    color: #FFFFFF;
    background-color: #011532;
}

#forum_tabs li a {
    color: #fff;
    background-color: #014a93;
}

a:visited {
    color: #fff !important;
    font-weight: 600;
}

table.listing th {
    background: #014a93 !important;
}

table.listing td, table.listing td a {
    background: #011532 !important; 
    color: #EDEEEE;
}
.searchAanbod #nearbyAdForm {
    background: #011532;
    border: 1px solid #fff;
}

#categoryBrowser li.active.more {
    background: url(../../../g/if/categories/arrows.png) no-repeat 212px -18px,linear-gradient(#00398e, #00398e);
}

#categoryBrowser .images li:hover {
    box-shadow: inset 0 0 25px #011532, inset 0 0 0 1px rgba(0,0,0,0.1);
}

#categoryBrowser .images li a {
    color: #fff !important; 

}

form span.upperlabel, form span.lowerlabel {
    clear: both;
    color: #fff !important;
    display: block;
    font-size: 11px;
    padding-top: 3px;
}

#community .communityReviews .userReview .reviewContent .userReviewDescription {
    background-color: #f7f7f7;
    background-image: linear-gradient(#011532, #011532);
    border: 1px solid #d9d9d9;
}
.frontpage #community .userReview .userReviewDescription, .userReview {
    background: #011532 !important; 
    color: #EDEEEE;
}

#bestBuyGuides .description {
    border-bottom: 1px solid #e6e6e6;
    color: #fff !important;
}

div#menubar div#menu ul#userbar.loggedin li.more.last.dropdown, ul.profileNavigation li.indent a {
    background-color: #00001a !important;
    color: #e6e6e6;
}
#recentlyTested .price a, #recentlyTested .review a {
    color: #fff !important;
}

#menu .dropdown div ul li.indent:hover {
   background-color: #fff !important;
}

ul.profileNavigation, ul.profileNavigation li.indent, .dropdown ul {
    background-color: #00001a !important;
    color: #EDEEEE;
}

.dropdown ul li:hover, .dropdown ul li.active, #menu .dropdown ul li:hover {
    background-color: #00001a;
    background-image: linear-gradient(#00398e, #00398e);
}

ul.profileNavigation li.indent a:hover {
    background-color: #00398e !important;
}

#categoryBar ul li a {
    color: #fff;
    display: block;
    height: 42px;
    line-height: 17px;
    text-align: center;
}

a:visited {
    color: #fff !important;
}

#logo:hover, #menu>ul>li:hover {
    background: #00398e;
    border-bottom: 1px solid #0049b7;
    height: 43px;
}

a:hover, a.highlightlink {
    color: #0077ff;
    text-decoration: underline;
}

::-webkit-input-placeholder { /* Edge */
  color: #fff !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff !important;
}

::placeholder {
 color: #fff !important;
}

.keywordSearch input.submit {   
    background: #014a93 url(../../../g/if/v3/framework/menu_icons_v2.png) no-repeat 2px -106px !important; 
    border-left: 1px solid #d9d9d9;

}


h1, h2 {
color: #fff;
}

.bar.notice {
    background: #f0fdaf !important;
    border: 1px solid #d4ed5a; */
    color: #fff !important;
    font-size: 12px;
    padding-right: 10px;
}
.bar.ok {
    /* background: #cdeb56; */
    /* border: 1px solid #a2c417; */
    color: #000;
    font-size: 12px;
}

select, select.text, #footer div.buttonnav select, #quotemessages div.buttonnav select {
    background: #294C7F !important;
    color: #EDEEEE;
}

#categoryBrowser.sidebar li.active.more {
    background: url(../../../g/if/categories/arrows.png) no-repeat 572px -18px,linear-gradient(#00398e, #00398e) repeat !important;
}

#categoryBrowser div, #categoryBrowser .sublist {
    background: #294C7F !important;
}

#categoryBrowser {
    background: #182C4A !important;  
}

#categoryBrowser li:hover {
    background: #00001a;
}

.bar {
    background-color: #294C7F !important;
    color: #EDEEEE;
}

.fancyButton {
    background-color: #0a95cd;
    background-image: linear-gradient(#0a95cd, #0884b4);
    /* border: 1px solid #0884b4; */
    border-radius: 1px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    height: 24px;
    padding: 0 10px;
    /* text-shadow: -1px -1px 0 #07729c; */
    white-space: nowrap;
}

/*########################
MENU BAR
########################*/

#search #true {
display: none !important;
}

#menubar {
    background-color: #00001a;
    background-image: -webkit-linear-gradient(top, #a41e39, #9a0e36 68px);
    background-image: -moz-linear-gradient(#a41e39, #9a0e36 68px);
    background-image: linear-gradient(to bottom, #00001a, #00001a);
    background-repeat: no-repeat;
    border-bottom: 1px solid #afafaf;
    box-shadow: inset 0 -1px 0 #afafaf;
    height: 44px;
    left: 0;
    position: relative;
    z-index: 110;
}

/*################################
ICOONTJES RECHTSBOVEN
################################*/

#userbar li.notifications a {
background-position: 0 -25px;
background: url("https://tweakers.net/ext/f/fqKfrbeDGIEA5qj49Z2exz8J/full.png") no-repeat; 
background-position-y: 0%;
background-size: auto auto;
background-size: 20px;
background-position-y: 6.5px;
background-position-x: 4px
}

#menubottombar div.socialcount{
height: 0px;
width: 0px;
visibility: hidden;
left: 10000px;
}

#userbar li.icon.flag.nl::after{
height: 0px;
width: 0px;
background: none
left: 10000px;
}

#userbar li.messages a{
background: url("https://tweakers.net/ext/f/HpWcDHA5p7EbDAIzLBfrZvXg/full.png") no-repeat;
background-size: 20px;
background-position-y: 7.5px;
background-position-x: 5px;
}

.icon.compare.empty{
width: 0px !important;
height: 0px !important;
visibility: hidden;
left: 100000000px;
}


/*******
 General
 ********/
/** Screw #layout and #contentArea height, give #html the same background colour */
html, body {
    background: #0E0E0E;
    color: #F0F0F0;
}

/***************
** New header **
***************/
.galleryInnerTable .title {
    color: #fff !important;
    white-space: nowrap;
}

/* Search field */
#searchbar {
    background: #00001a !important;
}
#search input.text {
    background: #fff;
}
#search .options, #search .options .dropdown ul {
    background: #323333;
}
#search .fancySelect span {
    color: #EDEEEE;
}

/* User menu */
ul.profileNavigation, ul.profileNavigation li.indent, .dropdown ul {
    background-color: #212323;
    color: #EDEEEE;
}
ul.profileNavigation li a {
    color: #EDEEEE;
}
ul.profileNavigation li.indent a:hover {
    background: #813;
}
.dropdown li a, #menu .dropdown ul a {
    color: #FFFFFF;
}

div#menubar div#menu ul#userbar.loggedin li.more.last.dropdown, ul.profileNavigation li.indent a {
    background-color: #212323;
    color: #e6e6e6;
}
div#menubar div#menu ul#userbar.loggedin li.more.last.dropdown span.username {
    color: #E6E6E6;
}
.dropdown li, .dropdown li>a {
    color: inherit !important;
}

/** Menu */
.unread .newNotificationsCount {
    color: #000000;
}
#menu li a {
    color: #C8CBCB;
}
#menu li.active a {
    color: #D9FF26;
}
#menu .dropdown > span, .dropdown li, .dropdown li a, #menu .dropdown ul a {
    color: #E5E5E5;
}

/** Notifications */
.notificationsPopup .header h3 {
    color: #000000;
}
div.popup {
    background: #323131;
}
.scrollableList .listItem, .scrollableList .listItem:hover {
    color: #EDEEEE;
}
.scrollableList .listItem:hover {
    background: #323434;
}
.menuHeaderPopup .notification.unread:hover {
    background: #454444;
}
.menuHeaderPopup .notification.unread {
    background: #414040;
}

/*******************
** End new header **
*******************/

/** Overall background */
#layout {
    background: #00001a;
    padding-top: 5px;
    height: 100%;
}

/** Give the actual content a different background colour */
#contentArea {
    background: #011532;
    padding: 5px 5px 10px 5px;
/*  padding-bottom: 25px;*/
    position: relative;
/*  margin: 0px 5px; */
}

/* For some reason, certain articles have a different #contentarea */
body.hero #contentArea {
    background: #011532;
}


/* Global .bar style */
.bar {
    background-color: #323333;
    color: #EDEEEE;
}

/* Gallery */
.galleryHeadingContainer>div {
    border-top: none;
}
.galleryHeadingContainer, .pageTabsContainer {
    background-color: #212323;
}
div.galleryBody h3.bar {
    background: #212323;
}
.galleryTable.karma td {
    background: #323434;
}
ul.galleryProfile li.checked {
    color: #EDEEEE;
}

/** Unsorted meuk */
h3, h3 a {
    color: #FFFFFF;
}

/** Bottom */
#bottom div.hr {
    background: #202020;
}

/** Text boxes (search, reply) */
textarea#messageBox, input {
    color: #FFFFFF;
    background: #294C7F !important;
}

/** Tracker */
#tracker .trackeritem li a { 
    color: #B7B4B2;
}
#tracker .trackeritem li .new, #tracker .trackeritem li a:hover, #tracker .trackeritem li a:hover .time { 
    color: #d9ff26;
}
#tracker .trackeritem h4, #tracker .trackeritem h4 a { 
    color: #D7D6D4;
}

/* Background color of tabs */
.pageTabs li {
    background: #212323;
}
.pageTabs li.active {
    background: #323434;
}

/* Hyperlinks */
a {
    color: #EDEEEE;
}
a:visited {
    color: #878888;
}

/* New DM/PM message */
form.insertMessage {
    background: inherit;
}
/* DM overview table */
table.listing.dm td {
    background: inherit;
}

/* Badges */
.labelCard, ul.topKarma.show {
    background: #000000;
}
.karmaPopup ol li.highlight {
    color: #FFFFFF;
}

/*******
   FP
 *******/
/** Main content */
/* Tabs */
#fp_tabs li a {
    color: #ABAAAA;
}
#fp_tabs li.active a {
    color: #FFFFFF;
}

/* Whitepapers */
.itknowledgebasewrapper {
    background: #212323;
}

/** Tile items */
.fpaItem>a {
    background: rgba(0,0,0,0.8);
}
.fpaTitle h2 {
    color: #b9133d;
}

/** Article Listing */
table.highlights td a {
    color: #EDEEEE;
}
table.highlights td a:visited {
    color: #888888;
}

table.highlights {
    border-top: 1px solid #000;
}
table.highlights td {
    border-bottom: 1px solid #000;
}
table.highlights .publicationTime span.new {
    color: #A9CC0B;
}
table.article {
    background: inherit;
}
/* More items popup */
.moreItems .popupContent {
    background: #2E2F2F;
}

/* Link to Replies on frontpage */
td.replies a.commentCount:visited {
    color: inherit;
}

/** Second Column - PW, Jobs, Newsletter, etc. */
#pricewatch, #jobs, #poll, .pollWrapper, #newsletter, #textlink, #social .twitterButton, #social .facebookButton {
    background: #011532;
}

#news .dailyHeadlines:not(:first-of-type)>h2 {
    color: #fff;
}

/* Poll option highlight */
.poll label:hover {
    background-color: #545656;
}

.secondColumn p, .secondColumn h3 {
    color: #EDEEEE;
}
#poll, .poll {
    color: #EDEEEE;
    background: none;
}
.poll.jsenabled label:hover {
    background: #18AE43;
}

/* Highlighted Products (Het bekijken waard) */
#highlightedProducts .description, #highlightedProducts .price {
    color: #EDEEEE;
}

/* Uitgelichte User reviews */
.frontpage #community .userReview .userReviewDescription, .userReview {
    background: #454646;
    color: #EDEEEE;
}

/** Articles */
.article, .content {
    color: #EDEEEE;
}
.article h2 {
    color: #B9133D;
}
.article h3 {
    color: #FFFFFF;
}
/* Tables in articles */
.article table {
    background: #232525;
}

/* Author information next to article */
.authorBlock div.info {
    background-color: inherit;
}
.relatedAuthor .authorInfo td {
    color: #868686;
}

/* Inhoudsopgave reviews */
.tocContent {
    background: #323434;
/*    width: 100%; */
}

/* Next/Prev article date colour */
table.nextPrevious tr td {
    color: #B7B4B2;
}

/* Modfilter text and width */
.modFilter {
    color: #B7B4B2;
}

/* Meuk sidebar */
.meukDetail .sidebar .section {
    background: #323434;
    color: #EDEEEE;
}
table.meuklist {
    color: #EDEEEE;
}

/* IT Jobs */
.relatedItProContent {
    background-color: inherit;
}

/** Comments */
.reactieBody {
    background: #212323;
}
.reactieHeader .userLink {
    color: #EDEEEE;
}
.reactie {
    color: #EDEEEE;
    border-left: 1px solid #545454;
}
/* +2 comments */
.reactieBody.informative {
    background: #323535;
    border: 1px solid #4D4F4F;
}
/* +3 comments */
.reactieBody.spotlight {
    background: #454747;
    border: 1px solid #6D6F6F;
}
/* Odd white line at last comment*/
.reactie.last > .reactieContainer {
    border-left: 1px solid #545454;
}
/* Blockquote colour a bit lighter */
.reactieContent blockquote {
    color: #A9A9A9;
}

/** Userreacties search */
.searchTable {
    background: #014a93 !important;
    width: 100%;
}
/** User tab V&A */
div.pwLinks ul li, div.pwLinks ul li a {
    color: #EDEEEE;
}
.pwLinks {
    background: #323434;
}
/* Wishlist */
.tabContent .article table {
    background: #2E2F2F;
}
div.inventory h3.title, div.inventory h3.titleShow {
    color: #0067A2;
}

/** Gallery fotoalbum */
form table td label {
    color: #FFFFFF;
}
#fotoalbum .sidebar {
    background: #212323;
}

/** Tweakblog admin table */
form table.tweakblog {
    background: #2E2F2F;
}

/** Karmastore */
.mainColumn table.itemList {
    background: #2E2F2F;
}

/* Abbo page info */
.aboShop .info {
    background: inherit;
}

/* Change text background below article
   in case we do want to have the buttons */
#toggleButtonTxt {
    background: #212323;
}

/** Pricewatch */
#header h1 .subtitle {
    color: #EDEEEE;
}

#categoryBrowser li a, #categorvyBrowser .images li a {
    color: #EDEEEE;
}

/* Product display list */
/* White top bar */
#top #entity, #top .pageTabsContainer {
    background: #323434;
}
#entity>div {
    border-top: none;
}

/* Add to wishlist or inventaris */
.popup_style .bar.header {
    color: #EDEEEE;
}
.popup_style .collectionAddForm .extraLabel .primaryLabel {
    color: gray;
}

/** Filters */
/* Box below filters */
.filterBlock {
    background: inherit;
}

#categoryBrowser div, #categoryBrowser .sublist {
    background: #323434;
    border: 1px solid #171818;
}
#categoryBrowser .large li {
    border-bottom: 1px solid #171818;
    border-right: 1px solid #171818;
}
#categoryBrowser {
    background: #282929;
    border: 1px solid #171818;
}

.popularProductListing table.listing tr td, .popularProductListing table.listing tr td a, .articleColumn table.listing tr td, .articleColumn table.listing a {
    background: #323434;
}
#tweakbase {
    margin-top: 51px;
}
.listOptions .pageIndex {
    color: #EDEEEE;
}
.productCompare table.listing tr td, .productCompare table.listing tr td a, .productCompare table.listing th, .itemFilter table.listing tr td, .itemFilter table.listing tr td a, table.spec-detail tr.diff td {
    background: #323434;
}
.productCompare table.listing tr th.compare {
    background-position: 14px 19px;
}
.productCompare table.listing tr td.compare {
    background-position: 14px -1px;
    border: none;
}
.productCompare table.listing .compare { 
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABUAQMAAABnUf89AAAABlBMVEUAGAXDxsa+Z6rqAAAAAXRSTlMAQObYZgAAABZJREFUCFtjXMXAwMDA0DBAJFZBepEAjDwVLKcRyjUAAAAASUVORK5CYII=") no-repeat transparent;
}

table.listing th .listOptions .sortable.sortorder .dropdown li, table.listing th .listOptions .sortable.sortorder .dropdown li a {
    color: #000000;
}

.relatedBlock table.listing tr td, .relatedBlock table.listing a, .relatedBlock {
    background: #2D2E2E;
}
.relevancyColumn .relationboxBlock .thumb a, .relatedBox .thumb a {
    background: #484848;
    border: 1px solid #595959;
}
/* Sort dropdown */
div.sortable.sortorder ul li a {
    color: #000000;
}

/* Bestelkosten berekenen */
/* Right column colour */
#costTypeSelect, .costFilter {
    background: none;
}
/* Article table */
.priceTable tbody tr.even {
    background: #454548;
}
.priceTable tbody tr {
    background: #343437;
}
/* Shop table */
table.shoppingCart tr.even td {
    background: #454548;
    color: #EDEEEE;
}
table.shippingCart tr td {
    background: #343437;
    color: #EDEEEE;
}
table.shoppingCart .pricelisthead td, table.shoppingCart .pricelist td {
    color: #EDEEEE;
}

/* Specs */
td.spec-column, table.spec-detail td.spec-group-name {
    color: #EDEEEE;
}
table.spec-detail td.spec-index-column {
    color: #838686;
}
.specs .popularSpecs, .fixedLabels .specs .popularSpecs td.spec-label span {
    background: #343232;
}
.specs h3.bar {
    background: #232121;
}
.specs td.spec-label, .specs td.spec {
    color: #EDEEEE;
}
#productSpecifications tbody tr:hover td, .fixedLabels #productSpecifications tbody tr:hover td.spec-label span, #productSpecifications tbody tr.diff:hover td {
    background-color: #323282;
}

/* Shop Review */
#reacties.shopSurvey .reactie {
    border: 1px solid #DBDEDE;
}

/* User Review */
.ScoreCard, .ScoreCard .ScorecardView {
    background-color: #232121;
    color: #EDEEEE;
}
.ScoreCard .ScorecardView h3 {
    color: #EDEEEE;
}
.articleColumn.userreview .reactieHeader .username {
    color: #FFFFFF;
}


/* Review tab has some black text colour */
.articleColumn.userreview .userReviewPageInfo {
    color: #EDEEEE;
}

/* Product comparison */
#compareSpecsHeader.fixed .wrap {
    background-color: #313232;
}
/* Add product */
#compareSpecsHeader table td.add a {
    background: none;
}
#compareSpecs .addToCompareSearch .wrap {
    background: #313232;
}
div#productSpecifications.specs.toggle tr th .bar {
    background: #565656;
}

/* Specs same */
div#productSpecifications.specs.toggle tr td.spec, div#productSpecifications.specs.toggle tr td.spec-label {
    color: #EDEEEE;
}
/* Specs differ */
div.productSpecifications.specs.toggle tr.diff {
    background: #545454;
    color: #EDEEEE;
}
div#productSpecifications.specs.toggle table.popularSpecs tr td.spec, div#productSpecifications.specs.toggle table.popularSpecs tr td.spec-label {
    background: #545454;
}

/* Downloads */
.downloadDetails {
    background: inherit;
}

/*******
   GoT
 *******/
/* Breadcrumbs */
.breadcrumb a, .action_list a {
    color: #828585;
}
.bulletSeparatedList > li:first-child::before { 
    content: "";
}

/** Forum tabs */
#forum_tabs li a {
    color: #ABAAAA;
}
#forum_tabs li.active a {
    color: #FFFFFF;
}

/* Bookmarks */
.faux p {
    color: #FFFFFF;
}

/** Search results */
table.forumlisting .preview .content {
    background: #212323;
}
table.forumlisting>tbody>tr>td {
    background: #323434;
}
/* Search filter */
#filter, .filterOption.active {
    background: #212323;
}
.filterBlock h4, .filterOption h4 {
    color: #EDEEEE;
}
.filterOption li, .filterOption label {
    color: #919494;
}
.filterOption label.selected {
    color: #000000;
}

/* Topic listing heading colour */
table.listing th a {
    color: #FEFEFE;
}
/* Border around image */
.channelHeader .thumb {
    border: none;
}

/** Listing borders */
table.listing td {
    border-top: 0px solid #000000;
    border-bottom: 1px solid #000000;
}
table.listing td.last {
    border-right: 1px solid #000000;
}
table.listing td.ind, table.listing td.ind2 {
    border-left: 1px solid #000000;
}

/** Forum Description */
#title p.forumdesc {
    color: #EDEEEE;
}
/** GoT Topic listings  */
table.listing td, table.listing td a {
    background: #121212;
    color: #EDEEEE;
}
table.listing td.topic a, table.listing td.title a { 
    color: #EDEEEE;
}
/* Listing height */
table.listing td, table.listing th {
    padding: 4px 5px;
}
table.listing th {
    background: #3E3E3E;
}

/* Mijn Topics bar .find_topics.poster*/
div.info {
    background: #232121;
    color: #edeeee;
}

/** Forum replies */
/* Viewcounter colour */
.action_list li.viewcount {
    color: gray;
}

/* Message content */
div.message, div.faq, form.form1, form.form2, #folders, #myprofilecontainer, table.info {
    background: #212323;
    color: #EDEEEE;
}

.messageheader .date a {
    color: #828585;
}

/* Hyperlinks in messages Tweakers green */
div.messagecontent a, .messagecontent .message-quote-div a {
    color: #D9FF26;
}
/* Members Only */
.membersonly {
    background: #00A000;
}
div.membersonly a {
    color: #000000;
}
/* Hyperlinks in RML list */
table.rml a {
    color: #DDDD00;
}
/* RML list background */
table.rml td {
    background: #505050;
}
table.rml th {
    background: #606060;
}

/* Make your own post more visible, now with gradient! */
div.message.ownpost, div.message.admin.ownpost {
    background-image: linear-gradient(#404040 10px, #212323 40px);
}
/* Give the header of the TS a different colour */
div.message.topicstarter {
    background-image: linear-gradient(#323434 10px, #212323 40px);
}
/* And the date a different colour */
div.topicstarter div.messageheader div.date a {
    color: #008800;
}

/* Add same bullet point before rating to increase spacing between 'Quote' and rating */
.action_list li.rating .ratingcount::before {
    content: '\2022';
    margin: 0 6px;
}
/* Make the counter readable */
.action_list li.rating .ratingcount {
    color: #828585;
}
/* Question topic tip bar */
.bar.tip {
    background: #545454;
}

/* Best answer */
div.message.bestAnswer {
    background: #232929;
}

/* New Messages notification bar */
#newMessageNotification {
    background: #000000;
}
#newMessageNotification:hover {
    background: #232121;
}

/* Some padding for the post */
div.message div.post {
    padding: 5px 2px 4px 10px;
}
/* Post version on diff */
div.message div.poster {
    color: #EDEEEE;
}

/** Quote boxes */
div.messagecontent blockquote div {
    color: #FFFFFF;
}
.messagecontent .message-quote-div {
    background: #060606;
    color: #FFFFFF;
}
/* Quote user link */
div.messagecontent div.message-quote-div a.messagelink, div.messagecontent div.message-quote-div a.messagelink:hover {
    color: #FFFFFF;
}

/** Code boxes */
table.phphighlight td.phphighlightline, table.phphighlight td.phphighlightcode {
    border: 1px solid #FFFFFF;
}
table.phphighlight td, table.phphighlight td pre, table.phphighlight td code {
    color: #000000;
    background: #DDDDDD;
}

/* Pre-box */
div.pre pre {
    background: #323434;
}

/* /me tag */
.me, div.messagecontent span.me a {
    color: #00AA00;
}

/* Modbreak text */
.mbr {
    color: #AD0009;
}

/** Spoilers */
/* Don't show URLs in spoilers until hovered or clicked */
.spoiler, .messagecontent div.spoiler a, .messagecontent .message-quote-div div.spoiler a {
    color: #000000;
}

.spoiler:hover, .messagecontent div.spoiler a:hover, .spoiler img:hover, .messagecontent div.spoiler a:hover, .messagecontent .message-quote-div div.spoiler a:hover, .spoiler>*:hover {
    color: white;
    visibility: visible;
}

/* lazy image loading */
img.lazyimg {
    background: #0a0a0a;
}
/* image broken */
img.error {
    background: #3f1111;
}

/** User info **/
/* Ugly klipklap arrow */
.userklipklap {
    background: none;
    border: none;
}
.userklipklap > div {
    background: #202121;
}
.userklipklap .online {
    color: #63C000;
}

/* Username */
.user {
    color: #FFFFFF;
}

/* Crew username*/
.crew, .crew:visited {
    color: #B9133C;
}

/* Pimp user, aka luser :+ */
.pimp, a.pimp:hover, .pimp:visited {
    color: #DE47DC;
}

/* Pagenumbers */
.pagecounter {
    margin: 5px 0px 0px;
}

/** Quick Reply */
#reageer.bar {
    background: #303030;
    border: 0px solid #D2D4D4;
    border-top: 1px solid #D2D4D4;
    border-left: 1px solid #D2D4D4;
    border-right: 1px solid #D2D4D4;
}
/* Topicwarning */
fieldset.modbreak {
    background: #800000;
}
fieldset.modbreak legend {
    color: #FFE900;
}
fieldset.modbreak a {
    color: #09FF26 
}
.bar.warning {
    background-color: #880000;
    color: #FFFFFF;
}

/* Report post */
form#message_form.insertMessage {
    background: #232121;
}
div.wrap div#content h3.bar {
    background: #232121;
}
textarea#messageBox.report {
    background: #322121;
}

/* Toon Voorbeeld - make it true visible button */
form input.forumlink { 
    cursor: pointer;
    background: #0A93CA;
    border: 1px solid #0987B8;
    border-radius: 1px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.102);
    color: #FFFFFF;
    font-size: 12px;
    height: 26px;
    padding: 0px 10px;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.149);
}
/* Reply dropdown for page selection */
#footer div.buttonnav select, #quotemessages div.buttonnav select {
    color: #EDEEEE;
}
/* Button toolbar */
#toolbar img {
    background: #FFFFFF;
}

/* Make sure Reageer has correct text colour */
.fancyButton {
    color: #FFFFFF;
}

/* New topic and topic page navigation buttons */
.fancyButton.grey {
    background: linear-gradient(to bottom, #0A93CA, #0A8ABD) #0A93CA;
    color: #EDEEEE;
    border: 1px solid #0987B8;
}

.fancyButton:hover { 
    background: linear-gradient(to bottom, #0CA3D4, #0B98C5) #0CA3D4;
    color: #EDEEEE;
    border-bottom-color: #0B94BF;
    border-left-color: #0B94BF;
    border-right-color: #0B94BF;
    border-top-color: #0B94BF;
}

.fancyButton:focus { 
    box-shadow: 0px 0px 4px rgba(9, 135, 184, 0.749);
}
a.fancyButton.grey.next {
    color: #FFFFFF;
}

/* Topic nav */
.pageDistribution .previous, .pageDistribution .next, .pageDistribution .last { 
    background: no-repeat linear-gradient(to bottom, #0A93CA, #0A8ABD) #0A93CA;
    border: 1px solid #0A88BA ;
    height: 15px;
    line-height: 15px;
    color: #FFFFFF;
}
.pageDistribution .previous { 
    background-image: url("https://tweakimg.net/g/prev_arrow.png");
    background-position: 5px 3px;
}

/* Relationeditor (Onderwerpen koppelen) */
.relationManager dd ul.bulletSeparatedList, ul.bulletSeparatedList {
    color: #EDEEEE;
}
#relationeditor table tr td {
    background: #2F3131;
}
#relationeditor h3 {
    color: #327398;
}
form.insertMessage.relationManager {
    background: #232121;
}

.relationeditor input[type=text] {
    color: #EDEEEE;
    background: #323131;
}

.relationeditor .resultItem, .relationeditor .resultFooter, .relationeditor .resultItemSimple {
    color: #EDEEEE;
    background: #424141;
}
.relationeditor .resultItem .title, .relationeditor .resultItemSimple .title, .relationeditor .resultItem .type, .relationeditor .resultItemSimple .type {
    color: #EDEEEE;
}

/* Dropdowns */
select, select.text, #footer div.buttonnav select, #quotemessages div.buttonnav select {
    background: #000000;
    color: #EDEEEE;
}
/* "Zut" */
h3.inverted {
    color: #FFFFFF;
}

#about {
    background-color: #00001a !important;
}
#bottom div.hr {
    background: #000d21 !important;
}

#about .social .button {
    background-color: #294C7F !important;
}

#about .social .count {
    background-color: #294C7F;
    border: 1px solid #fff;
}

form a {
    color: #045bdb;
}

.commentCount {
    background: url(../../../g/icons/commentcounter_small.svg) no-repeat;
    background-size: cover;
    color: #fff !important;

}

#community .communityItem .user a, #community .communityItem .category a {
    color: #fff !important;
}
#jobs li p.info a, #training li p.info a {
    color: white;
}

.sliderTick {
    color: #fff !important;

}
#bottom {
    background: #00001a;
}

div.info {
    background: #011532 !important; 
    color: #edeeee;
}

[Hero of Time]

@Mr Nielsson, heh, vanaf het punt dat er comments staan (regel 762) met uitleg herken ik mijn code. Graag gedaan.

[Mr Nielsson]

Hero of Time schreef op zondag 9 juni 2019 @ 00:13:
@Mr Nielsson, heh, vanaf het punt dat er comments staan (regel 762) met uitleg herken ik mijn code. Graag gedaan.

Hahaha nogmaals dank hiervoor!

[iApp]

MarnickS schreef op dinsdag 26 maart 2019 @ 19:47:
[...]
[Afbeelding]

Ik weet nu waarom een donker thema vanuit Tweakers.net langer op zich laat wachten: zie al die productfoto's, foeilelijk! Witte achtergrond. Ieuw.

[MarnickS]

iApp schreef op vrijdag 14 juni 2019 @ 08:00:
[...]

Ik weet nu waarom een donker thema vanuit Tweakers.net langer op zich laat wachten: zie al die productfoto's, foeilelijk! Witte achtergrond. Ieuw.

Klopt, ik kan er zelf ook heel slecht tegen.
Maar liever wat witte vlakken in m'n scherm dan alles wit.

[Caseum]

DaMoUsYs schreef op vrijdag 15 december 2017 @ 10:39:
@Hero of Time en @matroosoft beide bedankt voor de CSS
Ik ben ook begonnen aan een donker thema

[Afbeelding]

en hier "mijn" css, zoals je ziet in de screenshot nog wel een aantal schoonheidsfoutjes
Zoals de zoekbalk en de menubalk bijvoorbeeld


[...]

Ik heb een paar aanpassingen aan gedaan en wilde die graag delen met jullie.

code:

/**************
   A few width items
   using @media query
**************/
/* Set the width of various elements placed in #contentArea */
/* #menu, #contentArea, .content .tab, .content .tab_active {  */
        /* width: 1475px !important; */
/* } */

/* Bottom */
/* #ticker, #about { */
        /* width: 1450px !important; */
/* } */

/* @media only screen and (min-width: 1200px) { */
    /* #contentArea { */
        /* width: 70% !important; */
    /* } */
    /* #menu {  */
        /* width: 70% !important; */
    /* } */
/* } */

/*** Fix abbr tags on mobile ***/
abbr[title]:after {
    content: " (" attr(title) ")";
}
@media screen and (min-width: 1025px) {
    abbr[title]
    {
        cursor:help;
    }

    abbr[title]:after
    {
        content: "";
    }
}


/*******
 General
 ********/
/** Screw #layout and #contentArea height, give #html the same background colour */
html, body {
    background: #0E0E0E !important;
    color: #5050F0 !important;
}

/***************
** New header **
***************/
#top {
    border: none !important;
}

/* Remove the useless minibar with #slogan and #socialcount 
#menubottombar {
    display: none;
}*/

/* Default gray bar holding the search form and true logo
    Do not use display: none, search will disappear */
#searchbar {
    height: 0px !important;
    z-index: 111 !important;
}
/* Search form 
#search {
    position: fixed !important;
    top: -5px;
    left: 85%;
    width: 150px;
}
#search .keywordSearch {
    width: 300px;
    border: 1px solid #323333;
}
#search input.text {
    background: #232222 !important;
}
#search .options, #search .options .dropdown ul {
    background: #323333 !important;
}
#search .fancySelect span {
    color: #EDEEEE !important;
}
*/

body, #searchbar, #bottom div.hr{
background-color:#0E0E0E !important;
}

#search input.text, .keywordSearch input.submit, .keywordSearch, textarea, .labelCard, .thumb{
background-color:#8F8F8F !important;
}

.keywordSearch input.submit{
background:#8F8F8F url(../../g/if/v3/framework/menu_icons_v2.png) no-repeat 2px -106px !important;
}


/* User menu */
ul#userbar.loggedin li.more.last span.username {
    background-size: contain !important;
    padding-left: 45px !important;
    background-position: left !important;
}

#search #true, #search #streamone {
    display: none;
}

ul.profileNavigation {
    background-color: #212323;
    color: #EDEEEE;
}

div#menubar div#menu ul#userbar.loggedin li.more.last.dropdown, ul.profileNavigation li.indent a {
    background-color: #212323;
    color: #EDEEEE;
}
#menubar {
    background: #0E0E0E;
    color: #e6e6e6;
    background-image: -webkit-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: -moz-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: linear-gradient(#0E0E0E,#0E0E0E 68px);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.35);
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    border-bottom: 3px solid #3D4E56;
}


#logo:hover {
    background-image: -webkit-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: -moz-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: linear-gradient(#0E0E0E,#0E0E0E 68px);
}


#userbar li.icon:hover {
    background-image: -webkit-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: -moz-linear-gradient(#0E0E0E,#0E0E0E 68px);
    background-image: linear-gradient(#0E0E0E,#0E0E0E 68px);
}

#userbar li.icon.selected:hover {
    background: #f7f9f9;
}

/*******************
** End new header **
*******************/

/** Overall background */
#layout {
    background: #0E0E0E !important;
    padding-top: 5px !important;
    height: 100% !important;
}

/** Give the actual content a different background colour */
#contentArea {
    background: #323434 !important;
    padding: 5px 5px 10px 5px !important;
/*  padding-bottom: 25px !important;*/
    position: relative !important;
/*  margin: 0px 5px !important; */
}

/* Global .bar style */
.bar {
    background-color: #0E0E0E;
    color: #EDEEEE;
}

/* Gallery */
.galleryHeadingContainer>div {
    border-top: none !important;
}
.galleryHeadingContainer, .pageTabsContainer {
    background-color: #212323 !important;
}
div.galleryBody h3.bar {
    background: #212323 !important;
}
.galleryTable.karma td {
    background: #323434 !important;
}
ul.galleryProfile li.checked {
    color: #EDEEEE !important;
}

/** Unsorted meuk */
h3, h3 a {
    color: #FFFFFF !important;
}

/* No background for user icons */
.thumb {
    background: none !important;
}

/** Bottom */
#bottom div.hr {
    background: #202020 !important;
}

/** Text boxes (search, reply) */
textarea#messageBox, input {
    color: #FFFFFF;
    background: #1E1E1E;
}

/** Menu */
.unread .newNotificationsCount {
    color: #fff !important;
    background: #1E1E1E;
}
#menu li a {
    color: #fff !important;
    background: #1E1E1E;
}
#menu li.active a {
    color: #D9FF26 !important;
}
#menu .dropdown > span, .dropdown li, .dropdown li a, #menu .dropdown ul a {
    color: #fff !important;
    background: #1E1E1E;
}
#menu li.hoover a {
    background: #fff !important;
}
/*
*/

/** Notifications */
.notificationsPopup .header h3 {
    color: #000000 !important;
}
div.popup {
    background: #323131 !important;
}
.scrollableList .listItem:hover {
    background: #323434 !important;
}
.menuHeaderPopup .notification.unread:hover {
    background: #454444 !important;
}
.menuHeaderPopup .notification.unread {
    background: #414040 !important;
}
#webPushContainer {
    display: none;
}

/** Tracker */
#tracker .trackeritem li a { 
    color: #B7B4B2 !important;
}
#tracker .trackeritem li .new, #tracker .trackeritem li a:hover, #tracker .trackeritem li a:hover .time { 
    color: #d9ff26 !important;
}
#tracker .trackeritem h4, #tracker .trackeritem h4 a { 
    color: #D7D6D4 !important;
}
#tracker {
    padding-top: 0px !important;
    top: 45px !important;
}
.fakeTop {
    display: none;
}

/* Background color of tabs */
.pageTabs li {
    background: #212323 !important;
}
.pageTabs li.active {
    background: #323434 !important;
}

/* Hyperlinks */
a {
    color: #EDEEEE !important;
}
a:visited {
    color: #878888 !important;
}

/* Badges */
.labelCard, ul.topKarma.show {
    background: #000000 !important;
}

/* Fix anchor location due to fixed header */
/* More likely in GoT */
a[name] {
    display: block;
    padding-top: 45px;
    margin-top: -45px;
}

/*******
   FP
 *******/
/** Main content */
.fpHighlightedProduct {
    background-color: #333;
    background-image: linear-gradient(rgba(51, 51, 51, 1), #333 15px, #333 156px, rgba(51, 51, 51, 1) 240px),linear-gradient(90deg, rgba(51, 51, 51, 1), #333 20%, #333 80%, rgba(51, 51, 51, 1) 100%);
    border-radius: 3px;
    padding: 15px;
    position: relative;
}

/* Tabs */
#fp_tabs li a {
    color: #ABAAAA !important;
}
#fp_tabs li.active a {
    color: #FFFFFF !important;
}

/* Whitepapers */
.itknowledgebasewrapper {
    background: #212323 !important;
}

/** Tile items */
.fpaItem>a {
    background: rgba(0,0,0,0.8);
}
.fpaTitle h2 {
    color: #b9133d !important;
}

/** Article Listing */
table.highlights td a {
    color: #EDEEEE !important;
}
table.highlights td a:visited {
    color: #888888 !important;
}

table.highlights {
    border-top: 1px solid #000 !important;
}
table.highlights td {
    border-bottom: 1px solid #000 !important;
}
table.highlights .publicationTime span.new {
    color: #A9CC0B !important;
}
/* More items popup */
.moreItems .popupContent {
    background: #2E2F2F !important;
}

/** Second Column - PW, Jobs, Newsletter, etc. */
#pricewatch, #jobs, #poll, .pollWrapper, #newsletter, #textlink, #social .twitterButton, #social .facebookButton {
    background: #212323 !important;
}

/* Poll option highlight */
.poll label:hover {
    background-color: #545656;
}

.secondColumn p, .secondColumn h3 {
    color: #EDEEEE !important;
}
#poll, .poll {
    color: #EDEEEE;
    background: none !important;
}
.poll.jsenabled label:hover {
    background: #18AE43 !important;
}

/* remove Newsletter subscription box */
#newsletter {
    display: none;
}

/* Highlighted Products (Het bekijken waard) */
#highlightedProducts .description, #highlightedProducts .price {
    color: #EDEEEE !important;
}

/* User reviews */
.frontpage #community .userReview .userReviewDescription, .userReview {
    background: #454646 !important;
    color: #EDEEEE;
}

/** Articles */
.article, .content {
    color: #EDEEEE !important;
}
.article h2 {
    color: #B9133D;
}
.article h3 {
    color: #FFFFFF !important;
}
/* Tables in articles */
.article table {
    background: #232525 !important;
}

/* Author information next to article */
.relatedAuthor p {
    color: #868686 !important;
}
.relatedAuthor .authorInfo td {
    color: #868686 !important;
}

/* Social buttons and Related Articles */
#socialButtonsContainer {
    display: none;
}
div.relatedContent {
    display: none;
}

/* Next/Prev article date colour */
table.nextPrevious tr td {
    color: #B7B4B2 !important;
}

/* Modfilter text and width */
.modFilter {
    color: #B7B4B2 !important;
}

/* Meuk sidebar */
.meukDetail .sidebar .section {
    background: #323434 !important;
    color: #EDEEEE !important;
}
table.meuklist {
    color: #EDEEEE;
}

/** Comments */

/* Modfilter 'ongemodereerd' to question mark */
.modFilter .scoreButton.scorenone, .modFilter .scoreButton.wide {
    word-spacing: -999px;
    letter-spacing: -999px;
    display: none;
}
.modFilter .scoreButton.scorenone:after, .modFilter .scoreButton.wide:after {
    content: '?';
    word-spacing: normal;
    letter-spacing: normal;
    background: linear-gradient(to bottom, #C8CBCB, #BEC1C1) #C8CBCB;
    padding: 3px 3px;
}

/* Collapse buttons */
#collapseButtons {
    display: none;
}

/* Bar top of comment */
.reactie .topBorder {
    height: 0 !important;
}
.reactieBody {
    background: #212323;
}
.reactie {
    color: #EDEEEE;
    border-left: 1px solid #545454;
}
/* +2 comments */
.reactieBody.informative {
    background: #323535 !important;
    border: 1px solid #4D4F4F !important;
}
/* +3 comments */
.reactieBody.spotlight {
    background: #454747 !important;
    border: 1px solid #6D6F6F !important;
}
/* Odd white line at last comment*/
.reactie.last > .reactieContainer {
    border-left: 1px solid #545454 !important;
}
/* Blockquote colour a bit lighter */
.reactieContent blockquote {
    color: #A9A9A9 !important;
}

/** Userreacties search */
.searchTable {
    background: #323434 !important;
    width: 100% !important;
}
/** User tab V&A */
div.pwLinks ul li, div.pwLinks ul li a {
    color: #EDEEEE !important;
}
.pwLinks {
    background: #323434 !important;
}
/* Wishlist */
.tabContent .article table {
    background: #2E2F2F !important;
}
div.inventory h3.title, div.inventory h3.titleShow {
    color: #0067A2 !important;
}


/** Gallery fotoalbum */
form table td {
    color: #FFFFFF !important;
}
#fotoalbum .sidebar {
    background: #212323;
}

/** Tweakblog admin table */
form table.tweakblog {
    background: #2E2F2F !important;
}

/** Karmastore */
.mainColumn table.itemList {
    background: #2E2F2F !important;
}


/* No social */
#social, .social, #modernSocialButtonsContainer {
    display: none !important;
}
/* Change text background below article
   in case we do want to have the buttons */
#toggleButtonTxt {
    background: #212323 !important;
}
/* Do not show the buttons at all below the article */
#socialButtons {
    display: none !important;
}
/* Kill LOI block */
div#loi {
    display: none;
}

/** Pricewatch */
#header h1 .subtitle {
    color: #EDEEEE !important;
}

/* Product display list */
/* White top bar */
#top #entity, #top .pageTabsContainer {
    background: #323434 !important;
}
#entity>div {
    border-top: none !important;
}

#categoryBrowser div, #categoryBrowser .sublist {
    background: #323434 !important;
    border: 1px solid #171818 !important;
}
#categoryBrowser .large li {
    border-bottom: 1px solid #171818 !important;
    border-right: 1px solid #171818 !important;
}
#categoryBrowser {
    background: #282929 !important;
    border: 1px solid #171818 !important;
}

.popularProductListing table.listing tr td, .popularProductListing table.listing tr td a, .articleColumn table.listing tr td, .articleColumn table.listing a {
    background: #323434 !important;
}
#tweakbase {
    margin-top: 51px;
}
.listOptions .pageIndex {
    color: #EDEEEE;
}
.productCompare table.listing tr td, .productCompare table.listing tr td a, .productCompare table.listing th, .itemFilter table.listing tr td, .itemFilter table.listing tr td a, table.spec-detail tr.diff td {
    background: #323434 !important;
}
.productCompare table.listing tr th.compare {
    background-position: 14px 19px !important;
}
.productCompare table.listing tr td.compare {
    background-position: 14px -1px !important;
    border: none !important;
}
.productCompare table.listing .compare { 
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABUAQMAAABnUf89AAAABlBMVEUAGAXDxsa+Z6rqAAAAAXRSTlMAQObYZgAAABZJREFUCFtjXMXAwMDA0DBAJFZBepEAjDwVLKcRyjUAAAAASUVORK5CYII=") no-repeat transparent !important;
}

table.listing th .listOptions .sortable.sortorder .dropdown li, table.listing th .listOptions .sortable.sortorder .dropdown li a {
    color: #000000 !important;
}

.relatedBlock table.listing tr td, .relatedBlock table.listing a, .relatedBlock {
    background: #2D2E2E !important;
}
.relevancyColumn .relationboxBlock .thumb a, .relatedBox .thumb a {
    background: #484848 !important;
    border: 1px solid #595959 !important;
}
/* Sort dropdown */
div.sortable.sortorder ul li a {
    color: #000000 !important;
}

/* Bestelkosten berekenen */
/* Right column colour */
#costTypeSelect, .costFilter {
    background: none !important;
}
/* Article table */
.priceTable tbody tr.even {
    background: #454548 !important;
}
.priceTable tbody tr {
    background: #343437 !important;
}
/* Shop table */
table.shoppingCart tr.even td {
    background: #454548 !important;
    color: #EDEEEE !important;
}
table.shippingCart tr td {
    background: #343437 !important;
    color: #EDEEEE !important;
}
table.shoppingCart .pricelisthead td, table.shoppingCart .pricelist td {
    color: #EDEEEE !important;
}

/* Specs */
td.spec-column, table.spec-detail td.spec-group-name {
    color: #EDEEEE !important;
}
table.spec-detail td.spec-index-column {
    color: #838686 !important;
}
.specs .popularSpecs, .fixedLabels .specs .popularSpecs td.spec-label span {
    background: #343232 !important;
}
.specs h3.bar {
    background: #232121 !important;
}
.specs td.spec-label, .specs td.spec {
    color: #EDEEEE !important;
}
#productSpecifications tbody tr:hover td, .fixedLabels #productSpecifications tbody tr:hover td.spec-label span, #productSpecifications tbody tr.diff:hover td {
    background-color: #323282 !important;
}

/* Shop Review */
.secondColumn {
    float: right !important;
}
.rightInfoBlock {
    background: none !important;
}
#reacties.shopSurvey .reactie {
    border: 1px solid #DBDEDE;
}

/* User Review */
.ScorecardView {
    background-color: #232121 !important;
    color: #EDEEEE;
}
/* Review tab has some black text colour */
.articleColumn.userreview .userReviewPageInfo {
    color: #EDEEEE;
}

/* Product comparison */
#compareSpecsHeader.fixed .wrap {
    background-color: #313232 !important;
}

div#productSpecifications.specs.toggle tr th .bar {
    background: #565656 !important;
}

/* Specs same */
div#productSpecifications.specs.toggle tr td.spec, div#productSpecifications.specs.toggle tr td.spec-label {
    color: #EDEEEE !important;
}
/* Specs differ */
div.productSpecifications.specs.toggle tr.diff {
    background: #545454 !important;
    color: #EDEEEE !important;
}
div#productSpecifications.specs.toggle table.popularSpecs tr td.spec, div#productSpecifications.specs.toggle table.popularSpecs tr td.spec-label {
    background: #545454 !important;
}


/*******
   GoT
 *******/
/* Breadcrumbs */
.breadcrumb a, .action_list a { 
    color: #E1E3D7 !important; 
}
.bulletSeparatedList > li:first-child::before {  
    content: "" !important; 
}

/* Kutslogan weg. */
span.slogan { display: none }

/** Forum tabs */
#forum_tabs li a {
    color: #ABAAAA !important;
}
#forum_tabs li.active a {
    color: #FFFFFF !important;
}

/* Bookmarks */
.faux p {
    color: #FFFFFF !important;
}

/** Search results */
table.forumlisting .preview .content {
    background: #212323 !important;
}
table.forumlisting>tbody>tr>td {
    background: #323434 !important;
}
/* Search filter */
#filter, .filterOption.active {
    background: #212323 !important;
}
.filterBlock h4, .filterOption h4 {
    color: #EDEEEE !important;
}
.filterOption li, .filterOption label {
    color: #919494 !important;
}
.filterOption label.selected {
    color: #000000 !important;
}

/** Colourize headers */
.channelHeader h2 {
    color: #FFFFFF !important;
}
.thumb.category {
    background: 50% 5px no-repeat !important;
}
.forumList:nth-child(2) table.listing th  {
    background: #0044EE !important;
}
/* Computers */
.forumList:nth-child(3) .channelHeader, .thumb.category.core {
    background-color: #A30028 !important;
}
.thumb.category.core { 
    background-image: url("https://tweakimg.net/g/if/categories/computers_x2.png") !important;
}
/* IT Pro */
.forumList:nth-child(4) .channelHeader, .thumb.category.pro {
    background-color: #400072 !important;
}
.thumb.category.pro { 
    background-image: url("https://tweakimg.net/g/if/categories/itpro_x2.png") !important;
}
/* Games */
.forumList:nth-child(5) .channelHeader, .thumb.category.games {
    background-color: #0E8F1D !important;
}
.thumb.category.games { 
    background-image: url("https://tweakimg.net/g/if/categories/games_x2.png") !important;
}
/* Beeld en Geluid */
.forumList:nth-child(6) .channelHeader, .thumb.category.electronics {
    background-color: #BD3500 !important;
}
.thumb.category.electronics { 
    background-image: url("https://tweakimg.net/g/if/categories/electronics_x2.png") !important;
}
/* Tablets en Telefoons */
.forumList:nth-child(7) .channelHeader, .thumb.category.mobile {
    background-color: #04926C !important;
}
.thumb.category.mobile { 
    background-image: url("https://tweakimg.net/g/if/categories/mobile_x2.png") !important;
}
/* General Chat */
.forumList:nth-child(8) .channelHeader, .thumb.category.chat {
    background-color: #8A33CC !important;
}
.thumb.category.chat { 
    background-image: url("https://tweakimg.net/g/if/categories/chat_x2.png") !important;
}
/* Tweakers Feedback */
.forumList:nth-child(9) .channelHeader, .thumb.category.feedback {
    background-color: #A57D00 !important;
}
.thumb.category.feedback { 
    background-image: url("https://tweakimg.net/g/if/categories/heart_x2.png") !important;
}
/* A51 */
.forumList:nth-child(10) .channelHeader, .thumb.category.area51 {
    background-color: #99FF00 !important;
}
.thumb.category.area51 { 
    background-image: url("https://tweakimg.net/g/if/categories/alien_x2.png") !important;
}

/* Topic listing heading colour */
table.listing th a {
    color: #FEFEFE !important;
}
/* Border around image */
.channelHeader .thumb {
    border: none !important;
}

/** Listing borders */
table.listing td {
    border-top: 0px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
}
table.listing td.last {
    border-right: 1px solid #000000 !important;
}
table.listing td.ind, table.listing td.ind2 {
    border-left: 1px solid #000000 !important;
}
/* Decrease space between forum sections */
.forumList table.listing {
    margin-bottom: 5px !important;
}

/** Forum Description */
#title p.forumdesc {
    color: #EDEEEE !important;
}
/** GoT Topic listings  */
table.listing td, table.listing td a {
    background: #121212 !important;
    color: #EDEEEE !important;
}
table.listing td.topic a, table.listing td.title a { 
    color: #EDEEEE !important;
}
/* Listing height */
table.listing td, table.listing th {
    padding: 4px 5px !important;
}
table.listing th {
    background: #3E3E3E !important;
}
table.listing td.topic a[title="Laatste reactie geplaatst door Hero of Time"] {
    font-style: italic;
}

/* Mijn Topics bar .find_topics.poster*/
div.info {
    background: #232121;
    color: #edeeee;
}

/** Forum replies */
/* Forum heading on top for working links */
#forumheading { 
    position: relative;
    z-index: 1;
}
/* Viewcounter colour */
.action_list li.viewcount {
    color: gray;
}

#content #sidebar #tweakbase_relations {
    margin: 0px 5px;
}

/* Message content */
div.message, div.faq, form.form1, form.form2, #folders, #myprofilecontainer, table.info {
    background: #212323 !important;
    color: #EDEEEE !important;
}
#messages, .topic_actions {
    padding-left: 5px !important;
}
div.message div.post div.messagecontent {
    margin-right: 5px !important;
}
/* Hyperlinks in messages Tweakers green */
div.messagecontent a {
    color: #D9FF26 !important;
}
/* Members Only */
.membersonly {
    background: #00A000 !important;
}
div.membersonly a {
    color: #000000 !important;
}
/* Hyperlinks in RML list */
table.rml a {
    color: #DDDD00 !important;
}
/* RML list background */
table.rml td {
    background: #505050 !important;
}
table.rml th {
    background: #606060 !important;
}
/* Remove space between messages */
div.message, div.faq {
    margin-bottom: 0px !important;
}

/* Make your own post more visible, now with gradient! */
div.message.ownpost {
    background-image: linear-gradient(#404040 10px, #212323 40px) !important;
}
/* Give the header of the TS a different colour */
div.message.topicstarter {
    background-image: linear-gradient(#323434 10px, #212323 40px) !important;
}
/* And the date a different colour */
div.topicstarter div.messageheader div.date a {
    color: #008800 !important;
}

/* Add same bullet point before rating to increase spacing between 'Quote' and rating */
.action_list li.rating .ratingcount::before {
    content: '\2022' !important;
    margin: 0 6px !important;
    color: #828585 !important;
}

/* Change big thumb icon to smaller one that looks better */
.action_list li.rating .ratingcount {
    font-size: inherit;
}
.action_list li.rating .thumbsup.rated, .action_list li.rating.can_be_rated .thumbsup {
    background: inherit;
    background-image: inherit;
    border: none;
}
.action_list li.rating .thumbsup {
    width: 14px;
    height: 14px;
    vertical-align: initial;
    top: 0;
    position: inherit;
    top: inherit;
    background: none;
    background-image: none;
    border: none;
    border-radius: initial;
}
.action_list li.rating .thumbsup:before {
    background: url(https://static.tweakers.net/ext/f/N3fRBdthYAVi027KASIL2LG8/full.png) no-repeat -30px -269px;
}
.action_list li.rating .thumbsup.rated:before {
    background-position: -45px -269px;
}
.action_list li.rating.can_be_rated .thumbsup:not(.rated):hover {
    background: none;
    background-image: none;
    border: none;
}
.action_list li.rating .ratingcount {
    min-width: initial;
    color: #828585;
}

/* Some padding for the post */
div.message div.post {
    padding: 5px 2px 4px 10px !important;
}
/* Post version on diff */
div.message div.poster {
    color: #EDEEEE !important;
}

/** Quote boxes */
div.messagecontent blockquote {
    color: #FFFFFF !important;
}
div.message-quote-div {
    background: #616464 !important;
    color: #FFFFFF !important;
}
/* Disable quote folding */
.messagecontent .message-quote-div.large-quote {
    height: auto !important;
    overflow: visible;
    padding-bottom: 10px !important;
}
.messagecontent .toggle-quote {
    display: none;
}
/* Quote user link */
div.messagecontent div.message-quote-div a.messagelink, div.messagecontent div.message-quote-div a.messagelink:hover {
    color: #FFFFFF !important;
}

/** Code boxes */
    table.phphighlight td.phphighlightline, table.phphighlight td.phphighlightcode {
    border: 1px solid #FFFFFF !important; 
}
table.phphighlight td, table.phphighlight td pre, table.phphighlight td code {
     color: #000000 !important; 
    background: #DDDDDD !important; 
}

/* Pre-box */
div.pre pre {
    background: #323434 !important;
}

/* [ME=724814]tag */[/ME]
.me, div.messagecontent span.me a {
    color: #00AA00 !important;
}

/* Modbreak text */
.mbr {
    color: #AD0009 !important;
}

/** Spoilers */
/* Don't show URLs in spoilers until hovered or clicked */
.spoiler, .messagecontent div.spoiler a, .messagecontent .message-quote-div div.spoiler a {
    color: #000000;
}

.spoiler:hover, div.spoiler a:hover, .spoiler img:hover, .messagecontent div.spoiler a:hover, .messagecontent .message-quote-div div.spoiler a:hover, .spoiler>*:hover {
    color: white !important;
    visibility: visible !important;
}

/* lazy image loading */
img.lazyimg {
    background: #0a0a0a !important;
}
/* image broken */
img.error {
    background: #3f1111;
}

/** User info **/
/* Ugly klipklap arrow */
.userklipklap {
    background: none !important;
    border: none !important;
}
.userklipklap > div {
    background: #202121 !important;
}
.userklipklap .online {
    color: #63C000 !important;
}
/* Show user reg date and postcount */ 
div.message div.post div.userdetails div.userdata div.extra { 
    display: block !important;
}

/* Username */
.user {
    color: #FFFFFF !important;
}

/* Crew username*/
.crew, .crew:visited {
    color: #B9133C !important;
}

/* Pimp user, aka luser :+ */
.pimp, a.pimp:hover, .pimp:visited {
    color: #DE47DC !important;
}

/* Pagenumbers */
.pagecounter {
    margin: 5px 0px 0px !important;
}

/** Quick Reply */
#reageer.bar {
    background: #303030 !important;
    border: 0px solid #D2D4D4 !important;
    border-top: 1px solid #D2D4D4 !important;
    border-left: 1px solid #D2D4D4 !important;
    border-right: 1px solid #D2D4D4 !important;
}
/* Topicwarning */
fieldset.modbreak {
    background: #800000 !important;
}
fieldset.modbreak legend {
    color: #FFE900 !important;
}
fieldset.modbreak a {
    color: #09FF26 !important
}
.bar.warning {
    background-color: #224726 !important;
    color: #FFFFFF !important;
}

/* Report post */
form#message_form.insertMessage {
    background: #232121 !important;
}
div.wrap div#content h3.bar {
    background: #232121 !important;
}
textarea#messageBox.report {
    background: #322121 !important;
}

/* Toon Voorbeeld - make it true visible button */
form input.forumlink { 
    cursor: pointer;
    background: #0A93CA !important;
    border: 1px solid #0987B8;
    border-radius: 1px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.102);
    color: #FFFFFF !important;
    font-size: 12px;
    height: 26px;
    padding: 0px 10px;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.149);
}
/* Reply dropdown for page selection */
#footer div.buttonnav select, #quotemessages div.buttonnav select {
    color: #EDEEEE !important;
}
/* Button toolbar */
#toolbar img {
    background: #FFFFFF;
}
/* test*/

.fancyButton {
    border: 0px solid #0987b8;
    border-radius: 2px;
    background: #3E3E3E;
    background-image: -webkit-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: -moz-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: linear-gradient(#3E3E3E,#3E3E3E);
}

.fancyButton:hover {
    color: #fff;
    border-color: 0px solid #F16400;
    background: #3E3E3E;
    background-image: -webkit-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: -moz-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: linear-gradient(#3E3E3E,#3E3E3E);
}

.fancyButton.grey {
    background: #3E3E3E;
    background-image: -webkit-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: -moz-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: linear-gradient(#3E3E3E,#3E3E3E);
}

.fancyButton.grey:hover {
    background: #3E3E3E;
    background-image: -webkit-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: -moz-linear-gradient(#3E3E3E,#3E3E3E);
    background-image: linear-gradient(#3E3E3E,#3E3E3E);
    color: #333;
}

a.fancyButton.grey.next {
    color: #FFFFFF !important;
}
.fancyButton:focus { 
    box-shadow: 0px 0px 4px rgba(9, 135, 184, 0.749) !important;
}

/* Make sure Reageer has correct text colour */
.fancyButton {
    color: #FFFFFF !important;
    background: linear-gradient(to bottom, #3E3E3E, #3E3E3E) #3E3E3E !important;
    border: 1px solid #3E3E3E !important;
}

/* New topic and topic page navigation buttons */
.fancyButton.grey {
    background: linear-gradient(to bottom, #3E3E3E, #3E3E3E) #3E3E3E !important;
    border: 1px solid #3E3E3E !important;
}

.fancyButton:hover { 
    background: linear-gradient(to bottom, #3E3E3E, #3E3E3E) #3E3E3E !important;
    border-bottom-color: #3E3E3E !important;
    border-left-color: #3E3E3E !important;
    border-right-color: #3E3E3E !important;
    border-top-color: #3E3E3E !important;
}


/* Topic nav */
.pageDistribution .previous, .pageDistribution .next, .pageDistribution .last , .pageDistribution b{ 
    background: no-repeat linear-gradient(to bottom, #3E3E3E, #3E3E3E) #3E3E3E !important;
    border: 1px solid #3E3E3E  !important;
    height: 15px !important;
    line-height: 15px !important;
    color: #FFFFFF !important;
}
.pageDistribution .previous { 
    background: no-repeat linear-gradient(to bottom, #3E3E3E, #3E3E3E) #3E3E3E !important;
    border: 1px solid #3E3E3E  !important;
    height: 15px !important;
    line-height: 15px !important;
    color: #FFFFFF !important;
}

/* Relationeditor (Onderwerpen koppelen) */
.relationManager dd ul.bulletSeparatedList, ul.bulletSeparatedList {
    color: #EDEEEE !important;
}
#relationeditor table tr td {
    background: #2F3131 !important;
}
#relationeditor h3 {
    color: #327398 !important;
}
form.insertMessage.relationManager {
    background: #232121 !important;
}

.relationeditor input[type=text] {
    color: #EDEEEE !important;
    background: #323131 !important;
}

.relationeditor .resultItem, .relationeditor .resultFooter, .relationeditor .resultItemSimple {
    color: #EDEEEE !important;
    background: #424141 !important;
}
.relationeditor .resultItem .title, .relationeditor .resultItemSimple .title, .relationeditor .resultItem .type, .relationeditor .resultItemSimple .type {
    color: #EDEEEE !important;
}

/** Mod tools */
/* Show diffs */
div.diff address {
    color: #000000;
}
div.diff pre {
    background-color: #555555;
}
div.diff pre del, div.diff pre ins {
    color: #000000;
}


/* Dropdowns */
select {
    background: #000000 !important;
    color: #EDEEEE !important;
}
/* "Zut" */
h3.inverted {
    color: #FFFFFF !important;
}
.aboShop .info {
    background: #000000;
}

.wrap {
  background-color: #313232;
}
.darkBlock {
    background: #313232;
    font-size: 13px;
    padding: 15px;
}

.fancyButton.secondary {
    background: rgba(0,0,0,0);
    border: 1px solid #9a0e36;
    border-radius: 3px;
    color: #9a0e36 !important;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    text-shadow: none;
}

.fancyButton.secondary:hover {
    background: rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff !important;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    text-shadow: none;
}

#bestBuyGuides .allBestBuys li {
    background: rgba(194, 190, 190, 0.288);
    border-radius: 3px;
    margin-bottom: 6px;
}

[ThinkPad]

Hoe maak ik de link 'Hosting door True' onderaan elke pagina onklikbaar?

De Brave browser op m'n telefoon klikt daar per ongeluk op als ik op het Tweakers knopje 'ga naar einde pagina' klik. Als ik op telefoon dus naar onderkant van de pagina wil springen dan opent 8/10 keer www.true.nl

[ Voor 20% gewijzigd door ThinkPad op 24-06-2019 15:18 ]

[Hahn]

ThinkPadd schreef op maandag 24 juni 2019 @ 15:17:
Hoe maak ik de link 'Hosting door True' onderaan elke pagina onklikbaar?

De Brave browser op m'n telefoon klikt daar per ongeluk op als ik op het Tweakers knopje 'ga naar einde pagina' klik. Als ik op telefoon dus naar onderkant van de pagina wil springen dan opent 8/10 keer www.true.nl

Snelste oplossing die ik kan bedenken is om display: none; op .colofon te zetten. Dan is heel dat blok verborgen en kan je er ook niet op klikken

Of je doet display: none; alleen op .colofon a:last-child, dan is het woordje 'True' verborgen (maar dan staat er nog 'Hosting door', zonder iets erachter).

[ Voor 12% gewijzigd door Hahn op 24-06-2019 15:39 ]