[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[Pompi]

Madrox schreef op dinsdag 23 oktober 2012 @ 13:15:
De code voor die forum kleur balkjes, die wil ik wel

Hier is de eerdere post waarin hij al wordt gedeeld

QwaftZefoni schreef op maandag 22 oktober 2012 @ 20:42:
[...]

Cascading Stylesheet:

/* Forum Categorie Kleuren*/
.forumList:nth-child(2) table.listing tr th{
/background: rgba(156, 158, 158,0.9); <<< VOOR EGALE KLEUREN
background-image: -moz-linear-gradient(#9C9E9E,#626363);
background-image: linear-gradient(#9C9E9E,#626363);
}
.forumList:nth-child(3) table.listing tr th{
/background: rgba(180, 17, 60,0.9);
background-image: -moz-linear-gradient(#B4113C,#760D29);
background-image: linear-gradient(#B4113C,#760D29);
}
.forumList:nth-child(4) table.listing tr th{
/background: rgba(69, 37, 96,0.9);
background-image: -moz-linear-gradient(#573077,#2B0A46);
background-image: linear-gradient(#573077,#2B0A46);
}
.forumList:nth-child(5) table.listing tr th{
/background: rgba(80, 215, 250,0.9);
background-image: -moz-linear-gradient(#50D7FA,#14505F);
background-image: linear-gradient(#50D7FA,#14505F);
}
.forumList:nth-child(6) table.listing tr th{
/background: rgba(27, 165, 60,0.9);
background-image: -moz-linear-gradient(#1BA53C,#074416);
background-image: linear-gradient(#1BA53C,#074416);
}
.forumList:nth-child(7) table.listing tr th{
/background: rgba(255, 90, 0,0.8);
background-image: -moz-linear-gradient(#FF5A00,#9E3B06);
background-image: linear-gradient(#FF5A00,#9E3B06);
}
.forumList:nth-child(8) table.listing tr th{
/background: rgba(255, 90, 0,0.8);
background-image: -moz-linear-gradient(#21428B,#112551);
background-image: linear-gradient(#21428B,#112551);
}
.forumList:nth-child(9) table.listing tr th{
/background: rgba(156, 158, 158,0.9);
background-image: -moz-linear-gradient(#9C9E9E,#626363);
background-image: linear-gradient(#9C9E9E,#626363);
}

Maar in 'mijn', lees overal gejatte custom CSS werkt het kleuren van bezochte nieuws-artikelen op de frontpage nog steeds niet evenals de tekstbox opacity in de frontpage uitgelichte items

http://pastebin.com/A71iv17V

[NitroX infinity]

Ik had een vraag voor de doorgewinterde css'ers;

In het middenstuk op de fp staat alle content door elkaar; video's, nieuws, reviews, redactieblogs en .plans. Is het mogelijk om dat te scheiden en eventueel een deel daarvan (alles behalve het nieuws) weer rechts te positioneren zoals in de vorige iteratie van Tweakers?

[Wiethoofd]

Is atm niet te scheiden omdat het 1 grote tabel is. Je zou misschien de blokken uit de tracker als frontpage onderdelen kunnen neerzetten, maar ik hoop dat de 'Custom Frontpage' weer terugkomt.

[Pompi]

Newsfeed op frontpage

Er komen filters voor de artikelsoorten in de newsfeed op de frontpage. Gebruikers die bijvoorbeeld geen meukposts of video’s in de lijst willen zien, kunnen deze wegfilteren. Als alternatief voor het blokje met meukposts uit de oude site kun je meuk aanzetten in de tracker. Dit kan door de tracker te openen via het icoon uiterst rechts in de navigatiebalk en dan op Instellingen te klikken. Ook nieuws, video’s, reviews en .plans kunnen via de tracker gevolgd worden.

Dit komt uit de laatste .plan dus er komt volgens mij niet echt iets om ze te scheiden maar je zou wel dingen uit de lijst kunnen halen

[KroontjesPen]

Madrox schreef op dinsdag 23 oktober 2012 @ 13:15:
De code voor die forum kleur balkjes, die wil ik wel

Even wat terug kijken tot
QwaftZefoni in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Erg leuk vind ik.

Oeps, er zat nog een pagina achter.

[ Voor 6% gewijzigd door KroontjesPen op 23-10-2012 14:37 ]

[Blue-eagle]

NitroX infinity schreef op dinsdag 23 oktober 2012 @ 14:11:
Ik had een vraag voor de doorgewinterde css'ers;

In het middenstuk op de fp staat alle content door elkaar; video's, nieuws, reviews, redactieblogs en .plans. Is het mogelijk om dat te scheiden en eventueel een deel daarvan (alles behalve het nieuws) weer rechts te positioneren zoals in de vorige iteratie van Tweakers?

Kan met een custom script, niet met alleen CSS. Gewoon met javascript (jQuery) alle rows verwijderen waarin een span met de class "video" staat, bijvoorbeeld

Ik zal eens wat gaan proberen...

[Zartok]

Blue-eagle schreef op dinsdag 23 oktober 2012 @ 14:41:
[...]

Kan met een custom script, niet met alleen CSS. Gewoon met javascript (jQuery) alle rows verwijderen waarin een span met de class "video" staat, bijvoorbeeld

Ik zal eens wat gaan proberen...

Zou het niet mogelijk zijn om de rijen een class mee te geven voor het type artikel, dan zou je het toch met enkel css naar je zin aan kunnen passen. Weet iemand of iets dergelijks al is genoemd bij lieve devvers, want het lijkt me slechts een kleine aanpassing?

[Bliksem B]

Blue-eagle schreef op dinsdag 23 oktober 2012 @ 04:00:
Update van mijn stijl voor ik ga slapen, een lading bugfixes en een nieuw gejatte background

[afbeelding]

CSS: http://pastebin.com/nPiJeTr6

Danku, deze is erg geslaagd imho. Misschien dat ik hem nu zelf nog een beetje kan finetunen voor mijn eigen wensen. (trouwens heeft tweakers.net stiekem custom CSS voor het forum gedeelte ingebouwd?)

[Blue-eagle]

Goh, al klaar



Videos en reviews staan nu rechts en niet meer tussen het nieuws.

Edit: Nog even testen en stylen...

Zartok schreef op dinsdag 23 oktober 2012 @ 14:47:
[...]

Zou het niet mogelijk zijn om de rijen een class mee te geven voor het type artikel, dan zou je het toch met enkel css naar je zin aan kunnen passen. Weet iemand of iets dergelijks al is genoemd bij lieve devvers, want het lijkt me slechts een kleine aanpassing?

De HTML is niet gebouwd om customizers het leven makkelijk te maken, gelukkig zijn we creatief genoeg om daar grotendeels omheen te kunnen werken

[ Voor 72% gewijzigd door Blue-eagle op 23-10-2012 15:06 ]

[Verwijderd]

http://imageshack.us/a/img87/9717/77400951.jpg

meeste van iemand van hierboven, waarvoor dank, maar enigzins aangepast, en een background hier van t dorp

[Blue-eagle]

Hm'kay, een beetje quick 'n dirty gescript allemaal, maar het werkt.

• Haalt video posts uit de FP lijst van nieuws en zet ze rechts neer
• Geldt ook voor reviews, komen in een apart blok
• Maximaal 5 items per blok om het simpel te houden
• Kopjes linken naar respectievelijk video's en reviews

Screenshot: http://i.imgur.com/AKhOA.jpg
Javascript voor Tampermonkey (Chrome): http://pastebin.com/YdnstkzR
Bijhorende CSS: http://pastebin.com/tcMFCtxk

Have at it.

Edit: .plan shit is niet meegenomen omdat die toch niet regelmatig gepost worden. Kleine moeite om 't zelf erin te bouwen als die behoefte er is natuurlijk. Geldt ook voor andere type posts die ik niet ken.

[ Voor 16% gewijzigd door Blue-eagle op 23-10-2012 15:22 ]

[Verwijderd]

Kunnen Blue-eagle en _eXistenZ_ niet samen werken aan 1 custom CSS + JS? ;-) beide zijn extreem goed opgezet. Zou misschien een mooie combo op kunnen leveren ^^

[RuddyMysterious]

Mijn variatie gebaseerd op de CSS van _eXistenZ_ van enkele dagen terug: http://files.hawn.be/tweakers.net.css

Om wat uitleg te geven: ik ben een zeer grote fan van gecondenseerde informatiedichtheid, dus het is makkelijk voor te stellen hoe erg ik moest knarsetanden bij het zien van de nieuwe layout van t.net. Daarom mijn interpretatie op hoe het zou moeten zijn: nieuwsoverzicht, artikels, reacties op de frontpage en forumthreads zijn onder handen genomen.

Aangezien ik niet werk met userJS zijn alle regels voorzien van de directive !important, aangezien ik ze anders niet wist door te drukken bovenop de online CSS van t.net zelf.

edit: en aangezien ik werk met Opera, heb ik snel zelf een userJS file in elkaar geflanst om mijn post-history direct toegankelijk te maken door daarvoor een link toe te voegen als knop in de zwarte menubalk:

JavaScript:

addEventListener('load', function (e) {
    if (!document.body) {
        return;
    }
    var userID = "1"; // pas aan naargelang je eigen userID op GoT
    var host = document.location.host;
    if(host=="gathering.tweakers.net"){
        var menubar = document.getElementById("menu");
        if (menubar !== null) {
            var menulist = menubar.getElementsByTagName("ul")[0];
            var newLI = document.createElement("li");
            menulist.appendChild(newLI);
            newLI.innerHTML = '<a href="http://gathering.tweakers.net/forum/find/poster/'+userID+'">Post History</a>';
        }
    }
}, false);

[ Voor 38% gewijzigd door RuddyMysterious op 23-10-2012 20:59 ]

[jmxd]

DevilsProphet schreef op dinsdag 23 oktober 2012 @ 20:54:
Om wat uitleg te geven: ik ben een zeer grote fan van gecondenseerde informatiedichtheid

[ERIKvanPAASSEN]

Telt een Chrome-plugin ook? Er is namelijk ook Javascript bij betrokken.

Met de plugin kun je onder andere de Meuktracker weer op de frontpage toveren, en het Pricewatch-block inklappen. Meer features volgen snel. Zie Eriks blog: T7 Tweaks Chrome-extensie voor meer info.

[RuddyMysterious]

Twylight schreef op dinsdag 23 oktober 2012 @ 20:59:
[...]
[afbeelding]

Een bewust pleonasme voor wat extra kracht. Een beetje zoals het woord fucking in hiphopteksten.

[Caelorum]

ERIKvanPAASSEN schreef op dinsdag 23 oktober 2012 @ 20:59:
Telt een Chrome-plugin ook? Er is namelijk ook Javascript bij betrokken. [...]

* Caelorum kijkt naar topictitel...
Ik lees geen JS, maar CSS

[jmxd]

Wat ik mis op de FP: De Poll..

Die is nu alleen te vinden op de FP van de subcategorieën maar niet op de home pagina

[ERIKvanPAASSEN]

Caelorum schreef op dinsdag 23 oktober 2012 @ 21:04:
[...]

* Caelorum kijkt naar topictitel...
Ik lees geen JS, maar CSS

Er zitten ook welgeteld 112 regels css in, met overvloedige whitespace natuurlijk. En dan tel ik de 88 regels voor de instellingenpagina nog niet eens mee.

[albino71]

Twylight schreef op dinsdag 23 oktober 2012 @ 20:59:
[...]
[afbeelding]

Sorry voor de nutteloze post, maar het moet even...

Thx! Ik heb vet zitten lachen om dat smoelwerk van Clint Eastwood. Goed gevonden!

edit 1: Whaha, gewoon tranen over m'n wangen. Heerlijke humor!

[ Voor 9% gewijzigd door albino71 op 23-10-2012 22:40 ]

[KroontjesPen]

Wil even laten weten dat ik van diverse gebruikers een mooie eigen CSS heb samengesteld.
Was soms wel terug zoeken waar ook weer dat stond wat ik ook wilde gebruiken zoals bijvoorbeeld de zgn zebrastrepen op de FP. Allemaal bedankt.

Het enige wat ik zelf nog wel terug zou willen hebben is de aanduiding van de TS.
Dat was vroeger de rode kleur van het pijltje dat toen rechts naast de nick stond.

[Hero of Time]

KroontjesPen schreef op dinsdag 23 oktober 2012 @ 23:16:
Wil even laten weten dat ik van diverse gebruikers een mooie eigen CSS heb samengesteld.
Was soms wel terug zoeken waar ook weer dat stond wat ik ook wilde gebruiken zoals bijvoorbeeld de zgn zebrastrepen op de FP. Allemaal bedankt.

Het enige wat ik zelf nog wel terug zou willen hebben is de aanduiding van de TS.
Dat was vroeger de rode kleur van het pijltje dat toen rechts naast de nick stond.

Mijn CSS maakt de naam groen, maar is niet ideaal, want ook crew verandert van rood naar groen. Je kan m'n CSS wat wijzigen zodat de datum een kleurtje krijgt, of de gehele header (die kleur ik al wat lichter, je eigen posts nog een tintje meer). Ik ga iig wel de datum link wijzigen van kleur voor de TS.

Voor het icoontje, tja, even kijken of die rode nog bestaat en proberen die te overschrijven met CSS? En anders wordt het Javascript.

[krvabo]

Topic-starter?

Cascading Stylesheet:

div#content div#messages div.topicstarter div.date p:before {
  content: url('http://tweakers.net/ext/f/hAu719Tf0b0HB0Yue9PMiZRS/full.gif');
}
  div#content div#messages div.topicstarter div.date p a {
    margin-left: 5px;
  }

Die heb ik al een keer gedeeld. Je kunt het gewoon in je frontpage-customcss-ding gooien, en het werkt.

Het is wel het icoontje van Tweakers v5, maar volgens mij is dat bij v6 niet veranderd toen ter tijd? ( )

[ Voor 7% gewijzigd door krvabo op 24-10-2012 01:14 ]

[Verwijderd]

code:

/* messageheader topicstarter posts rood */
div.topicstarter div.messageheader {background: #ffdddd !important;}

Simpel.

[KroontjesPen]

Bedank mensen. Mogelijkheden genoeg nu. Ga eens kijken wat het beste werkt over een langere tijd.

[tweaker2010]

Verwijderd schreef op dinsdag 23 oktober 2012 @ 15:07:
[afbeelding]
http://imageshack.us/a/img87/9717/77400951.jpg

meeste van iemand van hierboven, waarvoor dank, maar enigzins aangepast, en een background hier van t dorp

Nice! Is deze layout ook ergens te downloaden?

[MueR]

Dit is eigenlijk de enige tweak die ik gemaakt heb. Dat DM icoontje mis ik steeds op de page header, dus met een fixed balk valt het misschien meer op

[Madrox]

KroontjesPen schreef op dinsdag 23 oktober 2012 @ 14:35:
[...]
Even wat terug kijken tot
QwaftZefoni in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Erg leuk vind ik.

Oeps, er zat nog een pagina achter.

Ze doen het niet, zie toch steeds saai grijs

[Joosie200]

Madrox schreef op woensdag 24 oktober 2012 @ 13:04:
[...]

Ze doen het niet, zie toch steeds saai grijs

Heb je het dan over deze code?

code:

/* Forum Kleuren*/
.channelHeader{display:none;}
.forumList:nth-child(2) table.listing tr th{
background:#b80008;
}
.forumList:nth-child(3) table.listing tr th{
background:#b40f39;
}
.forumList:nth-child(4) table.listing tr th{
background:#452560;
}
.forumList:nth-child(5) table.listing tr th{
background:#1ba500;
}
.forumList:nth-child(6) table.listing tr th{
background:#ff5a00;
}
.forumList:nth-child(7) table.listing tr th{
background:#00c69e;
}
.forumList:nth-child(8) table.listing tr th{
background:#e7991e;
}

Want dat levert mij wel kleurtjes op per categorie in Google Chrome en Firefox iig.

[KroontjesPen]

Kleuren werken hier ook prima Madrox. Draaien mee in een CSS onder Greasemonkey.

[NMe]

Zo, ik heb maar even wat custom CSS gemaakt om de headerbalk te fixeren. Was het zat dat ik nieuwe DM's regelmatig miste, dus heb ik de headerbalk veranderd in een balk die de functionaliteit van Facebook's header repliceert.

Cascading Stylesheet:

/* Header fixeren */
#menubar {
    background: #b1113a; /* Old browsers */
    background: -moz-linear-gradient(top,  #b1113a 0%, #b60e39 60%, #262828 60%, #1c1e1e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1113a), color-stop(60%,#b60e39), color-stop(60%,#262828), color-stop(100%,#1c1e1e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* W3C */

    padding-top: 50px;
    position:fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
#top {
    padding-top: 34px;
}
.notificationsPopup, .trackerPopup {
    position:fixed;
}

Werkt als het goed is in elke moderne browser, dus niet in IE. In IE10 wel overigens.

[ Voor 9% gewijzigd door NMe op 24-10-2012 14:32 ]

[Wiethoofd]

Voor mensen die codeblokken in volledige breedte hebben staan en dus nu afgekapt worden door de overflow: hidden op de #messages container:

Cascading Stylesheet:

/* #message div clearfixen ipv overflowing content verbergen */
/* Micro clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
#messages:before, #messages:after {
 content: " ";
 display: table;
}
#messages:after {
 clear: both;
}
#messages {
 *zoom: 1; /* nodig voor IE6/7 */
 overflow: inherit; /* reset de 'hidden' vanuit Tweakers */
}

[Geckoo]

Verwijderd schreef op woensdag 24 oktober 2012 @ 01:17:

code:

/* messageheader topicstarter posts rood */
div.topicstarter div.messageheader {background: #ffdddd !important;}

Simpel.

kan je dit ook niet maken voor je eigenposts? bv blauw of groen ofzo?

vind dat erg handig (ala fok )

---

[edit]
wist ik wel, kijken of jullie het door hadden
stond zelfs al aan maar zie het verschil niet goed genoeg tov oude layout (voor mijn gevoel dan)

[ Voor 19% gewijzigd door Geckoo op 24-10-2012 15:22 ]

[NMe]

Dat zit toch allang in je voorkeuren? Voorkeuren -> Forum -> Eigen berichten highlighten.

[Verwijderd]

Geckoo schreef op woensdag 24 oktober 2012 @ 15:18:
[...]

...
stond zelfs al aan maar zie het verschil niet goed genoeg tov oude layout (voor mijn gevoel dan)

Cascading Stylesheet:

div.message div.ownpost {

    background-color: #ff0000 !important;

}

[Bliksem B]

Blue-eagle schreef op dinsdag 23 oktober 2012 @ 04:00:
Update van mijn stijl voor ik ga slapen, een lading bugfixes en een nieuw gejatte background

[afbeelding]

CSS: http://pastebin.com/nPiJeTr6

Trouwens Blue-Eagle. Kan het kloppen dat er dit script niet bedoeld is voor 4:3 schermen (1600*1200)
Wanneer ik wil modden, verschijnt het venster 3 posts ofzo naar beneden. Ook het gedeelte van de tracker klopt niet voor andere resoluties.
Hier zit volgens mij de fout:

Cascading Stylesheet:

 div.popup {
        position: fixed;
        box-shadow: 0 0 10px #333;
        z-index: 9999;
    }

veranderd naar:

Cascading Stylesheet:

 div.popup {
       box-shadow: 0 0 10px #333;
        z-index: 9999;
    }
//edit
div.popup.dmNotificationsPopup.notificationsPopup {
 position: fixed;
}

Waarschijnlijk moet ik met pixels goed zetten? Maar dat was mij te veel moeite Ook het gedeelte van de tracker klopt niet voor andere resoluties.

[ Voor 17% gewijzigd door Bliksem B op 26-10-2012 19:51 ]

[Madrox]

KroontjesPen schreef op woensdag 24 oktober 2012 @ 13:55:
Kleuren werken hier ook prima Madrox. Draaien mee in een CSS onder Greasemonkey.

Draai geen Greasemonkey, Chrome of whatever. Puur Ie9 en alles is grijs

[Zartok]

Madrox schreef op woensdag 24 oktober 2012 @ 17:31:
[...]

Draai geen Greasemonkey, Chrome of whatever. Puur Ie9 en alles is grijs

Je moet even aangeven dat er dan geen background image is zodat ie de achtergrond kleur pakt, ik heb hieronder even een voorbeeld gezet met daarin mijn donkerste kleuren van de gradients (IE9 gelooft niet in gradients ) die ik gebruik:

Cascading Stylesheet:

.forumList:nth-child(3) table.listing tr th{ background-image: none; background-color: #A30028; }
.forumList:nth-child(4) table.listing tr th{ background-image: none; background-color: #400072; }
.forumList:nth-child(5) table.listing tr th{ background-image: none; background-color: #0E8F1D; }
.forumList:nth-child(6) table.listing tr th{ background-image: none; background-color: #BD3500; }
.forumList:nth-child(7) table.listing tr th{ background-image: none; background-color: #04926C; }
.forumList:nth-child(8) table.listing tr th{ background-image: none; background-color: #A57D00; }
.forumList:nth-child(9) table.listing tr th{ background-image: none; background-color: #A57D00; }

[Ramon]

ERIKvanPAASSEN schreef op dinsdag 23 oktober 2012 @ 20:59:
Telt een Chrome-plugin ook? Er is namelijk ook Javascript bij betrokken.

Met de plugin kun je onder andere de Meuktracker weer op de frontpage toveren, en het Pricewatch-block inklappen. Meer features volgen snel. Zie Eriks blog: T7 Tweaks Chrome-extensie voor meer info.

[afbeelding]

[afbeelding]

Nice hoor! Had daar ook al over na zitten denken, maar geen tijd voor gehad. Kan je de JS die je hebt gebruikt hier (of ergens) posten? Ik gebruik namelijk Firefox...

[ Voor 4% gewijzigd door Ramon op 24-10-2012 19:08 ]

[Verwijderd]

Ramon schreef op woensdag 24 oktober 2012 @ 19:07:
[...]

Nice hoor! Had daar ook al over na zitten denken, maar geen tijd voor gehad. Kan je de JS die je hebt gebruikt hier (of ergens) posten? Ik gebruik namelijk Firefox...

Plugin downloaden (dat crx bestand) en openen als een zip file.

[CLB]

Ik heb 1 vraagje... Ik gebruik een stukje JS (toch?) voor het hebben van wat tabjes: (draait in Tampermonkey)
[code=css]$("#forum_tabs").remove();
tabsHTML = '<div id="forum_tabs"><div class="pageTabs"><ul>\
<li id="tab_forum_main" class="active"><a href="http://gathering.tweakers.net/forum/list_activetopics">Active topics</a></li>\
<li id="tab_forum_activetopics"><a href="http://gathering.tweakers.net/forum/myreact">MyReact</a></li>\
<li id="tab_forum_notepad"><a href="http://gathering.tweakers.net/forum/myreact">NotePad</a></li>\
<li id="tab_forum_faq"><a href="http://gathering.tweakers.net/forum/find/poster/127045/topics">Post History</a></li>\
</ul></div></div></div>';
$("#forumheading").prepend(tabsHTML);[/code=css]

maar mijn 'Active Topics' tabje is altijd aangevinkt / geselecteerd hiermee...


Screenie is van mijn PostHistory, maar 'Active Topics' tabblad lijkt geselecteerd... Hoe verhelp ik dat?
(ja het zal niet het beste stukje code zijn, maar het werkt goed, alleen moet wel het tablad geselecteerd worden wat ik voor me heb)

[Caelorum]

ehhh class="active" weghalen?

[CLB]

ehhh sorry ik ben 'n CSS/JS-n00b...[code=css]$("#forum_tabs").remove();
tabsHTML = '<div id="forum_tabs"><div class="pageTabs"><ul>\
<li id="tab_forum_main"><a href="http://gathering.tweakers.net/forum/list_activetopics">Active topics</a></li>\
<li id="tab_forum_activetopics"><a href="http://gathering.tweakers.net/forum/myreact">MyReact</a></li>\
<li id="tab_forum_notepad"><a href="http://gathering.tweakers.net/forum/myreact">NotePad</a></li>\
<li id="tab_forum_faq"><a href="http://gathering.tweakers.net/forum/find/poster/127045/topics">Post History</a></li>\
</ul></div></div></div>';
$("#forumheading").prepend(tabsHTML);[/code=css]
Zo zie ik wel tabjes, maar is er nooit eentje geselecteerd

[Madrox]

Zartok schreef op woensdag 24 oktober 2012 @ 18:25:
[...]

Je moet even aangeven dat er dan geen background image is zodat ie de achtergrond kleur pakt, ik heb hieronder even een voorbeeld gezet met daarin mijn donkerste kleuren van de gradients (IE9 gelooft niet in gradients ) die ik gebruik:

Cascading Stylesheet:

.forumList:nth-child(3) table.listing tr th{ background-image: none; background-color: #A30028; }
.forumList:nth-child(4) table.listing tr th{ background-image: none; background-color: #400072; }
.forumList:nth-child(5) table.listing tr th{ background-image: none; background-color: #0E8F1D; }
.forumList:nth-child(6) table.listing tr th{ background-image: none; background-color: #BD3500; }
.forumList:nth-child(7) table.listing tr th{ background-image: none; background-color: #04926C; }
.forumList:nth-child(8) table.listing tr th{ background-image: none; background-color: #A57D00; }
.forumList:nth-child(9) table.listing tr th{ background-image: none; background-color: #A57D00; }

Maar ik gebruik een background image, die zie ik links en rechts, die lege vlakken weet je wel....
Of maakt dat niet uit?

[NMe]

CLB schreef op donderdag 25 oktober 2012 @ 00:26:
ehhh sorry ik ben 'n CSS/JS-n00b...[code=css]$("#forum_tabs").remove();
tabsHTML = '<div id="forum_tabs"><div class="pageTabs"><ul>\
<li id="tab_forum_main"><a href="http://gathering.tweakers.net/forum/list_activetopics">Active topics</a></li>\
<li id="tab_forum_activetopics"><a href="http://gathering.tweakers.net/forum/myreact">MyReact</a></li>\
<li id="tab_forum_notepad"><a href="http://gathering.tweakers.net/forum/myreact">NotePad</a></li>\
<li id="tab_forum_faq"><a href="http://gathering.tweakers.net/forum/find/poster/127045/topics">Post History</a></li>\
</ul></div></div></div>';
$("#forumheading").prepend(tabsHTML);[/code=css]
Zo zie ik wel tabjes, maar is er nooit eentje geselecteerd

Dan moet je op basis van de url kijken op welke pagina je zit en wanneer je op de relevante pagina zit class="active" toevoegen bij dat element. Lijkt me redelijk wat moeite voor iets dat over een paar weken door Tweakers zelf opgelost wordt en verder alleen maar visueel wat minder uitziet.

[Zartok]

Madrox schreef op donderdag 25 oktober 2012 @ 00:40:
[...]

Maar ik gebruik een background image, die zie ik links en rechts, die lege vlakken weet je wel....
Of maakt dat niet uit?

Kun je misschien een afbeelding laten zien hoe je het nu hebt en hoe je het wil, want ik snap niet precies wat je wilt (ik dacht dat je de headers van de subfora verschillende achtergrondkleuren mee wilde geven en dat dat niet werkte).

[NMe]

NMe schreef op woensdag 24 oktober 2012 @ 14:26:
Zo, ik heb maar even wat custom CSS gemaakt om de headerbalk te fixeren. Was het zat dat ik nieuwe DM's regelmatig miste, dus heb ik de headerbalk veranderd in een balk die de functionaliteit van Facebook's header repliceert.

[...]

Werkt als het goed is in elke moderne browser, dus niet in IE. In IE10 wel overigens.

Even vernieuwd zodat anchors ook lekker werken.

Cascading Stylesheet:

/* Header fixeren */
#menubar {
    background: #b1113a; /* Old browsers */
    background: -moz-linear-gradient(top,  #b1113a 0%, #b60e39 60%, #262828 60%, #1c1e1e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1113a), color-stop(60%,#b60e39), color-stop(60%,#262828), color-stop(100%,#1c1e1e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1113a', endColorstr='#1c1e1e',GradientType=0 ); /* IE6-9 */

    padding-top: 50px;
    position:fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.notificationsPopup, .trackerPopup {
    position:fixed;
}
body {
    overflow: hidden;
}
#layout {
    padding-top:-40px;
    overflow-y: scroll;
    overflow-x: auto;
    position: absolute;
    top: 83px;
    bottom: 0px;
    width: 100%;
    min-width: auto;
}
#searchbar {
    margin-top: 0;
    border-radius: 0;
}
#contentArea {
    padding-bottom: 40px;
}
#bottom {
    position: relative;
}

[Paul]

Ik gebruik maar een paar tweaks, met name om dingen die ik irritant vind uit te schakelen en om de topicstarter weer terug te vinden:

Cascading Stylesheet:

/** Minder verspilde ruimte in lijsten met topcis **/
table.listing td, table.listing th {padding: 0;}

/** On-hover showen van "ignore topic"-knopjes in post history **/ 
table.listing tr td.ignore a {display:none;} 
table.listing tr:hover td.ignore a {display:inline;}

/** Quickreply uit **/
h3#reageer {display:none;}
form#quickreply_form {display:none;} 

/** Topicstarter highlighten **/
div.topicstarter div.messageheader{background-color:#cccccc}

Verder heb ik uit dit topic o.a. het highlighten van topics waar ik zelf de laatste reactie heb geplaatst gejat Daar zijn 2 versies van maar ik heb wel de verzie van wontcachme aangezien Matis' versie ook triggert op Paulus07 (profiel) Je komt er dan meteen achter dat het in find/poster "laatste bericht" is en in list_activetopics "laatste reactie"

Matis schreef op zondag 21 oktober 2012 @ 10:21:
Edit; Ik weet dat wontcachme in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'" ongeveer hetzelfde heeft gedaan qua highlighting, maar ik heb een wildcard gebruikt (de *, zodat je niet afhankelijk bent van eventuele wijzigingen in de title.

[ Voor 30% gewijzigd door Paul op 26-10-2012 13:48 ]

[Zartok]

Even een beetje een crosspost, maar het leek me handig ook hier neer te zetten.

Wat is het

Een userscript om kleuren toe te voegen aan forum onderdelen op je bookmark pagina en bij de forumlijst. De icoontjes die standaard blauw zijn, zullen een andere kleur krijgen afhankelijk van binnen welk deel van GoT ze zitten.

Hoe werkt het

De code zoekt de afbeeldingstags (suggesties voor efficiëntere methodes zijn welkom) van de icoontjes die blauw zijn en zet in de html code van dat element een extra stuk stijl code dat er voor zorgt dat de kleur van de afbeelding veranderd (hue, saturatie en helderheids aanpassing).

Is het getest?

Ik gebruik chrome (op win7x64) en daarbinnen de tampermonkey plugin om het geheel te draaien en dat draait goed. Onder andere condities is dit nog niet getest.

Zijn er nog bugs

Nog niet voor zover ik weet. Wel ben ik nog niet helemaal blij met de kleuren die sommige afbeeldingen krijgen, soms zitten ze er net een beetje naast, maar dat kan naar smaak worden aangepast in het deel van de code waar de kleurwijzigingen worden gedefinieerd.

Ou est le code

JavaScript:

// ==UserScript==
// @name       Change bookmark colors
// @namespace  
// @version    1.0
// @description  Change the colors of the bookmarks
// @include    http://*tweakers.net/*
// @copyright  2012-10-25, Erik Keemink
// ==/UserScript==

// Define the color changes:
var red    = "hue-rotate(160deg) brightness(-0.4)  saturate(200%);";
var purple = "hue-rotate(100deg) brightness(-0.45) saturate(180%);";
var green  = "hue-rotate(265deg) saturate(180%);";
var orange = "hue-rotate(195deg) brightness(0.15)  saturate(180%);";
var aqua   = "hue-rotate(10deg)  brightness(0.2)   saturate(140%);";
var yellow = "hue-rotate(225deg) brightness(0.3);";

// For the bookmarks page
// Get all cells 
var sub_form = document.getElementsByClassName('frm');
for(var i = 0; i<sub_form.length; i++)
{
    var identifier = sub_form[i].innerHTML;
    if(identifier != "Frm")
    {
        var temp = null;
        identifier = sub_form[i].firstChild.innerHTML;
        
        switch(identifier)
        {
            case "PRG": case "WEB": case "GFX": case  "IM": temp = purple; break; // IT PRO
            case "SSG": case "FPS": case "SSR": 
            case "RPG": case  "OH": case "APG": case "SPV": temp = green;  break; // Games
            case "AUD": case "LCD": case"HTPC": case "DED": 
            case "CEA": case "FVH": case "FVM": case "FVW": temp = orange; break; // Beeld en geluid
            case "AND": case "WPH": case "OSP": 
            case  "3i": case "TGA": case "WOS": case  "AI": 
            case "OMO": case  "TP": case  "AN": case "MAA": temp = aqua;   break; // Tablets en telefoons
            case  "SG": case "ASP": case "FTM": case"NSTM": 
            case  "WI": case  "WL": case  "VV": case  "SF": temp = yellow; break; // General Chat
            case  "LA": case  "GR": case  "PW": 
            case "V&A": case "TMF": case  "LD": case  "SM": temp = yellow; break; // Tweakers.net Feedback
            default:                                        temp = red;    break; // Other
        }
        
        if(temp != null)
        {
            var imgs = sub_form[i].parentNode.getElementsByTagName('img');
            for(var j = 0; j<imgs.length; j++)
            {
                if(imgs[j].src.indexOf('on.png') > 0)
                    imgs[j].style.cssText = "-webkit-filter: " + temp + " -moz-filter: " + temp + " -o-filter: " + temp + " -ms-filter: " + temp;
            }
        }
    }
}

// For the main forum page
sub_form = document.getElementsByClassName('forumList');
for(var i = 0; i<sub_form.length; i++)
{
    if(sub_form[i].childNodes.length > 1)
    {
        var identifier = sub_form[i].childNodes[0].childNodes[0].innerHTML;
        var temp = null;
        
        switch(identifier)
        {
            case "IT Pro": temp = purple; break;
            case "Games": temp = green; break;
            case "Beeld en geluid": temp = orange; break;
            case "Tablets en telefoons": temp = aqua; break;
            case "General Chat": 
            case "Tweakers.net Feedback": temp = yellow; break;
            case "Computers":
            default: temp = red;    break; // Other
        }

        if(temp != null)
        {
            var imgs = sub_form[i].getElementsByTagName('img');
            for(var j = 0; j<imgs.length; j++)
            {
                if(imgs[j].src.indexOf('on.png') > 0)
                    imgs[j].style.cssText = "-webkit-filter: " + temp + " -moz-filter: " + temp + " -o-filter: " + temp + " -ms-filter: " + temp;
            }
        }
    }
}

Voila

edit:
Kleine update, waardoor het nu ook werkt voor active topics en de myreact paginas.

[ Voor 6% gewijzigd door Zartok op 25-10-2012 22:23 ]

[QwaftZefoni]

I'm screwed

Forum Overzicht


Een Forum geopend


Fijn dat er nog aan de site wordt gewerkt

[Yorinn]

QwaftZefoni schreef op donderdag 25 oktober 2012 @ 19:23:
I'm screwed

Forum Overzicht
[afbeelding]

Een Forum geopend
[afbeelding]

Fijn dat er nog aan de site wordt gewerkt

Je kan onderstaande code gebruiken:

code:

/*searchbar omhoog*/ 

#search{position:absolute;top:-10px;right:200px;}

De right moet je misschien zelf nog allignen.

[Caelorum]

QwaftZefoni schreef op donderdag 25 oktober 2012 @ 19:23:
I'm screwed

Forum Overzicht
[afbeelding]

Een Forum geopend
[afbeelding]

Fijn dat er nog aan de site wordt gewerkt

Gewoon er even voor zorgen dat dat popup/dropdown menutje on top wordt gerendered

Cascading Stylesheet:

.mainSearchSuggest, #detailedSearchListing { z-index: 1000; }

[bitshape]

[crosspostje]
Zelf ben ik net vandaag gisteren met wat CSS aan het stoeien geweest qua FP reacties, en daarmee naar mijn smaak wat kleur toegevoegd wat het geheel al zoveel meer duidelijker maakt:



[code=css]
/*Frontpage Reacties*/
.reactie { background: #F5F5F6; border-left: 1px solid #BECFE3; }
.reactie.last > .reactieContainer { border-left: 1px solid #F5F5F6; }
.reactieBody.informative { background-color: #F7FBF6; border: 1px solid #C9EEC7; }
.reactieBody.spotlight { background-color: #EFF8F2; border: 1px solid #22CF1A; }
.reactieContainer .reactieHeader { background-color:#BECFE3!important; padding-left: 10px!important; padding-top: 2px!important; padding-bottom: 2px!important; }
.reactieContainer .reactieContent { padding-left: 6px; padding-top: 6px; }
.reactieFooter .reactieReply { font-size: 10px!important; }
[/code=css]
- Achtergrond reactie's en rest achtergrond gehele reactiegebied lichtgrijs.
- Nesting layout is nu veel duidelijker te zien, wie nou reageert op wie, door simpel een ander kleurtje.
- +2 reactie's (informatief) met lichtgroen randje duidelijker gemaakt.
- +3 reactie's (spotlight) met wat donkerder groen duidelijker gemaakt.
- ReactieHeaders een kleurtje gegeven en het formaat daarvan aangepast.
- ReactieTekst iets ingesprongen om het geheel wat gelikter te maken.
- Van de commentlink ("Reageer" & "Wijzig") het lettertype wat verkleint.

En dat leest een heel stuk prettiger dan dat het een geheel Wit vlak is met wat lichtgrijze lijntjes.
Ik ben geen Pro in opmaak/CSS, maar met een beetje prutsen kom je der wel.
Morgen maar weer een stukje site verder vernaggelen aanpakken...

[ Voor 3% gewijzigd door bitshape op 26-10-2012 02:04 . Reden: bugje geplet :P ]

[Blue-eagle]

Mochten mensen mijn stijl nog gebruiken, hierbij een updateje:

Tampermonkey JS: http://pastebin.com/GpWLY5f4
Stylish CSS: http://pastebin.com/r7vgJqtF

Fixes:

• Meuktracker, software, reviews en video's worden uit het nieuwsoverzicht verwijderd en naar rechts verplaatst in afzonderlijke blokken;
• Community links op de homepage worden compacter en als lijst weergegeven;
• Topic title is terug bij forum posts, zodat je weer view-counts kan zien;
• Reactie lijst op FP-artikelen styling fixes;
• Forum gebruikt nu de volledige breedte van het beschikbare content-frame;
• Moderatie menu werkt weer;
• Nieuwe background-images om uit te kiezen (handmatig de CSS aanpassen bovenin).

Screenshot:



Overige screenshots:

• Forum overzicht
• Frontpage reactiestructuur

edit:
Er stond een letter aan het einde van mijn JS-file. Raar. Nieuwe JS toegevoegd.

[ Voor 5% gewijzigd door Blue-eagle op 26-10-2012 02:25 ]

[RuddyMysterious]

DevilsProphet schreef op dinsdag 23 oktober 2012 @ 20:54:
Mijn variatie gebaseerd op de CSS van _eXistenZ_ van enkele dagen terug: http://files.hawn.be/tweakers.net.css

[...]

Allez bon, aangezien niemand de moeite neemt om mijn informatiecondensatie te bekijken (ja, het aanbod is overweldigend, dus ik moet niet kreften), zal ik even wat screenshots plaatsen:

Comments zichtbaar vanaf +2:

Default:


Condensed:


Comments zichtbaar vanaf +1:

Default:


Condensed:


Uiteindelijke winst: ongeveer 2x zoveel comments voor dezelfde gebruikte hoeveelheid verticale pixels.

Meningen?


edit: nu een vergelijking van mijn tactiek in GoT zelf:

Default:


Condensed:


Condensed + fix voor headerhoogte:


Om een of andere reden is de header van elke forumpost terug gegroeid in hoogte. Ik had dat nochtans aangepast om een enkele regel tekst te kunnen herbergen, en niet meer. Waarschijnlijk zijn de devvers van t.net weer bezig geweest met zaken aan te passen.

[ Voor 24% gewijzigd door RuddyMysterious op 26-10-2012 16:28 ]

[bitshape]

DevilsProphet schreef op vrijdag 26 oktober 2012 @ 09:03:
Om een of andere reden is de header van elke forumpost terug gegroeid in hoogte. Ik had dat nochtans aangepast om een enkele regel tekst te kunnen herbergen, en niet meer. Waarschijnlijk zijn de devvers van t.net weer bezig geweest met zaken aan te passen.

Inderdaad, deze bug? heb ik ook sinds gisteravond. Wat je ziet in de Header is dat "Username" en "Datum" niet meer in 1 lijn staan met de rechter tekstknoppen "Quote" "Bookmark" & evt "Wijzig".
Het element van de rechter knoppen is aangepast (qua hoogte). Het gekke is is dat Firefox heel soms dit wel correct weergeeft (zoals het was).
Ik hou het erop dat de Devvers bezig zijn met het Forum, en laat het rustig even zitten.

edit:
VV Bedankt Wiethoofd, ik heb het daarmee inderdaad opgelost.

[ Voor 6% gewijzigd door bitshape op 26-10-2012 14:32 ]

[Wiethoofd]

.action_list { margin: 5px 0 8px; } << de Bookmark/Quote/Edit lijst heeft gewoon een margin gekregen.

[bitshape]

Usericon-upgrade voor echte liefhebbers:

[plaatjes zijn clickable]

[code=css]
/*usericons zonder randje, met transparantie en afgeronde hoeken*/
img.usericon {
background-color : transparent;
border : 0;
border-radius : 3px 3px 3px 3px;
margin : 4px 8px;
padding : 0;
}
[/code=css]
- Dunne grijze (buiten-)rand en dikke witte (binnen-)rand om de Usericon's weggehaald.
- Transparantie toegevoegd voor Usericon's die enigszins transparant zijn.
- Usericon's enigszins uitgelijnd ten opzichte van het dunne streepje onder het usericon.
- Usericon's met afgeronde hoeken.

- Dezelfde aanpassingen maar dan zonder de afgeronde hoeken:
[code=css]
/*usericons zonder randje, met transparantie*/
img.usericon {
background-color : transparent;
border : 0;
border-radius : 0;
margin : 4px 8px;
padding : 0;
}
[/code=css]

[ Voor 17% gewijzigd door bitshape op 26-10-2012 17:43 ]

[Pompi]

QwaftZefoni schreef op donderdag 25 oktober 2012 @ 19:23:
I'm screwed

Forum Overzicht
[afbeelding]

Een Forum geopend
[afbeelding]

Fijn dat er nog aan de site wordt gewerkt

Ik had soort van hetzelfde en heb dus weer paar minuutjes besteed aan de zoekbalk langer te maken zodat het weer werkt, wel jammer dat overal behalve in een topic zo'n lange zoekbalk niet nodig is.

[KroontjesPen]

bitshape schreef op vrijdag 26 oktober 2012 @ 16:43:
een usericon-upgrade voor echte liefhebbers:

Toppie,
Nu zien ze er weer erg netjes uit.

[Hero of Time]

NMe schreef op donderdag 25 oktober 2012 @ 15:23:
[...]

Even vernieuwd zodat anchors ook lekker werken.

Cascading Stylesheet:

...

Super! Mare, heb je ook een fix voor de paginapositie als je met je browser terug gaat? Nu kom ik elke keer bovenaan terecht, en dat is niet echt prettig als je in een gedeelte zit dat lager staat (bijvoorbeeld van SG naar HK). Ik wissel regelmatig tussen forums, lees wat, en ga dan terug naar het forum overzicht. Niet fijn om elke keer weer naar beneden te scrollen.


Iemand eigenlijk een idee hoe de focus van het toetsenbord van de tracker naar de pagina zelf te krijgen is? Nu moet ik elke keer in de pagina zelf klikken om met 't toetsenbord te kunnen navigeren.

[NMe]

Hero Of Time schreef op vrijdag 26 oktober 2012 @ 19:27:
[...]

Super! Mare, heb je ook een fix voor de paginapositie als je met je browser terug gaat?

Sure, met dank aan MueR.

Cascading Stylesheet:

/* Header fixeren */
#menubar {
    background: #b1113a; /* Old browsers */
    background: -moz-linear-gradient(top,  #b1113a 0%, #b60e39 60%, #262828 60%, #1c1e1e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1113a), color-stop(60%,#b60e39), color-stop(60%,#262828), color-stop(100%,#1c1e1e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b1113a 0%,#b60e39 60%,#262828 60%,#1c1e1e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1113a', endColorstr='#1c1e1e',GradientType=0 ); /* IE6-9 */

    padding-top: 50px;
    position:fixed;
    width: 100%;
    top: 0;
    z-index: 200;
}
.notificationsPopup, .trackerPopup {
    position:fixed;
}
#layout {
    padding-top:83px;
}
#search {
    padding-top:12px;
}
#searchbar {
    margin-top: 0;
    border-radius: 0;
}
#contentArea {
    padding-bottom: 40px;
}
#bottom {
    position: relative;
}
a[name] {
    display:block;
    padding-top:83px;
    margin-top:-83px;
}

[Hero of Time]

NMe schreef op vrijdag 26 oktober 2012 @ 22:44:
[...]

Sure, met dank aan MueR.

Cascading Stylesheet:

/* Header fixeren */
...

Hmmja, dat is wat ik had, maar dan komt de anchor weer onder de header. Om het wat makkelijker te maken, maar even m'n relevante CSS.

Cascading Stylesheet:

/* Overall background */
#layout {
    background-color: #0E0E0E !important;
    padding-top: 85px !important;
}

/* Top header, make it stick at the top */
#top {
    position: fixed !important;
    border: none !important;
    height: 85px !important;
    background: #841039 !important;
    width: 100% !important;
    z-index: 1000 !important;
    top: 0 !important;
}

/* Search form, put it in top header */
#search {
    position: relative !important;
    top: -53px !important;
}

/* Get rid of the search bar, but don't hide it or the search form goes poof */
#searchbar {
    height: 0px !important;
    margin: 0px !important;
}

/* Stretch the menu bar */
#menubar {
    width: 100% !important;
}

/* T.net logo */
#logo {
    position: absolute !important;
    left: -250px !important;
    top: -52px !important;
}
/* T.net logo hover box */
#logo + .sitename {
    position: absolute !important;
    left: -250px !important;
}

/* Main content view */
#contentArea {
    background: #323434 !important;
    width: 1130px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 40px !important;
    position: relative !important;
    margin-left: 360px !important; /* Tracker is 350px wide, give it some space */
}

Dit werkt dus wel met terug gaan naar vorige pagina, maar de achor staat op top: 0px, ipv top: 85px. Ik definieer geen #body {overflow:hidden}, wat ik op Google wel zie, en in je vorige CSS. Het is ook mogelijk dat 't een 'feature' is in Opera. Heb geen Firefox oid op m'n PC om mee te testen, al m'n CSS staat ook buiten T.net, als custom CSS in site prefs.

Edit:
Ok, heb 't nu toch. Ik had dit niet overgenomen, wat er voor zorgt dat 't werkt.

Cascading Stylesheet:

a[name] {
    display: block;
    padding-top: 85px;
    margin-top: -85px;
}

Weer een bugje minder. Op naar de volgende styles, en de dropdown menu'tjes even een vast likje verf geven, zwarte tekst leest wat lastig met zwarte achtergrond .

[ Voor 8% gewijzigd door Hero of Time op 27-10-2012 00:45 . Reden: fixed ]

[NMe]

Je liet inderdaad even onsubtiel precies dat stukje weg.

Overigens zijn de meeste !importants in je CSS redelijk overbodig. Ik probeer ze altijd te vermijden omdat het anders lastig is ze nog te overriden, bijvoorbeeld als je een a:hover anders wil stylen terwijl je in de a een !important gebruikt.

[ Voor 70% gewijzigd door NMe op 27-10-2012 00:52 ]

[Hero of Time]

Vroeg mij al af waar 't voor nodig was, totdat ik 't bij verder zoeken nog een keer zag. Toen drong 't tot mij door dat 't er voor een heel goede reden stond. Had beter moeten weten dan te twijfelen aan overbodige code van de grote NMe en MueR. * Hero of Time gaat zich nu schamen. Om de pijn wat te verminderen, ga ik maar slapen. Die paar uur van afgelopen nacht waren duidelijk te weinig.


edit:
Misschien dat het zo werkt bij de optie hier voor custom css, maar ik heb maar te vaak met m'n browser override css dat 't niet werkt. Nu zet ik bijna standaard !important neer. Heb al iets te vaak gehad dat ik mij rot aan het zoeken was waarom iets niet werkte, en gewoon dat even miste.

[ Voor 27% gewijzigd door Hero of Time op 27-10-2012 01:00 ]

[NMe]

Hero Of Time schreef op zaterdag 27 oktober 2012 @ 00:58:
Misschien dat het zo werkt bij de optie hier voor custom css, maar ik heb maar te vaak met m'n browser override css dat 't niet werkt. Nu zet ik bijna standaard !important neer. Heb al iets te vaak gehad dat ik mij rot aan het zoeken was waarom iets niet werkte, en gewoon dat even miste.

In mijn ervaring gebeurt dat juist als je !important gebruikt en hem vervolgens bij een override vergeet. Granted, als je hem consequent overal achter zet gaat er niet veel mis.

[QwaftZefoni]

Ik leer veel van de code van blauwe egel Ben weer happy voorlopig.



Wat ik nog niet snap is hoe ik moet oplossen in de breadcrumb dat op het moment dat ik
de position van fixed wijzig naar relative (zodat ie bovenaan blijft staan onder de menubar) dat dan de breedte niet meer meeschaalt maar fixed wordt? Nu maar zo opgelost ...

Oh, en is het mogelijk om de achtergrondkleur van het uitklap-venster 'Dit Topic / Dit Forum' ook te wijzigen?

Nou weer nieuwe trucjes ontdekken en proberen ...

[JohnD1]

Mijn Tweakers V7 Desktop versie 1.7 : http://userscripts.org/scripts/show/150717
Benodigd Greasemonkey/Tampermonkey plugin voor FireFox of Chrome

• Past op kleine schermen <1280 pixels (inclusief tracker)
• Tracker zichtbaar op alle pagina's en ververst elke 60 seconden
• Tracker kan worden vastgezet zodat hij bij het scrollen zichtbaar blijft.
• Loginnaam alleen zichtbaar als muis erop staat.
• allerlei css tweaks om meer infomatie en visueel beter zichtbaar te krijgen.
• verwijderd die flashy reclames...

Overige screenshots:

• Fixed tracker op Frontpage reactiestructuur
• Fixed tracker op Forum

Tot vandaag kon ik niet bij dit forum komen......leuke css staan hier.... hoop te lezen en uit te proberen.

[NMe]

JohnD1 schreef op zaterdag 27 oktober 2012 @ 10:13:

• verwijderd die flashy reclames...

Je bent ervan op de hoogte dat dat niet mag volgens onze algemene voorwaarden en bovendien nogal niet netjes is omdat je feitelijk geen tegenprestatie meer biedt voor de gratis content die je wel gewoon leest?

[JohnD1]

NMe schreef op zaterdag 27 oktober 2012 @ 13:18:
[...]

Je bent ervan op de hoogte dat dat niet mag volgens onze algemene voorwaarden en bovendien nogal niet netjes is omdat je feitelijk geen tegenprestatie meer biedt voor de gratis content die je wel gewoon leest?

Ik kan het even niet vinden in de algemene voorwaarden...
Maar als het er staat, ik geloof het graag, dan mag ik zal ik ze neem ik aan wel verplaatsen.

Hoe zit het dan met adblock of ghostery bijvoorbeeld ?

[yannickie111]

JohnD1 schreef op zaterdag 27 oktober 2012 @ 14:11:
[...]

Ik kan het even niet vinden in de algemene voorwaarden...
Maar als het er staat, ik geloof het graag, dan mag ik zal ik ze neem ik aan wel verplaatsen.

Hoe zit het dan met adblock of ghostery bijvoorbeeld ?

Het staat echt in de algemene voorwaarden.
Adblock en ghostery mogen ook niet.

Ik heb echt een hekel aan mensen die zelfs advertenties (die op tweakers echt netjes en beschaafd zijn, in tegenstelling tot bijvoorbeeld Fok!) willen omzeilen.
Tweakers is een bedrijf met duur personeel, kantoorruimte, serverkosten enz. Ze leven van dit soort advertenties. Als iedereen ze blokkeert valt tweakers nog voordat de maya's het einde van de wereld hebben uitgerekend. om

Doe het gewoon niet

[Raven]

JohnD1 schreef op zaterdag 27 oktober 2012 @ 14:11:
[...]

Ik kan het even niet vinden in de algemene voorwaarden...
Maar als het er staat, ik geloof het graag, dan mag ik zal ik ze neem ik aan wel verplaatsen.

Hoe zit het dan met adblock of ghostery bijvoorbeeld ?

Flashblock mag daarentegen wel bij mijn weten.

[MueR]

Flashblock mag, niemand die je dwingt flash te installeren namelijk. Advertenties blokkeren niet. Uit de AV, sectie 4.2 punt 12:

geen gebruik maken van adblockers of op andere wijze reclame-uitingen weren, anders dan de optie die Tweakers.net het Lid biedt indien hij een betaald abonnement heeft afgesloten.

Indien je geen advertenties wil hebben op de site is er een abonnement. Dus JohnD1, nee, dat mag niet.

[ Voor 18% gewijzigd door MueR op 27-10-2012 15:00 ]

[JohnD1]

MueR schreef op zaterdag 27 oktober 2012 @ 14:58:
Flashblock mag, niemand die je dwingt flash te installeren namelijk. Advertenties blokkeren niet. Uit de AV, sectie 4.2 punt 12:

[...]

Indien je geen advertenties wil hebben op de site is er een abonnement. Dus JohnD1, nee, dat mag niet.

4.12 had ik niet gezien, geen punt is al gecorrigeerd...
Volgens mij zijn er heel wat css tweaks die dit hebben, ik had het alleen netjes vermeld...


v1.8 Change:
- ads are back, against policy of tweakers to remove them.
- filter news items and place video, downloads, ... in second column
leaving only newsitems in main list (based on Blue-eagle, but adapted)
- colored forum headers (from Zartok)
- corrected wrapping of fpaItems on Review page
link: http://userscripts.org/scripts/show/150717


Adapted code from Blue-eagle

code:

// ------------------- Move selective type of FP articles, to the secondColumn  (Blue-eagle adapted)
var displaceFPItems = [
    { iconClass: "video", fpItemID: "videos", link: "/video/", title: "Video's" },
    { iconClass: "review", fpItemID: "reviews", link: "/reviews/", title: "Reviews" },
    { iconClass: "download", fpItemID: "downloads", link: "/meuktracker/", title: "Downloads" },
    { iconClass: "plan", fpItemID: "plans", link: "/plan/", title: ".plans" }
];
for(var i = 0; i != displaceFPItems.length; i++) {
    var obj = displaceFPItems[i];
    var content = '';
    var no=0;
    $("tr:has(span."+ obj.iconClass +")").each(function() {
        if (no < 5) {
            var theLink = $(this).find("td a").clone().wrap('<p>').parent().html();
            var theIcon = $(this).find("td.type span").clone().wrap('<p>').parent().html();
            content = content + '<tr><td class="type" valign="top">' + theIcon + '</td><td>'+ theLink + '</td></tr>';
        }
        $(this).remove();
        no=no+1;
    });
    if (content != '') {  // add it if something was found
       $('<div class="fpItem customFPitem"><h2><a href="'+ obj.link +'">'+ obj.title +'</a></h2><table class="newhighlights"><tbody>' + content + '</tbody></table></div>').insertBefore("#b_re");
    }
}
// --- hide empty days, due to the above moves
$('table.highlights tbody').each(function() {
    if (!$.trim($(this).text())) {
        $(this).parent().prev().css('display','none');
        $(this).parent().css('display','none');
    }
});

Verschil:
- andere manier van opbouwen en verplaatsen
- gebruik originele icon ipv ul - li
- extra loop om eventuele lege headers (datum) op te ruimen (kan gebeuren na het verplaatsen)

[CLB]

Op basis van de 1.1.2 van _eXistenZ_ en met hulp / code van HaTe / Locke960 is dit het:

- Grotendeels code van _eXistenZ_
- Donkere achtergrond met schaduwrandje
- Verwijderde logo'tjes
- Opgeschoonde FP
- Searchbar Tweakers-style, gewoon gecentreerd

[code=CSS]GM_addStyle((<><![CDATA[
#mynotepad textarea {
height: 50%;
}

/*
* Global styles
*/

body {
background: #555;
}

#layout {
min-height: 100%;
}

h1, h2, h3, p {
margin: 0 0 10px;
}

#menubar {
width: 1020px;
border-radius: 8px 8px 0 0;
height: 32px;
margin-bottom: 36px;
z-index: 2;
}


#searchbar {
width: 1020px;
margin: 0 auto;
}

#true {display: none; } /* Searchbar: geen TRUE logo meer */
#streamone {display: none; } /* Searchbar: geen StreamOne log meer */

.galleryHeadingContainer, /* High header content */
.pageTabsContainer,
.notificationsContainer,
#tabs,
#tweakbase {
position: relative;
margin: 0 auto;
width: 1020px;
}

.notificationsContainer {
padding-top: 62px;
}

#b_tb { /* DELETED */ }

#contentArea {
background: #fff;
border-radius: 0 0 8px 8px;
margin-bottom: 20px;
padding: 24px 20px 20px;
box-shadow: 0 0 10px 7px #222;
}

#bottom {
position: relative;
}

#bottom .hr {
display: none;
}

/*
* End of Global styles
*/

/*
* Frontpage
*/

#contentArea > #fpaItems {
margin-bottom: 10px;
float: right;
width: 330px;
border: 1px solid #dddede;
background: linear-gradient(#F5F6F6, #EDEEEE) repeat scroll 0 0 #EDEEEE;
padding: 2px;
}

#contentArea > #fpaItems .fpaItem {
float: left;
width: 161px;
margin: 1px !important;
height: 122px;
border: 1px solid #dddede;
position: relative;
}

#contentArea > #fpaItems .fpaItem div.imageContainer {
width: 100%;
}

#contentArea > #fpaItems .fpaItem img {
margin-left: -42px;
}

#contentArea > #fpaItems .fpaItem div.textContainer {
background-color: rgba(0,0,0, 0.5);
color: #fff;
width: 100%;
height: auto;
font-size: 12px;
line-height: 1.4em;
padding: 4px;
position: absolute;
bottom: 0;
}

// #fp_tabs_container {display: none;} /* geen tabs meer */
#community {display: none;} /* geen uit-de-community meer */
#jobs {display: none;} /* geen IT-Banen */
// #pricewatch {display:none;} /* geen Pricewatch */
// #poll {display: none;} /* geen Poll */
#social {display: none;} /* geen facebook/twitter gedoe */
#newsletter {display: none;} /* geen signup voor de newsletter */

#fp_tabs_container {
margin-bottom: 10px;
height: 31px;
}

#fp_tabs {
padding-top: 0;
}

table.highlights {
margin-bottom: 15px;
}

table.highlights td {
padding: 3px 0;
}

.secondColumn .fpItem {
margin-bottom: 10px;
}

.secondColumn .fpItem:last-child {
margin-bottom: 0;
}

#inlineTracker {
background: linear-gradient(#F5F6F6, #EDEEEE) repeat scroll 0 0 #EDEEEE;
border: 1px solid #DDDEDE;
border-radius: 1px 1px 1px 1px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.33) inset;
padding: 15px 15px 17px;
}

#inlineTracker h4{
margin: 7px 0;
}

#inlineTracker ul{
padding-left: 0;
margin: 0;
}

#inlineTracker .time{
margin-right: 10px;
}


/*
* End of frontpage
*/

/*
* Article detail page
*/

.articleColumn {
line-height: 1.4em;
}

/*
* End of article detail page
*/

/*
* User galleries
*/

.galleryHeading .karma {
padding-top: 0;
}

.galleryHeading .karma p {
display: inline;
margin-right: 5px;
}

/*
* End of user galleries
*/

/*
* Direct Messages
*/

#title .actionbutton.sendreply,
#title .actionbutton.newmessage {
position: relative;
top: 14px;
}

/*
* End of Direct Message
*/

/*
* News articles
*/

.newsArticleColumn .newsSubmitButton {
position: relative;
top: 34px;
}

/*
* End of news articles
*/

/*
* GoT
*/

#forum_tabs {
padding-top: 0;
}

.reactie {
line-height: 1.4em;
}

#community li {
padding: 5px 0;
}

#content .forumList:last-child table.listing {
border: 10px solid #fc0;
color: #65f;
margin-bottom: 0;
}
table.listing td,
table.listing th {
padding: 2px 5px;
}

table.listing td.tags {
overflow: hidden;
white-space: nowrap;
}

.channelHeader {
display: none;
}

#messages, .topic_actions {
overflow: hidden;
}
div.message .messageheader {
background-color: #ddd;
}

