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

[cpt.skydiver]

Hierbij ook mijn variant. Uitgebreide beschrijving op userstyles. Er komen nog meer leuke dingen bij in de komende paar dagen...



http://userstyles.org/styles/76885/tweakers-7

[Tsurany]

Die "ik heb nu dit blabla" vind ik juist WEL interessant. Het is een verzameltopic waarin iedereen zijn CSS kan showen, dat is juist leuk omdat de mensen die geen zin hebben een eigen CSS te maken nu lekker kunnen shoppen.

[_eXistenZ_]

Thx!

Èèèèèèèèèn we hebben beeld:
http://userscripts.org/scripts/show/150491

Zitten nog wel wat bugjes in, maar het meeste werkt al prima
Ben nog bezig alles compacter te maken, voornamelijk op GoT.

[ Voor 45% gewijzigd door _eXistenZ_ op 19-10-2012 22:56 ]

[F.West98]

Op het moment zijn alle leuke ideeën hier, en alle "dit is mijn tnet nu" in mijn topic.
Misschien een idee om dit nog verse topic te gebruiken als die plek en de leuke ideeën zoals ik dat ook heb in mijn TS in mijn topic?
Dan blijft de bedoeling van mijn topic een beetje behouden

[franssie]

_eXistenZ_ schreef op vrijdag 19 oktober 2012 @ 22:55:
Thx!

Èèèèèèèèèn we hebben beeld:
http://userscripts.org/scripts/show/150491

Zitten nog wel wat bugjes in, maar het meeste werkt al prima
Ben nog bezig alles compacter te maken, voornamelijk op GoT.

Ik had al wat css draaien maar deze script-aap doet het nog veel compacter, thanks!

[yannickie111]

Is het via CSS mogelijk om de verschillende kleurtjes van de subfora terug te krijgen in de lijst van topics waar je in gerageerd hebt? Dit zou voor mij echt +18763 zijn!

[Verwijderd]

Kan iemand mij helpen het fotoalbum te stylen?

Het fotoalbum stamt nog uit tweakers 6.993b en gebruikt inline styles (). Ik wil hem maximaal 900px breed maken, maar krijg het niet voor elkaar de ID-loze div met content van de map te selecteren dmv CSS. En kan die div dus ook niet smaller maken zodat mij horizontale scrollbalk verdwijnt.

[F.West98]

Inmiddels is een deel van de nieuwe TS online!

Misschien kunnen we voor het show je eigen tnet een ander topic maken. Mijn bedoeling was met dit topic zoals het was: leuke dingen neerzetten. (ja hoe leg ik het uit).
Dus als je een zoekbalk ergens anders hebt neergezet, zet dat duidelijk in een [h1], foto'tje erbij, benodigde code erbij. Niet met de rest als ene donkere achtergrond, die staat al in dit topic (en vanaf nu ook in de TS). De zoekbalk ergens anders is namelijk wel leuk! (maar het is niet makkelijk zoeken, dat is mijn bezwaar)
En bijvoorbeeld die Greasemonkey voor bookmakrs in menu, ook leuk!

Maar zoals het nu al veel pagina's gaat is het niet mijn bedoeling.

edit:
p11,12 ed was leuk, iedereen post zijn eigen nuttige toevoeging, duidelijk doorzoekbaar. Nu combineert iedereen alles en gaat alles op elkaar lijken

[ Voor 10% gewijzigd door F.West98 op 19-10-2012 23:02 ]

[_eXistenZ_]

Op pagina's met een header div er boven (bijv. de meuktracker) is het nog een bende, merk ik net. Morgen maar eens zien of ik dat fixen kan.

[alex3305]

En dan ga ik weer verder waar ik gebleven ben. Met nog wat tweaks. Waaornder de reacties onder artikelen eruit laten zien als het forum. Althans zo ongeveer .

Cascading Stylesheet:

