Tweakers 7: Tweaked!

Door alex3305 op vrijdag 19 oktober 2012 23:12 - Reacties (5)
Categorie: -, Views: 4.361

Alhoewel ik nog steeds aan mijn bartop bezig ben, ben ik momenteel druk bezig met het tweaken van Tweakers 7. Alhoewel sommige punten best een vooruitgang kunnen zijn, ervaar ik momenteel een hoop van de verbeteringen als een achteruitgang. Vooral de hoeveelheid witruimte en het felle contrast is niet prettig. Daarom heb ik alvast wat CSS tweaks gemaakt die zowel via Stylish (Chrome) als de CSS Karma feature te gebruiken zijn. Omdat deze momenteel achter gesloten deuren - althans voor de meeste - staan, wil ik deze veranderingen ook hier delen.


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* Uitvullen op de FP */ 
.article {text-align: justify;} 

/* Achtergrondkleur veranderd */ 
#layout {background-color: #fafafa !important;}  

/* Linkkleur veranderd FP */ 
table.highlights a, table.listing a {color: #000 !important;} 

 /* Linkkleur visited veranderd FP */ 
table.highlights a:visited, table.listing a:visited {color: #666 !important;} 

 /* Tijd rechts uitgelijnd en lichter gemaakt */ 
table.highlights .time, div#highlights > table.highlights > tbody > tr > td > span {color: #999 !important; display: inline-block; float: right; } 

/* Titel kleur van Headers op GoT veranderd in wit */ 
table.listing th.title a {color: #fff !important;} 

/* Userdata weer klein zichtbaar */ 
.userdata .extra {display: block !important; font-size: 7pt}  

/* Abo highlighter */ 
.abonnee {color: #0A8FC4;}  

/* Action lijst kleiner gemaakt */ 
.topic_actions .action_list li {font-size: 9pt;}  

/* Sidebar weggehaald op forum */ 
#sidebar {display: none;}  

/* Forumberichten naar het midden verplaatst */ 
#messages {margin-left: 80px}  

/* Witruimte tussen berichten weggehaald */ 
#messages div.message {margin-bottom: 0px;}  

/* Eigen post gehighlight. Mooier dan de standaard :+ */ 
#messages div.message .ownpost {background-color: #D9ECFF !important;}  

/* Messageheader aangepast voor betere verschillen tussen twee berichten */ 
#messages div.message .messageheader {background-color: #ddd;}  

/* Messageheader aangepast voor TS */ 
#messages div.topicstarter .messageheader {background-color: #ccc;}  

 /* Pagecounter onderaan gefixed voor witruimte weghalen */ 
#messages p.pagecounter {display: block; margin-top: 15px} 

/* Topic actions gefixed */ 
.topic_actions {width: 980px;}  

/* Actielijst gefixed */ 
.topic_actions .action_list {font-size: 8pt;} 

/* Action lijst: Weghalen van Reageer! */
.topic_actions .action_list li:before {content: " "; margin: 0;}
.topic_actions .action_list li:first-child {display:none;}

/* Topic Action List dinges ook gefixed met achtergrondjes -- Deel 1 */
.topic_actions .action_list li a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px; display: inline-block; margin-right: 7px}

/* Kleurtjes voor Topic Reports */
.topic_actions .action_list li a[title^="Rapporteer dit topic"] {background: #b98013; color: #fff;} /* Eigenlijk voor de tussenstaat, maar heb ik momenteel geen tekst van */
.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;}

/* Deel 2 van TAL */
.topic_actions .action_list li a:hover {background: #0A8FC4; color: #fff; text-decoration: none;}

 /* Reply-count fatsoenlijk leesbaar gemaakt in topic overview */ 
.commentCount {color: black; background: none;} 

/* Social, Newsletter en Jobs meuk weggehaald op de FP */ 
.secondColumn #social, .secondColumn #jobs, .secondColumn #newsletter {display: none;}  

/* Topic Reply waarschuwing in het midden */ 
#topicReplyWarning p {margin-left: 0; text-align: center;}

/* Laatst gereageerd in een topic dikdrukken */
table.listing .topic a[title$="alex3305"] {font-weight: bold}

/* Tracker verbergen */
.tracker {display:none;}

/* Ruimte tussen fora en topics minder gemaakt. Scheelt nu 4px, je kunt zelf de 8px waarde verminderen om een nog compactere layout te krijgen */
table.listing td, table.listing th {padding: 8px 5px;}

/* Transparante topborder voor alternatieve achtergronden */
.topBorder, .eenReactie .topBorder, .reactie .topBorder {background: transparent url(http://tweakers.net/ext/f/dnI1SO8bL4GhWrKc7T28EBNN/full.png) !important;}

/* Onderwerpen en gerelateerd in het lichtblauw zoals op de FP */
.relevancyColumn {padding: 15px 15px 17px; border: 1px solid #DDDEDE; border-radius: 1px; background: #EDEEEE; background-image: -webkit-linear-gradient(#F5F6F6,#EDEEEE); background-image: -moz-linear-gradient(#F5F6F6,#EDEEEE); background-image: linear-gradient(#F5F6F6,#EDEEEE); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .33); margin-left: 0px; width: 310px}

/* Pricewatch blok strak uitgelijnd in de onderwerpen en gerelateerd block bij artikelen */
.relevancyColumn .relatedBlock {border: none; background: none; background-image: none; -webkit-box-shadow: none; box-shadow: none;}
.relevancyColumn .popularProductListing {margin-left: -15px;}
.relevancyColumn .popularProductListing .sortable {min-width: 300px;}

/* Reacties zoals mijn stijl @ GoT */
.reacties {background: #fff; border: #DDDEDE; padding-bottom: 10px; margin-bottom: 20px;}
.reacties > .reactie {background: none; padding-left: 0px; border: none;}
.reacties > .reactie, .eenReactie {margin-top: 0;}
.eenReactie .topBorder {display: none;}
.reactieHeader {background: #eee;}

.reactieBody.hidden, .reactieBody.informative, .reactieBody.spotlight {margin-left: 0; padding-left: 0;}
.reactieBody.informative, .reactieBody.spotlight {border: none !important;}
.reactieBody.informative > .reactieFooter, .reactieBody.spotlight > .reactieFooter {margin-bottom: 0;}

.reactieHeader {padding-left: 10px;}
.reactieContent {padding: 10px 10px 15px 10px;}
.reactieFooter {padding:  0 10px 10px 10px;}

#reactieForm {padding-left: 10px;}
table.nextPrevious, .nextPrevLinks {margin-bottom: 0;}

/* Donkere zoekbar met leesbaar True-logo */
#searchbar {background: #666; background-image: -webkit-linear-gradient(#5a5a5a,#515151); background-image: -moz-linear-gradient(#666,#555); background-image: linear-gradient(#666,#555); border-radius: 6px 6px 0 0; border-top: 1px solid #aaa; color #fff;}
a#true {display: block; width: 48px; height: 25px; background: transparent url(http://tweakers.net/ext/f/wGX6Wtpc1n5MxlQxKoEZ0SAw/full.png) no-repeat 0 0;}
img[alt="True logo"] {display: none;}

/* Home weghalen op het forum in de Breadcrumbs */
#forumheading .breadcrumb a:first-of-type, #forumheading .breadcrumb span:first-of-type {display: none;}

/* Pagecounter netjes maken */
.pagecounter a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px;}
.pagecounter a:hover {background: #0A8FC4; color: #fff;}

/* Preview op het forum netjes maken */
.formsubmit input[value="Verstuur bericht"] {font-weight: bold;}
.formsubmit input[value="Bekijk bericht"], .formsubmit input[value="Toon voorbeeld"] {background: #D9ECFF; padding: 5px 9px 6px 9px; border-radius: 1px; display: inline-block;}
.formsubmit input[value="Bekijk bericht"]:hover, .formsubmit input[value="Toon voorbeeld"]:hover {background: #0A8FC4; color: #fff; text-decoration: none;}

/* Blauwe Tweakers 7 */
#top {background: #047DD6; background-image: -webkit-linear-gradient(#047DD6,#428CE8 68px); background-image: -moz-linear-gradient(#047DD6,#428CE8 68px); background-image: linear-gradient(#047DD6,#428CE8 68px); }



Nog wat kleine edits gedaan :+ -- Alweer (1:14 zaterdag) voor mooiere TR's

Alles staat netjes gedocumenteerd en ik heb vooralsnog een tweetal kleine screenshots om de veranderingen te laten zien:
http://tweakers.net/ext/f/jNPsbQYw9hncwpYlP7aCBNKe/full.jpg
http://tweakers.net/ext/f/ROTWApLvd1H8xdrD3hR7WWwB/full.jpg

Zo dat zijn de Frontpage en GoT. Je ziet dat er wat items op de FP zijn verdwenen, maar ook dat er wat kleur in is toegevoegd. Ook op GoT is de layout smaller en wordt de ruimte zo beter benut. Daarnaast heb ik nog gekeken naar een breder GoT, maar dit blijft lelijk :/....

Laat maar weten wat jullie ervan vinden en suggesties hoor ik maar al te graag :).

Volgende: Mijn volledige CSS voor Tweakers 7 10-'12 Mijn volledige CSS voor Tweakers 7
Volgende: [CiP] Bartop: Nu ook op GoT (tm) 10-'12 [CiP] Bartop: Nu ook op GoT (tm)

Reacties


Door Tweakers user Royboy510, zaterdag 20 oktober 2012 00:14

Dat bovenste plaatje, zijn dat 2 screenshots of ben je echt van plan het artikel naast de FP te showen :D

Door Tweakers user alex3305, zaterdag 20 oktober 2012 00:18

Haha, nee zijn beiden twee screenshots. Allebei in ťťn afbeelding gepropt zodat het wat makkelijker te showen is :).

Door Tweakers user ReLexEd, zaterdag 20 oktober 2012 11:33

Idd een verbetering ten opzichte van wat ik gisteren als mini-heart attack voor m'n kiezen kreeg...

Bedankt voor de tip van Stylish.. (daar ga ik meer gebruik van maken ;))


Hou wel m'n vingers gekruist, en hoop dat de dev-ers er wat mee doen, al de reacties...
Die tracker op kleinere windows dan +/- 1600 pixels breed weg is een verantwoording voor een draai om de oren... (wil de term waarbij een nek en het afvuren van een pistool ter sprake komt niet in de mond nemen ;-))

Door Tweakers user Zjemm, zondag 21 oktober 2012 13:51

Ziet er goed uit inderdaad. Ik wacht nog even af wat de dev-ers doen de komende tijd.
Anders misschien toch maar een abbo aanschaffen en custom CSS gaan gebruiken. Daar komen jou ideeŽn heel goed bij van pas! Thnx.

Door Tweakers user alex3305, zondag 21 oktober 2012 16:23

Dankjewel. Alhoewel ik niet zeker weet of je met een abo ook daadwerkelijk weer de karmastore features erbij krijgt.

Reageren is niet meer mogelijk