div.message {
margin-bottom: 0px;
line-height: 1.4em;
border-top: 0;
border-radius: 0;
}

#title {
height: 50px;
}

#title p.mods {
display: none;
}

.pagecounter {
margin-top: 10px;
}

#footer .breadcrumb {
margin-bottom: 0;
}

div.message.topicstarter .messageheader {
background-color: #ccc;
}

/* Background colors on the right categories */
.forumList:nth-child(3) table.listing th {
background: linear-gradient(#db2252, #b5012e) repeat scroll 0 0 #c20c3b;
}
.forumList:nth-child(4) table.listing th {
background: linear-gradient(#673c87, #4c2a66) repeat scroll 0 0 #553070;
}
.forumList:nth-child(5) table.listing th {
background: linear-gradient(#24b635, #1c8c29) repeat scroll 0 0 #21a931;
}
.forumList:nth-child(6) table.listing th {
background: linear-gradient(#ff6d26, #ff4800) repeat scroll 0 0 #ff560e;
}
.forumList:nth-child(7) table.listing th {
background: linear-gradient(#00b689, #14a985) repeat scroll 0 0 #0fad85;
}
.forumList:nth-child(9) table.listing {
margin-bottom: 0 !important;
}

/*
* End of GoT
*/

/*
* About tweakers page
*/

.article #fpaItems:last-child {
margin-bottom: 0;
}

/*
* End of about tweakers page
*/
]]></>).toString());
]]></>).toString());[/code=css]