/* Transparante topborder voor alternatieve achtergronden */
.topBorder, .eenReactie .topBorder, .reactie .topBorder {background: transparent url(http://tweakers.net/ext/f/dnI1SO8bL4GhWrKc7T28EBNN/full.png) !important;}

/* Onderwerpen en gerelateerd in het lichtblauw zoals op de FP */
.relevancyColumn {padding: 15px 15px 17px; border: 1px solid #DDDEDE; border-radius: 1px; background: #EDEEEE; background-image: -webkit-linear-gradient(#F5F6F6,#EDEEEE); background-image: -moz-linear-gradient(#F5F6F6,#EDEEEE); background-image: linear-gradient(#F5F6F6,#EDEEEE); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .33); margin-left: 0px; width: 310px}

/* Pricewatch blok strak uitgelijnd in de onderwerpen en gerelateerd block bij artikelen */
.relevancyColumn .relatedBlock {border: none; background: none; background-image: none; -webkit-box-shadow: none; box-shadow: none;}
.relevancyColumn .popularProductListing {margin-left: -15px;}
.relevancyColumn .popularProductListing .sortable {min-width: 300px;}

/* Reacties zoals mijn stijl @ GoT */
.reacties {background: #fff; border: #DDDEDE; padding-bottom: 10px; margin-bottom: 20px;}
.reacties > .reactie {background: none; padding-left: 0px; border: none;}
.reacties > .reactie, .eenReactie {margin-top: 0;}
.eenReactie .topBorder {display: none;}
.reactieHeader {background: #eee;}

.reactieBody.hidden, .reactieBody.informative, .reactieBody.spotlight {margin-left: 0; padding-left: 0;}
.reactieBody.informative, .reactieBody.spotlight {border: none !important;}
.reactieBody.informative > .reactieFooter, .reactieBody.spotlight > .reactieFooter {margin-bottom: 0;}

.reactieHeader {padding-left: 10px;}
.reactieContent {padding: 10px 10px 15px 10px;}
.reactieFooter {padding:  0 10px 10px 10px;}

#reactieForm {padding-left: 10px;}
table.nextPrevious, .nextPrevLinks {margin-bottom: 0;}

Om maar even een beeld te geven van mijn Tweakers 7 momenteel:



Zoals je ziet best wel wat kleine, maar ingrijpende veranderingen waardoor de gebruikerservaring een stuk beter wordt .

Edit:

Cascading Stylesheet:

/* Blauwe Tweakers 7 */
#top {background: #047DD6; background-image: -webkit-linear-gradient(#047DD6,#428CE8 68px); background-image: -moz-linear-gradient(#047DD6,#428CE8 68px); background-image: linear-gradient(#047DD6,#428CE8 68px); }

w000000t!

[ Voor 5% gewijzigd door alex3305 op 19-10-2012 23:20 ]

[psy]

Dit is echt fantastisch keep up the good work mensen

[Verwijderd]

F.West98 schreef op vrijdag 19 oktober 2012 @ 23:01:
Misschien kunnen we voor het show je eigen tnet een ander topic maken. Mijn bedoeling was met dit topic zoals het was: leuke dingen neerzetten. (ja hoe leg ik het uit).

Dus je maakt een algemeen show-je-CSS topic. En nu het een succes is moeten wij ons eigen topic maken.

Lekker handig.

[Saturnus]

Caelorum schreef op vrijdag 19 oktober 2012 @ 21:34:
Iemand hier vroeg of er commentaar bij de CSS kon worden geplaatst. Bij deze mijn Custom Stylesheet. Het is bijna af. Ik heb er alleen een lelijke oplossing inzitten voor de zoekbalk. Werkt perfect op mijn scherm met deze resolutie, maar een iets andere resolutie geeft een iets lelijker resultaat. De zoekbalk blijft namelijk altijd links in de browser uitgelijnd. Ik ga denk ik morgen eens kijken hoe ik het op die mooie plek kan krijgen zonder dat ongewenste gedrag

FrontPage:
[afbeelding]
Forum:
[afbeelding]

Code:

Cascading Stylesheet:

...

Mooie css!

Mijn concept so far:

[F.West98]

Ok, laat ik eens een voorbeeld geven:
Orion84 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Daar wordt een hele lap CSS gepost, zonder wat het nou is.
In de CSS zie ik het volgende (eerder geposte) terug komen:
Deel van F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
Deel van Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
En wat extra leuke dingen.
Als die extra leuke dingen duidelijk worden gemaakt hoeft niemand in die CSS te zoeken wat nieuw is, is het voor anderen duidelijk e.d.


Ik overdrijf té, inderdaad, het moet ook kunnen, je mag dingen dubbel doen. Maar nu is het zo dat IEDEREEN, in 1 DAG, hetzelfde post. Iedereen is nu van: "ik moet nieuwe CSS want dit is zo slecht", niemand leest wat er al staat en post zn eigen zooi. Toegegeven, staat veel nuttigs in, maar laten we dit topic duidelijk en overzichtelijk houden zodat anderen het wiel niet opnieuw uit te hoeven vinden.

Ik ben iig nu bezig met de TS, daar kan je dan alles terugvinden. Als je me helpt door jouw leuke idee duidelijk neer te zetten met een plaatje, titel en korte code (of link naar pastebin oid) ben ik je erg dankbaar.

edit:
en hierboven: enkel een plaatje en verder mijns inziens niet veel nieuws. Ik zie veel bekende elementen terugkomen. (natuurlijk mag het, maar allemaal dezelfde (globaal) plaatjes maken het onduidelijk)

[ Voor 7% gewijzigd door F.West98 op 19-10-2012 23:16 ]

[matel]

Senaxx schreef op vrijdag 19 oktober 2012 @ 18:41:
Hierbij mijn css nogmaals hier zit nog wel de comment witte regel "bug" in, maar voor de rest is hij strak getrokken. Heb alle kleine foutjes zover mogelijk er uit gehaald. Deze werkt ook prima op het forum.

[afbeelding]


[knip]

Kijk, dat ziet er een stuk plezieriger uit voor het oog
Nu nog even sparen voor voldoende karma, want ik heb ik geen firefox op het werk

[F.West98]

En zoals het nu gaat in het actietopic (Tweakers 7 Ultimate CSS Competition - Inzendtopic) zou ik het eigenlijk ook hier willen zien, althans, dat was mijn bedoeling

[filenox]

Beste CSS-freaks, op moment van typen loopt er ook een wedstrijd op GoT ivm custom CSS, ga even kijken zou ik zeggen

Tweakers 7 Ultimate CSS Competition - Inzendtopic

[Verwijderd]

Er 'gaat nu' helemaal niets in dat topic. Het heeft pas één post.

[ Voor 71% gewijzigd door Verwijderd op 19-10-2012 23:23 ]

[Joosie200]

Wiethoofd schreef op donderdag 18 oktober 2012 @ 13:27:
• - Forummapjes proberen te herstellen (multicolor per forumcategorie zal ik naar proberen te kijken)
[list]• Wiethoofds meuk en 'overige': Candy colourless GoT (update)
• - Zelf als laatste gereageerd in topiclijsten aangeven
[/list]

code:

@import url(http://wiethoofd.info/css/candycolors.php?templateset=got);

levert op:



Dat is dus al een stap in de richting zoals ik het graag zie Maar enig idee hoe je per categorie de mapjes een ander kleurtje meegeeft? Elk van die templatesets doet dat nog niet in elk geval.

[F.West98]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 23:23:
Er 'gaat nu' helemaal niets in dat topic. Het heeft pas één post.

Nog niet. Maar het ziet er goed uit, iedereen moet zich aan dat format houden (en wil dat ook omdat ze willen winnen). Dat format zorgt voor een overzichtelijk topic. Hier is dat helaas weg...

en, toegegeven, het gaat nu ook beter dan vanmiddag/vanochtend. Toen was het meer een zooitje

edit: nu aan het nalezen en het valt toch wel mee. Maar liever toch wat meer overzicht

[ Voor 20% gewijzigd door F.West98 op 19-10-2012 23:33 ]

[Verwijderd]

filenox schreef op vrijdag 19 oktober 2012 @ 23:22:
Beste CSS-freaks, op moment van typen loopt er ook een wedstrijd op GoT ivm custom CSS, ga even kijken zou ik zeggen

Tweakers 7 Ultimate CSS Competition - Inzendtopic

• De inzending moet gebruikt kunnen worden in het custom CSS veld die beschikbaar is via de karmastore.
• Plugins als greasemonkey zijn dus niet toegestaan.

Ik ben twee keer af

[nero355]

Wat sommigen ervan maken veroorzaakt bij mij echt reacties !!

Keep up the good work guys

[Hooglander1]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 23:28:
[...]


• De inzending moet gebruikt kunnen worden in het custom CSS veld die beschikbaar is via de karmastore.
• Plugins als greasemonkey zijn dus niet toegestaan.

Ik ben twee keer af

Ah joh, dan maak je toch een CSS only versie. Kom op zeg, doe een beetje creatief

[Verwijderd]

Hooglander1 schreef op vrijdag 19 oktober 2012 @ 23:30:
[...]

Ah joh, dan maak je toch een CSS only versie. Kom op zeg, doe een beetje creatief

Gaat niet, want die sloopt de FP.

Valt achteraf nog mee, maar dan moet ik nog een shitload aan aanpassingen maken en de FP heeft voor mij geen prioriteit.

[ Voor 21% gewijzigd door Verwijderd op 19-10-2012 23:35 ]

[wontcachme]

Zo goed als klaar:

Nog wat kleine dingen en een probleem bij de DM's (te breed). Hopelijk kom ik daar binnenkort nog op een idee voor.

Cascading Stylesheet:

/** Spoilers zijn leesbaar bij mouse over */
div.spoiler:hover {color: white !important;}

/* Verkleinen notepad in myreact */
#mynotepad textarea {height: 150px !important; width: 450px !important;}

/* Weghalen True reclame */
#true {display: none !important;}

/* weghalen sidebar */
#sidebar {display: none !important;}

/* Weghalen newsletter subscription FP */    
#newsletter {display: none !important;}

/* Weghalen jobs ruimte FP */
#jobs {display: none !important;}

/* Weghalen Twitter/Facebook van FP */
#social {display: none !important;}

/* Header website blauw */    
#top {background-color: #0052CC !important; background-image: none !important;}

/* Topic titel blauw */
h1, h2, h1 a, h2 a  {color: #0052CC !important;}

/* Jobs onderdeel uit header */
#menu ul:first-child li.last.more div ul li:first-child,
#menu ul:first-child li.last.more div ul li+li+li+li { display: none !important; }
#menu ul:first-child li.last.more div ul li+li+li+li+li { display: block !important; }

/* Pricewatch filters naar rechts */
#filterContainer {float: right; margin: 0 0 0 30px;}

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

/* messageheader ownpost groen */
div.message div.ownpost {background: rgb(200, 230, 210) !important;} 

/* Posts iets verder van elkaar af in een topic */
div.message {margin-bottom: 3px !important; border: 1px solid rgb(195, 195, 195) !important;}    
    
/* Aanpassen kleur postdatum in messageheader */
.date a  {color: #444444 !important;}

/* Verkleinen tussenruimte myreact */
td, th {padding: 4px 5px!important;}
 
/* Weghalen Quick Reply */ 
#quickreply_form {display: none !important;}    
#reageer {display: none !important;}       

/* Verbreden post area */
#messages, .topic_actions {width: 956px !important;}
.messagecontent {width: 800px !important;}
div.post {padding: 6px 0 6px 10px !important;}

/* Weghalen karma in profiel */ 
div.karma {display: none !important;} 
    
/*searchbar omhoog*/
#search{position:absolute;top:-10px;right:220px;}

/*Forum en website dichter naar menu*/
#searchbar {height: 10px !important;}
body{background-color:#313232; padding-left:0px; padding-top: 0; top: 6px;}
#contentArea{background-color:#FFFFFF;padding-left:5px;}
#searchbar {background:#313232 !important;}
#top {border-bottom: 1px solid #313232 !important;}
div.hr {background:#313232 !important;}

/*topic pagina nummers in myreact zwart en grijs wanneer bezocht.*/
td.topic small a:visited {color: rgb(97, 100, 100) !important;}
td.topic small a {color: black !important;}

/*topics in myreact zwart*/
td.topic a {color: black !important;}

/*menubar 100% van het scherm*/
#menubar {width: 100% !important;}

/*Custom quotes*/
div.messagecontent blockquote div.message-quote-div {
    background-color: #FDFDFD !important;
    border: 1px solid #888888 !important;
    color: #111111 !important;
    border-radius: 3px 3px 3px 3px !important;}

/*Oprotten met die social buttons*/
#socialButtons {display: none !important;}

/*Groene toon voorbeeld button*/
form input.forumlink:hover {
    text-decoration: none;
    color: white;
    background:#83dd71;}
form input.forumlink {
    height: 26px;
    padding: 0 10px;
    color: white;
    font-size: 12px;
border-radius: 3px 3px 3px 3px;
    border: 1px solid #71c062;
    background: #7acf6a;}

/*Remove bullets bij de reageer/raporteer */
.action_list li:before { content: none; !important; }
 
/*Vierkanten bij reageer (blauw), rapporteer (rood) enz. Laatste 2 zijn voor verwijderen postreminder+Koppel item*/
div.topic_actions ul a {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin-right: 6px;
    text-decoration: none;
    background: linear-gradient(#0A93CA, #0A8ABD) repeat scroll 0 0 #0A93CA;
    border: 1px solid #0987B8;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 12px;
    height: 26px;
    padding: 0 5px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);}
div.topic_actions ul a:hover{  
    text-decoration: none;
    color: white;
    background:#0ca3d4;}
div.topic_actions ul a[title="Rapporteer dit topic"] {
    background: linear-gradient(#ff3019, #cf0404) repeat scroll 0 0 #ff3019;
    border: 1px solid #cf0404;}
div.topic_actions ul a[title="Rapporteer dit topic"]:hover {  
    text-decoration: none;
    color: white;
    background:#F00;}
div.topic_actions ul a[title~="postreminder"] {display: none !important;}
div.topic_actions ul a[title~="koppelen"] {display: none !important;}

/*Blauwe quote bij een post*/
div.message div.message_actions ul.action_list a {
    height: 26px;
    padding: 12px 10px 5px 10px;
margin-left: 6px;
    color: white;
    font-size: 12px;
    border: 1px solid #0987B8;
    border-radius: 0 0 3px 3px;
    background: #0A93CA;}
div.message div.message_actions ul.action_list a:hover {  
    text-decoration: none;
    color: white;
    background:#0ca3d4;}    
  
  /** Topic wordt rood wanneer ik laatste poster ben */
table.listing tbody tr td.topic a[title="Laatste bericht geplaatst door wontcachme"],
table.listing tbody tr td.topic a[title="Laatste bericht geplaatst door wontcachme"] + small a {color: #F00 !important;}

/*Buttons hebben rondere hoeken*/
.fancyButton {border-radius: 3px 3px 3px 3px;}

/*Pagecounter ronde hoeken */
p.pagecounter b {border-radius: 3px 3px 3px 3px;}

[F.West98]

En de TS is weer up-to-date!

[Asgaro]

Nu nog een CSS waardoor je vallende sneeuwvlokjes krijgt... Lijkt me wel leuk.

[F.West98]

Die had Wiethoofd ooit voor kerst... Lees de eerste 10 pagina's nog maar eens door

[Zeror]

@ F.West98,

Wellicht een idee om in de TS aan te geven of een css-style in de Tnet custom css box te gebruiken is of dat je er een browserplugin voor nodig hebt.

[Caelorum]

wontcachme schreef op vrijdag 19 oktober 2012 @ 23:33:
Zo goed als klaar:

Nog wat kleine dingen en een probleem bij de DM's (te breed). Hopelijk kom ik daar binnenkort nog op een idee voor.
[...]

Ik zie dat je de social buttons hebt 'uitgezet' met css. Dit kan je ook in je profiel uitzetten Dan hoeven ze ook niet te worden ingeladen...

[wontcachme]

Caelorum schreef op vrijdag 19 oktober 2012 @ 23:52:
[...]

Ik zie dat je de social buttons hebt 'uitgezet' met css. Dit kan je ook in je profiel uitzetten Dan hoeven ze ook niet te worden ingeladen...

Weet ik. Heb ik ook uit staan maar had toch een witte rij onder de artikelen staan

[Bommes]

Zeg, ik wil niet als een complete noob overkomen maar dit css gedoe heb ik 1: geen kaas van gegeten en 2: te weinig karma voor om het te gebruiken.
Dus ben ik overgeleverd aan dit soort oplossingen.
Maar dat is dus echt niet je van het, heb er nu http://userstyles.org/sty...eakers-7-0-grey-compacted deze opstaan (via firefox addon)
Opzich gaat het wel maar kan ik straks gewoon kiezen welke layout ik wil via de instellingen of is dat verloren hoop..??

[alex3305]

En weer wat meuk erbij

Cascading Stylesheet:

/* Actielijst gefixed */ 
.topic_actions .action_list {font-size: 8pt;} 

/* Action lijst: Weghalen van Reageer! */
.topic_actions .action_list li:nth-child(2):before {content: " "}
.topic_actions .action_list li:first-child {display:none;}

/* Kleurtjes voor Topic Reports */
.topic_actions .action_list li a[title$="je laatste report is nog niet gelezen"] {color: #B9133C;}
.topic_actions .action_list li a[title$="je laatste report is afgehandeld"] {color: #42b913;}
.topic_actions .action_list li a[title^="Rapporteer dit topic"] {color: #b98013;} /* Eigenlijk voor de tussenstaat, maar heb ik momenteel geen tekst van */
.topic_actions .action_list li a[title="Rapporteer dit topic"] {color: #024368;}

/* Donkere zoekbar met leesbaar True-logo */ 
#searchbar {background: #666; background-image: -webkit-linear-gradient(#5a5a5a,#515151); background-image: -moz-linear-gradient(#666,#555); background-image: linear-gradient(#666,#555); border-radius: 6px 6px 0 0; border-top: 1px solid #aaa; color #fff;} 
a#true {display: block; width: 48px; height: 25px; background: transparent url(http://tweakers.net/ext/f/wGX6Wtpc1n5MxlQxKoEZ0SAw/full.png) no-repeat 0 0;} 
img[alt="True logo"] {display: none;} 

/* Home weghalen op het forum in de Breadcrumbs */ 
#forumheading .breadcrumb a:first-of-type, #forumheading .breadcrumb span:first-of-type {display: none;} 

/* Blauwe Tweakers 7 */ 
#top {background: #047DD6; background-image: -webkit-linear-gradient(#047DD6,#428CE8 68px); background-image: -moz-linear-gradient(#047DD6,#428CE8 68px); background-image: linear-gradient(#047DD6,#428CE8 68px); }

Blauwe Tweakers is in de DSP-style kleuren uitgevoerd. Precies zoals het op de oude Tweakers-admin layout was.

Edit: Nog iemand een tip hoe je de lijntjes bij de reacties op de FP gefixed krijgt? Ik heb geen zin meer om het uit te zoeken. Alles staat zo ongelofelijk onlogisch - naar mijn idee - genest .

---

Edit 2: Nu TRs beter uitgewerkt en volledige knopjes @ forum gemaakt. Ziet er zo wat netter uit .

Cascading Stylesheet:

/* Actielijst gefixed */  
.topic_actions .action_list {font-size: 8pt;}  

/* Action lijst: Weghalen van Reageer! */ 
.topic_actions .action_list li:before {content: " "; margin: 0;} 
.topic_actions .action_list li:first-child {display:none;} 

/* Topic Action List dinges ook gefixed met achtergrondjes -- Deel 1 */ 
.topic_actions .action_list li a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px; display: inline-block; margin-right: 7px} 

/* Kleurtjes voor Topic Reports -- Als buttons. Hierboven is een tekstuele variant! */ 
.topic_actions .action_list li a[title^="Rapporteer dit topic"] {background: #b98013; color: #fff;} /* Eigenlijk voor de tussenstaat, maar heb ik momenteel geen tekst van */ 
.topic_actions .action_list li a[title$="je laatste report is nog niet gelezen"] {background: #B9133C; color: #fff;} 
.topic_actions .action_list li a[title$="je laatste report is afgehandeld"] {background: #42b913; color: #fff;} 
.topic_actions .action_list li a[title="Rapporteer dit topic"] {background: #D9ECFF; color: #024368;} 

/* Deel 2 van TAL */ 
.topic_actions .action_list li a:hover {background: #0A8FC4; color: #fff; text-decoration: none;} 

/* Pagecounter netjes maken */ 
.pagecounter a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px;} 
.pagecounter a:hover {background: #0A8FC4; color: #fff;} 

/* Preview op het forum netjes maken */
.formsubmit input[value="Verstuur bericht"] {font-weight: bold;}
.formsubmit input[value="Bekijk bericht"], .formsubmit input[value="Toon voorbeeld"] {background: #D9ECFF; padding: 5px 9px 6px 9px; border-radius: 1px; display: inline-block;}
.formsubmit input[value="Bekijk bericht"]:hover, .formsubmit input[value="Toon voorbeeld"]:hover {background: #0A8FC4; color: #fff; text-decoration: none;}

Pff. Tweakers 7 houd je zo wel bezig. Maar ik ben iig al bijna klaar om in het contest topic te posten. Nu hopen dat niemand mijn creaties misbruikt .

[ Voor 44% gewijzigd door alex3305 op 20-10-2012 01:19 . Reden: Whoopsie daisy. Per ongeluk quotes gesloopt :+ ]

[Madrox]

Zoo, lekker druk hierzo Dankzei de DEV's maken we overuren

Ben ff aan het stoeien geweest met Firefox en het gaat lekker, maar ik zit nu wel met een kleing bugje
in de pricewatch, als je doorklikt. Hier de plaatjes van mijn "worklog":

Public Publieke map

Yep, goed geraden: rechts onder; daar zie je de "bug". Je raad het al; wat nu

ps: heb het PW venster langer gemaakt, en nu passen alle rubrieken in het witte veld, zonder die akelige scrollbars

Oja, de floating tracker in actie; mooi uitgelijnd met ruimte boven en onder

[ Voor 7% gewijzigd door Madrox op 20-10-2012 00:43 ]

[Verwijderd]

Nieuw, fixed header. Altijd je header tot je beschikking. Waar dan ook op de pagina. Zoek altijd en overal. Ehm, zodra de GoT search het doet

code:

#search .keywordSearch,
#menubar 
{
    position: fixed;
    z-index: 100;
}

#menubar
{
    z-index: 101;
}

.popup
{
    position: fixed;
}

De rest kan de devver zelf wel bedenken.

NB: ik vind het verschrikkelijk. Maar het was 5 minuten werk.

[F.West98]

Maar nou is je rode balkding weg
Ik heb er ook één.

Searchbar IN je menubalk (CSS only)

Werkt enkel op schermen 1500px+
Menubalk ook gefixeerd, rode nog zichtbaar (wordt aan gewerkt)

Cascading Stylesheet:

#top {
    height: 85px;
    position: fixed;
    width: 100%;
    z-index: 111; /* Precies 1 hoger dan tracker */
}
@media screen and (min-width: 1500px) {
    #searchbar {
        position: absolute;
        background: transparent;
        width: 15%;
        height: 30px;
        margin-top: 20px;
        margin-left: 6%;
        -moz-transition: 0.15s linear all;
        -webkit-transition: 0.15s linear all;
        -o-transition: 0.15s linear all;
        -ms-transition: 0.15s linear all;
        transition: 0.15s linear all;
    }
    #search { width: 100%; padding-top: 0; }
    #search .keywordSearch, #search input.text { width: 95%; }
    #search input.text {  padding: 4px 10px 4px 4px; }
    #search input.submit { position: absolute; }
    #true { display: none; }
    .mainSearchSuggest { z-index: 112; }
}
@media screen and (max-width: 1800px) {
    #searchbar { width: 12%; }
}
@media screen and (max-width: 1650px) {
    #searchbar { width: 10%; }
}
@media screen and (max-width: 1499px) {
    #searchbar { display: none; }
}
#contentArea { padding-top: 95px; }
.trackerPopup.fixed { top: 95px; }

Minder breed, dan search verborgen (kan je zelf aanpassen ofcourse, r.34)

[Blue-eagle]

Lekker aan het verder prutsen met mijn donkere thema Nu ook met sidebar links/rechts-feature toegevoegd. 't Kreng scrollt alleen nog niet met mee. Maar ik gebruik hem zelf ook niet, dus whatever.

Features:

- Compactere homepage
- Donker donker donker
- Header blijft bovenin staan
- ????
- Profit!



Pastebin CSS: http://pastebin.com/FwsQSGLT

[Madrox]

Verwijderd schreef op zaterdag 20 oktober 2012 @ 00:56:
Nieuw, fixed header. Altijd je header tot je beschikking. Waar dan ook op de pagina. Zoek altijd en overal. Ehm, zodra de GoT search het doet

[afbeelding]

code:

#search .keywordSearch,
#menubar 
{
    position: fixed;
    z-index: 100;
}

#menubar
{
    z-index: 101;
}

.popup
{
    position: fixed;
}

De rest kan de devver zelf wel bedenken.

NB: ik vind het verschrikkelijk. Maar het was 5 minuten werk.

Ja, 5 minuten voor noppes
De menu bar verdwijnt nu onder de tracker, op alle pages en het probleem van plaatje negen is er ook nog steeds
Blue-Eagle; let me gues; je kast en toetsenbord zijn ook zwart

[ Voor 4% gewijzigd door Madrox op 20-10-2012 01:05 ]

[F.West98]

Tracker fixed

Tracker op vaste plek naast content, goede uitlijning naast content

Cascading Stylesheet:

.trackerPopup.fixed { 
    top: 95px;
    position: fixed;
    left: 5% !important;
    -moz-transition: 0.15s linear all;
    -webkit-transition: 0.15s linear all;
    -o-transition: 0.15s linear all;
    -ms-transition: 0.15s linear all;
    transition: 0.15s linear all;
}
@media screen and (max-width: 1845px) { .trackerPopup.fixed { left: 4% !important; } }
@media screen and (max-width: 1800px) { .trackerPopup.fixed { left: 2% !important; } }
@media screen and (max-width: 1750px) { .trackerPopup.fixed { left: 1% !important; } }

[Verwijderd]

Madrox schreef op zaterdag 20 oktober 2012 @ 01:04:
[...]

Ja, 5 minuten voor noppes
De menu bar verdwijnt nu onder de tracker, op alle pages en het probleem van plaatje negen is er ook nog steeds
Blue-Eagle; let me gues; je kast en toetsenbord zijn ook zwart

In combinatie met mijn. Ehh. 300 regels CSS om de GoT layout 900px breed te maken werkt het perfect en komt hij niet achter de daadwerkelijke content te staan. Als er vraag naar is wil ik de juiste regels CSS wel even er uit destilleren.

[Madrox]

Verwijderd schreef op zaterdag 20 oktober 2012 @ 01:11:
[...]


In combinatie met mijn. Ehh. 300 regels CSS om de GoT layout 900px breed te maken werkt het perfect en komt hij niet achter de daadwerkelijke content te staan. Als er vraag naar is wil ik de juiste regels CSS wel even er uit destilleren.

Dat is mooi. Mijn layout is echter 1020px breed en dan loopt het mis. Heb geen zin om de hele code van een ander over te nemen, mag ik weer opnieuw beginnen met de kleurstelling. Tenzei je een snelle oplossing hebt voor me om die twee kleur settings toe te passen ? (zalm/sinas kleur).

Ergens met de code van de pw/vraag en bod is het mis gegaan denk ik. Niet op de hoofdpagina zoals je ziet maar de pagina's daarachter.

[Verwijderd]

Dan DM ik je even mijn huidige code . Dan kan je me helpen bugs te vinden...

[krvabo]

Goed,

Allereerst: het eerste deel is van Timo002 :: Timo002 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'" . Dit gaat over de header, en de lichtere achtergrond.
Dit deel staat dus niet in mijn css, maar wel op de screenshots.

Ik heb vooral geprobeerd weer een beetje Versie 5 (versie van voor de vorige versie, 'tweakers'-template) er in te krijgen. Helaas heb ik bij lange na niet genoeg images, want alles is online al verwijderd. Ik heb dus alleen wat ik met Save Page nog heb kunnen redden.

Alles is zo gemaakt dat het alleen op het forum werkt, en niets kapot zou moeten maken. Het werkt in IE8+ en zou verder in alle fatsoenlijke browsers moeten werken (Firefox iig wel)

Gerelateerde meuk + true-logo / jobs er uit

Cascading Stylesheet:

#tweakbase_relations, a#true, div#jobs_relations {
  display: none;
}

Topiclisting met oude icoontjes

Dit is dus helaas alleen met open, gesloten, en open_actief. Gesloten_actief, sticky, stucky en alias heb ik dus helaas niet, en dan krijg je de huidige ('blauwe') icoontjes.

Cascading Stylesheet:

/* V7 changes door krvabo */

/* Minder hoge regels in list_topics + list_category + index */

div#forumheading + div#content > table tr td,
div#forumheading + div#content > div.forumList > table tr td {
  padding: 3px;
}


/*  'Tweakers' (v5) style topic icons */
div#forumheading + div#content > table td.ind a {
  display: inline-block;
  width: 20px;
  height: 20px;
}

  div#forumheading + div#content > table td.ind a > img[src="images/icons/Open_on.png"] {
    background: url('http://tweakers.net/ext/f/pybj2Gej4Nemucpijtm6TMuo/full.gif') no-repeat 4px 5px;
    height: 0;
    padding-top: 15px;
  }

  div#forumheading + div#content > table td.ind a > img[src="images/icons/Open_off.png"] {
    background: url('http://tweakers.net/ext/f/zgQ8s2QcSE7FWxQxhWqE1c7z/full.gif') no-repeat 4px 5px;
    height: 0;
    padding-top: 15px;
  }

  div#forumheading + div#content > table td.ind a > img[src="images/icons/Closed_off.png"] {
    background: url('http://tweakers.net/ext/f/txV458kQVvOLeQ2HbEtYJHD8/full.gif') no-repeat 4px 5px;
    height: 0;
    padding-top: 15px;
  }

/* Tweakers v5 style list_topics kleuren */

div#forumheading + div#content > table td a         { color: #000; }
div#forumheading + div#content > table td a:visited { color: #6f6f6f; }
div#forumheading + div#content > table td a:hover   { color: #c00042; }

Topic bekijken

Hier zijn de icoontjes van v5 teruggebracht. Ik heb ook het icoontje van 'oude quote', maar door de opzet van de html kan ik er helaas niets meer aan selecteren.

Cascading Stylesheet:

/* Topic bekijken: v5 icoontjes - krvabo */

div#forumheading div.topic_actions > ul.action_list li:before,
div.message div.message_actions > ul.action_list li:before { content: ""; }

div#forumheading div.topic_actions > ul.action_list li a {
  display: inline-block;
}

/* Reply-button tweakers v5 */
div#forumheading div.topic_actions > ul.action_list li a[onclick^="return"] {
  text-indent: -9999px;
  background: url('http://tweakers.net/ext/f/Udwu7kKcq3UEhaJ38jD6QnWm/full.gif');
  background-position: 0 -17px;
  height: 17px;
  width: 104px;
  position: absolute;
  margin-left: 692px;
  margin-top: 5px;
}
div#forumheading div.topic_actions > ul.action_list li a[title^="Rapporteer"] {
  text-indent: -9999px;
  background: url('http://tweakers.net/ext/f/Vdr36eWKFY70hEWBC4e0b9Id/full.gif');
  height: 15px;
  width: 12px;
}
div#forumheading div.topic_actions > ul.action_list li a[title$="bookmarks"] {
  text-indent: -9999px;
  background: url('http://tweakers.net/ext/f/W1uCBrGQ5GD7eLE7vO1650RU/full.gif');
  height: 16px;
  width: 13px;
}
div#forumheading div.topic_actions > ul.action_list li a[title$="postreminder"] {
  background: url('http://tweakers.net/ext/f/hLeGwBmQwOzCIXXCiStbr3Nu/full.gif');
  height: 16px;
  width: 17px;
  text-indent: -9999px;
}
/* paginacounter bovenaan margin fix */
div#forumheading div.topic_actions p.pagecounter {
  margin-right: 116px;
  margin-bottom: 0;
}

/* Quoteknop + edit - tweakers v5 */

div#content div#messages div.message div.message_actions ul.action_list li a[href^="http://gathering.tweakers.net/forum/update"] {
  background: url('http://tweakers.net/ext/f/lyIIrlApUzK8ciCyUOHAf7ii/full.gif');
  height: 24px;
  width: 17px;
  display: inline-block;
  text-indent: -9999px;
}
div#content div#messages div.message div.message_actions ul.action_list li a[href^="http://gathering.tweakers.net/forum/quote"] {
  background: url('http://tweakers.net/ext/f/RcpxFFTED8DFjl0aBCgBEWUc/full.gif');
  height: 24px;
  width: 26px;
  display: inline-block;
  text-indent: -9999px;
}

Topic starter

Icoontjes als iemand de topicstarter is (uit v5).
Er onder posts iets dichter op elkaar, minder hoge tekstregels.

Cascading Stylesheet:

/* Topicstarter-icoontje voor de datum - tweakers v5 - krvabo */

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;
  }

/* Posts dichter op elkaar */
div#content div#messages div.message {
  margin-bottom: 10px;
  line-height: 18px; /* Dit maakt de zinnen minder hoog in een post */
}

div#content div#messages div.message div.post {
  padding: 3px 14px 3px 14px;
}

[ Voor 3% gewijzigd door krvabo op 20-10-2012 01:47 ]

[Verwijderd]

Het begint er bij mij ook steeds beter uit te zien *:).

[Verwijderd]

Forumoverzicht


Topicoverzicht


Posts


Extra brede DM's

[Knightwolf]

Bierkameel schreef op vrijdag 19 oktober 2012 @ 15:32:
http://userstyles.org/styles/76816/tweakers-old-background

Die is idd wel een aanrader als je de CSS plugin niet kan kopen

Thanx, hier heb ik tot nu toe het meeste aan
CSS en codes geen verstand van en zal ook niet veranderen, dus ga daar ook geen karma aan uitgeven (als ik dat al kan, volgens mij wel).

[ Voor 10% gewijzigd door Knightwolf op 20-10-2012 02:09 ]

[Verwijderd]

Knightwolf schreef op zaterdag 20 oktober 2012 @ 02:08:
[...]
...
CSS en codes geen verstand van en zal ook niet veranderen...

Nood breekt wet

[McVirusS]

Zo ;-).

Cascading Stylesheet:

body {
    background: #353535 url('data:image/gif;base64,R0lGODlh/AMEAIAAAPr6+gAAACH5BAAAAAAALAAAAAD8AwQAAAJEhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9zuswAAOw==') repeat-y top center;
}
.trackerPopup { 
    background-color: #252525; 
}
#bottom div.hr {
    border-radius: 0;
    height: 1px;
    background-color: #666;
}
#ticker { 
    border-bottom-width: 0; 
}
.fpaItem div.textContainer {
    padding: 8px 12px;
}
table.highlights td {
    padding: 6px;
    line-height: 1em;
}
table.highlights {
    margin-bottom: 12px;
}
h1, h2, h3, p {
    margin-bottom: 10px;
}
.pageTabs li.active {
    background-color: #FAFAFA;
}
#community li {
    padding: 8px 0;
}
#social,
#newsletter,
#jobs {
    display: none;
}

/** FORUM **/
table.listing td, table.listing th {
    padding: 6px 5px;
}

Nog niet helemaal klaar maar al stuk fijner dan de default skin. Bugje dat ik heb gevonden is dat gerelateerde vacatures op het forum niet helemaal lekker worden weergegeven.

[McVirusS]

Twijfel nog beetje of ik de tracker vast moet zetten bij scrollen, op zich werkt dat wel nice.

Cascading Stylesheet:

.trackerPopup.fixed {
    left: 50%;
    margin-left: -900px;
    position: fixed;
    top: 140px;
}

[QwaftZefoni]

MiNE



Ik ben geen CSS kunner dus oneindig dankbaar voor dit draadje zodat ik op mijn 1920x1200 weer fatsoenljk kan lezen. Ondertussen de code bekijken van de laatste paar pagina's.

Hoe voeg ik toe dat
i) de searchbar kleiner en boven de Tracker staat of in het rode deel bij het logo
ii) de fotobalk op de FP doorloopt tot boven de Pricewatch zoals bij Phyxion

Cascading Stylesheet:

html
{
  background: #444444;
}

div#contentArea
{
  padding-left: 20px;
  padding-right: 20px;
  background: #F7F7F7;
}

.eenReactie
{
  background: #F7F7F7;
}

.reactie
{
  background: #F7F7F7;
}

#menubar
{
  width: 980px;
}

#searchbar
{
  margin: 34px auto 0 auto;
  width: 1020px;
}
.galleryHeadingContainer, .pageTabsContainer, .notificationsContainer
{
  margin: 0 auto;
  width: 1020px;
}
.pageTabsContainer
{
  border-bottom: 1px solid #C3C6C6;
}

#top
{
  border-bottom: 0;
}

#bottom {
    background: -webkit-linear-gradient(#333,#000) 0 0;
    box-shadow: 0 0 10px #333;
}

#bottom div.hr { display: none; } 

a {
color: #000000;
text-decoration: none;
}

table.highlights td {
line-height: 5px;
padding: 5px 5px;
}

#menubar {
width: 1024px;
border-radius: 6px 6px 0 0;
}

.articleColumn
{
line-height: 1.4;
}

#socialButtons {
display: none !important;
}

