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

[Hero of Time]

Markimoo schreef op donderdag 21 september 2017 @ 21:34:
Ik heb geen idee hoe de inspect element zou werken om het stuk CSS te vinden - ja nu klink ik dom - maar het gaat vooral om de "meer informatie" die ik niet kan lezen. Alhoewel ik dat blauwe(?) of is het paars(?) graag wit zou hebben.

Haha, je moet toch ooit ergens beginnen om het te leren? Rechtermuisknop op een item, dan inspecteer element en bij de dev tools die dan openen zie je aan de rechterkant welke CSS regels er voor dat element van toepassing zijn. Om die meer informatie leesbaar te maken en meer in stijl van de rest van de pagina te laten vallen, voeg je dit stukje toe:

Cascading Stylesheet:

.aboShop .info {
    background: #000000;
}

Nu is de achtergrondkleur niet wit, maar zwart. Je kan ipv '#000000' ook 'inherit' gebruiken, het heeft dan dezelfde kleur als de rest van de pagina.

Probeer zelf de achtergrond aan te passen voor de abbo vormen in de tabel.

[Meg]

Hero of Time schreef op donderdag 21 september 2017 @ 22:17:
Probeer zelf de achtergrond aan te passen voor de abbo vormen in de tabel.

Het eerste is gelukt, thanks. Het andere kom ik niet uit, want met dat inspect element kan ik niet iets vinden wat in de CSS zou moeten zitten? Het zal aan mij liggen, maar ik snap er helemaal niets van.

[Hero of Time]

Markimoo schreef op zaterdag 23 september 2017 @ 12:46:
[...]

Het eerste is gelukt, thanks. Het andere kom ik niet uit, want met dat inspect element kan ik niet iets vinden wat in de CSS zou moeten zitten? Het zal aan mij liggen, maar ik snap er helemaal niets van.

Als je inspect element doet, zou je iets als onderstaand moeten zien. Rechts is de regel geselecteerd wat de kleur bepaald voor het element. Ik heb hier een van de rijen in de tweede kolom bekeken (de eerste die een lichte kleur heeft).

Je ziet daar ook de selector voor de css (.aboShop .aboTable tr td.supporter). Je kan die dan overnemen en zelf met regels vullen wat je wilt.

[fanatic_david]

Danny.G schreef op donderdag 21 september 2017 @ 17:47:
Een hele tijd geleden eens begonnen met mijn eigen versie van de layout. Beetje a la Material Design met eigen input. Is nog lang niet klaar, maarja. Thoughts?

Screenshots
[afbeelding]	[afbeelding]	[afbeelding]

Reeds gelezen artikels zijn dus lichtgrijs gemaakt. Ikzelf zit nog na te denken hoe ik dat wat eleganter kan doen. Tips?

Ik vind het er erg vet uitzien! Dus ik ben ook wel benieuwd naar je (afgewerkte) CSS

[Meg]

Dankzij @Hero of Time heb ik wat problemen kunnen oplossen in zijn CSS, maar ik snap alleen niet waarom dit niet werkt, misschien iemand hier?

Cascading Stylesheet:

/*** Zeef always green ***/
div.message.admin[data-owner-id="2030"] div.poster.avatar div.userheader p.username.ellipsis a.user {
    color: #00BB00 !important;
}

[Hero of Time]

Zet voor het ID eens als test jouw eigen user ID. Let ook op de :visited staat van de link.

[ Voor 5% gewijzigd door Hero of Time op 21-10-2017 22:41 ]

[Yorinn]

Markimoo schreef op zaterdag 21 oktober 2017 @ 21:50:
Dankzij @Hero of Time heb ik wat problemen kunnen oplossen in zijn CSS, maar ik snap alleen niet waarom dit niet werkt, misschien iemand hier?

Cascading Stylesheet:

/*** Zeef always green ***/
div.message.admin[data-owner-id="2030"] div.poster.avatar div.userheader p.username.ellipsis a.user {
    color: #00BB00 !important;
}

Ik gebruik hier onderstaande code voor, moet je nog wel de kleur aanpassen.

code:

div.message.admin[data-owner-id="2030"] div.poster.avatar div.userheader p.username.ellipsis a.user {
    color: #0040FF;
}

(Werkt wel alleen op het forum.)

Edit: Is dus dezelfde code, werkt hier dus wel.

[ Voor 4% gewijzigd door Yorinn op 22-10-2017 00:09 ]

[Hero of Time]

@Yorinn, die heb je waarschijnlijk van mij overgenomen.

[Yorinn]

Hero of Time schreef op zondag 22 oktober 2017 @ 11:36:
@Yorinn, die heb je waarschijnlijk van mij overgenomen.

Zou wel kunnen, ja.

[Meg]

Hero of Time schreef op zaterdag 21 oktober 2017 @ 22:40:
Zet voor het ID eens als test jouw eigen user ID. Let ook op de :visited staat van de link.

Werkt ook niet.

[Yorinn]

Markimoo schreef op zondag 22 oktober 2017 @ 21:58:
[...]

Werkt ook niet.

Misschien andere CSS waarmee die conflicten heeft? Probeer het eens met alleen die code, zonder de rest van je CSS.

[Meg]

Yorinn schreef op zondag 22 oktober 2017 @ 21:59:
[...]


Misschien andere CSS waarmee die conflicten heeft? Probeer het eens met alleen die code, zonder de rest van je CSS.

Morgen, gaat lastig op mobiel. Maar waarom werkt het wel bij @Hero of Time? Het is zijn CSS officieel.

[Hero of Time]

Geen flauw idee. Ik gebruik Otter als browser, dus wellicht dat andere browsers er gewoonweg geen in zin hebben? Al lijkt mij dat sterk, aangezien mijn code bij @Yorinn ook gewoon werkt en ik gebruik standaard CSS regels.

[Meg]

Yorinn schreef op zondag 22 oktober 2017 @ 21:59:
[...]


Misschien andere CSS waarmee die conflicten heeft? Probeer het eens met alleen die code, zonder de rest van je CSS.

Helaas, dat bied ook geen uitkomst, zelfs in Edge en in Chrome zonder extenties werkt het niet. #ikbennuboos

[8088]

Markimoo schreef op zaterdag 21 oktober 2017 @ 21:50:
maar ik snap alleen niet waarom dit niet werkt, misschien iemand hier?

De .admin-class zie ik nergens terugkomen. Waarschijnlijk wordt die niet aan de voor stervelingen gegenereerde html toegevoegd.

Dit werkt prima:

Cascading Stylesheet:

/*** Zeef always green ***/
div.message[data-owner-id="2030"] div.poster.avatar div.userheader p.username.ellipsis a.user {
    color: #00BB00 !important;
}

