Witte Tweakers.net tracker

Door Wiethoofd op dinsdag 1 juni 2010 20:30 - Reacties (10)
Categorie: Custom stylesheet, Views: 8.132

Wie voor juli 2008 wel eens op Tweakers.net keek had links een balk met witte achtergrond met daarin de nodige linkjes naar nieuws, reviews, meukjes, blogs etc., beter bekend als 'de tracker'. In de NGv2 update van juli 2008 werd deze tracker grijs om zo meer op de content dan de tracker te focussen.

ZOMG, teh drama
Vrijwel meteen werd in het meningen-topic van de nieuwe layout de nodige CSS met elkaar gedeeld om de tracker toch weer wit te krijgen. Een week later kwam er van de kant van Tweakers.net een update met een 'high contrast' versie van de tracker.

Allemaal leuk en aardig, maar daar had ik m'n witte tracker nog niet mee terug. In ieder geval niet zonder afhankelijk te moeten zijn van browser-plugins zoals Stylish, of voor een My.Tweakers.net Full-abonnement te moeten betalen om zo te kunnen beschikken over een custom stylesheet-mogelijkheid. Begin 2009 werd ik dan toch abonnee en in maart kwam de custom stylesheet-mogelijkheid voor iedereen beschikbaar met de introductie van de karmastore.

Variatie op variatie
Een leek zal zeggen: 'ach, tracker wit maken, dat is toch achtergrondkleurtje aanpassen en klaar'. Was het maar zo makkelijk, al zit hier wel een kern van waarheid in, de achtergrondkleur moet wel degelijk naar wit aangepast worden. Verder heeft de tracker een hele stapel variaties waar je rekening mee moet gaan houden als je hem aan wilt gaan passen.

Zo is lichtgrijze tekst op wit slecht te lezen, ook de muis over de tracker heen bewegen levert een wat lichtere tekst op. Dit is op een donkere achtergrond geen probleem, maar op wit valt je tekst dus weg. Ook het resizen van de tracker op 1152px, 1100px en 1024px is iets waar rekening mee gehouden moet worden, helemaal als je het 'uitklappen' op de lagere resoluties uit wilt schakelen, maar wel het veranderen van breedte wilt behouden.

Ook de door Tweakers.net geïntroduceerde hoge contrast-versie kan je natuurlijk behouden. Maar het naar rechts verplaatsen en het in hoog contrast naar rechts verplaatsen zijn weer extra variaties waar je tegen aanloopt als je je met je custom stylesheet uitleeft.

Show me the magic
Om de ronde kant te behouden, die nu nog bovenin zit, verplaatsen we deze naar beneden, de tracker zelf iets omhoog om zo het grijze randje van de channelkeuzeknoppen er boven teniet te doen. De channelkeuzeknoppen worden in dit geval volledig verborgen omdat ze via de navigatie bovenin ook te vinden zijn.
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
/* Tracker wit & ronde onderkant */
#utracker {
    background-color: #FFFFFF;
    background-image: url(http://tweakers.net/ext/f/aBuGvOlAocgEyYRLRtAbFCSH/full.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-bottom: 3px;
    padding-top: 0;
    margin-top: -8px;
}

/* Removing channel choices */
#channelNav {
    padding: 0 0 15px;
}
#channelNav fieldset,
#channelNav.hidden fieldset {
    height: 7px;
    padding: 0;
}
#channelNav ul {
    display: none;
}#utracker.foldout {
    background-color: #FFFFFF;
    z-index: 0 !important;
}
#utracker .trackeritem {
    background-color: #FFFFFF;
    padding-left: 12px;
}
#utracker.foldout .trackeritem {
    background-color: #FFFFFF;
}
#utracker .dummy {
    background-color: white;
    width: 227px;
}

#utracker .trackerbottom {
    display: none;
}

Natuurlijk moeten de koppen en linkjes keurig van elkaar gescheiden worden, een net stippellijntje is voldoende.
Cascading Stylesheet:
1
2
3
4
5
6
7
/* Trackeritems gestippelde lijnen */
#utracker ul li {
    border-bottom: 1px dotted #C8C8C8;
}
#utracker .trackeritem ul {
    border-top: 1px dotted #555555;
}
Zoals al eerder gezegd is een lichte tekst niet te lezen op een donkere achtergrond, ook de muis over de tracker zorgt nu niet meer voor een kleurverandering.
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
/* Trackeritems tekstkleuren */
#utracker ul li a,
#utracker.hct ul li a,
#utracker.foldout ul li a {
    color: #000000;
}
#utracker ul li a {
    outline-color: #444444;
}
#utracker ul li a.new,
#utracker.hct ul li a.new,
#utracker.foldout ul li a.new {
    color: #111111;
}
#utracker ul li a:visited,
#utracker.hct ul li a:visited,
#utracker.foldout ul li a:visited {
    color: #444444;
}
#utracker ul li a:hover,
#utracker ul li a.new:hover {
    color: #ED053E;
}