p
{
-webkit-margin-after: 0.5em;
}

#fpaItems { 
margin-bottom: 0px; 
} 

#fpaItems .fpaItem { 
height: 155px; 
width: 155px; 
} 

#fpaItems .fpaItem div.imageContainer { 
width: 155px; 
height: 75px; 
} 

#fpaItems .fpaItem div.imageContainer img { 
width: 155px; 
height: 75px; 
} 

#fpaItems .fpaItem div.textContainer { 
padding-bottom: 0px; 
} 

#fp_tabs_container { 
margin-bottom: 5px; 
} 

.secondColumn { 
margin-top: -150px; 
}

/* Tracker */

.trackerPopup.fixed {
    width: 300px;
    position: absolute;
    top: 0;
    left: -336px !important;
    display: block;
}

.trackerPopup .popupContent {
    padding: 10px 10px 4px;
}  

/* Vensters kleur */

#pricewatch, #jobs, #poll, #newsletter, #sponsored, #textlink, #social .twitterButton, #social .facebookButton {
    background: linear-gradient(#EDEEEE,#EDEEEE) 
    repeat scroll 0 0 #EDEEEE  !important;
    border: 1px solid #DDDEDE  !important;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.33) inset;
    padding: 15px 15px 17px;
}

/* Weghalen newsletter subscription FP */     
#newsletter 
    { 
    display: none !important; 
    } 

