Mijn volledige CSS voor Tweakers 7

Door alex3305 op zondag 21 oktober 2012 16:31 - Reacties (5)
Categorie: -, Views: 4.691

Alhoewel ik dit eerder ook al in het topic voor de CSS competitie heb geplaatst wil ik mijn eigen custom CSS ook nog eens hier met jullie delen. Zelf ben ik er erg tevreden over en zitten er vooralsnog geen echte bugs in. Ook werkt het naar mijn idee erg lekker en is Tweakers 7 zo meer bruikbaar geworden!

Ook alvast wat plaatjes om het een en ander te tonen. Dit is dus een compilatie van de meeste veranderingen:


http://tweakers.net/ext/f/Tw79ZR4jNEYrrQJ9NI5EPTO2/full.png
Frontpage veranderingen: geen spierwitte achtergrond, donkere header, wit TRUE-plaatje, tracker weggehaald, rood maken van nieuwe nieuwsberichten zoals in de vorige layout, rechts social en jobs weggehaald, artikel strak uitgelijnd, relevante onderwerpen blauw gemaakt, reacties verduidelijkt incluis reageren
http://tweakers.net/ext/f/KSRAWai94e8zWwonFBEXl9mF/full.png
Site veranderingen: meer blauwige vakjes, headers bij V&A en Jobs gefixed, profiel gecentreerd
http://tweakers.net/ext/f/JZBuimDuCns6iPXUEX1moWPR/full.png
Forum veranderingen: tabs kleuren gefixed, grotere horizontale spacing, minder verticale spacing, paginering en knopjes een achtergrondje gegeven, forum duidelijker gemaakt, eigen posts opvallend gemaakt en TS-posts opvallend gemaakt, forum gecentreerd, Home-breadcrumb weggehaald (was verwarrend), Topic report kleurtjes terug toegevoegd, Verstuur/Bekijk bericht verduidelijkt (ook @ notities)



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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
/* Uitvullen op de FP */ 
.article {text-align: justify;} 

/* Achtergrondkleur veranderd */ 
#layout, #myprofile h2, #mynotepad h2 {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; 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 */ 
.klipklap {display:none;}
.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, .replies {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;}
table.listing .ind {width: 30px} table.listing .frm {width: 40px;}
.meukTable table.listing td, table.listing th {padding: 7px 0;} /* Fix voor meuktracker */

/* 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;}
#reacties .reactie {border-left: none;}

.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, #footer .breadcrumb a:first-of-type, #footer .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 en notities op het forum netjes maken */
.formsubmit input[value="Verstuur bericht"], #mynotepad input[value="Notitie opslaan"] {font-weight: bold;}
.formsubmit input[value="Bekijk bericht"], .formsubmit input[value="Toon voorbeeld"], #mynotepad input[value="Bekijk notitie"] {background: #D9ECFF; padding: 5px 9px 6px 9px; border-radius: 1px; display: inline-block; color: #024368; border: none;}
.formsubmit input[value="Bekijk bericht"]:hover, .formsubmit input[value="Toon voorbeeld"]:hover, , #mynotepad input[value="Bekijk notitie"]:hover {background: #0A8FC4; color: #fff; text-decoration: none;}

/* Modfilter tekst weghalen zodat er geen overflow meer is bij veel comments. */
#reacties > .filterBox > .modFilter > .label {display:none;}