[ Voor 23% gewijzigd door 8088 op 23-10-2017 14:24 ]

[Meg]

8088 schreef op maandag 23 oktober 2017 @ 14:21:
[...]

De .admin-class zie ik nergens terugkomen. Waarschijnlijk wordt die niet aan de voor stervelingen gegenereerde html toegevoegd.

Dit werkt prima:

Cascading Stylesheet:

/*** Zeef always green ***/
div.message[data-owner-id="2030"] div.poster.avatar div.userheader p.username.ellipsis a.user {
    color: #00BB00 !important;
}

Je bent een held, nu even de kleur van @Hero of Time pikken en @zeef is weer mooi rood.

Update, het werkt perfect.
Werkt die code niet meerdere malen, wou mezelf ook een kleur geven.

[ Voor 8% gewijzigd door Meg op 23-10-2017 15:13 ]

[GS88]

Hero of Time schreef op donderdag 18 oktober 2012 @ 23:56:
Ik heb HEEL veel kleur vervangen. Of nou, veel, het meer lichte tinten vervangen voor donkere.

Ik denk dat ik jouw post maar als uitgangspunt zal nemen.. wil ook donkere kleuren toepassen, voor nu ziet er zo uit (ben nog niet klaar):

code:

body
{
background-color: #4d4d4d;
}

.wrap {
  background-color: #7d7d7d;
}

Ik wil niet teveel aanpassen, alleen de kleuren donker krijgen (behalve de header, die mag T.net-rood blijven)

[Hero of Time]

GS88 schreef op maandag 11 december 2017 @ 13:11:
[...]

Ik denk dat ik jouw post maar als uitgangspunt zal nemen.. wil ook donkere kleuren toepassen, voor nu ziet er zo uit (ben nog niet klaar):
[afbeelding]

code:

body
{
background-color: #4d4d4d;
}

.wrap {
  background-color: #7d7d7d;
}

Ik wil niet teveel aanpassen, alleen de kleuren donker krijgen (behalve de header, die mag T.net-rood blijven)

Dat is leuk, maar als je eenmaal begint, ga je steeds meer lichte dingen zien en aanpassen en uiteindelijk zit je zo een paar honderd regels verder.

[Verwijderd]

Sneak preview waar ik mee bezig ben.

Niet alleen t.net een nachtmode maar ook Firefox Quantum (in beta).

[Hero of Time]

Verwijderd schreef op woensdag 13 december 2017 @ 22:46:
[afbeelding]

Sneak preview waar ik mee bezig ben.

Niet alleen t.net een nachtmode maar ook Firefox Quantum (in beta).

Sweet. Wij moeten eens code uitwisselen. Als je de mijne niet al als inspiratiebron hebt genomen.

[Verwijderd]

Hero of Time schreef op woensdag 13 december 2017 @ 22:55:
[...]

Sweet. Wij moeten eens code uitwisselen. Als je de mijne niet al als inspiratiebron hebt genomen.

Het begon met het logovernieuwing, dingen wat verkloot maar het werkte prima voor mij maar ik was al lange tijd bezig met een donker schema voor tweakers.net want al dat wit, bah. Erg vermoeiend.. En toen kwam FF Quantum uit die plugins sloopte. Tsja dan maar alles doen

Aanpassen valt wel mee, alleen die zoektocht waar alles zit

Overigens de echte inspiratie zit in de Huiskamer notabene... Het licht uit topic...

[ Voor 6% gewijzigd door Verwijderd op 13-12-2017 23:09 ]

[Hero of Time]

Verwijderd schreef op woensdag 13 december 2017 @ 23:07:
[...]

[afbeelding]

Het begon met het logovernieuwing, dingen wat verkloot maar het werkte prima voor mij maar ik was al lange tijd bezig met een donker schema voor tweakers.net want al dat wit, bah. Erg vermoeiend.. En toen kwam FF Quantum uit die plugins sloopte. Tsja dan maar alles doen

Aanpassen valt wel mee, alleen die zoektocht waar alles zit

Overigens de echte inspiratie zit in de Huiskamer notabene... Het licht uit topic...

Oh, die screenshot is dus van dat topic. Valsspeler! Maar kijk maar eens naar mijn code en gooi die in je custom css veld. Niet alles is stuk en het zoekveld is maar op een enkele plek stuk (invoer komt net onder het element ) omdat het net een (paar) pixel afwijkt.

Het idee in je screenshot om de quote box donkerder te maken is wel iets wat ik ga overnemen denk ik, want ik maak 'm lichter en dat is redelijk vervelend voor o.a. de off-topic tag erin.

[Verwijderd]

Hero of Time schreef op donderdag 14 december 2017 @ 07:33:
[...]

Oh, die screenshot is dus van dat topic. Valsspeler! Maar kijk maar eens naar mijn code en gooi die in je custom css veld. Niet alles is stuk en het zoekveld is maar op een enkele plek stuk (invoer komt net onder het element ) omdat het net een (paar) pixel afwijkt.

Het idee in je screenshot om de quote box donkerder te maken is wel iets wat ik ga overnemen denk ik, want ik maak 'm lichter en dat is redelijk vervelend voor o.a. de off-topic tag erin.

Valsspeler? Het is gewoon een live versie

[Hero of Time]

Verwijderd schreef op donderdag 14 december 2017 @ 10:00:
[...]

Valsspeler? Het is gewoon een live versie

[afbeelding]

Ja, zeg, nu is het wel donker in je screenshot. Die erboven niet.

[Verwijderd]

Hero of Time schreef op donderdag 14 december 2017 @ 10:17:
[...]

Ja, zeg, nu is het wel donker in je screenshot. Die erboven niet.

Dat was de vorige iteratie

[Hero of Time]

Nou, code uitwisselen dan. Wat heb je nu gemaakt? Mijn code kan je al van Gdrive downloaden.

[Verwijderd]

Hero of Time schreef op donderdag 14 december 2017 @ 10:30:
Nou, code uitwisselen dan. Wat heb je nu gemaakt? Mijn code kan je al van Gdrive downloaden.

Ik moet een zooi UNgreasemonkey doen en het native CSS nog maken voor t.net voor ik het openbaar maak.

En die UserChrome.css komt ook wel online.

Komt goed, maar dat was die sneak preview dus

Stomme Firefox ook met aanpassingen die alles sloopt

[Hero of Time]

Hehe, ik ben zo blij dat FF op Linux gewoon m'n GTK thema volgt. Voor zover ik FF gebruik.

[matroosoft]

Mijn code voor "Tweakers Night Mode"