/* Weghalen jobs ruimte FP */ 
#jobs 
    { 
    display: none !important; 
    } 

/* Weghalen Twitter/Facebook van FP */ 
#social 
    { 
    display: none !important; 
    }

[_eXistenZ_]

Leuk om te zien hoe actief dit opgepakt wordt; blijkbaar is de nood wel hoog

Anyway, Tweakers 7.5 heeft weer een update gekregen:

- Hoge headers zoals je eigen profielpagina werkt nu goed
- GoT is lekker compact geworden
- Theme is door mij en een vriend inmiddels een beetje getest in verschillende browsers en is battle ready bevonden voor dagelijks gebruik (betekent niet bugvrij!)

Known bugs:
- Vanwege de plaating van het zoekformulier komt er soms andere info (De video-leverancier, je karma op je profielpagina, oid) doorheen te staan.

Todo:
- Dingen kunnen nog wel compacter, ik ben nog niet klaar
- Ik ga aandacht schenken aan de tracker, zodat deze ook voor mensen die géén full HD-scherm hebben bruikbaar is







Mensen die het userscript al draaien zouden automatisch de update binnen moeten krijgen, mensen die het userscript nog niet hebben, kunnen zich hier melden.

[_eXistenZ_]

Tweakers 7.5 heeft weer een update gekregen:

- Hoge headers zoals je eigen profielpagina werkt nu goed
- GoT is lekker compact geworden
- Theme is door mij en een vriend inmiddels een beetje getest in verschillende browsers en is battle ready bevonden voor dagelijks gebruik (betekent niet bugvrij!)

Known bugs:
- Vanwege de plaating van het zoekformulier komt er soms andere info (De video-leverancier, je karma op je profielpagina, oid) doorheen te staan.

Todo:
- Dingen kunnen nog wel compacter, ik ben nog niet klaar
- Ik ga aandacht schenken aan de tracker, zodat deze ook voor mensen die géén full HD-scherm hebben bruikbaar is







Mensen die het userscript al draaien zouden automatisch de update binnen moeten krijgen, mensen die het userscript nog niet hebben, kunnen zich hier melden.

[ScSi]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:19:
Leuk om te zien hoe actief dit opgepakt wordt; blijkbaar is de nood wel hoog

Anyway, Tweakers 7.5 heeft weer een update gekregen: ...

Jammer dat de CSS zelf niet beschikbaar is (enkel via userScript), had deze layout anders wel graag geprobeerd..

[gomaster]

[b]_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:41:..

Thanks! Ziet er een stuk beter uit. Alleen bij mij werkt het bovenste menu niet helemaal. De titels nieuws, reiviews etc liggen net iets in het witte gedeelte. Maakt niet uit. Dit is echt een hele verbetering!

