Mijn volledige CSS voor Tweakers 7

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

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.

Volgende: Tweakers 7: Tweaked! 10-'12 Tweakers 7: Tweaked!

Reacties


Door Tweakers user spone, zondag 21 oktober 2012 17:49

Ik heb deze op dit moment in gebruik en dit maakt de layout van Tweakers een stuk minder onprettig in zijn huidige vorm. Dank!

Door Tweakers user Daniel, zondag 21 oktober 2012 18:02

Op het forum heb je een aantal interessante verbeteringen, op de fp is het contrast lager omdat je alleen grijs als achtergrondkleur gebruikt. Ik zou eerder kiezen voor een grijze kadering en de contentkolom zelf wit houden - en dan door kleinere regelafstanden beter vullen.

Ow en er zijn (bij Safari iig) issues als er advertenties op de pagina staan, de leaderboard valt door de content heen.

[Reactie gewijzigd op zondag 21 oktober 2012 18:25]


Door Tweakers user RobinS.Buisman, zondag 21 oktober 2012 21:26

Hoewel ik zelf absoluut de ballen verstand heb van CSS, bedankt! Het maakt T.net inderdaad een stuk leesbaarder. Ik heb net via http://archive.org/ T.net 6 en 7 eens naast elkaar gelegd. Man man man, wat een enorm fijne website was T6 toch!

Door Tweakers user alex3305, maandag 22 oktober 2012 00:34

spone schreef op zondag 21 oktober 2012 @ 17:49:
Ik heb deze op dit moment in gebruik en dit maakt de layout van Tweakers een stuk minder onprettig in zijn huidige vorm. Dank!
Bedankt. Ik heb vooral de huidige opzet proberen te behouden op Tweakers. Alhoewel ik erg sceptisch was hebben de devvers stiekem toch wel een paar goede verbeteringen aangebracht, die ik toch graag in tact wilde laten.
Daniel schreef op zondag 21 oktober 2012 @ 18:02:
Op het forum heb je een aantal interessante verbeteringen,
Dankjewel. Aangezien ik het forum het meeste gebruik, is dit voor mij het belangrijkste om te verbeteren.
op de fp is het contrast lager omdat je alleen grijs als achtergrondkleur gebruikt. Ik zou eerder kiezen voor een grijze kadering en de contentkolom zelf wit houden - en dan door kleinere regelafstanden beter vullen.
Dat is natuurlijk ook een optie. Duidelijk te zien bij veel custom-css'ers die een donkergrijze achtergrond aanhouden. Hetzelfde als hier op Tweakblogs. Echter vind ik, net zoals ik hierboven al zeg, het belangrijker dat het meeste werk van de devvers in stand blijft. De gedachte van T7 moet gewoon blijven. En ik denk dat me dat wel is gelijkt.

Daarnaast moet ik eerlijk toegeven dat ik meestal Tweakers ingezoomed gebruik. Vanwege mijn handicap, dan heb ik al een stuk minder baat bij een donkergrijzere achtergrond.
Ow en er zijn (bij Safari iig) issues als er advertenties op de pagina staan, de leaderboard valt door de content heen.
Bedankt voor de tip. Aangezien ik bannervrij gebruik heb ik hier geen last van, maar ik zal morgen nog eens testen en eventueel hier mijn CSS op aanpassen. Uiteindelijk is het namelijk vooral voor mezelf bedoeld :).
RobinS.Buisman schreef op zondag 21 oktober 2012 @ 21:26:
Hoewel ik zelf absoluut de ballen verstand heb van CSS, bedankt! Het maakt T.net inderdaad een stuk leesbaarder. Ik heb net via http://archive.org/ T.net 6 en 7 eens naast elkaar gelegd. Man man man, wat een enorm fijne website was T6 toch!
Fijn om te horen. Misschien is dit wel een gelegenheid om CSS eens uit te proberen. Het is een vrij makkelijke manier om layouts te maken en dus ook van veranderingen te voorzien. Uiteindelijk heb ik niet voor niets het meeste gedocumenteerd. Ook het spelen met diverse (simpele) instellingen kan helpen om het eens te leren :).

Alleen het onderste gedeelte is nogal 'lastige' CSS omdat er veel nieuwe elementen worden gebruikt.

[hr]
Voor anderen. Vergeet bij "Laatst gereageerd in een topic dikdrukken"-code niet om mijn naam te veranderen in jouw eigen nickname! :)

Door Tweakers user Grompie, maandag 22 oktober 2012 11:09

_/-\o_ Wauw echt super, dit had tweakers 7 gewoon moeten zijn. Mss niet perfect maar het is alvast een hele verbetering met het origineel!

Reageren is niet meer mogelijk