Helaas geen screenshots maar misschien volgen die later. Ziet er best aardig uit, al zeg ik het zelf. Wel alleen werkend op het forum. Kan zijn dat 'ie wat problemen veroorzaakt op de rest van de site, dat heb ik verder niet getest. Gebruik een plugin om de CSS alleen op gathering.tweakers.net uit te voeren, waardoor ik de code eenvoudig kan in- en uitschakelen.

Cascading Stylesheet:

/*TWEAKERS.NET NIGHT MODE*/

body, #searchbar, #bottom div.hr{
background-color:#4D4D4D !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;
}

#contentArea{
background: #333333 !important;
}

.message, .bar, form.form1{
background:#4D4D4D !important;
}

#contentArea, #top, #mainSearch, #entity>div, .entityHeader .thumb, .galleryHeading .thumb, .pageTabs li, .pageTabs .more > ul, .message, .message p.signature, .messagecontent .message-quote-div, #tweakbase_relations, .bar, form.form1, textarea, .thumb{
border-color:#646464 !important;
}

.bar.warning{
background: #846a70 !important;
}

.message{
box-shadow:none !important;
}

.thumb{
padding: 2px;
}

img[src="images/icons/icon_hand.gif"]{
display:none !important
}

#layout a{
color:gray !important;
}

table.phphighlight td.phphighlightcode pre, table.phphighlight td.phphighlightcode code{
background-color: #666 !important;
}

table.phphighlight td.phphighlightline{
background-color: #797979 !important;
}

#layout h1{
color: #b51f4a !important;
}

.fancyButton{
color:white !important;
}

.pageTabs li{
background: #333 !important;
}

div.info, #folders, table.listing td{
background: #bfbfbf !important;
}

table.listing .title{
text-shadow:none !important;
}

.ellipsis a{
color:#333333 !important;
}

.messagecontent .toggle-quote{
color:grey !important;
border-left-color:#646464 !important;
border-right-color:#646464 !important;
background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0,#5a5a5a 25%) !important;
}

.messagecontent .message-quote-div{
background:#5a5a5a !important;
}

Lekker veel !important, dan weet je zeker dat het werkt..

[ Voor 9% gewijzigd door matroosoft op 15-12-2017 12:23 . Reden: Code bijgewerkt ]

[DaMoUsYs]

@Hero of Time en @matroosoft beide bedankt voor de CSS
Ik ben ook begonnen aan een donker thema



en hier "mijn" css, zoals je ziet in de screenshot nog wel een aantal schoonheidsfoutjes
Zoals de zoekbalk en de menubalk bijvoorbeeld

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;
}

/* Henk it! */
#logo a { 
    height: 45px !important; 
    width: 150px !important; 
    background: url(https://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -1px !important; 
}
/* Peek-a-boo Henk */
#logo a:hover {
    height: 45px !important;
    width: 150px !important;
    background: url(https://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -20px !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 */
/* 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 tag */
.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;
}

[Hero of Time]

@DaMoUsYs, wist je dat je met CSS hele blokken in 1x kan uitcommentariëren? Dan hoef je niet op elke regel /* */ te gebruiken. Zou je toch door moeten hebben met mijn code. Ik begin er zelfs mee!

Welke elementen heb je nou echt aangepast vergeleken met mijn code?

[DaMoUsYs]

Weet ik inderdaad dat dat kan, maar dat is meer met testen gebeurd denk ik, wat gebeurd er als ik deze aan / uit zet

Geen idee, gisteren en eergisteren een paar uur aan het pielen geweest, ben geen designer / coder

[matroosoft]

DaMoUsYs schreef op vrijdag 15 december 2017 @ 11:52:
Weet ik inderdaad dat dat kan, maar dat is meer met testen gebeurd denk ik, wat gebeurd er als ik deze aan / uit zet

Geen idee, gisteren en eergisteren een paar uur aan het pielen geweest, ben geen designer / coder

Praktische tip: Zet je lap met CSS even tussen quote-tags, dan is 'ie ingeklapt en neemt het niet zo veel ruimte in op de pagina

[DaMoUsYs]

matroosoft schreef op vrijdag 15 december 2017 @ 12:01:
[...]


Praktische tip: Zet je lap met CSS even tussen quote-tags, dan is 'ie ingeklapt en neemt het niet zo veel ruimte in op de pagina

Hoort ie dan ingeklapt te worden ?
Bij mij doet ie dat niet, of iig niet met mijn CSS

[matroosoft]

DaMoUsYs schreef op vrijdag 15 december 2017 @ 12:05:
[...]


Hoort ie dan ingeklapt te worden ?
Bij mij doet ie dat niet, of iig niet met mijn CSS

Is wel fijner zo, als je het mij vraagt. Bij mij is 'ie nu wel ingeklapt.

[DaMoUsYs]

aha nog iets om gefixt te worden dan

[Hero of Time]

Ik klap quotes niet in nee. Staat in ook de comments in m'n code.

Regels 1011 t/m 1016:

Cascading Stylesheet:

/* Disable quote folding */
.messagecontent .message-quote-div.large-quote {
    height: auto !important;
    overflow: visible;
    padding-bottom: 10px !important;
}

[ Voor 60% gewijzigd door Hero of Time op 15-12-2017 13:24 ]

[DaMoUsYs]

Ziet er idd logisch uit ja.
Mij maakt het ook niet veel uit

[flipkipse]

Verwijderd schreef op woensdag 13 december 2017 @ 23:07:
[...]


[afbeelding]

Het begon met het logovernieuwing, dingen wat verkloot maar het werkte prima voor mij maar ik was al lange tijd bezig met een donker schema voor tweakers.net want al dat wit, bah. Erg vermoeiend.. En toen kwam FF Quantum uit die plugins sloopte. Tsja dan maar alles doen

Aanpassen valt wel mee, alleen die zoektocht waar alles zit

Overigens de echte inspiratie zit in de Huiskamer notabene... Het licht uit topic...

Gaaf logo

[MazzaG]

flipkipse schreef op vrijdag 15 december 2017 @ 14:10:
[...]


Gaaf logo

Ik dacht al, hier mist een credit

[Meg]

Ik gebruik de custom CSS van @Hero of Time en zit her zelf mee te spelen, alleen loop ik tegen het volgende probleem aan:
De tekst van een titel is zwart op bijna zwart; waardoor het niet erg fijn is om te lezen:

Nu weet ik dat het te maken heeft met dit stuk code:

Cascading Stylesheet:

textarea#search, input

welke er bij mij zo uit ziet:

Cascading Stylesheet:

/** Text boxes (search) */
textarea#search, input {
    color: #000000; !important;
    background: #1E1E1E;
}

Echter wanneer ik dit aanpas naar bijvoorbeeld #FFF (wit) gebeurt dit ook in de zoekfunctie waardoor die tekst volledig onleesbaar wordt.