[Ethelind]

ScSi schreef op zaterdag 20 oktober 2012 @ 10:45:
[...]


Jammer dat de CSS zelf niet beschikbaar is (enkel via userScript), had deze layout anders wel graag geprobeerd..

De huidige css code is hier:

Cascading Stylesheet:

body {
    background: #444;
}

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

#searchbar {
    width: 1020px;
    height: 0px;
    margin: 0 auto;
    background: none;
    position: relative;
}

#search {
    position: absolute;
    width: 286px;
    right: 20px;
    top: 22px;
    padding: 0;
}

#search .keywordSearch {
    width: 176px;
    height: 24px;
    margin-top: 4px;
}

.mainSearchSuggest {
    margin-left: -311px;
}

#search input.text {
    width: 120px;
    height: 16px;
    font-size: 12px;
    padding: 5px 10px 3px;
}

#search input.submit {
    height: 24px;
    background-position: 1px -75px;
}
/* High header content */
.galleryHeadingContainer,
.pageTabsContainer,
#tabs,
#tweakbase {
    margin: 0 auto;
    width: 1020px;
}

#b_tb {
    margin-left: 0;
}

#contentArea {
    background: #fff;
    padding: 24px 20px 150px;
}

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


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

.fpaItem div.imageContainer {
width: 100%;
}

.fpaItem img {
    margin-left: -42px;
}

.fpaItem div.textContainer {
    background-color: #000;
    opacity: 0.8;
    width: 100%;
    height: auto;
    font-size: 12px;
    line-height: 13px;
    padding: 4px;
    position: absolute;
    bottom: 0;
}

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

#fp_tabs,
#forum_tabs {
    padding-top: 0;
}

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

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

h1, h2, h3, p {
  margin: 0 0 10px;
}
table.highlights {
    margin-bottom: 15px;
}

.articleColumn,
.reactie {
    line-height: 1.4em;
}

#community li {
    padding: 5px 0;
}

table.listing td, table.listing th {
  padding: 2px 5px;
}

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

.channelHeader {
    display: none;
}

#bottom .hr {
    display: none;
}

[Hahn]

ScSi schreef op zaterdag 20 oktober 2012 @ 10:45:
[...]


Jammer dat de CSS zelf niet beschikbaar is (enkel via userScript), had deze layout anders wel graag geprobeerd..

Je kan ook gewoon op 'Install' klikken en het vervolgens niet accepteren (laten installeren), dan krijg je de code te zien

[ScSi]

@Ethelind; bedankt voor de CSS, draai die nu tot redelijke tevredenheid!