/* Trackeritems tussenkoppen tekstkleur */
#utracker .trackeritem h4 a,
#utracker.hct .trackeritem h4 a,
#utracker.foldout .trackeritem h4 a {
    color: #646464;
}
#utracker .trackeritem h4 a:hover,
#utracker.hct .trackeritem h4 a:hover,
#utracker.foldout .trackeritem h4 a:hover {
    color: #ED053E;
}

/* Trackeritems tekstkleur tijd & datum */
#utracker ul li a span.time, #utracker.hct ul li a span.time, #utracker.foldout ul li a span.time,
#utracker ul li a:hover span.time, #utracker.hct ul li a:hover span.time, #utracker.foldout ul li a:hover span.time {
    color: #777777;
}
#utracker ul li a.new span.time, #utracker.hct ul li a.new span.time, #utracker.foldout ul li a.new span.time,
#utracker ul li a.new:hover span.time, #utracker.hct ul li a.new:hover span.time, #utracker.foldout ul li a.new:hover span.time {
    color: #ED053E;
    font-weight: normal;
}
#utracker ul li a:hover span.caption,
#utracker.hct ul li a:hover span.caption,
#utracker.foldout ul li a:hover span.caption {
    color: #ED053E;
}

Met de witte achtergrond is de afbeelding voor de tracker-eigenschappen niet echt netjes met zo'n zwarte achtergrond. Gelukkig heeft de hoge contrast-versie van Tweakers.net een nette afbeelding om deze te vervangen.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Tracker eigenschappen afbeelding */
#utracker .trackeritem h4 img.tracker_button {
    background: #FFFFFF url(http://ic.tweakimg.net/g/if/v2/tracker/button_hct.gif) no-repeat -2px -2px;
    padding: 4px;
    top: 2px;
    width: 0;
    height: 0;
}
#utracker .trackeritem h4 img.tracker_button:hover {
    background-image:url(http://ic.tweakimg.net/g/if/v2/tracker/button_hct_mouseover.gif);
}
/* Tracher eigenschappen afbeelding met tracker rechts */
.trackerright #utracker .trackeritem h4 img.tracker_button {
    background-image: url(http://ic.tweakimg.net/g/if/v2/tracker/button_hct_right.gif);
}
.trackerright #utracker .trackeritem h4 img.tracker_button:hover {
    background-image: url(http://ic.tweakimg.net/g/if/v2/tracker/button_hct_right_mouseover.gif);
}

Tracker instellingen sprite Met de trackerinstellingsknoppen - direct boven de 'Website van het jaar'-award - moet hetzelfde gebeuren, omdat zo'n grijs/zwart randje om de afbeeldingen niet echt mooi staat.

Omdat dit 4 afbeeldingen zijn, met elk een eigen 'hover' en ik de tracker links en rechts en ook de hoge contrast-versie van elkaar laat een aparte hover geef, zit je op 10 losse afbeeldingen.

Deze tien heb ik netjes samengevoegd in een 'CSS sprite' (meer info over sprites) en hoef je alleen de positie van deze afbeelding per instellingsknopje aan te passen. Dit scheelt in laadtijd, omdat je maar 1 afbeelding binnen hoeft te halen in plaats van 4 en elke losse afbeelding als je met je muis er overheen gaat.
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
/* Tracker instellingen afbeeldingen padding-fix */
#tsChoices, #tsContrast, #tsPosition, #tsFixate {
    width: 0;
    height: 0;
    padding: 8px;
    margin: 4px 2px 8px;
    background-repeat: no-repeat;
    background-image: url(http://tweakers.net/ext/f/rmRs2fAOqMz0y34Tp5aSka2e/full.png);
}
#utracker img#tsChoices {
    background-position: 0px 0px;
    margin-left: 12px;
}
#utracker img#tsChoices:hover {
    background-position: 0px -21px;
}
#utracker img#tsContrast {
    background-position: 0px -42px;
}
#utracker img#tsContrast:hover {
    background-position: 0px -63px;
}
#utracker img#tsPosition {
    background-position: 0px -105px;
}
#utracker img#tsPosition:hover {
    background-position: 0px -126px;
}
#utracker img#tsFixate {
    background-position: 0px -189px;
}