En dit draait nog in Tampermonkey voor m'n tabjes bovenaan / in topics / overal:
[code=CSS]$("#forum_tabs").remove();
tabsHTML = '<div id="forum_tabs"><div class="pageTabs"><ul>\
<li id="tab_forum_main"><a href="http://gathering.tweakers.net/forum/list_activetopics">Active topics</a></li>\
<li id="tab_forum_activetopics"><a href="http://gathering.tweakers.net/forum/myreact">MyReact</a></li>\
<li id="tab_forum_notepad"><a href="http://gathering.tweakers.net/forum/myreact">NotePad</a></li>\
<li id="tab_forum_faq"><a href="http://gathering.tweakers.net/forum/find/poster/123456/topics">Post History</a></li>\
</ul></div></div></div>';
$("#forumheading").prepend(tabsHTML);[/code=css]

[_eXistenZ_]

Tweakers 7.5 changelog: Tweakers 7.5 - v1.1.3

@ mensen die de mijne "forken" als het ware, zie men post en GitHub voor de repo, zo kunnen we goede ideeën allemaal centraal houden en heeft iedereen er wat aan

[ Voor 40% gewijzigd door _eXistenZ_ op 27-10-2012 18:38 ]

[Joosie200]

Kijk, is die feature netjes naast de zoekbalk terecht gekomen nu Dank _eXistenZ_ voor het laten weten v/d update. Want dan weet ik wanneer ik Tampermonkey een slinger kan geven