@_eXistenZ_ ; heb bij Opera (12.02 (1578) als Firefox (16.0.1) een foutje ontdekt bij de header

[ScSi]

Hahn schreef op zaterdag 20 oktober 2012 @ 10:53:
[...]

Je kan ook gewoon op 'Install' klikken en het vervolgens niet accepteren (laten installeren), dan krijg je de code te zien

Jep, was een beetje een kip daarnet, nu alles gevonden (zelfs een bugje )

[_eXistenZ_]

Post ff welk OS en welke browser je gebruikt, en op welke pagina je zit, dan kijk ik ff of ik et kan fixen

/edit

Ik heb 'm al gevonden: ScSi in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

[ Voor 60% gewijzigd door _eXistenZ_ op 20-10-2012 11:27 ]

[_eXistenZ_]

Ah nice, ik ga es ff op onderzoek uit, hopelijk post ik vandaag de fix nog, moet nu ff andere dingen doen

[gomaster]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 11:19:
Post ff welk OS en welke browser je gebruikt, en op welke pagina je zit, dan kijk ik ff of ik et kan fixen

/edit

Ik heb 'm al gevonden: ScSi in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Dat is hem idd. Ik gebruik OSX met chrome. Heb er nu even mee gewerkt hier en gaat erg goed!

[Fietsbel]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:41:
Tweakers 7.5 heeft weer een update gekregen:
*tekst*

Hulde!

[chrisborst]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:41:
Tweakers 7.5 heeft weer een update gekregen:

Net even geinstalleerd op chrome, en tweakers ziet er weer redelijk normaal uit! Super bedankt!

[Ramon]

Ik vraag me af hoe de designer van het huidige t.net zich voelt Nu met allemaal ontwerpen waarvan een heel aantal een stuk beter geslaagd zijn....

BTW: Is er een held die het voor elkaar krijgt om de meuktracker list uit de "tracker" te halen en in een grijs blok onder het pricewatch blok te zetten?

[ Voor 34% gewijzigd door Ramon op 20-10-2012 11:59 ]

[Bommes]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:41:
Tweakers 7.5 heeft weer een update gekregen:

ziet er goed uit, thanks..

[Wiethoofd]

Een designer zonder gevoel voor UX, laat staan ervaring met htm/css zal al snel dingen in elkaar zetten die er in theorie misschien mooi uitzien, maar in praktijk dus niet werken

Ik zal mijn standaard fixjes wel even in een blogpost gooien, ben nog niet met het omgooien van het design bezig geweest ivm een maag-darmstelsel wat tegenwerkte.

[Zeror]

Ramon schreef op vrijdag 19 oktober 2012 @ 13:04:
Topic search:

[afbeelding]

JavaScript:

// ==UserScript==
// @name        Zoek in topic
// @namespace   userscripts
// @include     http://gathering.tweakers.net/forum/list_messages/*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @grant       none 
// ==/UserScript==

var sidebar = $('div#sidebar');
var topicId = $('input[name="data[topicid]"]');
var searchUrl = 'http://gathering.tweakers.net/forum/list_messages/'+topicId.val();

var keywordSearch = '<form style="margin-bottom:10px;"action="'+searchUrl+'"><label for="keyword">keyword</label><input type="text" id="keyword" name="data[filter_keywords]"></form>';
var userSearch = '<form style="margin-bottom:10px;" action="'+searchUrl+'"><label for="user">user</label><input type="text" id="user" name="data[filter_userids]"></form>';

sidebar.prepend('<div id="topic-search">'+keywordSearch + userSearch+'</div>');

Ik krijg dit script niet werkend met greasemonkey in firefox. Ik maak nieuw script aan en voeg bovenstaande script in. Maar wanneer ik dan greasemonkey activeer en ik een willekeurige topic open dan zie ik niks gebeuren.

[QwaftZefoni]

Helaas zal Marktplaats minder snel met CSS gaan werken. Pfff wat een witte bende nou daar.

[Verwijderd]

Marktplaats. Huh. Bij mij nog hetzelfde gele uiterlijk.

[_eXistenZ_]

Bedankt voor de leuke berichten, daar doe ik het voor

Probleem met het topmenu is opgelost in versie 1.0.3, mensen met het UserScript geinstalleerd zouden deze automatisch binnen moeten krijgen \o/

Omdat ik inmiddels in 3 topics post ga ik migreren naar _eXistenZ_ in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'", als je Tweakers 7.5 wilt volgen kun je me vanaf daar tracken

[ Voor 62% gewijzigd door _eXistenZ_ op 20-10-2012 13:47 ]

[_eXistenZ_]

@ ScSI, het bugje met de menubalk is opgelost in versie 1.0.3, daar kun je dus de CSS uit plukken.

[ikbenwouter]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:19:
Anyway, Tweakers 7.5 heeft weer een update gekregen:

Erg fijne stijl! Moest alleen nog wat !importants toevoegen om hem hier werkend te krijgen.

Edit: fix die ik poste was ik net te laat mee, blijkbaar was een z-index: 1 op de menubar genoeg zoals _eXistenZ_ hierboven in zijn update post.

[ Voor 97% gewijzigd door ikbenwouter op 20-10-2012 13:50 ]

[_eXistenZ_]

@wouter:

Wat betreft !important, als Tweakers alleen de mogelijkheid biedt om in de broncode de CSS vóór hun eigen CSS te laden, zal het nodig zijn, óf je moet de CSS specifieker schrijven inderdaad. Zie voor meer info: http://css-tricks.com/specifics-on-css-specificity/.

Je kunt denk ik in dit geval om alle !important (die ik afraad) heen door voor elke declaratie 'body' te zetten, dat maakt em specifieker en dus zal die gebruikt worden.

Van bovenstaande heb ik iig geen last in Firefox met Greasemonkey. Had jij hier wel last van?

--

Kleine update voor wat betreft de tracker (in versie 1.1 oid?) :

De javascript die de tracker laadt is hardnekkig om te laten doen wat ik wil. Ik ga daarom waarschijnlijk men eigen javascript maken die via een Ajax-call de data ophaalt (zoals de huidige javascript dat ook doet), en dan kan ik de output plaatsen waar ik maar wil, bijv in de rechter balk onder de 4 highlights oid De mogelijkheden zijn iig eindeloos.

Het wordt wss dus iets meer dan alleen CSS, maar hoe dan ook zal ik die site weer bruikbaar krijgen

[ Voor 35% gewijzigd door _eXistenZ_ op 20-10-2012 13:52 ]

[Micha]

[b]_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 10:28:...

Ik heb nog wat aanpassingen gedaan om het net iets anders te maken. Vooral aanpassing aan het lezen bij het forum:

code:

#messages div.message .messageheader 
{background-color: #ddd;} 

#messages div.message 
{margin-bottom: 0px;} 
 
body { 
    background: #444; 
} 

#title { 
height: 50px;
}

#messages, .topic_actions { 
overflow: hidden;
width: 980px;
}


#title p.mods 
{ 
    display: none; 
}

#relatedTags
{ 
    display: none; 
}

#sidebar
{ 
    display: none; 
}

[Madrox]

Iemand nog een idee hoe ik die bug oplos ?

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

ps: Waarom wil iedereen die zoekbalk eigenlijk, wie gebruikt die nog ?

[_eXistenZ_]

Ja top, ik voeg em toe aan Tweakers 7.5, het bekijken van posts was iets dat nog nadere inspectie nodig had, maar jij heb m al gefixt. Thx!

/edit

Weet alleen niet of de sidebar er maar zo uitgeraust mag, daar willen ze ook advertenties in gooien geloof ik, of iig gerelateerde jobs (wat ook betaald is denk ik)

[ Voor 38% gewijzigd door _eXistenZ_ op 20-10-2012 13:55 ]

[Verwijderd]

Madrox schreef op zaterdag 20 oktober 2012 @ 13:52:
ps: Waarom wil iedereen die zoekbalk eigenlijk, wie gebruikt die nog ?

Ik. Al 2 bug reports over ingediend

[ikbenwouter]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 13:47:
@wouter:

Wat betreft !important, als Tweakers alleen de mogelijkheid biedt om in de broncode de CSS vóór hun eigen CSS te laden, zal het nodig zijn, óf je moet de CSS specifieker schrijven inderdaad. Zie voor meer info: http://css-tricks.com/specifics-on-css-specificity/.

Yep ik snap hoe !important werkt. Vreemd genoeg werkt je CSS nu wel hier, eerste keer dat ik hem probeerde zeker niet. Ben toen de code gaan editten met Stylish en per !important die ik toevoegde klikte ik op preview en zag ik het voor m'n ogen veranderen. Blijkbaar een tijdelijke bug van mijn browser of iets dergelijks.

[Micha]

_eXistenZ_ schreef op zaterdag 20 oktober 2012 @ 13:54:
Ja top, ik voeg em toe aan Tweakers 7.5, het bekijken van posts was iets dat nog nadere inspectie nodig had, maar jij heb m al gefixt. Thx!

/edit

Weet alleen niet of de sidebar er maar zo uitgeraust mag, daar willen ze ook advertenties in gooien geloof ik, of iig gerelateerde jobs (wat ook betaald is denk ik)

Het werkt wel lekker, maar misschien is het wat onsubtiel...

Je moet overigens even de pagecounter aanpassen:

code:

.pagecounter { 
margin: 10px 0px 10px;
}

code:

#title { 
height: 50px;
}

die top:10px moet er nog uit..

[ Voor 20% gewijzigd door Micha op 20-10-2012 14:10 ]

[Caelorum]

Voor diegene die het interessant vinden. Een kleine wijziging zorgt ervoor dat reactie bij niewsartikelen e.d. een stuk leesbaarder worden. Ik heb nog niemand het zien posten (ook niet echt op gelet) en het staat volgens mij nog niet in de startpost.

Standaard worden alle reacties binnen een 620px breed veld gepropt. Heb er zelf voor gekozen alle reacties gewoon 620px breed te zijn. Zodat sterk geindente reacties ook nog leesbaar zijn. Dit is goed te zien bij bijv. de reacties van plan: Een dag met Tweakers 7

Resultaat ziet er uit als volgt:

Cascading Stylesheet:

#reacties { width: auto;}
div.eenReactie { width: 620px; }

[Verwijderd]

Volgens mij door het verplaatsen van de searchbar is de hover over voor pricewatch links kapot gegaan. Het blokje met prijzen komt nu helemaal uit buiten beeld. Iemand die ditzelfde probleem heeft?

Bijv deze link die ik tegenkwam in het aanbiedingen topic: pricewatch: Samsung Galaxy Tab 8.9 16GB 3G Zwart

[ Voor 36% gewijzigd door Verwijderd op 20-10-2012 14:39 ]

[Verwijderd]

pricewatch unsorted: Activision Diablo 2

Werkt fine bij mij. Of bedoel jij iets anders?