Dit is ook het geval in de DMs, want die gebruiken ook dezelfde code.

Hoe kan ik dit alleen voor de topictitels (forum en DM) en ontvanger(s) van de DM?

[Hero of Time]

Het vreemde is dat ik dat probleem zelf niet ondervind. Ik weet dus niet wat je nog meer hebt aangepast, maar ik ga proberen morgen eindelijk eens tijd vrij te maken om m'n CSS op Github te zetten, zodat meer mensen er wat mee kunnen doen. Plus, je kan dan m'n laatste versie altijd vinden.

[Meg]

Dat zou mooi zijn. :-) Kan ik gaan verglijken.

Klik met de rechtermuisknop op de velden die je wilt aanpassen en kies dan voor 'inspect element' en kijk dan waar welke waarden vandaan komen.

Dit wist ik niet, maar werkt wel. :-) Ik kan weer spelen!

[ Voor 70% gewijzigd door Meg op 09-02-2018 18:46 ]

[Hero of Time]

Voor wie wil, ik heb m'n code nu niet meer op Github staan. Voor de 'netheid' heb ik bij m'n tweede commit m'n usericon uit de menubalk gehaald en zijn topics waar ik in heb gereageerd niet cursief. De code zelf is er nog wel, alleen uitgecommentarieerd. Heb ook alle !important clausules weggehaald, want ik weet niet welke er echt nodig zijn en er stonden er veel te veel in (zo'n 283). Sommige waren nodig of vereisten eigenlijk een betere selector.

[ Voor 6% gewijzigd door Hero of Time op 05-06-2018 08:05 . Reden: Repo offline gehaald ]

[Meg]

Gaaf @Hero of Time kan ik ook eens clean beginnen. ;-)
De Search zit erg ver naar rechts waardoor je eigen profiel niet meer te bezoeken is.

edit:
Ok, laat maar. Voor mij is er geen beginnen aan.

[ Voor 17% gewijzigd door Meg op 10-02-2018 18:34 ]

[Hero of Time]

Hmm, juist, dat zou ik er ook nog uit kunnen slopen, de zaken die ik verplaats. Je kan het stuk over de menubalk/header verwijderen en kijken hoe dat gaat.

[Meg]

Is het mogelijk de witte achtergronden bij de avatars te verbergen, zodat de avatars mooi transparant zijn?

[Hahn]

Meg schreef op zondag 11 februari 2018 @ 15:39:
Is het mogelijk de witte achtergronden bij de avatars te verbergen, zodat de avatars mooi transparant zijn?

background: transparent op .thumb zetten. Maar veel mensen zullen geen transparante avatar hebben.

[Meg]

Hahn schreef op zondag 11 februari 2018 @ 15:41:
[...]

background: transparent op .thumb zetten. Maar veel mensen zullen geen transparante avatar hebben.

Geweldig en dat maakt niet uit aangezien ik een donkere stijl heb. :-)

Cascading Stylesheet:

.message .poster .thumb {
    display: inline-block;
    background: transparent;
    border: none;
}

[ Voor 5% gewijzigd door Meg op 11-02-2018 15:47 ]

[Hero of Time]

@Meg, aangezien je mijn CSS gebruikt heb je dit zelf ergens gesloopt. Ik heb dit namelijk in m'n eigen code wel gewoon zitten.

Had je het zoekveld nou ook weer gefixt door de code die ik voor html en body heb weer aan te zetten?

[Meg]

Nee, heb me eigen versie nog steeds en ik pas die lekker aan, leer ik zelf ook nog wat.

Alleen weet ik nooit wat ik aanpas, .

[ Voor 20% gewijzigd door Meg op 11-02-2018 15:53 ]

[Royy90]

Ik loop tegen een probleempje aan met mijn css. Ik kan het simpelweg niet vinden/voor elkaar krijgen dus ik hoop dat jullie mij verder kunnen helpen. Wanneer een menu item is geselecteerd is deze automatisch de tekst kleur groen, kan je dit veranderen met css?

Zelf al geprobeerd met li.active maar dat mocht helaas niet helpen. Kijk ik er nou zo overheen of kan dit niet?

[wizai]

Royy90 schreef op donderdag 22 februari 2018 @ 14:40:
Ik loop tegen een probleempje aan met mijn css. Ik kan het simpelweg niet vinden/voor elkaar krijgen dus ik hoop dat jullie mij verder kunnen helpen. Wanneer een menu item is geselecteerd is deze automatisch de tekst kleur groen, kan je dit veranderen met css?

Zelf al geprobeerd met li.active maar dat mocht helaas niet helpen. Kijk ik er nou zo overheen of kan dit niet?

Is dat het Tweakers menu bovenaan, of menu in het forum gedeelte?

Dit wijzigt de Tweakers menu tekstkleur

code:

#menu li a, #menu li span {
    color: #b8a88a !important;  
}

[ Voor 10% gewijzigd door wizai op 22-02-2018 15:20 ]

[Royy90]

wizai schreef op donderdag 22 februari 2018 @ 15:19:
[...]


Is dat het Tweakers menu bovenaan, of menu in het forum gedeelte?

Het tweakers menu bovenaan. Dus met nieuws, reviews, pricewatch etc. Aanvullen daarop, het is zeker niet mogelijk om items te verwijderen uit die lijst?

[Hero of Time]

Royy90 schreef op donderdag 22 februari 2018 @ 15:21:
[...]

Het tweakers menu bovenaan. Dus met nieuws, reviews, pricewatch etc. Aanvullen daarop, het is zeker niet mogelijk om items te verwijderen uit die lijst?

In de menubalk, dat is deze selector:

Cascading Stylesheet:

div#menuwrapper div#menubar ul#navMenu li:hover { color: #0F0; }

Als 't goed is. Dan wordt het groen. Aanpassen naar wat je wilt. Je zal het niet snel vinden, omdat het om de pseudo selector :hover gaat.

[Royy90]

Hero of Time schreef op donderdag 22 februari 2018 @ 15:49:
[...]

In de menubalk, dat is deze selector:

Cascading Stylesheet:

div#menuwrapper div#menubar ul#navMenu li:hover { color: #0F0; }

Als 't goed is. Dan wordt het groen. Aanpassen naar wat je wilt. Je zal het niet snel vinden, omdat het om de pseudo selector :hover gaat.

Helaas dat is hem niet. Text veranderd niet naar een andere kleur als hij active is maar blijft limegreen.

[Hero of Time]

Royy90 schreef op donderdag 22 februari 2018 @ 15:54:
[...]


Helaas dat is hem niet. Text veranderd niet naar een andere kleur als hij active is maar blijft limegreen.