[JohnD1]

ook weer een nieuwe versie op : http://userscripts.org/scripts/show/150717

v1.9 Change:
- line spacing reduced
- Video, downloads, .. have now custom no of links visible (can be defined)
- review page looks very good, 8 images next to each other
- reduced pricewatch on frontpage, removed populair categories
- more tweaks

Review pagina ziet er nu een stuk beter uit
...
large: http://i46.tinypic.com/5514b7.jpg

Voor het aanpassen van de fpaItems van de FP en de Reviews gebruik ik dit:

code:

if ( $('#fpaItems').length > 0) {
    // move newsimages into secondcolumn div only on newspage and set correct size
    if ($('div.mainlist').length > 0 ) {              // review page
        $('#fpaItems div.fpaItem').each(function() {
           $(this).css('width' ,'117px');             // 8 on a row
           $(this).css('height','101px');
        });
    } else {                                          // news page
        $('#fpaItems').insertBefore('#b_re');    
        $('#fpaItems div.fpaItem').each(function() {
           $(this).css('width' ,'161px');             // 2x2 square
           $(this).css('height','101px');
        });
    }
}

[JohnD1]

Nieuwe versie Tweakers v7 desktop v2.1 : http://userscripts.org/scripts/show/150717
Pricewatch pagina's zijn nu compleet aangepast:

Resultaat ziet er nu stukken beter uit
Prijzen : http://i49.tinypic.com/23mov4o.jpg
Specificaties: http://i46.tinypic.com/2zsohlf.jpg

Is niet alleen css, maar daar ook jquery voor om een aantal layout wijzigingen door te voeren.
Originele layout is niet helemaal correct, er zit teveel secties in de top sectie, die je moet verplaatsen.

Voor de Specificaties pagina, wordt de contentArea weer in een main en secondColumn ingedeeld
en alle Afbeelding regels verplaatst naar de 2e kolom

code:

// ---- Pricewatch details:  reduce height and put images on secondcolumn
if ($("table.spec-detail").length > 0 ) {
  // make a main and secondcolumn 
  $("div.tab_active").wrap('<div class="mainColumn" />');
  var html = '<div class="secondColumn"><div id="priceimages"><table></table></div></div><br class="clear">' ;
  $(html).appendTo("#contentArea");
    
  $("#priceimages").css('width','250px');
  $("tr td:contains('Afbeeld')").each(function(){
       //        $(this).parent().css('display','none');
      $(this).parent().appendTo('#priceimages table');    
      $(this).remove();
  });
}

In het algemeen zit er een layout probleem in de Pricewatchpagina's
In de div id=top zit ook de #tweakbase en de #tabs, die daar volgens mij niet horen te staan.
Ik heb ze dus verplaatst naar onder de #top en voor de #content