edit: uhum. Hij werkt zolang er geen prijzen zijn. Anders verschijnt hij uiterst rechts. Even zoeken naar de verantwoordelijke regel.

[ Voor 28% gewijzigd door Verwijderd op 20-10-2012 14:40 ]

[Caelorum]

Verwijderd schreef op zaterdag 20 oktober 2012 @ 14:39:
pricewatch unsorted: Activision Diablo 2

Werkt fine bij mij. Of bedoel jij iets anders?

Die van jouw werkt hier wel goed, maar die van hem niet

[Verwijderd]

Het heeft niet met searchbar positie te maken . Ik hoop dat iemand al een oplossing heeft anders moet ik maar een keer zelf opzoek .

Cascading Stylesheet:

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

[Verwijderd]

code:

.popup .pricePopup {
    left: 1000px !important;
}

(ofzo)

Komt in de buurt van het fixen van het probleem. Maar werkt ofc. niet met een smaller scherm. Sowieso. Het ding gebruikt inline styles..

Edit: nee. Niet altijd. Laat me even doorzoeken.

Edit: ik ben tevreden met

code:

/* pw popup */
.pricePopup {
    left: 500px !important;
}

Dat houd wel in de hij (met mijn schermreso) per definitie over de content heen gaat. Maar ach. Beter dan horizontaal scrollen..

[ Voor 43% gewijzigd door Verwijderd op 20-10-2012 14:58 ]

[Caelorum]

De berekening vanuit javascript gaat in ider geval niet meer helemaal goed.
Er wordt een style meegegeven aan de pricePopup met left: 1420px; top: 1849px;
Dat moet in mijn geval voor zijn linkje ergens rond de left:1100 zo'n 300px naar links dus

@boven (Darkstone), maar dan gaat het linkje van jouw weer stuk doordat de popup altijd ergens aan de rechterkant komt te staan.

[ Voor 21% gewijzigd door Caelorum op 20-10-2012 14:51 ]

[Verwijderd]

Thanks ik heb er 800px van gemaakt . Nu staat het allemaal weer in beeld .

@hierboven hoe bedoel je wat gaat er stuk?

[ Voor 22% gewijzigd door Verwijderd op 20-10-2012 14:54 ]

[Verwijderd]

De exacte waarde hangt af van je schermresolutie en de breedte van de popup. Daarom wordt het ook met js berekend.

[Caelorum]

Verwijderd schreef op zaterdag 20 oktober 2012 @ 14:53:
[...]@hierboven hoe bedoel je wat gaat er stuk?

Het popupje komt niet meer direct naast de link te staan, maar altijd op een vaste afstand vanaf het browserscherm.

[Verwijderd]

Caelorum schreef op zaterdag 20 oktober 2012 @ 14:59:
[...]

Het popupje komt niet meer direct naast de link te staan, maar altijd op een vaste afstand vanaf het browserscherm.

Je hebt gelijk ik zie het nu ook het kan nog mooier . Maar als quick fix is het heel prima . Nu krijg ik tenminste geen half scherm popup meer naast m'n hoofd scherm .

[Caelorum]

Heb het net even getest. Zodra de pricewatch link gaat wrappen zodat die op meerdere regels staat gaat het fout bij mij.

[Verwijderd]

Wat ik gefixt heb met:

code:

/* pw popup */
.pricePopup {
    left: auto !important;
    right: 0px !important;
}

Dan komt ie altijd uiterst rechts zonder scrollbalken.

[Caelorum]

De fix die ik heb gebruikt:

Cascading Stylesheet:

 .pwlink { white-space: nowrap; }

Dat zorgt ervoor dat de linkjes niet wrappen waardoor de javascript fatsoenlijk zijn werk doet

[Verwijderd]

Caelorum schreef op zaterdag 20 oktober 2012 @ 15:06:
De fix die ik heb gebruikt:

Cascading Stylesheet:

 .pwlink { white-space: nowrap; }

Dat zorgt ervoor dat de linkjes niet wrappen waardoor de javascript fatsoenlijk zijn werk doet

Nu werkt het weer correct (zo te zien) .

[Yorinn]

Wat is nou een goede CSS om de searchbar naast het Tweakers-logo te krijgen?

Ik ben zelf totaal niet bekend met CSS.

[Verwijderd]

Dit is ook ongeveer het eerste wat ik met CSS doe. Maar zo moeilijk is het niet. Gewoon rondklooien met de inspector van firefox

[Caelorum]

Yorin schreef op zaterdag 20 oktober 2012 @ 15:16:
Wat is nou een goede CSS om de searchbar naast het Tweakers-logo te krijgen? [...]

Geen idee, maar ik gebruik de volgende css om het zoekveld boven de tracker (links bij mij) en onder het menu te krijgen. De tracker wordt dan iets omlaag geplaatst.

Cascading Stylesheet:

/* DIRRRRTY: verplaatsen van zoekveld naar lege ruimte links van het menu en boven de tracker  */
#mainSearch { margin-left: 0px; margin-right: 0px; }
#mainSearch.keywordSearch { width: 277px; margin-left: 12px;}
#mainSearch.keywordSearch input.text { width: 220px; }
#searchbar { height: 20px; background: #ffffff; }
#search { float: left; width: 304px; padding-top: 34px }
#true , #streamone { display: none; } /* TODO: manier vinden om deze weer te geven zonder dat het zoekveld kapot gaat */
.mainSearchSuggest { z-index: 1000; }
div.trackerPopup { margin-top: 28px; }

Je moet zelf no even ergens een marin-left invoegen zodat het goed werkt op jouw resolutie, want het is gemaakt voor mijn 1680x1050 scherm met IE10 en zoom level op 100%.

[ Voor 8% gewijzigd door Caelorum op 20-10-2012 15:29 ]

[Yorinn]

Caelorum schreef op zaterdag 20 oktober 2012 @ 15:27:
[...]

Geen idee, maar ik gebruik de volgende css om het zoekveld boven de tracker (links bij mij) en onder het menu te krijgen. De tracker wordt dan iets omlaag geplaatst.

Cascading Stylesheet:

/* DIRRRRTY: verplaatsen van zoekveld naar lege ruimte links van het menu en boven de tracker  */
#mainSearch { margin-left: 0px; margin-right: 0px; }
#mainSearch.keywordSearch { width: 277px; margin-left: 12px;}
#mainSearch.keywordSearch input.text { width: 220px; }
#searchbar { height: 20px; background: #ffffff; }
#search { float: left; width: 304px; padding-top: 34px }
#true , #streamone { display: none; } /* TODO: manier vinden om deze weer te geven zonder dat het zoekveld kapot gaat */
.mainSearchSuggest { z-index: 1000; }
div.trackerPopup { margin-top: 28px; }

Je moet zelf no even ergens een marin-left invoegen zodat het goed werkt op jouw resolutie, want het is gemaakt voor mijn 1680x1050 scherm met IE10 en zoom level op 100%.

Heel raar, maar die werkt niet bij mij. Hij blijft op dezelfde plek en wordt alleen kleiner. De tracker heb ik links gefixeerd.

[Verwijderd]

Ik gebruik deze:
Kleuren moet je naar eigen smaak inrichten. Zoekbalk kleiner maken is een optie en met 190px verander je de positie.

Cascading Stylesheet:

/*searchbar omhoog*/

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

/*Forum en website dichter naar menu*/

#searchbar {height: 10px !important;}

body{background-color:#B30F39; padding-left:0px; padding-top: 0; top: 6px;}

#searchbar {background:#B30F39 !important;}

#top {border-bottom: 0px solid #B30F39 !important;}

div.hr {background:#B4B4B4 !important;}

#search #true {
    display: none !important;}

#menubar {width: 100% !important;}

/*kleinere zoekbar*/
#search input.text {
    width: 245px !important;
}

#search .keywordSearch {
    width: 300px !important;}

[Caelorum]

Yorin schreef op zaterdag 20 oktober 2012 @ 15:32:
[...] Heel raar, maar die werkt niet bij mij. Hij blijft op dezelfde plek en wordt alleen kleiner. De tracker heb ik links gefixeerd.

ctrl+f5? Hij werkt hier in ieder geval de laatste versies van IE, FF, Opera en Chrome. Kan zijn dat die in IE9 of 8 niet goed werkt hoor, maar hij zou op zijn minst iets moeten verplaatsen en de balk zou weg moeten gaan.

@boven. Van de jouwe wordt de hele site rood hier Maar het zoekveld wordt wel veprlaatst ja

[ Voor 9% gewijzigd door Caelorum op 20-10-2012 15:37 ]