Oh, je wilt alleen de tekstkleur aanpassen wanneer je ergens actief bent, niet als je er met de muis over hangt. Dan is de eerder aangehaalde "#menu>ul>li.active a" de code.

[Royy90]

Hero of Time schreef op donderdag 22 februari 2018 @ 15:57:
[...]

Oh, je wilt alleen de tekstkleur aanpassen wanneer je ergens actief bent, niet als je er met de muis over hangt. Dan is de eerder aangehaalde "#menu>ul>li.active a" de code.

Top! Dat is em, bedankt! Weet je ook of het mogelijk is om items te verwijderen uit die lijst? Het lijkt allemaal geen aparte id te hebben dus lijkt me niet dan toch?

[Hero of Time]

Ik zou niet weten waarom je iets eruit wilt halen. Klik je zo vaak mis dan.

[Royy90]

Het is meer dat ik Reviews en Meer praktisch nooit gebruik en deze mogen dan van mij net zo goed verborgen worden.

[Hero of Time]

Slecht argument, maar ok. Wat ik mij nog wel afvroeg, is hoe het komt dat je het element niet kon vinden. Het is niets meer dan met de rechtermuisknop op "Forum" klikken en dan kiezen voor 'Inspect Element'. Je ziet de CSS code dan al.

[Royy90]

Ja ik heb de inspector gebruikt maar ik zag dus enkel 6x <li>...</li> en dan bij de geselecteerde stond dan enkel "active". Wellicht komt het doordat ik de safari inspector gebruik(of verkeerd gebruik)? Maar het werkt nu helemaal zoals ik wou dus thnx . En tja, slecht argument misschien maar als ik het niet gebruik kan het net zo goed hidden zijn, persoonlijke voorkeur(jij hebt toch ook bepaalde dingen hidden in jou css zag ik). Ik heb het overigens over enkel die twee menu-items en niet alles.

[ Voor 7% gewijzigd door Royy90 op 22-02-2018 19:50 ]

[Hero of Time]

Ik verberg idd hele blokken, maar niet een enkel stukje van een heel blok als dat simpelweg niet kan.

De inspector van Safari zou rechts gewoon de css regels voor dat element moeten laten zien. Zie je 't niet, dan is het of niet uitgeklapt, of is de inspector gewoon ruk gemaakt en kan je er dus geen klap mee.

[Royy90]

Je hebt helemaal gelijk! Het was dus niet uitgeklapt. Gebruik die inspector praktisch nooit maar nu met custom css dus wel. Bedankt voor de tip.

[MarnickS]

Hoe krijg ik die bovenste balk in de pricewatch grijs?
https://gp9.home.xs4all.nl/shared/tweakerscssprobleem.png
Met die foto begrijp je wat ik bedoel.

[Hero of Time]

MarnickS schreef op zaterdag 9 juni 2018 @ 12:29:
Hoe krijg ik die bovenste balk in de pricewatch grijs?
https://gp9.home.xs4all.nl/shared/tweakerscssprobleem.png
Met die foto begrijp je wat ik bedoel.

Heb je het element al geïnspecteerd? Want dan zie je dat je #top #entity moet hebben.


Voor ieder ander, ik heb m'n GH repo verwijdert inclusief m'n account. Ik zal 'm desgewenst weer op Gdrive zetten.

[MarnickS]

Hero of Time schreef op zaterdag 9 juni 2018 @ 12:54:
[...]

Heb je het element al geïnspecteerd? Want dan zie je dat je #top #entity moet hebben.

Dat had ik gedaan. Maar nu blijkt dat ik gewoon een typfoutje heb gemaakt .

Maar nu alles grijs is zit ik met een nieuw probleem: witte lijnen.

Ik heb al geprobeerd de table die er om heen zit een andere kleur te geven, maar toen veranderden ze niet van kleur en het maakte de rest van de website alleen maar lelijk doordat dat WEL een andere kleur kreeg.
En ik heb geen <hr> gezien.

[ Voor 5% gewijzigd door MarnickS op 09-06-2018 20:08 ]

[NMe]

MarnickS schreef op zaterdag 9 juni 2018 @ 20:05:
[...]

Ik heb al geprobeerd de table die er om heen zit een andere kleur te geven, maar toen veranderden ze niet van kleur en het maakte de rest van de website alleen maar lelijk doordat dat WEL een andere kleur kreeg.

Niet heel gek natuurlijk. De rand van de tabel als geheel een andere kleur geven doet niks met de rand van elke rij. En de rand van elke rij een andere kleur geven doet weer niks met de rand van elke cel ín die rij.

[Hahn]

MarnickS schreef op zaterdag 9 juni 2018 @ 20:05:
[...]

Dat had ik gedaan. Maar nu blijkt dat ik gewoon een typfoutje heb gemaakt .

Maar nu alles grijs is zit ik met een nieuw probleem: witte lijnen.
[afbeelding]
Ik heb al geprobeerd de table die er om heen zit een andere kleur te geven, maar toen veranderden ze niet van kleur en het maakte de rest van de website alleen maar lelijk doordat dat WEL een andere kleur kreeg.
En ik heb geen <hr> gezien.

Gewoon met inspect element kijken welke classes voor de kleuren zorgen.

Blijkbaar:

Cascading Stylesheet:

.editionOverview table.spec-detail .spec-column.first { 
    border-top: 1px solid #d9d9d9;
}

.editionOverview table.spec-detail .spec-column {
    border-color: #d9d9d9;
}

table.spec-detail td.spec-column {
    border-bottom: 1px solid #e6e6e6;
}

[MarnickS]

Hahn schreef op zaterdag 9 juni 2018 @ 20:13:
[...]

Gewoon met inspect element kijken welke classes voor de kleuren zorgen.

Blijkbaar:

Cascading Stylesheet:

.editionOverview table.spec-detail .spec-column.first { 
    border-top: 1px solid #d9d9d9;
}

.editionOverview table.spec-detail .spec-column {
    border-color: #d9d9d9;
}

table.spec-detail td.spec-column {
    border-bottom: 1px solid #e6e6e6;
}

Bedankt. Ik heb de kleuren veranderd en nu zijn de lijnen eindelijk weg

[MarnickS]

Ik zal mijn CSS, een aangepaste versie van die van @Chester , dan ook maar eens delen.
https://del.dog/TweakersCSS1.shell

Er kunnen nog wat kleine bugs in zitten

En wat screenshots:
https://gp9.home.xs4all.nl/shared/twcs/twcs1.PNG
https://gp9.home.xs4all.nl/shared/twcs/twcs2.PNG
https://gp9.home.xs4all.nl/shared/twcs/twcs3.PNG
https://gp9.home.xs4all.nl/shared/twcs/twcs4.PNG
https://gp9.home.xs4all.nl/shared/twcs/twcs5.PNG
https://gp9.home.xs4all.nl/shared/twcs/twcs6.PNG