/* Table listing van DM lijst & Jobs fixen */
table.listing.dm td, .forumList .listing td {background: #EDEEEE; background-image: -webkit-linear-gradient(#F1F2F2,#EDEEEE); background-image: -moz-linear-gradient(#F1F2F2,#EDEEEE); background-image: linear-gradient(#F1F2F2,#EDEEEE);}

/* Profiel centreren met witte achtergrond */
.galleryHeadingContainer + .pageTabsContainer > .pageTabs {width: 640px;}
.galleryBody {margin: 0 0 0 150px; padding: 15px 20px; background: #fff; border: 1px solid #ccc;}
.galleryBody ~ #reacties {width: 660px; margin-left: 150px;}
.galleryBody ~ #reacties > .reacties {background: #fafafa;}
.galleryBody ~ #reacties > .reacties > .reactie {background: #fff;}
.galleryBody ~ #reacties > .reacties > .reactie:last-child {background: #fafafa; margin-top: 10px;}
.galleryBody ~ .sidebar > .vaStatistics {width: 640px; margin-left: 150px;}

/* Actieve tabs overal hetzelfde */
.pageTabs li.active a, #forum_tabs li.active a, #fp_tabs li.active a {color: #B9133C; background: #fafafa}

/* Nieuwsberichten tijd in het rood wanneer nieuw zoals op Tweakers 6 */
#news .highlights .new + td > span.time, #highlights .highlights .new + td > span.time {color: #B9133C;}

/* Overal fancy blok achtergrondjes */
.popularUserReviewsBlock, .popularEditorialReviewsBlock, .popularProductListing {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); padding: 15px 15px 17px;}

.latestAanbod, .searchAanbod, .userAanbod, #jobContent {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);}

.popularUserReviewsBlock, .popularEditorialReviewsBlock {width: 450px}
.popularProductListing {width: 590px;}
.latestAanbod .listing, .userAanbod .vaUserAds, .userAanbod .addUserAd, .userAanbod .listing, .vaReadmore {padding: 0 15px;}
.searchAanbod #nearbyAdForm {background: none;}
#jobContent {width: 615px;}

/* V&A header in stijl met de rest -- Aanbevolen met bovenstaande fancy blokjes */
.vaPortalColumnLeft .bar, .searchAanbod .bar, .userAanbod .bar, #jobContent .bar {font-weight: normal; font-size: 18px; line-height: 22px; font-family: "HelveticaNeue-CondensedBold","Helvetica Neue Bold Condensed","Roboto Bold Condensed","Arial Bold","Helvetica Bold","Liberation Sans Bold",arial,helvetica,sans-serif; font-weight: normal; min-height: auto; margin: 15px 0 15px 15px; padding: 0; color: #B9133C; background: none;}

/* Gallery fix */
.galleryBody .galleryInnerTable .paddingLeft {width: 230px;}



Al met al ben ik zo gruwelijk tevreden en ik denk dat je door middel van de comments jouw eigen CSSje in elkaar kunt draaien en dus zo Tweakers 7 helemaal naar wens aan kan passen.

Tweakers 7: Tweaked!

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

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.

Lees verder »

[CiP] Bartop: Nu ook op GoT (tm)

Door alex3305 op maandag 15 oktober 2012 01:00 - Reacties (5)
Categorie: Bartop arcade project, Views: 5.297

Bedankt _ferry_! En daarom, speciaal voor de rest hier op GoT, vandaag weer een update :). Want we hebben hier thuis weer erg veel gedaan in het weekend en ik moet zeggen, het begint nu ook echt, echt vorm te krijgen :D.

Afgelopen vrijdag heb ik al mijn bekabeling en kabelschoentjes binnengekregen van ArcadeWinkel.nl. Erg prettige winkel en goede afhandeling! Ook zaten er vijf verchroomde, lichtgevende knoppen bij. Leuk om dadelijk modifiers van te maken. Verder heb ik er vrijdag weinig meer aan gedaan.

Lees verder »

[CiP] Bartop: Geluid met een beetje Engels

Door alex3305 op donderdag 11 oktober 2012 22:36 - Reacties (3)
Categorie: Bartop arcade project, Views: 4.230

Gisteren, na veel te lang wachten voor een ongeduldige ik, heb ik eindelijk mijn onderdelen uit Engeland binnengekregen van Gremlin Solutions. Ze hadden er duidelijk een sport van gemaakt om zoveel mogelijk onderdelen in een zo klein mogelijk doosje te stoppen.

Tot op dit moment was ik eigenlijk nog steeds sceptisch over de door mij gekozen kleurscherma's. Alhoewel ik het inderdaad zelf uit had gezocht, had ik eerst een rood-zwart schema in gedachte. Maar omdat ik die kleuren eigenlijk altijd doe heb ik nu gewoon gekozen voor wit-roze-geel. Daarom was mijn anticipatie toch wel aan de hoge kant toen ik het doosje openmaakte...

Lees verder »

[CiP] Bartop: Duitse onderdelen, nieuw plankje en +1 goodie!

Door alex3305 op dinsdag 9 oktober 2012 16:31 - Reacties (9)
Categorie: Bartop arcade project, Views: 5.346

Gisteren op aanraden van de reacties op mijn blog (vooral E-Vix en Bartjezz) toch maar besloten een ander plaatje te scoren voor mijn knoppen. Bij de lokale Praxis gevraagd of ze toevallig nog een stukje 'afval' hadden liggen van 8mm MDF van 375x200mm, maar helaas. Echter waren ze wel zo vriendelijk om een plaat gratis te zagen. De vorige keer dat ik dit vroeg moest ik bijbetalen, dus alles bij elkaar nog niet zo slecht.


http://tweakers.net/ext/f/UITtE2THAID6mnA8F0ROzRpF/full.jpg
Nieuw superstrak stukje MDF 8mm


Daarnaast ook een mooie gatenzaag-ding - ik heb er weinig verstand van - gekocht om gaten te boren voor de knoppen. Nu zat er in mijn hoofd dat de knoppen 1 1/8-inch waren (29mm), maar helaas blijken mijn knoppen toch precies 30mm te zijn :/. Helaas pasten mijn knoppen dus nog steeds niet in de geboorde gaten. Maar daar verzin ik nog wel iets op denk ik.

Lees verder »