Om de tracker op de lagere resoluties of kleinere vensterbreedtes ook de ronde onderkant te laten houden, niet uit te laten klappen, maar toch genoeg ruimte voor alle content te houden, wordt hier en daar een tussenkop iets naar links verplaatst.
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
/* Tracker op lagere resoluties */
.res1100 #utracker,
.res1100 #utracker.foldout {
    background-image: url(http://tweakers.net/ext/f/OwSG4be5yn0Y1XpFfU7QXhka/full.png);
    background-position: left bottom;
    background-color: #FFFFFF;
}
.res1100 #utracker,
.res1100 #utracker.foldout,
.res1100 #utracker .trackeritem {
    width: 190px;
}
.res1100 #utracker .dummy {
    width: 188px;
}
.res1024 #utracker,
.res1024 #utracker.foldout {
    background-image: url(http://tweakers.net/ext/f/6hflNWk7KaKelIZcW4uOLXH0/full.png);
    background-position: left bottom;
    background-color: #FFFFFF;
}
.res1024 #utracker,
.res1024 #utracker.foldout,
.res1024 #utracker .trackeritem {
    width: 140px;
}
.res1024 #utracker .dummy {
    width: 138px;
}

/* Tracker op lage resolutie - h4 koppen naar binnen */
.res1024 #utracker .trackeritem h4 {
    padding-left: 15px;
}
.res1024 #utracker .trackeritem h4 span.time {
    display: none;
}

/* Tracker op lage resolutie - trackerkeuze pijltje naar binnen */
.res1100 #utracker .trackeritem h4 img.tracker_button,
.res1024 #utracker .trackeritem h4 img.tracker_button {
    right: 12px;
}

Natuurlijk kan de tracker naar rechts verplaats worden, deze moet natuurlijk ook in het wit. De trackerinstellingsknoppen css voor als de tracker rechts staat, staan hier ook.
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
/* Tracker naar rechts verplaatst */
.trackerright #utracker {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-bottom: 0;
    padding-top: 4px;
    margin-top: -28px;
    background-image: none;
}
.trackerright #utracker .trackeritem {
    padding-left: 0;
}
.trackerright #utracker .trackeritem ul.ellipsis {
    width: 217px !important;
}

.trackerright #tsChoices, .trackerright #tsContrast,
.trackerright #tsPosition, .trackerright #tsFixate {
    margin: 4px 2px 1px;
}
.trackerright #utracker img#tsPosition {
    background-position: 0px -147px;
}
.trackerright #utracker img#tsPosition:hover {
    background-position: 0px -168px;
}

De tracker in hoog contrast teniet doen is ook zo nutteloos, dus die pas je ook naar eigen wensen aan, de trackerinstellingsknoppen voor deze variatie staan ook hier, dit om alle CSS voor de hoge contrastversie netjes bij elkaar te houden.
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
/* Tracker met hoog contrast */
#utracker.hct,
#utracker.hct.foldout {
    background-image: none;
    background-color: transparent;
    background-position: left top;
    margin-top: 6px;
}

#utracker.hct .dummy {
    border: 1px dashed #E4E4E4;
    margin-left: -1px;
    margin-right: -1px;
    background-color: transparent;
}
.res1100 #utracker.hct {
    background-image: url(http://ic.tweakimg.net/g/if/v2/tracker/top_medium.png);
}
.res1100 #utracker.hct, .res1100 #utracker.hct .trackeritem {
    width: 186px;
}
.res1024 #utracker.hct, .res1024 #utracker.hct .trackeritem {
    width: 136px;
}
.res1024 #utracker.hct {
    background-image: url(http://ic.tweakimg.net/g/if/v2/tracker/top_narrow.png);
}
#utracker.hct .trackeritem {
    padding-left: 0;
}
#utracker.hct .trackeritem,
#utracker.foldout.hct .trackeritem {
    background-color: #EDEDED;
}
#utracker.hct .trackeritem h4 img.tracker_button,
#utracker.hct .trackeritem h4 img.tracker_button:hover {
    background-color: #DCDCDC;
}
#utracker.hct .trackeritem h4 img.tracker_button {
    top: 5px;
}
.res1100 #utracker.hct .trackeritem h4 img.tracker_button,
.res1024 #utracker.hct .trackeritem h4 img.tracker_button {
    right: 5px;
}
#utracker.hct img#tsChoices, #utracker.hct img#tsContrast,
#utracker.hct img#tsPosition, #utracker.hct img#tsFixate {
    margin: -3px 2px 6px;
}
#utracker.hct img#tsChoices {
    margin-left: 12px;
}
#utracker.hct img#tsContrast:hover {
    background-position: 0px -84px;
}
#utracker.hct img#tsFixate {
    background-image: url(http://tweakimg.net/g/if/v2/tracker/fixate.gif);
    background-position: 0px 0px;
}
#utracker.hct img#tsFixate:hover {
    background-image: url(http://tweakimg.net/g/if/v2/tracker/fixate_mouseover.gif);
}

Als laatste mogelijkheid blijft dan over, de tracker in hoog contrast aan de rechterkant, gelukkig staat hierboven alles al bij elkaar en hoeft er maar weinig extra aangepast te worden.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
/* Tracker met hoog contrast naar rechts verplaatst */
.trackerright #utracker.hct {
    background: none;
    margin-top: -30px;
    padding-top: 0;
}
.trackerright #utracker.hct .trackeritem ul.ellipsis {
    width: 210px !important;
}