[ Voor 4% gewijzigd door MarnickS op 10-06-2018 11:28 ]

[Hero of Time]

Het klopt iig wel wat je bovenin zegt in je code: het is een bende. Je begint met een @media (min-width), om ergens halverwege er weer meer te beginnen (3 regels erboven stop je 't, dat dan weer wel). En nog meer zaken wat toch wel beter geordend kan worden. Commentaar wat welk deel doet is ook wel handig, voor anderen maar ook voor jezelf.

Ik wist trouwens niet dat je in een element blok ook &:<atribuut> kon gebruiken, zoals &:focus e.d. Ik heb die dingen er apart onder staan.

[dec0de]

Even een vraag, hoe krijg je die randen aan de zijkant ook de kleur die je wil, ik heb in mijn code de volledige bar en aleen het functionerende gedeelte dezelfde hex code gegeven...

En hoe wijzig je het logo? Als ik dat weet kan ik nog veeeel meer anpassen, dus als jullie mij kunnen helpen, GRAAG!

Alvast bedankt!


Nu kun je zien dat het op mijn 9.7 inch iPad niet zo'n groot probleem is, maar op een 29 inch 21:9 wel!

[Hahn]

Lets find it schreef op woensdag 4 juli 2018 @ 21:30:
Even een vraag, hoe krijg je die randen aan de zijkant ook de kleur die je wil, ik heb in mijn code de volledige bar en aleen het functionerende gedeelte dezelfde hex code gegeven...

En hoe wijzig je het logo? Als ik dat weet kan ik nog veeeel meer anpassen, dus als jullie mij kunnen helpen, GRAAG!

Alvast bedankt!
[afbeelding]

Nu kun je zien dat het op mijn 9.7 inch iPad niet zo'n groot probleem is, maar op een 29 inch 21:9 wel!

.fakeTop een andere achtergrondkleur geven en de background-image op none zetten.

[dec0de]

Hahn schreef op woensdag 4 juli 2018 @ 21:33:
[...]

.fakeTop een andere achtergrondkleur geven en de background-image op none zetten.

Helaas, ik heb dat gedaan, en er verandert niks....

[Hahn]

Lets find it schreef op donderdag 5 juli 2018 @ 08:56:
[...]

Helaas, ik heb dat gedaan, en er verandert niks....

Laat eens zien hoe je dat doet? Want bij mij werkt dat prima.

[dec0de]

Letterlijk dit : .fakeTop {
Background-color: #33282c;
}

[Hahn]

Lets find it schreef op donderdag 5 juli 2018 @ 20:15:
Letterlijk dit : .fakeTop {
Background-color: #33282c;
}

Ik zei ook dat je de background-image op none moest zetten... Als je dat niet doet, dan werkt het niet nee.

[dec0de]

Sorry, dat heb ik ook....

Even opnieuw gedaan, verandert niks...

[ Voor 45% gewijzigd door dec0de op 05-07-2018 20:18 ]

[Hahn]

Blijkbaar moet #tracker er ook voor staan, dus: #tracker .fakeTop

[Hero of Time]

Ik doe het volgende om heel .fakeTop te verbergen, maar zorgen dat de tracker niet naar boven schuift:

Cascading Stylesheet:

/* Remove the fake-top and fix the tracker in place */
#tracker {
    padding-top: 0px;
    top: 45px;
}
.fakeTop {
    display: none;
}

Geen garantie dat het menu op mobiel aan de rechterkant nog in orde is, de naam van dat element ken ik niet.

[Noxious]

Heeft iemand een redelijk up-to-date t.net custom css dark mode om te delen?

[Hero of Time]

Ik had 'm op GH staan totdat MS het overnam. Ik zal 'm eens in Gdrive bijwerken. Nog steeds verre van perfect, maar het komt een heel eind en is op de kleine foutjes hier en daar prima bruikbaar.

[LankHoar]

Noxious schreef op vrijdag 6 juli 2018 @ 11:46:
Heeft iemand een redelijk up-to-date t.net custom css dark mode om te delen?

Ik gebruik deze CSS van Stylus, heeft een paar maanden terug voor het laatst een update gehad. Los van wat gare tekstvakken werkt hij best redelijk.

Cascading Stylesheet:

@namespace url(http://www.w3.org/1999/xhtml);
a:hover, a.highlightlink, a[rb-highlight] {
    box-shadow: none !important;
}

    
body,.ScorecardView {
    background-color: rgba(30, 30, 30, 0.9) !important;
    
}
#imageOverlay,#listing table.listing td {
    background:rgba(50,50,50,1)!important;
    
    }    
    
    #imageViewer, html.js{
    background:rgba(30,30,30,1)!important;
}
  .messagecontent .message-quote-div{
      Background:rgba(150,150,150,.5)
  }

/*BG None*/
    #searchbar ,  .darkFpBlock, .article table, .autoPagerS, #categoryBrowser, .bar, .searchAanbod #nearbyAdForm, #jobs, #filter, .pageTabsContainer, #entity, .relatedBlock, div.message, #tracker .fakeTop,#layout{
    background: none !important;
}

/*BG Transparent*/
    #portalPlayerWrapper, .ScoreCard , .reactieBody.informative, html.js{
    background-color: transparent !important;
}

/*Border none*/
    #top, .darkFpBlock, .pageTabsContainer, table.spec-detail td.spec-column, #entity > div, #ticker {
    border: 0 !important;
}
   

.thumb{
    border-radius: 5px;
   }
.pageTabs li {
    border: 0;
    border-radius: 5px;
}
.userReviewDescription, #poll,#jobs,#sponsored,#loi, #textlinks,#newsletter,h2.detailHeader,h2.bar,#reactieForm textarea,a.fancyButton.grey:hover,#adv, .reactieBody{
    Background:  rgba(50,50,50,1)!important;
    box-shadow: inset 0px 0px 2px 0px #000 !important;
    border: 1px!important;
    
}
    #contentArea,a.fancyButton, span.fancyButton,.fancyButton.clickOut,.fancyButton.grey,table.listing,div.message{
    Background:  rgba(30, 28, 30, .2)!important;
    box-shadow: 0px 0px 4px 0px #000 !important;
    border-top-color: rgba(255,255,255,.12) !important;
    border: 3px!important;
}
    #forumheading .info,#folders{
        Background:  rgba(150,150,150,.1)!important;
        border-top-color: rgba(255,255,255,.12) !important;
        box-shadow: inset 0px 0px 4px 0.5px #000 !important;
        border: 3px!important;
    }
    table.listing.dm td.ind,table.listing td.topic,table.listing .poster,table.listing .replies,table.listing.dm .time,table.listing .ind, table.listing .time{
        Background: rgba(30, 28, 30, .2)!important;
        color: white!important;
        border: none;
        padding-left: 5px;
    }