code:

    $('#top #tabs').insertAfter('#top');    
    $('#top #tweakbase').insertAfter('#top');

[Hero of Time]

JonhD1, er staat toch echt heel duidelijk boven de QR box dat als je als laatste hebt gereageerd, je je vorige post moet bewerken. Ga je nou net als _eXistenZ_ de spam kant op, of stop je nu en houd je het netjes zoals eerder genoemde gebruiker is gaan doen?

[josvane]

Weet iemand of het mogelijk is om in css het verschil te herkennen tussen het forum en fp. Voorheen stond er een extra css class in de body, bij mijn weten.

[JohnD1]

Hero Of Time schreef op zondag 28 oktober 2012 @ 14:22:
JonhD1, er staat toch echt heel duidelijk boven de QR box dat als je als laatste hebt gereageerd, je je vorige post moet bewerken. Ga je nou net als _eXistenZ_ de spam kant op, of stop je nu en houd je het netjes zoals eerder genoemde gebruiker is gaan doen?

Dat heb ik gelezen, maar ik dacht dat dat er iets anders stond dan moet... (kan het zo weer lezen en dan edit ik dit)

Je hebt als laatste gereageerd in dit topic. Wil je wat toevoegen, wijzig dan bij voorkeur je laatste bericht.

Even getwijfeld of ik het zou doen, maar heb toen bewust besloten om een aparte post te doen, omdat het over een nieuwe versie gaat (zelfs 1 overgeslagen) , dus dan zou ik een post met 2 versie links erin moeten zetten en dat vond ik wat vreemd.
Buiten dat gaat het voornamelijk over de Pricewatch pagina's
Volgende keer kijk ik wel hoe ik ze samen kan voegen....

