Maar ik wil het normaler zien: gewoon zoals alle nieuwsberichten. Denk bijv aan de titels vervang: vandaag voor al het gamesnieuws ((incl. gisteren e.v. bijv max 10 berichten met tabs voor berichten 11 e.v. - de meeste bezoekers bezoeken Tweakers toch dagelijks wat nu wordt opgevuld blijft met oude al gelezen berichten zelfs van vorige week) en de zondag alle andere nieuwsberichten. Zo heb je nog steeds al het gamenieuws bij elkaar, maar mis je ook niets van het overige nieuws. En heb je de channel look & feel van games. Dan zou ik zo dat channel als startpagina maken.quote:crisp schreef op dinsdag 08 juli 2008 @ 00:55:
[...]
In feite zijn daar in meer of mindere mate ook de trackers voor bedoelt, die zijn immers site-wide
Het is overigens maar een idee. Ik weet niet of het werkt. Het zou het in ieder geval voor mij de oplossing zijn om de channel overstap te maken. Doe er mee wat je wil.
Holoris wijzigde dit bericht 08-07-2008 01:10 (32%)
CSS kent meerdere profiles, met het CSS3 profile zijn er feitelijk geen errors (vendor-specific/experimental properties horen geen error te zijn).quote:DaitoX.nl schreef op maandag 07 juli 2008 @ 19:28:
[...]
Hij is trouwens niet error vrij in de W3C CSS Validator
Veel dank aan Geertttt voor het concept, wat ik vervolgens heb uitgebouwd
alles.user.js
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| // ==UserScript==
// @name Tweakers new layout fixes
// @exclude http://tweakers.net/
// @include http://tweakers.net*
// @author cygnusx & rogierslag
// ==/UserScript==
(function() {
var css = "@namespaceurl(http://www.w3.org/1999/xhtml); div#utracker { background-color: white !important; padding-bottom: 3px !important; top: 100px !important; } div#utracker * { background-color: white !important; } div#utracker div { margin-left: 13px !important; } #channelNav { background-image: none !important; height: 1px !important; overflow: hidden !important; } #utracker .trakeritem h4 a { color: black !important; } #utracker ul li { border-bottom:1px dotted #C8C8C8 !important; } #header { margin-left: 13px !important; margin-right: 13px !important; } #header div.hr { display: none !important; } #contentWrapper { padding-right: 14px !important; padding-left: 25px !important; } .widearticle .sidebar { width: 300px !important; } #utracker ul li a { color:#444444 !important; } #utracker .trackeritem h4 a { color:#646464 !important; } /* 'Onnodige' witruimte bovenin weg*/ .columnwrapper { padding-top:0px !important; } body { background: none !important; } #utracker .trackeritem ul { border-top:1px dotted #555555!important; } #utracker ul li a.new { color:#111111!important; } #utracker ul li a.new span.time { color:#B22447!important; font-weight: normal !important; } .frontpage .content { width:437px!important; } div#contentBottom a { margin: 0px !important; } div#contentBottom a img { margin-top: 5px !important; margin-left: 35px !important; position: relative !important; left: 20px !important; top: 0 !important; } div#contentBottom a:first-child img { margin-top: 18px !important; margin-left: -20px !important; left: 0 !important; } div#contentBottom ul, div#contentBottom p, div#contentBottom b { position: relative !important; left: 20px !important; top: 0 !important; } #utracker.foldout ul li a:hover, #utracker.foldout ul li a:hover span.time, #utracker.foldout .trackeritem h4 a:hover { color:#b22447 !important; } .res1024 div.content { width:500px !important; overflow: visible !important;} .res1024 div#contentBottom a img { left: 0px !important; } .res1024 div#contentBottom a:first-child img { margin-left: 0px !important;} .sidebar {width:200px !important;z-index:5 !important;} #contentArea {padding-left: 210px !important; margin-left:0px !important;} .res1024 #utracker {width: 212px !important;z-index: 20 !important;background-color: white !important;} .res1024 #utracker.foldout {width: 212px !important;z-index: 20 !important;background-color: white !important;} #contentBottom{background: white !important;} #channelNav {background: white !important;} .reacties * {z-index:1000 !important;} ";
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
heads[0].appendChild(node);
}
}
})(); |
en specifiek voor de frontpage
frontpage.user.js
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // ==UserScript==
// @name Minder hoge reviewbalk
// @author cygnusx & rogierslag
// @include http://tweakers.net/
// ==/UserScript==
(function() {
var css = "@namespaceurl(http://www.w3.org/1999/xhtml); div#utracker { background-color: white !important; padding-bottom: 3px !important; top: 100px !important; } div#utracker * { background-color: white !important; } div#utracker div { margin-left: 13px !important; } #channelNav { background-image: none !important; height: 1px !important; overflow: hidden !important; } #utracker .trakeritem h4 a { color: black !important; } #utracker ul li { border-bottom:1px dotted #C8C8C8 !important; } #header { margin-left: 13px !important; margin-right: 13px !important; } #header div.hr { display: none !important; } #contentWrapper { padding-right: 14px !important; padding-left: 25px !important; } .widearticle .sidebar { width: 300px !important; } #utracker ul li a { color:#444444 !important; } #utracker .trackeritem h4 a { color:#646464 !important; } /* 'Onnodige' witruimte bovenin weg*/ .columnwrapper { padding-top:0px !important; } body { background: none !important; } #utracker .trackeritem ul { border-top:1px dotted #555555!important; } #utracker ul li a.new { color:#111111!important; } #utracker ul li a.new span.time { color:#B22447!important; font-weight: normal !important; } .frontpage .content { width:437px !important; } div#contentBottom a { margin: 0px !important; } div#contentBottom a img { margin-top: 5px !important; margin-left: 35px !important; position: relative !important; left: 20px !important; top: 0 !important; } div#contentBottom a:first-child img { margin-top: 18px !important; margin-left: -20px !important; left: 0 !important; } div#contentBottom ul, div#contentBottom p, div#contentBottom b { position: relative !important; left: 20px !important; top: 0 !important; } #utracker.foldout ul li a:hover, #utracker.foldout ul li a:hover span.time, #utracker.foldout .trackeritem h4 a:hover { color:#b22447 !important; } .res1024 div.content { width:300px !important; overflow: visible !important;} .res1024 div#contentBottom a img { left: 0px !important; } .res1024 div#contentBottom a:first-child img { margin-left: 0px !important;} #contentArea {padding-left: 210px !important; margin-left:0px !important;} .res1024 #utracker {width: 212px !important;z-index: 20 !important;background-color: white !important;} .res1024 #utracker.foldout {width: 212px !important;z-index: 20 !important;background-color: white !important;} #contentBottom{background: white !important;} #channelNav {background: white !important;} .reacties * {z-index:1000 !important;} div.announcementBigBackground { height: 135px !important; } div.announcementBigContent, div.announcementBigBox { top: 15px !important; } div.tabItemBig { height: 135px !important; }";
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
heads[0].appendChild(node);
}
}
})(); |
Ik heb het trouwens specifiek voor Opera geschreven en niet getest in Firefox, dus mocht er ergens een error instaan in Firefox, meldt het dan maar. Alles geef ik vrij onder de GPL ofzo dus geniet ervan
Known issues:
* er zit nog een fout in de CSS waardoor er bij de hover op de tracker een grijs balkje onder het logo verschijnt.
* werkt mogelijk niet bij alle onderdelen van T.net (oa BBG komt de sidebar eronder te staan)
* de ... in de tracker doet t niet
Persoonlijk vind ik dit wel een leuke, de scheiding trackers - content mag wat mij betreft nog wel wat duidelijkerquote:geerttttt schreef op maandag 07 juli 2008 @ 18:19:
Voor de mensen die dus commentaar hebben op de layout, ik ben bezig met een paar layoutaanpassingen.
Via de link hieronder kun je gemakkelijk deze zelf ook toepassen indien je firefox hebt. Ik zal deze ook updaten aangezien hij nog niet 100% af is. Toch is het in mijn ogen al een stuk beter en rustiger dan dat het nu is
Check het op: http://userstyles.org/styles/8630
Wind me up, put me down, start me off and watch me go
I'll be running circles around you sooner than you know
A little off center and I'm out of tune
Just kicking this can along the avenue
But I'm alright
Niet erg, maar het ging om de meningen.
Verder heb ik nu de reviews gevonden die high-rated zijn, maar mist het .plans gedeelte weer onder de polls als je op een core/games/pro/mobile etc. gedeelte van de site zit.
Ik heb net ook gezien dat het contrast in de tracker is aangepast en maakt de mouseover oplichting eigenlijk overbodig, miss dat die nu geschrapt kan worden.
Ook nu met een in dit topic genoemde tweak de 5 channelknoppen 'verwijderd' en de review'banner' verkleind.
::: Productreviews ::: Sysspecs ::: T-Gallery ::: Website :::
ironisch genoeg gebruik je wel firefox-specifieke greasemonkey code die gelukkig ook werkt in opera. In firefox zal het dus ook wel werkenquote:rogierslag schreef op dinsdag 08 juli 2008 @ 02:52:
Ik heb het trouwens specifiek voor Opera geschreven en niet getest in Firefox, dus mocht er ergens een error instaan in Firefox, meldt het dan maar. Alles geef ik vrij onder de GPL ofzo dus geniet ervan
Thanks, stuk beter zo, dat reviews stuk is veel te groot.quote:geerttttt schreef op maandag 07 juli 2008 @ 22:44:
Aangezien veel mensen het reviewvak rechtsbovenin te groot vonden heb ik daar ook even een 'fix' voor geschreven. Te vinden op de pagina hieronder vermeld:
[afbeelding] [afbeelding]
Check het hier: http://userstyles.org/styles/8638
Phyxion.net | 'Liefde maakt vaak droef tot ziek aan toe, maar 'k merk er weinig van, tot nu toe.' - Herman Finkers | 'You look like a gay cowboy and you look like a gay terrorist.' - James May
Verder is de layout in ieder geval al een stuk consistenter, logischer en strakker dan voorheen.
Why don't you go poke the plant for a while.
standaard niet die 5 knoppen laten zien (en je dus in een oogopslag alles kan lezen).
en als je op het "v"tje klikt dat de 5 knoppen uitklappen (voor de gene die het gebruiken (is daar al onderzoek naar gedaan?)).
Darkmortar Lvl70 ShadowPriest @ Draenor \\ Canon EOS 350D + Sigma 18-50mm EX F2.8 \\ website: AngeloMichel.nl
Inderdaad, complimenten! (En thank god for Firebugquote:crisp schreef op dinsdag 08 juli 2008 @ 01:02:
Overigens doet het me ergens wel een beetje plezier om te zien hoe mensen hier de layout naar eigen smaak verbouwen; het geeft immers aan dat we wat betreft scheiding van content en opmaak weer een goed resultaat hebben neergezet
Sowieso vind ik de algemene looks wel goed. De vormen rond de header en tracker zijn leuk
Ik heb geexperimenteerd met een andere kleur tracker (zie bv. het rooie monster boven) en kwam er al snel genoeg achter dat het bepaald niet triviaal is een set kleuren te vinden die er niet heel raar uitziet of leesbaarheidsproblemen geeft.
De CSS aanpassingen die ik nu heb zijn:
- Geen rubriekknoppen (nutteloos en kost tracker ruimte)
- Top en bottom padding in tracker items naar 1px (meer items op scherm vind ik fijn)
- Knoppen van reviews en features weggehaald, aantal items op 10 gegooid.
- Tracker kleuren altijd in highlighted mode, zodat het leesbaar is en niet gaat dansen zodra ik er met mijn muis over beweeg.
Voor de zelfklussers zijn verder alleen de plaatjes lastig (in de tracker met name de instelknoppen en de rondingen bovenaan, en als je met de rubriekknoppen rommelt moet je alle achtergronden daarvan apart fixen).
En ik ben er nog niet uit hoe er voor wordt gezorgd dat de top van de tracker op de goeie hoogte komt, afhankelijk van hoeveel (0+) categorie knoppen je hebt.
Hij schaalt zelfs mee als ik de knoppen minder hoog maak, maar wel alleen bij een refresh?
In deeze zin staan drie fauten
Wat is een neger achter een piano? - Een pianist
Femme wijzigde dit bericht 08-07-2008 15:02 (9%)
edit:
Het liefste minimaliseerbaar + dat deze keuze opgeslagen wordt in cookies of preferences.
Kixtart wijzigde dit bericht 08-07-2008 15:10 (14%)
Direct Message is an easy way to come into contact with me :w
Exact zo was het al geimplementeerd tegen de tijd dat jouw reactie er stond.quote:Kixtart schreef op dinsdag 08 juli 2008 @ 15:08:
Eigenlijk vind ik alles wel mooi en het is vooral gewenning, maar alleen die rubriekknoppen vind ik niet bij de stijl passen en ik zou het liefste willen zien dat deze minimaliseerbaar is (via onderkant T.net logo misschien). Deze mening hierover is mede gevormd doordat ik toch altijd de index gebruik om nieuwsberichten te zien
edit:
Het liefste minimaliseerbaar + dat deze keuze opgeslagen wordt in cookies of preferences.
En ondertussen staat het live met dank aan Tino's kluswerk.
[13:34:02] <baa> maar fbsd schijnt nog steeds hopeloos schijnt
Direct Message is an easy way to come into contact with me :w
Without order nothing can exist - without chaos nothing can evolve
Never forget that only dead fish swim with the stream
Mijn eerste indruk was: 'wow, professioneel!'.
Wel zijn er nog enkele dingetjes waar ik me (en misschien anderen zich ook?) aan stoor:
- Het lichtgrijze vlak. Dit zorgt voor minder contrast en extra 'drukte' tussen de achtergrond en de site zelf. Ook zorgt dit voor minder contrast bij de tracker, vooral met de grijze letters. Het is slecht te lezen.
- De vijf knoppen onder het logo doen enigzins vreemd aan. De categorieën 'core' en 'pro' zijn niet tastbaar, terwijl 'games' etc. dat wel zijn. Ook is dit dubbelop, het frontpage menu bovenin staat namelijk standaard al open. Hierdoor werkt het alleen maar verwarrend, en heeft het geen reden om te bestaan.
- De lichtgrijze 'uitsnede' bij de tracker. Dit zorgt ervoor dat de pagina visueel veel zwaarder is (vooral met de nieuwe, grote afbeeldingen bij reviews & features) aan de rechterkant, dan aan de linkerkant. Hierdoor helt het over, en oogt het onstabiel. Liever zou ik de tracker ook met een witte achtergrond zien.
- De horizontale lijnen in de tracker. Leuke gimmick door het weglaten van een margin links, maar dit doet erg old-school aan en maakt het geheel drukker. Door het gebruik van witruimte kan het oog de regel ook volgen zonder dat de lijn zichtbaar is. Het liefst zie ik geen lijnen tussen de onderdelen (alleen een onder de titel), met extra witruimte tussen de blokken zelf. Dit maakt het geheel wat rustiger.
- Voor de horizontale lijnen in de nieuwsoverzichten zelf geldt hetzelfde. Ook hier doet het old-school aan, en waar het 'vroeger' nodig was doordat er weinig ruimte was voor alles, wordt er nu voldoende gebruik gemaakt van witruimte, en kunnen de tussenliggende lijnen weg; ze hebben geen functie meer.
- Als de bovenstaande 2 wijzigingen doorgevoerd zouden worden, dan oogt het fijner om bij de 'action' blokken rechts van een nieuwsbericht, de lijn onder de titel te zetten (in plaats van erboven), met een beetje extra witruimte tussen de blokken zelf. Dit oogt lekker rustig.
- De tekstkleur in de tracker. Als de achtergrond dan toch grijs moet, dan zie ik de tekst liever iets helderder wit. Inverted is niet bijzonder prettig om te lezen, maar het is fijner dan grijs op grijs.
- De knoppen onder de reviews & features slaan de plank een beetje mis. Ten eerste is het dubbel op, samen met de genummerde tabs die er boven staan. Het is helaas wel zo dat howel de tabs hun functie duidelijk maken, doen de knoppen dit niet; ze staan compleet los van zowel elkaar als hetgeen wat ze doen. Daarnaast duurt het ook nog eventjes wanneer je resultaat ziet als je met je muis er overheen gaat. Handiger is misschien om de tabbladen niet genummerd, maar met een keyword te vullen. Dus in plaats van '1, 2, 3, 4, 5, 6' in de tabs en 'Starcraft II, Uitslag tweede ronde overklokwedst..., Top Spin 3 review, Tweakers.net Best Buy Guide: editie..., etc.' in de knoppen, zie ik liever enkel tabs met bijvoorbeeld: 'Starcraft II, OC-wedstrijd (2e r), Top Spin 3, Best Buy Guide, LG L206WU, P45 deel 4'.
- Ik snap de functie van de gekrompen balk onder het topmenu niet zo. Ten eerste lijnt 'ie alleen uit met het zoekveldje en niets anders en ten tweede maakt het het menu een stuk drukker. Deze zie ik liever weg (of heeft dit een functie die ik nog niet ontdekt heb?). edit: ah, ter afbakening van de secties. Ik zou toch liever die balk weg zien, het is al zeer duidelijk mbt. de kleuren van de titels, of anders in ieder geval even breed als het hele blok.
- Dat er veel witruimte is gebruikt is fijn. Dit maakt het helder en overzichtelijk. Wel is het jammer dat niet alles even zorgvuldig is uitgelijnd, en er plekken zijn waar de witruimte een beetje 'squashed' lijkt. Bijvoorbeeld aan de bovenkant; het is echt zo erg niet om extra witruimte boven en onder het hele menu + logo te gebruiken, men zal de pagina toch altijd moeten scrollen. Zelfs met een scherm-hoogte van 768px is er dan nog voldoende inhoud aanwezig, zonder dat de bovenbalk gaat overheersen.
- Ik mis een klein, snel inlog veldje ergens bovenaan elke pagina. Zoiets is aan de ene kant een beetje dubbelop. Aan de andere kant, is het een fijne, snelle manier om in te loggen; iets wat je al snel direct wilt doen wanneer je dat niet bent, al is het alleen maar om voordeel uit je eigen instellingen te trekken. En je hoeft het alleen te zien wanneer je nog niet ingelogd bent. Nu heb je er nog twee extra handelingen voor nodig (eerst mousover my tnet, en vervolgens klikken op 'inloggen'); maak het inloggen zo gemakkelijk mogelijk (net als het registreren trouwens).
- De tracker links wordt wel érg smal wanneer de breedte van het venster smaller wordt. Het lijkt me handiger om, in dat geval, de content de ruimte te geven en de tracker helemaal in te laten klappen. Of misschien dat de tracker onder de content komt, in rijen van 2 of 4? Het liefst zie ik dat de tracker sowieso uitgeschakeld kan worden, zelf gebruik ik 'm niet (heb het nu alleen aan staan voor de screenshots).
Dat was het wel zo'n beetje. Het is niet veel, het zijn vooral kleine dingetjes; maar in mijn ogen zouden het de 'finishing touches' zijn op het ontwerp.
Ik krijg het maar niet voor elkaar om op userstyles.org een domein of regexp in te stellen voor een style, dus dan maar met een paar screenshots een paar van de dingen die ik bedoel proberen weer te geven:
(origineel en aangepast)
Achteraf gezien kan die lichtgrijze 'vlak' waar de pagina op ligt best wel blijven, mits de tracker in de normale pagina opgenomen wordt; het zorgt icm. de achtergrondkleur er dan voor dat de pagina er meer uit springt, in plaats van dat het onstabiel wordt. En het mag er best uit springen, het is immers tweakers.net.
Ik geef heu.. voor de functionaliteit een 9 en voor het uiterlijk een 8,5. Nice job, guys!
DiSiLLUSiON wijzigde dit bericht 08-07-2008 16:36 (4%)
Reden: Het kan zijn dat ik dingen noem die al genoemd zijn, maar gezien de aard van dit topic lijkt me dat niet heel erg.
Geweldig!!!quote:ACM schreef op dinsdag 08 juli 2008 @ 15:56:
[...]
Exact zo was het al geimplementeerd tegen de tijd dat jouw reactie er stond.
En ondertussen staat het live met dank aan Tino's kluswerk.
Oe, oe! Is niet meer!quote:The Killer schreef op maandag 07 juli 2008 @ 18:14:
Ander klein dingetje, in de nieuwe balkjes onder Reviews en Features, wordt het geselecteerde balkje grijs, en de tekst wordt onderstreept, ook een beetje dubbelop, zeker omdat ze niet tegelijkertijd verschijnen. (Het onderstreepje en de balkverkleuring)
But I'm Not A Soldier
Daarnaast vond ik het contrast in de tracker eigenlijk veel te laag, zelf heb ik dat nu aangepast naar een zwart/wit. Wel jammer is de icoontjes die er dan niet meer uitzien, maar die heb ik maar uitgezet, je gebruikt ze toch amper. Het oplichten van de tracker heb ik er helemaal uitgehaald, het enige dat nu nog verandert is dat bij een nieuw artikel de tijd dikgedrukt wordt en gekleurd is. Vrij subtiel, maar toch duidelijk genoeg vind ik.
Atomen bestaan uit ruimteschepen
Oeh, roze, i likequote:
DiSiLLUSiON wijzigde dit bericht 08-07-2008 16:48 (14%)
Reden: tenminste? immers! ik moet m'n nederlands bijschaven
Kan dat niet op basis van de vorige tracker?quote:Femme schreef op dinsdag 08 juli 2008 @ 15:00:
Als het met relatieve weinig ingrepen is de implementeren wil ik een lichtgrijze variant wel als optie inbouwen.
Voordeel is dan ook dat de rubriekknoppen beter aansluiten bij de rest van de layout
MariekeRoze voor in het weekend?
In deeze zin staan drie fauten
Wat is een neger achter een piano? - Een pianist
Dat roze is omdat ik het Mariekeroze theme weer terugwilde, maar daar gaat het op zich niet om, die kleurtjes zijn nog wel aan te passen. Het was voornamelijk de zijbalk. Daarbij hoogcontrast is toch het fijnste.quote:DiSiLLUSiON schreef op dinsdag 08 juli 2008 @ 16:45:
[...]
Oeh, roze, i likeMaar ik mis een zonnebril op Henk, 't is tenminste zomer
Atomen bestaan uit ruimteschepen
Pagina: 1 2 3 4 5 6 7 8 9 10 last
Dit topic is gesloten.