.filterOption.active,div.filter.closed,#keywordFilter,
#filterForm,#specificationFilter_163,#brandFilter,
#specificationFilter_783,#specificationFilter_22,#specificationFilter_5169,#specificationFilter_5171,#specificationFilter_1293,#specificationFilter_1294,#specificationFilter_1290{
   Background: #2A2A2A!important;
   border: 0!important;
}
    #search input.text,#newsletter input.text{
       Background:  rgba(51, 51, 51, 0.9);
       box-shadow: inset 0px 0px 1px 0.5px #000 !important;
       border-top-color: rgba(255,255,255,.12) !important;
       border: 3px!important;
       width: 480px;
       color: white !important;
    }
    .reactieBody.spotlight,#pmessages form dl dd textarea,input#pmtitle{
       Background:  rgba(130, 128, 130, .7)!important;
       box-shadow: inset 0px 0px 3px 1px black !important;
        border: none;
           }
    .reactieBody.informative,#pmessages form{
       Background:  rgba(130, 128, 130, .2)!important;
       box-shadow: inset 0px 0px 3px 0.5px black !important;
           }
       
    #menubottombar,.ScorecardView,.textadContainer,.userReview,#b_ad,.frontpage #community .userReview .userReviewDescription,a img {
     background: rgba(49, 50, 50, .7);
    }

#top{
    background: linear-gradient(transparent 44px, black 44px, black 67px, rgba(0,0,0, .5) 67px, rgba(50, 50, 50, .2) 50px, transparent 122px)!important;
}

#bottom {    
    height: 0px
}
    

Hover kadera.fancyButton.grey.clickOut, #poll label:hover {
    background: rgba(49, 50, 50, .5) !important;
    text-shadow: none;
}

#layout {
    padding-bottom: 50px !important;
}

#listingContainer {
    min-height: 100%;
    
}

/*Sidebar*/

    
.dropdown ul,.dropdown li a,.dropdown ul li,.sortable li,.sortable.specification .specName,.sortable .specName,div.sortable:nth-child(2) > div:nth-child(1) > span:nth-child(1){
    background:rgba(50,50,50,0.9);
    text-shadow: none!important;
    color: darkgrey !important;
    
    }
    #categoryBrowser .large li{
        background-color:rgba(50,50,50,0.9);
        font-size: 14px;
        color:white;
        text-shadow: 0px 0px 1px black;
    }
#tracker .fakeTop {
    border-bottom: 1px solid transparent;
}
    /*forum*/
    table.listing{
        background: rgba(50,50,50,0.9);
        color:white!important;
        border:none!important;
            }
   .forumList table.listing *,table.listing .tags,layout *,table.listing td.title a, table.forumlisting p.title,table.forumlisting > tbody > tr > td,table.forumlisting .preview .content{
        background: rgba(50,50,50,0.9);
        color:white!important;
        border:none!important;
    }
    
    
    
    div.forumList,table.forumlisting{
        background: rgba(50,50,50,1);
        color:white!important;
        text-shadow: 0px 0px 1px black!important;
    }
/*Sidebar*/

[class="fpaImageContainer"]:not(:hover)  {
        opacity: .6;
    }
#categoryBrowser div, #categoryBrowser .sublist, [class="filterOption"], .pageTabs li {
    background: rgba(255, 255, 255, .8) !important;
    color: white;
}

/*Text*/
#layout *, .editionOverview .specs *, .entityHeader .subInfo, .entityHeader .breadcrumb > li, .entityHeader .breadcrumb > li a,.pwlink, .responsiveFilter,table.listing td.topic a {
    color: white;
    text-shadow: 0px 0px 1px black, 0px 0px 0.1px black, 0px 0px 1px black;
    font-size-adjust: 0.5;
}
    
    
    a:visited,#bestBuyGuides .description,#adv a ,table.listing td.topic a, table.listing td.title a, a.pwlink {
    color:rgba(153, 153, 153, 0.8) !important;
     text-shadow: 0px 0px 1px black!important;   
    }
        
#pricewatch li .fancyButton, #poll label:hover span, .commentCount , .scoreButton, a.fancyButton, span.fancyButton,
    .pageDistribution b, .fancyButton, .sortable.sortorder li a, [id="overviewCtaButton"] *, .sortable > ul > li > a {
    color: white ;
    text-shadow: none !important;
}

#categoryBar ul a, #jobs li .location a, #community p , #ticker , .latestVideos p.views, a.videoNextPage, #header h1 .subtitle, .editionOverview table.spec-detail .spec-index-column, #ScoreCardDiv h3, .entityHeader .inventory span, .entityHeader .wishlist span,#history .date, #header h1 .subtitle a, .rbProductlist .item .fancyButton, #navMenu > li > a , .table, .keywordSearch input.text{
    color: white !important;
}
    
    #categoryBrowser li a, .portalBlock #categoryBrowser *,a.fancyButton.grey, .filterOption.fancy{
        color: rgb(52,52,52);
        text-shadow: none;
    }

.fpaItem a, input.text, .pageTabs > ul a, .forumList, .table.listing, #select_days, #select_days *, .messagecontent .message-quote-div *,
    .messagecontent .message-quote-div , .sortable.select .specName, .sortable.sortorder small, .jouwRechten *,  #reacties #reactieContainer > .reactie > .reactieBody.spotlight *,   .pageDistribution .next,  div.filteroption *{
    color:black !important;
    text-shadow: none !important;
}
/* FORUM TOPICSTARTER MARKEREN */ 
.message.topicstarter {
    border-top: 3px solid #A61E39;
    background: #F5F5F5;
    background-image: none;
    box-shadow: none;
}
/* MAXICT DOORSTREPEN */ 
a[href*="LeverancierID=7403"] {
  color: #f00 !important;
  text-decoration: line-through !important;
  pointer-events: none;
  cursor: default;
}

Onderaan twee dingen die ik zelf heb toegevoegd; Max ICT weren uit de PW en posts van TS beter markeren. Die laatste werkt alleen niet meer en ik snap niet waarom Ben dan ook een flinke noob met CSS.

[Noxious]

Dat is al 'n stuk beter - thanks

[LankHoar]

Noxious schreef op maandag 9 juli 2018 @ 10:31:
Dat is al 'n stuk beter - thanks

Mocht je verbeteringen maken dan hoor ik het graag

[ Voor 6% gewijzigd door LankHoar op 09-07-2018 10:40 ]

[Noxious]

LankHoar schreef op maandag 9 juli 2018 @ 10:39:
[...]