[ Voor 7% gewijzigd door JohnD1 op 28-10-2012 14:57 . Reden: Exacte melding bij laatste bericht.... er staat niet moeten, maar bij voorkeur... kleine nuance. ]

[JohnD1]

josvane schreef op zondag 28 oktober 2012 @ 14:51:
Weet iemand of het mogelijk is om in css het verschil te herkennen tussen het forum en fp. Voorheen stond er een extra css class in de body, bij mijn weten.

Volgens mij niet mogelijk in pure CSS (anders leer ik weer wat nieuws),
je moet hiervoor uitwijken naar javascript of jquery

code:

if ( $('#fpaItems').length > 0   &&   $('div.mainlist').length = 0 ) {     # FP
 .... code .....
}

Je kan ook denk ik #secondColumn gebruiken
Waarschijnlijk moet je een combinatie gebruiken, omdat sommige andere pagina's (review) ook FP items/id's hergebruiken.


... sry, deze had ik aan mijn laatste bericht kunnen toevoegen.... maar ik drukte op de quote van de vraag.

[ Voor 8% gewijzigd door JohnD1 op 28-10-2012 15:13 ]

[Hero of Time]

JohnD1 schreef op zondag 28 oktober 2012 @ 14:54:
[...]

Dat heb ik gelezen, maar ik dacht dat dat er iets anders stond dan moet... (kan het zo weer lezen en dan edit ik dit)

