Tweakers 7 iets beter maken.

Door sanderev66 op vrijdag 19 oktober 2012 22:45 - Reacties (13)
Categorie: -, Views: 2.683

Hallo mensen,

Vandaag een post eens niet over mij of MicroSE. Nee, ik heb het vandaag over de site die we allemaal geweldig vinden. Namelijk deze. Man, man, man, wat is deze nieuwe layout een ramp. Werkelijk, wat dachten ze nou? Dat tweakers niet genoeg buiten komen en achter hun computerschermen een bruin kleurtje moeten krijgen?

Deze hoeveelheid wit mag drastisch naar beneden gehaald worden.

Daarom heb ik maar een Opera userjs bestand gemaakt. Ik zeg dan wel voor Opera, maar ik denk dat hij in andere browsers ook gewoon werkt als je daar user js kan inlezen.

Wat heb ik allemaal aangepast?

1. Overbodige balken bovenin de FP verborgen. (Categoriën en die plaatjes)
2. Highlights op de FP verborgen.
3. Het notificaties ballonetje verborgen.
4. MyReact aan je gebruiker dropdownmenu toegevoegd.
5. GoT Henk op het forum zichtbaar gemaakt

6. De achtegrond aangepast (nog steeds licht, maar niet wit)
7. Dit alles instelbaar gemaakt.

edit:
8. De kleur van de titelbalk is aanpasbaar.
9. Tracker vastzetten rechts van de FP.

Dit alles heb ik samengevoegd tot 1 mooie js file.
http://pastebin.com/Kw1q2ccM

Sla dit op als user.js in een nieuwe map. Geef daarna in Opera aan dat je in die map user-javascript bestanden opgeslagen hebt. (Preferences > Advanced > Content > Javascript options)

http://tweakers.net/ext/f/VxhEjtn5DXhzLbg3ZEoXy6we/medium.png

Je ziet geen ads omdat ik een abbo heb

Have fun.

@Tweakers devvers die meelezen. Jullie hebben veel werk verzet om deze site te vernieuwen. Ik hoop dat ik jullie zo kan helpen om het beter te maken.

p.s.: nu kan ik eindelijk aan het nieuwe design van mijn eigen site gaan werken. Een design met heel weinig wit.

10-'12 De toekomst van de PC deel 2
10-'12 MicroSE Connect 1.5 BETA 1.4.9.4

Reacties

Door Gish, vrijdag 19 oktober 2012 23:11

Werkelijk Sander, dit is je eerste post op tweakblogs waar ik ook écht wat aan heb xD

Nee serieus, ik heb nu al een ander custom css, maar vind deze nog even wat prettiger ogen. Enige wat ik ook bij jou mis: Waar is die verdomde tracker nou

Door sanderev66, vrijdag 19 oktober 2012 23:15

Ik gebruik de tracker niet zo, maar ik kan ff kijken of ik wat voor je kan betekenen

Momenteel moet je de tracker nog gewoon links of rechts fixeren.

[Reactie gewijzigd op vrijdag 19 oktober 2012 23:24]

Door Gish, vrijdag 19 oktober 2012 23:36

Imo zou het bijvoorbeeld prima zijn dat bijvoorbeeld het stukje pricewatch naar beneden gaat en dat 'banen' en 'nieuwsbrief' exit zijn. Dat moet vast kunnen? Dan kan de tracker daarboven lijkt me. Ik ben echt een leek in CSS en weet niet of dat mogelijk is, maar dat zou een optie zijn.

Door i-chat, vrijdag 19 oktober 2012 23:37

kun je dit ook in een firefox extention gieten, dan ben ik je eeuwig nu ja, HEEL erg dankbaar...

maar idd liefst wel MET tracker... in css lijkt het namelijk niet te werken als je scherm te klein is...

[Reactie gewijzigd op vrijdag 19 oktober 2012 23:38]

Door sanderev66, zaterdag 20 oktober 2012 09:21

Gish schreef op vrijdag 19 oktober 2012 @ 23:36:
Imo zou het bijvoorbeeld prima zijn dat bijvoorbeeld het stukje pricewatch naar beneden gaat en dat 'banen' en 'nieuwsbrief' exit zijn. Dat moet vast kunnen? Dan kan de tracker daarboven lijkt me. Ik ben echt een leek in CSS en weet niet of dat mogelijk is, maar dat zou een optie zijn.

Met alleen maar CSS gaat dat idd niet, maar JS+CSS (wat ik dus doe) moet dat wel kunnen.

Maar helaas loop ik nu nog tegen het probleem wat i-chat meld. Maar ik ben al bezig om tweakers-eigen javascripts te debuggen.

Door Gish, zaterdag 20 oktober 2012 09:51

I like! Ik wacht rustig af xD