Mocht je verbeteringen maken dan hoor ik het graag

Dan laat ik dat natuurlijk even weten ja

[Hero of Time]

@LankHoar, dit is wat ik heb voor TS markering:

Cascading Stylesheet:

/* 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;
}

Het is vergelijkbaar met wat jij hebt, alleen heb ik nog het 'div' stukje wat ik erbij zet.

[LankHoar]

Hero of Time schreef op maandag 9 juli 2018 @ 11:23:
@LankHoar, dit is wat ik heb voor TS markering:

Cascading Stylesheet:

/* 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;
}

Het is vergelijkbaar met wat jij hebt, alleen heb ik nog het 'div' stukje wat ik erbij zet.

Thanks! Het lijkt erop dat iets anders in mijn CSS dit stukje blokt, want ook deze werkt niet bij mij. Zowel tijd als TS' posts worden nog standaard weergegeven.

[Hero of Time]

Check dan even of er ergens een !important staat voor .message en/of .messageheader.

[Nielless]

Misschien hoort het hier niet, maar wist niet waar ik de vraag kon stellen.

Ik las vandaag iets over een Custom CSS dark theme voor tweakers. Nu ben ik zelf helemaal nieuw in Custom CSS, maar heb wel al een stylesheet op internet gevonden.

Waar kan ik de stylesheet in plakken? Zie de functie nergens meer staan in mijn profiel/instellingen? (of ben ik nu super scheel )

EDIT: Afspraak gemaakt bij Hans Anders. Gevonden

[ Voor 7% gewijzigd door Nielless op 09-07-2018 12:13 ]

[LankHoar]

Hero of Time schreef op maandag 9 juli 2018 @ 11:37:
Check dan even of er ergens een !important staat voor .message en/of .messageheader.

Ik zag deze alleen in dit vak staan, echter na het weghalen ervan werkt het helaas nog niet:

Cascading Stylesheet:

.fpaItem a, input.text, .pageTabs > ul a, .forumList, .table.listing, #select_days, #select_days *, .messagecontent .message-quote-div *,
    .messagecontent .message-quote-div , .sortable.select .specName, .sortable.sortorder small, .jouwRechten *,  #reacties #reactieContainer > .reactie > .reactieBody.spotlight *,   .pageDistribution .next,  div.filteroption *{
    color:black;
    text-shadow: none;

Nielless schreef op maandag 9 juli 2018 @ 12:10:
Misschien hoort het hier niet, maar wist niet waar ik de vraag kon stellen.

Ik las vandaag iets over een Custom CSS dark theme voor tweakers. Nu ben ik zelf helemaal nieuw in Custom CSS, maar heb wel al een stylesheet op internet gevonden.

Waar kan ik de stylesheet in plakken? Zie de functie nergens meer staan in mijn profiel/instellingen? (of ben ik nu super scheel )

Je kunt de CSS functie in de karmastore kopen. Of een add-on zoals Stylus installeren

[Hero of Time]

M'n laatste versie staat nu in een apart mapje in m'n Gdrive:

Members only:

Alleen zichtbaar voor ingelogde gebruikers. Inloggen

Ik heb er twee bestanden in staan, eentje met wat tweaks, zoals Henk ipv het standaard logo, andere aanpassingen aan de header, paar items die ik verberg, kleur op het forum overzicht bij categoriën en voor mobiel het leesbaar maken van afkortingen en acronymen in nieuwsberichten (de mouseover tooltip komt tussen haakjes erachter te staan).
De tweede is de kleuraanpassingen. Verre van ideaal, de drie uitgelichte items op de FP hebben witte tekst bijvoorbeeld, met lichtgrijze achtergrond. Dat is een paar maanden geleden al stuk gegaan bij een of andere iteratie en heb nog niet de moeite genomen het te fixen. DM overzicht ziet er ook niet ideaal uit overigens, maar can't be bothered.

[jeroentje710]

Beste mede tweakers,

Net als velen was ik opzoek naar een nachtmodus van Tweakers. Nu heb ik in de afgelopen dagen heel wat codes getest die ik hier op het forum zag staan maar helaas heb ik er nog geen een gevonden die de traditionele layout heeft en simpelweg al het wit vervangt voor zwart en visa versa. Is er iemand met een goed werkende CSS code die zowel voor desktop als mobiel werkt? (desktop is het belangrijkste)

Avaste bedankt

[Hero of Time]

@jeroentje710, wat is er mis met de mijne? Er is veel comment bij om aan te geven wat het doet, je kan hierdoor redelijk makkelijk zaken eruit laten. Eigenlijk laat ik de layout zelf zo veel mogelijk met rust, alleen met m'n tweaks pas ik echt zaken aan.

[jeroentje710]

@Hero of Time Ben de CSS van jou nog niet tegengekomen op het forum? Waar kan ik de code vinden want ik zal hem heel graag willen proberen. Alvast bedankt

[Hero of Time]

jeroentje710 schreef op zondag 16 september 2018 @ 20:30:
@Hero of Time Ben de CSS van jou nog niet tegengekomen op het forum? Waar kan ik de code vinden want ik zal hem heel graag willen proberen. Alvast bedankt

Ik vind het wel enorm knap dat je mijn code niet hebt kunnen vinden, als die letterlijk boven je post staat gelinkt naar Gdrive.

Daarnaast ook meerdere keren in dit topic staat alsmede in de TS gelinkt (naar een antieke versie).

[ Voor 11% gewijzigd door Hero of Time op 16-09-2018 21:49 ]

[jeroentje710]

Hero of Time schreef op zondag 16 september 2018 @ 20:54:
[...]

Ik vind het wel enorm knap dat je mijn code niet hebt kunnen vinden, als die letterlijk boven je post staat gelinkt naar Gdrive.

Dat krijg je als je gaat scrollen op zoek naar de code in plaats van posts lezen
Hij ziet er in elk geval erg goed uit. Nogmaals bedankt

[Hero of Time]

Het is niet volledig en ideaal, maar het doet wat het moet doen in de basis. Code in een post plaatsen gaat niet, daar is het te groot voor. Ik heb een paar kleine fixes ondertussen al doorgevoerd die ik nog eens op Gdrive moet bijwerken, maar wil eigenlijk nog een paar andere dingen eerst fixen.

[mrmartijn]

Ik heb eens voor eens eerst gebruik gemaakt van mijn custom css rechten, ik stoor me er ontzettend aan dat het specs tablad in de pricewatch nu kenmerken heet. Gelukkig makkelijk terug te draaien

Cascading Stylesheet:

#tab_select_specificaties a{
   font-size: 0;
}
#tab_select_specificaties a::after{
   font-size: 10pt;
   content: "Specs";
}