[...]


Even getwijfeld of ik het zou doen, maar heb toen bewust besloten om een aparte post te doen, omdat het over een nieuwe versie gaat (zelfs 1 overgeslagen) , dus dan zou ik een post met 2 versie links erin moeten zetten en dat vond ik wat vreemd.
Buiten dat gaat het voornamelijk over de Pricewatch pagina's
Volgende keer kijk ik wel hoe ik ze samen kan voegen....

Ik denk dat het beter is om gewoon je style te maken en pas als je echt veel noemenswaardige dingen hebt aangepast, er een melding van maakt. Ik pas ook hier en daar steeds wat aan, maar meld niet elke keer dat ik een nieuwe versie heb. Pas als ik echt wat heb gedaan, dan pas pas ik m'n eerste post aan en knal ik m'n huidige CSS over de bestaande heen. Kleine changelog wat ik nog kan herinneren eronder met datum, klaar. Linkje op laatste pagina eventueel en done.

Als je userstyles oid gebruikt waarbij de mensen die je style willen gebruiken, krijgen dan toch al je nieuwe versie.

Mocht je echt iets hebben waarvan je denkt, dit is handig voor anderen, post dan alleen dat stukje css zonder een link naar je off-site style. Nu komt het nogal spammerig over namelijk, alsof je inkomsten krijgt per click.

[_eXistenZ_]

Hero Of Time schreef op zondag 28 oktober 2012 @ 14:22:
JonhD1, er staat toch echt heel duidelijk boven de QR box dat als je als laatste hebt gereageerd, je je vorige post moet bewerken. Ga je nou net als _eXistenZ_ de spam kant op, of stop je nu en houd je het netjes zoals eerder genoemde gebruiker is gaan doen?

/update

Hier stond een wat lompe message richting Hero of Time, inmiddels hebben we via DM even gepraat en bleek het gewoon om onderling onbegrip te gaan, terwijl we dingen helemaal niet zo bot/lomp bedoelden.

Dus remember kids: verbaal is maar 7% van communicatie; de andere 93% is non-verbaal, en die mis je noggal hard op een forum dus worden dingen soms anders opgevat dan ze bedoeld zijn

[ Voor 49% gewijzigd door _eXistenZ_ op 29-10-2012 19:32 ]

[Wiethoofd]

Waarom hosten mensen geen enkele .css file ergens die dan met een @import te importeren is, zo heb je van je favoriete stylesheetmod altijd de nieuwste versie....

[RuddyMysterious]

Wiethoofd schreef op zondag 28 oktober 2012 @ 17:07:
Waarom hosten mensen geen enkele .css file ergens die dan met een @import te importeren is, zo heb je van je favoriete stylesheetmod altijd de nieuwste versie....

Ik meen mij te herinneren dat onder andere Firefox daar mottig over doet, omdat het geen import-directive van een ander domein aanvaardt.

edit: of het gaat over @font-face met een url() met een ander domein dat niet aanvaard wordt door Firefox, niet zeker meer.

[ Voor 14% gewijzigd door RuddyMysterious op 28-10-2012 21:11 ]

[F.West98]

Ik denk geen van beide
@import werkt iig, jaren gedaan in TWK6 met FF
Op mijn site gebruik ik @font-face met een externe url, werkt ook goed

[RuddyMysterious]

F.West98 schreef op zondag 28 oktober 2012 @ 21:56:
Ik denk geen van beide

Ik ben echt niks aan het verzinnen, hoor. Gelukkig lijkt het er op dat dit tot het verleden behoort, en maar goed ook.

[Verwijderd]

Is er iemand die me op het goede spoor kan zetten hoe ik een combo box maak in Javascript en CSS of andere tools die als add-on te verkrijgen zijn voor Firefox?

[Senaxx]

Ik heb de mijne aangepast zodat deze weer werkt met de aanpassingen die door de crew van Tweakers.net zijn doorgevoerd. Ik heb deze zelf via de CSS Karma optie draaien.



http://pastie.org/5137423

[ Voor 11% gewijzigd door Senaxx op 30-10-2012 14:21 ]

[WouterKvG]

Hij stond al eventjes in het CSS Competition topic maar ik zal hem m'n custom style hier ook nog even posten. Hij is geoptimaliseerd voor schermen groter dan 1270px breed. Het hele thema heb ik zoveel als mogelijk naar T6 toe laten komen. Eigenlijk alles is zelf geschreven. Het idee van de 4 review blokjes op de FP aan de rechterkant plaatsen komt van _eXistenZ_). Verder heb ik een paar forumtweaks van Wiethoofd overgenomen. Ik heb niet alle forumtweaks (zoals kleuren) overgenomen omdat ik dat te specifiek vond. Uiteraard kun je deze er wel zelf in plakken. Check voor alle aanpassingen de links hieronder naar de userstyles/userscripts pagina.

Tweakers 7 to 6

Check voor meer screenshots deze flickr set: Tweakers 7 - Custom CSS by WouterKvG

---

- Style op userstyles.org.

Verder heb ik ook een script geschreven zodat de tracker ook op kleinere resoluties te zien blijft. Dot script bevat ook alle css uit de userstyle maar ik raad echter aan om ook stylish of custom css te gebruiken omdat javascript css nogal traag is in vergelijking met stylish/custom css.

- Script + Style op userscripts.org.

[Wom]

Heb niet zoveel met Custom CSS, maar deze ziet er prima uit WouterKvG! Mooie combinatie van oud en nieuw

[Raven]

WouterKvG schreef op dinsdag 30 oktober 2012 @ 16:40:
Hij stond al eventjes in het CSS Competition topic maar ik zal hem m'n custom style hier ook nog even posten. Hij is geoptimaliseerd voor schermen groter dan 1270px breed. Het hele thema heb ik zoveel als mogelijk naar T6 toe laten komen. Eigenlijk alles is zelf geschreven. Het idee van de 4 review blokjes op de FP aan de rechterkant plaatsen komt van _eXistenZ_). Verder heb ik een paar forumtweaks van Wiethoofd overgenomen. Ik heb niet alle forumtweaks (zoals kleuren) overgenomen omdat ik dat te specifiek vond. Uiteraard kun je deze er wel zelf in plakken. Check voor alle aanpassingen de links hieronder naar de userstyles/userscripts pagina.

Tweakers 7 to 6

[afbeelding]
Check voor meer screenshots deze flickr set: Tweakers 7 - Custom CSS by WouterKvG

---

- Style op userstyles.org.

Verder heb ik ook een script geschreven zodat de tracker ook op kleinere resoluties te zien blijft. Dot script bevat ook alle css uit de userstyle maar ik raad echter aan om ook stylish of custom css te gebruiken omdat javascript css nogal traag is in vergelijking met stylish/custom css.

- Script + Style op userscripts.org.

Misschien een idee, maar zou je de flickrset publiekelijk beschikbaar willen maken? Zit nu achter een login...

[Angeloonie]

laat maar

[ Voor 95% gewijzigd door Angeloonie op 30-10-2012 17:24 ]

[F.West98]

Verwijderd schreef op maandag 29 oktober 2012 @ 14:56:
Is er iemand die me op het goede spoor kan zetten hoe ik een combo box maak in Javascript en CSS of andere tools die als add-on te verkrijgen zijn voor Firefox?
[afbeelding]

Je bedoelt een multiple select (niet dropdown dus)?
Dan is de volgende jQuery genoeg:

JavaScript:

$([selector]).attr('multiple', 'multiple');

[WouterKvG]

De verkeerde link geplaatst. Ik wil namelijk niet dat ze in m'n normale flickr stream komen. Daarom had ik een guestpass aangemaakt, maar vervolgens de verkeerde link gekopieerd. Dit is de goede link: http://flickr.com/gp/wouterkvg/430t1A

Ik zal ook gelijk even updaten in de orginele post.

[Verwijderd]

F.West98 schreef op dinsdag 30 oktober 2012 @ 18:08:
[...]

Je bedoelt een multiple select (niet dropdown dus)?
Dan is de volgende jQuery genoeg:

JavaScript:

$([selector]).attr('multiple', 'multiple');

Ik weet niet wat jij bedoeld . Ik dacht dat combo box de officiële term is voor wat ik bedoel. Wikipedia: Combo box

Het is gewoon 1 lijn hoog (met bijv de tekst selecteer forum) en als je op dat pijltje duwt dan klapt het helemaal uit en kun je alle mogelijke subfora op GoT selecteren. Echter dit hele ding is verdwenen en wil ik graag terugbrengen .

Ik heb bijvoorbeeld deze voorbeelden gevonden: http://www.itechies.net/t...example.php-pid-combo.htm Alleen hoe koppel ik dat nu met GoT.

[ Voor 10% gewijzigd door Verwijderd op 31-10-2012 17:05 ]

[Creesch]

Verwijderd schreef op woensdag 31 oktober 2012 @ 16:56:
[...]

Ik weet niet wat jij bedoeld . Ik dacht dat combo box de officiële term is voor wat ik bedoel. Wikipedia: Combo box

Het is gewoon 1 lijn hoog (met bijv de tekst selecteer forum) en als je op dat pijltje duwt dan klapt het helemaal uit en kun je alle mogelijke subfora op GoT selecteren. Echter dit hele ding is verdwenen en wil ik graag terugbrengen .

Ik heb bijvoorbeeld deze voorbeelden gevonden: http://www.itechies.net/t...example.php-pid-combo.htm Alleen hoe koppel ik dat nu met GoT.

met greasemonkey kan je dit bereiken, maar daar heb je wel wat vaardigheden voor nodig.
http://codebazaar.blogspo...-see-greasemonkey-do.html

[ Voor 4% gewijzigd door Creesch op 31-10-2012 18:03 ]

[Verwijderd]

Wat updates aan mijn kant (helaas Stylish/FF en Greasemonkey only)
Searchbar terug maar met een gradient en een transparante bovenkant (gefixeerd dus altijd in beeld)

[ Voor 5% gewijzigd door Verwijderd op 31-10-2012 20:33 ]