Kan dat niet makkelijker?
Natuurlijk is het onbegonnen werk om alles wat hierboven staat naar je eigen stylesheet te moeten gaan kopiëren en het enige wat je helemaal boven in je custom stylesheet in de karmastore hoeft te zetten is het volgende:
Cascading Stylesheet:
1
@import url('http://wiethoofd.info/css/tracker.php');

N.B.: Gebruik op eigen risico! Mocht je tegen foutjes aanlopen, dan deze graag via Direct Message doorgeven.
N.B.: Stylesheet werkt in IE7 en hoger, maar deze ondersteund geen -moz-border-radius, border-radius of -webkit-border-radius en zal dus geen afgeronde kanten maken.

Pics or it didn't happen
En dan nu de oude situatie, de NGv2-versie en de NGvW-versie.

Layout < juli 2008
NGv2 Layout < juli 2008
NGv2 Layout > juli 2008
NGv2 Layout > juli 2008
NGv2 Layout + Wiethoofd
NGv2 Layout + Wiethoofd
NGv2 - 1024px
NGv2 - 1024px
NGvW - 1024px
NGvW - 1024px
NGv2 - High contrast
NGv2 - High contrast
NGvW - High contrast
NGvW - High contrast
NGv2 - Tracker rechts
NGv2 - Tracker rechts
NGvW - Tracker rechts
NGvW - Tracker rechts
NGv2 - High contrast rechts
NGv2 - High contrast rechts
NGvW - High contrast rechts
NGvW - High contrast rechts
N.B.: Bovenstaande screenshots van NGvW zijn gemaakt met extra tweaks in de custom stylesheet!

Volgende: Overbodige meuk 06-'10 Overbodige meuk
Volgende: Koude voeten 05-'10 Koude voeten

Reacties


Door Tweakers user AW_Bos, maandag 31 mei 2010 20:42

Nice 'hacks' ;)
Waarom solliciteer je eigenlijk niet bij T.net :P

[Reactie gewijzigd op maandag 31 mei 2010 21:34]


Door Tweakers user Afvalzak, maandag 31 mei 2010 20:46

AW_Bos schreef op maandag 31 mei 2010 @ 20:42:
Nice 'hacks' ;)
Waarom solliciteer jeeigenlijk niet bij T.net :P
Omdat hij hen duurgemaakte lay-out gewoon weer terug zet naar de oude versie;)

Door Tweakers user Roytoch, maandag 31 mei 2010 20:47

afvalzak schreef op maandag 31 mei 2010 @ 20:46:
[...]


Omdat hij hen duurgemaakte lay-out gewoon weer terug zet naar de oude versie;)
Haha inderdaad ;) zo zie je trouwens wel hoe persoonlijk het is want ik vindt die grijze tracker juist heel fijn, juist omdat ie wegvalt in de achtergrond. Nevertheless goed bezig!

Door Tweakers user RoadRunner84, maandag 31 mei 2010 21:15

Gaat NGv2+wiethoofd niet verkeerd als de tracker langer is dan de content? Of kan dat niet?

Door Tweakers user Wiethoofd, maandag 31 mei 2010 21:19

RoadRunner84 schreef op maandag 31 mei 2010 @ 21:15:
Gaat NGv2+wiethoofd niet verkeerd als de tracker langer is dan de content? Of kan dat niet?
Dat gaat gewoon goed hoor ;)

Door Tweakers user CodeCaster, maandag 31 mei 2010 21:31

Wa voor kleur tracker hedde gai?

Door Tweakers user 90710, maandag 31 mei 2010 22:07

Misschien moet je ook nog even de échte border-radius toevoegen, want nu werkt het in Opera niet en Opera wil graag échte standaard code.

Door Tweakers user Wiethoofd, maandag 31 mei 2010 22:08

sanderev66 schreef op maandag 31 mei 2010 @ 22:07:
Misschien moet je ook nog even de échte border-radius toevoegen, want nu werkt het in Opera niet en Opera wil graag échte standaard code.
Ah, ik wist niet of die al officieel door browsers ondersteund werd, zal em even toevoegen :)

Door Tweakers user 90710, maandag 31 mei 2010 22:10

Mooi, dan hoef ik het zelf niet te doen :+
Ik vind dit een stuk beter leesbaar dan die grijze versie, thx Wiethoofd!

[Reactie gewijzigd op maandag 31 mei 2010 22:10]


Door Tweakers user JW1, dinsdag 1 juni 2010 09:35

Heb je ook de oude Tweakers-layout nog (van rond 2001)?
Die wil ik wel weer hebben eigenlijk.

Reageren is niet meer mogelijk