Door sanderev66, zaterdag 20 oktober 2012 09:57

Openen/sluiten van de tracker:

JavaScript:

`1`	`PopupGenerator.get('trackerPopup').show(document.getElementById('trackerPopupButton'), true);`

Kijk, dit is een stap in de goede richting.

Deze code bouwt de tracker op in een de volgende popup div:

JavaScript:

`1`	`$('.popup.trackerPopup');`

Deze kan je dan vastzetten met de volgende jQuery:

JavaScript:

`1`	`$('.popup.trackerPopup').addClass('fixed');`

De rest is CSS

[Reactie gewijzigd op zaterdag 20 oktober 2012 10:07]

Door Timons106, zaterdag 20 oktober 2012 10:40

Serieus, waarom zijn er zoveel Tweakblogs geschreven over de nieuwe lay-out? Eén blog was wel genoeg geweest

(niet direct een aanval op jou, Sander

).

En is het werkelijk zo erg allemaal? Ik vindt de nieuwe lay-out wel mooi, je moet alleen wat vaker klikken om op de pagina te komen waar je wilt komen.

Door sanderev66, zaterdag 20 oktober 2012 10:53

Tja, het is een kwestie van smaak

Anyway, ik heb de JS aangepast zodat de tracker naast de FP getoond wordt. Dit werkt enkel op de FP.

http://pastebin.com/Kw1q2ccM

Trouwens, als je in Opera ook de userjs op HTTPS pagina's wilt gebruiken moet je deze optie aanzetten:
opera:config#UserPrefs|UserJavaScriptonHTTPS

[Reactie gewijzigd op zaterdag 20 oktober 2012 11:01]

Door Gish, zaterdag 20 oktober 2012 19:58

Okay, tnx! Ik ga vanavond even kijken. Nice

Door sanderev66, zondag 21 oktober 2012 18:50

En er is een update van de JS, voor het tonen van de tracker haal ik 'm nu op via AJAX en wordt hij aan de pagina toegevoegd (thx aan _eXistenZ_ voor de code in zijn blog)

Door Joolee, zondag 21 oktober 2012 19:27

Met een beetje klussen lukt het ook de breedte waarop de tracker wordt gesloten te veranderen.
Ik heb ook de functie "onOpenClose" erbij gelaten. Deze gebruik ik om de breedte van de layout aan te passen als de tracker verwijnt of opent. (ik gebruik code van GrooV om de buitenranden grijs te maken)
JavaScript:

(function() {

    var tracker = PopupGenerator.get('trackerPopup');

    tracker.options.setPosition = function (popup) {

        var availWidth = getPageDimensions().innerWidth - 20,

            fixateLink = this.tracker.elements.trackerFixateLink;

        if (fixateLink) fixateLink.style.display = is.handheld || availWidth < 1350 ? 'none' : '';

        this.contentStretch(popup);



        if (this.tracker.position == 'c') {

            setTimeout(function () {

                popup.setAutoPosition();

            }, 200)

        } else if (is.handheld || availWidth < 1350) {

            if (this.currentPosition != 'c') {

                this.currentPosition = 'c';

                this.forceSetPosition = true;

                popup.close(true);

            } else popup.setAutoPosition()

            this.opOpenClose(false);

        } else if (this.currentPosition == 'c') {

            this.tracker.fixateSwitch();

            this.currentPosition = this.tracker.position;

            this.forceSetPosition = false;

            popup.visible = false;

            popup.show(popup.offsetElement)

            this.opOpenClose(true);

        } else {

            var width = Math.min(336, Math.round(availWidth / 2) - 520);

            popup.element.style.width = width + 'px';

            if (this.tracker.position == 'l') {

                popup.element.style.left = -(width + 20) + 'px';

            } else popup.element.style.left = '1000px';

        }

    }

    tracker.options.opOpenClose = function(open) {

        var layout = document.getElementById('layout');

        var top = document.getElementById('top');

        var width = '1000px';

        if(open)

            width = '1346px';

        

        layout.style.width = layout.style.minWidth = top.style.width = top.style.minWidth = width;

    };

    tracker.options.setPosition(tracker);

})();

//Edit: Dit is een kopie en aanpassing van een functie op regel 5 van http://tweakimg.net/x/min/frontpage+banners.js

Als je mijn code uitvoert met GreaseMonkey dan wordt de standaard functie van T.net overschreven.

[Reactie gewijzigd op zondag 21 oktober 2012 19:33]

Door sanderev66, zondag 21 oktober 2012 19:38

Dat werkt, maar je krijgt problemen als je het browservenster verkleind.

Reageren is niet meer mogelijk

Sander's Verhalenhoek

Tweakers 7 iets beter maken.

Reacties

Recente posts

Categorieën

Archieven

About