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

[F.West98]

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.

Oooohhh, nee dat is wel mogelijk maar kost teveel tijd
Zal ik morgen eens naar kijken

[hiekikowan]

Na enige onvrede over het script van eXistenZNL (no offense, vindt alleen de nieuwe stijl van Tweakers gewoon wel mooi om te zien) heb ik deze weer weggemikt... Het gemis van de tracker bleek echter veel te groot dus... een eigen script om de tracker op resoluties vanaf ongveer 1250px correct te laten weergeven.

Het scriptje kan hier gevonden worden... Een screenie van hoe het eruit ziet:

Screenie vondt GDrive niet heel leuk... een linkje gaat wel lukken:
https://docs.google.com/open?id=0B94UH0W4OpM-WlktMzBiSWIwVE0

Gooi het script in GreaseMonkey en klaar is Kees/Klara/Henk...

[ Voor 15% gewijzigd door hiekikowan op 01-11-2012 17:17 ]

[Raven]

Plaatje is stuk:

Your client does not have permission to get URL /p7g6FUmex9NqS1nNH2tFGCW6w2QUVYur6ZJZmNcuWAT__Ka33eWfpGJu2G69e2tPCLDpABlg8R0 from this server. (Client IP address: 141.105.***.***)

[Onbekend]

Met deze layout is de custom css veel gemakkelijker.
Ik heb al heel wat items kleiner gemaakt, maar nu zijn de reclame-gedeeltes ook kleiner geworden. Welke divs moeten welke afmeting hebben om de reclame netjes te kunnen tonen? Het is natuurlijk niet de bedoeling de de reclame ook deels wordt verborgen.....

[Zeror]

Onbekend schreef op donderdag 01 november 2012 @ 17:15:
Met deze layout is de custom css veel gemakkelijker.
Ik heb al heel wat items kleiner gemaakt, maar nu zijn de reclame-gedeeltes ook kleiner geworden. Welke divs moeten welke afmeting hebben om de reclame netjes te kunnen tonen? Het is natuurlijk niet de bedoeling de de reclame ook deels wordt verborgen.....

Is het vragen naar de gegevens van die reclame div informatie niet hetzelfde als het vragen naar warez?
Ik bedoel als iedereen weet dat een bepaalde custom css stukje de zichtbaarheid van reclames kan aanpassen, dan zouden een hoop mensen de T.net abbonee functie niet meer nodig hebben. En dat kost T.net weer geld.

[Onbekend]

Laat ik het anders opschrijven: Verberg ik nu niet onterecht de reclames die ik als niet-abonnee wel moet zien? En zo ja, welke moet ik weer zichtbaar maken?

[Verwijderd]

Zeror schreef op donderdag 01 november 2012 @ 17:31:
[...]

Is het vragen naar de gegevens van die reclame div informatie niet hetzelfde als het vragen naar warez?
Ik bedoel als iedereen weet dat een bepaalde custom css stukje de zichtbaarheid van reclames kan aanpassen...

Uh, het is niet exact rocketscience he.

Maar een adblocker draaien gaat makkelijker

[Verwijderd]

F.West98 schreef op woensdag 31 oktober 2012 @ 22:38:
[...]

Oooohhh, nee dat is wel mogelijk maar kost teveel tijd
Zal ik morgen eens naar kijken

Ik heb het idee dat ik dit moet doen. Het mooiste zou zijn om een element toe te voegen in het element div#messages (zou dan naast de reageer knop (div#.forum_actions) moeten komen. Helaas komt het dan weer niet goed uit op de forums zelf dus lijkt het me het beste om een element toe te voegen voor of na div#ticker of in het vlak van div#about. Ik zit dus nu een beetje hier te kijken http://commons.oreilly.co...key_Hacks/Getting_Started , maar voordat ik dat kan doen moet ik eerst meer lezen over JavaScript Basics.

[Hero of Time]

Onbekend schreef op donderdag 01 november 2012 @ 17:42:
Laat ik het anders opschrijven: Verberg ik nu niet onterecht de reclames die ik als niet-abonnee wel moet zien? En zo ja, welke moet ik weer zichtbaar maken?

Maak je .secondColumn kleiner? Zoja, niet doen. Dit bepaald o.a. de breedte van de ads, die staan daar in. En anders kan je altijd nog wat spelen met breedtes om er achter te komen . Of Dragonfly / Firebug of consorten gebruiken om 't te vinden.


Ik heb de kleuren op de forum listing wat aangepast zodat niet de table header een kleur heeft, maar de .channelHeader. Die kan je namelijk ook inklappen door op het logo te klikken en dan mis je dus je mooie table header kleuren. Daarbij heb ik ook de achtergrond van 't plaatje verandert naar de kleur van de header en de rand om 't plaatje weggehaald. Met dank aan degene die als eerste kwam met de kleurtjes (veel mensen hebben 't gekopieerd).

Cascading Stylesheet:

/** Colourize headers */
/* Mededelingen */
.forumList:nth-child(2) table.listing th  {
    background-color: #0044EE !important;
}
/* Computers */
.forumList:nth-child(3) .channelHeader, .thumb.category.core {
    background-color: #A30028 !important;
}
/* IT Pro */
.forumList:nth-child(4) .channelHeader, .thumb.category.pro {
    background-color: #400072 !important;
}
/* Games */
.forumList:nth-child(5) .channelHeader, .thumb.category.games {
    background-color: #0E8F1D !important;
}
/* Beeld en Geluid */
.forumList:nth-child(6) .channelHeader, .thumb.category.electronics {
    background-color: #BD3500 !important;
}
/* Tablets en Telefoons */
.forumList:nth-child(7) .channelHeader, .thumb.category.mobile {
    background-color: #04926C !important;
}
/* General Chat */
.forumList:nth-child(8) .channelHeader, .thumb.category.chat {
    background-color: #8A33CC !important;
}
/* Tweakers Feedback */
.forumList:nth-child(9) .channelHeader, .thumb.category.feedback {
    background-color: #A57D00 !important;
}
/* Topic listing heading colour */
table.listing th a {
    color: #FEFEFE !important;
}
/* Border around image */
.channelHeader .thumb {
    border: none !important;
}

[hiekikowan]

@Hero of Time Thx hiervoor... wel een kleine aanpassing daar de rode text in de channel headers niet meer te lezen is op een groot gedeelte...

Cascading Stylesheet:

    /** Colourize headers, based on Hero Of Time's style */
    /* Mededelingen */
    .forumList:nth-child(2) table.listing th  {
        background-color: #0044EE !important;
    }
    
    /* White text */
    .channelHeader h2 {
        color: #FFF;
    }
    
    /* Computers */
    .forumList:nth-child(3) .channelHeader, .thumb.category.core {
        background-color: #A30028 !important;
        background-position: 5px -42px;
    }
    /* IT Pro */
    .forumList:nth-child(4) .channelHeader, .thumb.category.pro {
        background-color: #400072 !important;
        background-position: 5px -42px;
    }
    /* Games */
    .forumList:nth-child(5) .channelHeader, .thumb.category.games {
        background-color: #0E8F1D !important;
        background-position: 5px -42px;
    }
    /* Beeld en Geluid */
    .forumList:nth-child(6) .channelHeader, .thumb.category.electronics {
        background-color: #BD3500 !important;
        background-position: 5px -42px;
    }
    /* Tablets en Telefoons */
    .forumList:nth-child(7) .channelHeader, .thumb.category.mobile {
        background-color: #04926C !important;
        background-position: 5px -42px;
    }
    /* General Chat */
    .forumList:nth-child(8) .channelHeader, .thumb.category.chat {
        background-color: #8A33CC !important;
        background-position: 5px -42px;
    }
    /* Tweakers Feedback */
    .forumList:nth-child(9) .channelHeader, .thumb.category.feedback {
        background-color: #A57D00 !important;
        background-position: 5px -42px;
    }
    /* Topic listing heading colour */
    table.listing th a {
        color: #FEFEFE !important;
    }
    /* Border around image */
    .channelHeader .thumb {
        border: none !important;
    }

[ Voor 13% gewijzigd door hiekikowan op 02-11-2012 14:53 ]

[Hero of Time]

bdalenoord schreef op vrijdag 02 november 2012 @ 14:38:
@Hero of Time Thx hiervoor... wel een kleine aanpassing daar de rode text in de channel headers niet meer te lezen is op een groot gedeelte...

Cascading Stylesheet:

/** Colourize headers, based on Hero Of Time's style */
...

Oh, ik dacht dat ik dat stukje er ook bij had, maar blijkbaar niet. Stond er net boven bij mij, en je doet dat dan veel eenvoudiger en efficiënter met dit:

Cascading Stylesheet:

.channelHeader h2 {
        color: #FFFFFF !important;
}

1x schrijven, ipv per header. Is ook wel aardig hoor, kan je per kop een aparte kleur meegeven, maar dat doe je niet .

[hiekikowan]

Klopt... aangepast...

[MueR]

WouterKvG schreef op dinsdag 30 oktober 2012 @ 16:40:

Leuk. Zet je ook even je adblocker uit dan?

[Caelorum]

MueR schreef op vrijdag 02 november 2012 @ 19:11:
[...] Leuk. Zet je ook even je adblocker uit dan?

Ik zie daar niets vreemds hoor. Heb hier vanilla IE10 en merendeel van de pageviews hier zijn ook zonder reclame.

[josvane]

Voor de mensen die wat meer om privacy geven dan dat tweakers met je voor heeft. Dit stukje css veranderd het user icon en username in my.tnet

code:

.usericonsmall{
display:none;
}
#userbar .last span {
width:80px;
background-image:url('http://www.aquariumweb.nl/got/my-tnet.jpg');
font-size:0px;
}
#userbar .dropdown > span  {
width:80px;
background-image:url('http://www.aquariumweb.nl/got/my-tnet-active.jpg');
font-size:0px;
}
#menu li:hover, #logo:hover + .sitename {
    background: none;
}

Als iemand hier gebruik van wil maken, graag de afbeelding zelf hosten.

[Verwijderd]

Caelorum schreef op vrijdag 02 november 2012 @ 20:15:
[...]

Ik zie daar niets vreemds hoor. Heb hier vanilla IE10 en merendeel van de pageviews hier zijn ook zonder reclame.

Ja het lijkt wel of de ads gewoon niet doorkomen (op het forum iig).

[F.West98]

Fmod voor TWK7 v1.0

Dit is de eerste en enige keer dat ik 'm hier post, updates en meer op mijn Tweakblog

Ik zal hieronder alle functionaliteit opsommen:
• Donkere achtergrond (tekst en de rest)
• Fixed header, klapt in bij niet-hoge-verticale-resolutie en lage-breedte schermen (niet bij userpages e.d. want dat is onmogelijk als je mooi wil)
• Zoekbar IN de header geplaatst, weg bij kleine schermen (andere opties mogelijk)
• IT Banen en Whitepapers uit de header weg
• Mooie knopjes bij pagenav
• Alles full-width (980px max.)
• Bookmarks: Mappen ding links ingeklapt, geopend bij hover
• COMPLEET MOBILE LAYOUT
• FP reacties kleiner
• Jij laatst gereageerd in topic, schuingedrukt
• Usericons zonder witte achtergrond
• Forumlijst kleurtjes
• Postheaders kleiner, vaste hoogte en kleurtjes (oranje voor TS, blauwig voor jezelf en blauwe naam voor abo's)
• Veeeel meer

Screenshots

Nieuwsbericht, tracker, achtergrond, zoekfunctie & header:

Bookmarks & pagenav mod:

Header op mobile:

Bookmarks op mobile:

Categoriekiezer (PW & V&A) op mobile

Forum op mobile:

Nieuws mobile:

Modden op mobile:

My tnet:

Zoeken op forum

Code

Heel simpel, om 510 regels code niet te spammen heb ik 'm online gezet. Dus:

Cascading Stylesheet:

@import url('http://www.fwest98.nl/tnet_mod/tnet7.css');
.listing .topic a[title~="JOUW USERNAME"] { 
    color: #AAAAAA !important; 
    font-style: italic; 
}

Open de link http://www.fwest98.nl/tnet_mod/tnet7.css om het bestand te downloaden (en zelf aan te passen)
Voor Chrome userpages & PW fix:

JavaScript:

// ==UserScript==
// @name       TWK7 voor webkit
// @match      https://secure.tweakers.net/my.tnet/preferences*
// @match      http://tweakers.net/pricewatch/*
// @match      http://tweakers.net/categorie*
// @match      http://tweakers.net/gallery*
// @match      http://tweakers.net/merk*
// @match      http://tweakers.net/serie*
// @match      http://tweakers.net/product*
// @match      http://gathering.tweakers.net/forum/preferences*
// @version    0.1
// @description  LALALA
// @copyright  2012+, You
// ==/UserScript==

if(window.location != 'http://tweakers.net/pricewatch/') {
    document.getElementById('layout').className += ' special';
}

Forum-headeroptie met een dropdown met alle dingen

Greasemonkey/Tampermonkey code:

JavaScript:

// ==UserScript==
// @name        Add tabs to Forum
// @namespace   userscripts
// @include     http://*tweakers.net/*
// @include     https://*tweakers.net/*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @grant       none 
// ==/UserScript==
var menu = $('#menu > ul:first > li:nth-child(6)');
menu.addClass('more').addClass('last').addClass('forumidenty');
menu.find('a').remove();
menu.append('<span>Forum</span><div><ul><li><a href="http://gathering.tweakers.net/forum">Forumlijst</a></li><li><a href="http://gathering.tweakers.net/forum/list_activetopics">Active topics</a></li><li><a href="http://gathering.tweakers.net/forum/list_bookmarks">Bookmarks</a></li><li><a href="http://gathering.tweakers.net/forum/myreact">Myreact</a></li><li><a href="http://gathering.tweakers.net/forum/faq">Faq</a></li><li><a href="http://gathering.tweakers.net/forum/find/poster/306933/topics">Posthistorie</li></ul></div>');
menu.on("hover", this, function() {
    $(this).toggleClass('dropdown');
});

En nog enige CSS

Cascading Stylesheet:

/* Forum uitklap */
.more.active.forumidenty > span { color: #D9FF26 !important; }
.more.active.forumidenty.dropdown > span { color: #000000 !important; }

Commentaar & opmerkingen welkom

[ Voor 44% gewijzigd door F.West98 op 03-11-2012 18:03 ]

[Hero of Time]

F.West, cool. Ik pik even die cursief bij laatst gepost even, want dat is verrekte handig.

Heb je met de fixed header (div #top) gemerkt dat het niet zo makkelijk is? Ik heb zelf wat nukkigheden ermee helaas. Gaat niet helemaal hoe ik 't hebben wil op sommige pagina's, en de onderkant helpt ook niet echt mee dan

[F.West98]

Hero Of Time schreef op vrijdag 02 november 2012 @ 23:20:
F.West, cool. Ik pik even die cursief bij laatst gepost even, want dat is verrekte handig.

Heb je met de fixed header (div #top) gemerkt dat het niet zo makkelijk is? Ik heb zelf wat nukkigheden ermee helaas. Gaat niet helemaal hoe ik 't hebben wil op sommige pagina's, en de onderkant helpt ook niet echt mee dan

Ja dat is echt k*t. In FF weten te fixen door userpagina's en PW (met een extended #top (echt waarom devvers, waarom)) een static top te geven (@-moz-document) maar dat werkt dus niet in Chrome/IE. Daarvoor moet je een Greasemonkey ding schrijven (alsnog niet IE)
En footer heb ik gewoon helemaal los gemaakt

Verder nog wat last ervan dat die devvers overal min-width neerzetten terwijl alles al vast is en overal fixed height, terwijl dat niet anders kan worden. FFUUU'tje

[Hero of Time]

Die user pages heb ik voor elkaar, alleen als de totale hoogte kleiner is dan m'n scherm hoogte, heb ik een wit vlak in beeld. Kan ik oplossen door #html een kleur te geven, maar dat komt dan weer niet overeen met de kleur die ik voor #contentArea gebruik .

Overigens, heb je al eens naar de comments gekeken op de frontpage met hun huidige stijl? De achtergrond is standaard minder wit, maar de comments nog wel
Echt, ziet er niet uit.

[F.West98]

Comments op FP?
Wat ik wel weet is dat die stomme afbeelding nog wit is bij nieuws-reacties

[Verwijderd]

F.West98 schreef op vrijdag 02 november 2012 @ 23:31:
Comments op FP?
Wat ik wel weet is dat die stomme afbeelding nog wit is bij nieuws-reacties

Welke afbeelding bedoel je?

[F.West98]

Daar zie je t.
De afbeelding zelf:
http://tweakimg.net/g/if/comments/reply_top.png

[Verwijderd]

F.West98 schreef op vrijdag 02 november 2012 @ 23:43:
[afbeelding]
Daar zie je t.
De afbeelding zelf:
http://tweakimg.net/g/if/comments/reply_top.png

Ah, dat kreng. Ben te lui om hem aan te passen

[F.West98]

Verwijderd schreef op vrijdag 02 november 2012 @ 23:46:
[...]


Ah, dat kreng. Ben te lui om hem aan te passen

ik ook

[Verwijderd]

Ik zal er toch eens aan moeten, aangezien mijn achtergrond zwart is. Het steekt een beetje af enzo

[Hero of Time]

Done:

code:

.reactie .topBorder {
    height: 0 !important;
}

[Verwijderd]

Hero Of Time schreef op vrijdag 02 november 2012 @ 23:54:
Done:

code:

.reactie .topBorder {
    height: 0 !important;
}

Mjah kan, maar fraai is anders.

[Hero of Time]

Je kan 't ook met opacity: 0; doen. Of background-image: none !important;. Wat jij leuk vind.

[Verwijderd]

Ik kleur hem wel in een keertje

[Hero of Time]

Dat had ik, maar het kwam niet mooi naar voren omdat het net iets anders kleurde dan m'n comments en ik vond de loze ruimte die je krijgt met de left-border lelijk, dus height: 0; gegeven.

[F.West98]

En ik heb het gewoon CSS-style opgelost
Geen afbeeldingen, CSS kan ook.
En nog wat andere aanpassingen aan de reacties, beter inspringen en spotlight/informative ook gekleurde headers

[ Voor 42% gewijzigd door F.West98 op 03-11-2012 00:29 ]

[JohnD1]

Nieuwe versie van mijn greasemonkey/tampermonkey script.
script : http://userscripts.org/scripts/show/150717

Grootste verandering is dat ik de originele popupTracker migreer naar een inlineTracker, met behoud van de instellingen. Tevens een 'Fixeer' en 'Scroll' optie toegevoegd.

code:

    $(".trackerPopup").attr('id','inlineTracker');
    if ( $("#inlineTracker").length ) {
       $("#inlineTracker").attr('class','fpItem tracker');
       $("#inlineTracker").insertBefore("#contentArea");
   }

dus als eerst geef ik de trackerPopup een inlineTracker id en vervolgens vervang ik de class door een nieuwe class. gevolg is dat alle gedefineerde trackerPopup styles verdwenen zijn en je alles opnieuw kan definieren.
Alle css aanpassingen staan in het script.

[ Voor 0% gewijzigd door JohnD1 op 03-11-2012 15:58 . Reden: typo aangepast ]

[F.West98]

Ik kwam achter een major Chrome issue, opgelost. Verder is er voor Chrome extra JS nodig om de userpages te laten werken:

JavaScript:

// ==UserScript==
// @name       TWK7 voor webkit
// @match      https://secure.tweakers.net/my.tnet/preferences*
// @match      http://tweakers.net/pricewatch/*
// @match      http://tweakers.net/categorie*
// @match      http://tweakers.net/gallery*
// @match      http://tweakers.net/merk*
// @match      http://tweakers.net/serie*
// @match      http://tweakers.net/product*
// @match      http://gathering.tweakers.net/forum/preferences*
// @version    0.1
// @description  LALALA
// @copyright  2012+, You
// ==/UserScript==

if(window.location != 'http://tweakers.net/pricewatch/') {
    document.getElementById('layout').className += ' special';
}

[Hero of Time]

M'n laatste versie is nu ingezonden voor de competitie: Hero Of Time in "Tweakers 7 Ultimate CSS Competition - Inzendtopic"
Verdeeld over 3 posts, in 1x was 't te groot, en aangezien ik 3 secties heb, is 't maar in 3'en gegaan

[MueR]

Mijn custom CSS (veel meer doe ik er niet aan denk ik):

• Kleurtjes op de channel headers en deze wat smaller gemaakt
• Menu bar gefixeerd bovenaan (moet nog wat aan het logo doen)
• User menu en algemeen menu omgedraaid
• Tables in het forum net wat minder padding
• Andere minor annoyances

Voor de code, zie https://dl.dropbox.com/u/20838908/tweakers.css

[ Voor 4% gewijzigd door MueR op 06-11-2012 15:27 ]

[F.West98]

Hmm Hmm Area 51 * F.West98 doet aluhoedje op

[MueR]

F.West98 schreef op dinsdag 06 november 2012 @ 18:28:
Hmm Hmm Area 51 * F.West98 doet aluhoedje op

Good one, die moest nog een kleurtje..

Dit dus

[KroontjesPen]

Nu Tweakers7 wat is aangepast werd mijn CSS keuze hier en daar verminkt.
De kleur en leesdichtheid kan je nu in stellen. Ze staan hier op donker en compact.

Wat ik nu in mijn custom stylesheet heb gezet is alleen nog dit.

code:

/* FP */

 /* zebrastrepen op FP */
table.highlights tr:nth-child(odd)  td { background: #f5f5f5; }
table.highlights tr:nth-child(even) td { background: #e5e5e5; }
 
/* einde FP */ 

/* GoT */

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

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

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

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


/* Background colors on the right categories */
.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(#8C9E9E,#626363);
background-image: linear-gradient(#8C9E9E,#626363);
}

/* zichtbare status van abo's */
a.abonnee { color: #660066 !important; 
}

/* bij eigen laatste bericht in topic */
td.topic a[title*="KroontjesPen"]
{ 
background-color: yellow; 
}

/*usericons zonder randje, met transparantie*/
img.usericon {
   background-color : transparent;
   border : 0;
   border-radius : 3px 3px 3px 3px;
   margin : 4px 8px;
   padding : 0;
   }
/* einde GoT */

[KroontjesPen]

Oeps was dubbel.

[ Voor 99% gewijzigd door KroontjesPen op 10-11-2012 08:55 ]

[WouterKvG]

MueR schreef op dinsdag 06 november 2012 @ 15:26:
Mijn custom CSS (veel meer doe ik er niet aan denk ik):
[screenshot]

• Kleurtjes op de channel headers en deze wat smaller gemaakt
• Menu bar gefixeerd bovenaan (moet nog wat aan het logo doen)
• User menu en algemeen menu omgedraaid
• Tables in het forum net wat minder padding
• Andere minor annoyances

Voor de code, zie https://dl.dropbox.com/u/20838908/tweakers.css

Netjes, ik ga 'm ook gebruiken.

KroontjesPen schreef op zaterdag 10 november 2012 @ 08:52:
[...]

code:

/* FP */

 /* zebrastrepen op FP */
table.highlights tr:nth-child(odd)  td { background: #f5f5f5; }
table.highlights tr:nth-child(even) td { background: #e5e5e5; }
 
/* einde FP */

Leuk idee, heb hem voor mezelf wel aangepast naar een iets lichter kleurtje en dan alleen de oneven listings.

[Saturnus]

Zijn er meer tweakers die last hebben van bugs als je al een tijdje bent ingelogt, en zelfs uitgelogt worden als je net ingelogd hebt met je custom css? (Experimentele Firefox versie.)

[F.West98]

Pure CSS slider FP

Ik heb net even zitten prutsen met iets zodat de nieuwste review rechts van de nieuwslijst staat boven de sidebar en dan onhover uitklapte, maar dat lukte niet mooi met animatie. Dus toen bij toeval een eigenlijk veel mooiere en betere oplossing gemaakt. Een slider.
Je ziet de nieuwste highlight geopend, de rest ernaast als 'bars', verticaal. Als je erover hovert klapt die mooi uit met een animatie.

Todo: automatisch slide tussen highlights

Screenshots:
De slider:

Een ander ding open:

En animerend:


Code:
Als je mijn FMod import doet, automatisch erbij. If not:

Cascading Stylesheet:

/* FP items inklappen */
#fpaItems { overflow: visible; float: right; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover { overflow: hidden; }
#fpaItems:hover + .mainColumn, #fpaItems:hover + .mainColumn + .secondColumn { margin-top: 0; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
        
#fpaItems .fpaItem { width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems .fpaItem:first-child { width: 245px;  }
#fpaItems .fpaItem:hover:not(:first-child) { width: 245px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover .fpaItem:first-child:not(:hover) { width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems + .mainColumn { -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }

edit:
En nu met automatische overgang:

Cascading Stylesheet:

/* FP items inklappen */
#fpaItems { overflow: visible; float: right; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover { overflow: hidden; }
#fpaItems:hover + .mainColumn, #fpaItems:hover + .mainColumn + .secondColumn { margin-top: 0; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
        
#fpaItems .fpaItem { border-right: 1px solid white; width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems .fpaItem:first-child { width: 245px;  }
#fpaItems .fpaItem:hover:not(:first-child) { width: 245px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover .fpaItem:first-child:not(:hover) { width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems + .mainColumn { -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
        
#fpaItems .fpaItem:nth-child(1) { animation: FPslider1 20s linear infinite; -webkit-animation: FPslider1 20s linear infinite; }
#fpaItems .fpaItem:nth-child(2) { animation: FPslider2 20s linear infinite; -webkit-animation: FPslider2 20s linear infinite; }
#fpaItems .fpaItem:nth-child(3) { animation: FPslider3 20s linear infinite; -webkit-animation: FPslider3 20s linear infinite; }
#fpaItems .fpaItem:nth-child(4) { animation: FPslider4 20s linear infinite; -webkit-animation: FPslider4 20s linear infinite; }
#fpaItems:hover .fpaItem { animation: none; -webkit-animation: none; }
        
@keyframes FPslider1 {
    0% { width: 245px; }
    23% { width: 245px; }
    25% { width: 15px; }
    98% { width: 15px; }
    100% { width: 245px; }
}
@keyframes FPslider2 {
    0% { width: 15px; }
    23% { width: 15px; }
    25% { width: 245px; }
    45% { width: 245px; }
    47% { width: 15px; }
    100% { width: 15px; }
}
@keyframes FPslider3 {
    0% { width: 15px; }
    45% { width: 15px; }
    47% { width: 245px; }
    67% { width: 245px; }
    69% { width: 15px; }
    100% { width: 15px; }
}
@keyframes FPslider4 {
    0% { width: 15px; }
    67% { width: 15px; }
    69% { width: 245px; }
    98% { width: 245px; }
    100% { width: 15px; }
}
@-webkit-keyframes FPslider1 {
    0% { width: 245px; }
    23% { width: 245px; }
    25% { width: 15px; }
    98% { width: 15px; }
    100% { width: 245px; }
}
@-webkit-keyframes FPslider2 {
    0% { width: 15px; }
    23% { width: 15px; }
    25% { width: 245px; }
    45% { width: 245px; }
    47% { width: 15px; }
    100% { width: 15px; }
}
@-webkit-keyframes FPslider3 {
    0% { width: 15px; }
    45% { width: 15px; }
    47% { width: 245px; }
    67% { width: 245px; }
    69% { width: 15px; }
    100% { width: 15px; }
}
@-webkit-keyframes FPslider4 {
    0% { width: 15px; }
    67% { width: 15px; }
    69% { width: 245px; }
    98% { width: 245px; }
    100% { width: 15px; }
}

[ Voor 41% gewijzigd door F.West98 op 10-11-2012 20:41 ]

[Hero of Time]

Saturnus schreef op zaterdag 10 november 2012 @ 18:32:
Zijn er meer tweakers die last hebben van bugs als je al een tijdje bent ingelogt, en zelfs uitgelogt worden als je net ingelogd hebt met je custom css? (Experimentele Firefox versie.)

Goh, je hebt problemen met de site en je gebruikt een experimentele browser versie. Waar zou het nou aan liggen? Bugged browser of wat anders? Test het eerst maar eens op een minder buggy browser.

[Saturnus]

Hero Of Time schreef op zaterdag 10 november 2012 @ 19:18:
[...]

Goh, je hebt problemen met de site en je gebruikt een experimentele browser versie. Waar zou het nou aan liggen? Bugged browser of wat anders? Test het eerst maar eens op een minder buggy browser.

Sowieso dat het aan de combinatie van die twee ligt. Voel je niet beschuldigd.

[Saturnus]

Ik heb (deels) de oorzaak. Bij het openen van http://tweakers.net/g/* word ik uitgelogd, tenminste wanneer het opgevraagde item niet bestaat. Dat is het geval voor http://tweakers.net/g/if/v3/framework/menu_icons.png, want sinds het toevoegen van frontpagesettings is het http://tweakers.net/g/if/v3/framework/menu_icons2.png.

Edit:
Gebeurd ook in IE zonder custom CSS. Bug topic in de maak.

Edit2:
[BUG] Opvraag 404 in tweakers.net/g* forceert logout

[ Voor 21% gewijzigd door Saturnus op 14-11-2012 12:14 ]

[Hero of Time]

Saturnus schreef op woensdag 14 november 2012 @ 10:49:
Ik heb (deels) de oorzaak. Bij het openen van http://tweakers.net/g/* word ik uitgelogd, tenminste wanneer het opgevraagde item niet bestaat. Dat is het geval voor http://tweakers.net/g/if/v3/framework/menu_icons.png, want sinds het toevoegen van frontpagesettings is het http://tweakers.net/g/if/v3/framework/menu_icons2.png.

Edit:
Gebeurd ook in IE zonder custom CSS. Bug topic in de maak.

Edit2:
[BUG] Opvraag 404 in tweakers.net/g* forceert logout

Verrek, dat is kut zeg. Wel mooi gevonden

[Ramon]

Even de myReact onderhanden genomen.


Vind het zo zonde dat niet meer van mijn scherm gebruikt wordt voor informatie, maar dat ik wel moet scrollen, dus dan maar zo: werkt heerlijk

Cascading Stylesheet:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://gathering.tweakers.net/forum/myreact") {
    #contentArea { 
        width: 100% !important;
        -moz-box-sizing: border-box;

    }
    #myfavourites {
        width: 48%;
        float: left;
        -moz-box-sizing: border-box;        
        margin-right: 39px;
    }
    #mybookmarks {

        width: 48%;
        -moz-box-sizing: border-box;
        float: left;
    }
    #myposthistory {
        width: 48%;
        -moz-box-sizing: border-box;        
        float: left;
    }
    #mypushmessages {
        display: none;
    }
    
    
    #content {
        height: 600px !important;
    }
    #myprofilecontainer { display: none; }
}

Het is niet perfect (in balans) maar het werkt

Zou leuk zijn als t.net meer responsive zou worden, zodat je daadwerkelijk nut hebt van t.net fullscreen zetten op een hoge-resolutie monitor

[ Voor 6% gewijzigd door Ramon op 17-11-2012 15:30 ]

[F.West98]

Ramon schreef op zaterdag 17 november 2012 @ 15:26:
Even de myReact onderhanden genomen.
[afbeelding]

Vind het zo zonde dat niet meer van mijn scherm gebruikt wordt voor informatie, maar dat ik wel moet scrollen, dus dan maar zo: werkt heerlijk

Cascading Stylesheet:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://gathering.tweakers.net/forum/myreact") {
    #contentArea { 
        width: 100% !important;
        -moz-box-sizing: border-box;

    }
    #myfavourites {
        width: 48%;
        float: left;
        -moz-box-sizing: border-box;        
        margin-right: 39px;
    }
    #mybookmarks {

        width: 48%;
        -moz-box-sizing: border-box;
        float: left;
    }
    #myposthistory {
        width: 48%;
        -moz-box-sizing: border-box;        
        float: left;
    }
    #mypushmessages {
        display: none;
    }
    
    
    #content {
        height: 600px !important;
    }
    #myprofilecontainer { display: none; }
}

Het is niet perfect (in balans) maar het werkt

Zou leuk zijn als t.net meer responsive zou worden, zodat je daadwerkelijk nut hebt van t.net fullscreen zetten op een hoge-resolutie monitor

Je noemt zelf responsive, maar hoe doe je het dan bij kleine schermen?
Over responsive: mijn stylesheet bevat een hoop responsiveness

[Ramon]

F.West98 schreef op zaterdag 17 november 2012 @ 16:23:
[...]

Je noemt zelf responsive, maar hoe doe je het dan bij kleine schermen?
[...]

Hoe bedoel je precies?

[_eXistenZ_]

Tweakers 7.5 changelog: Tweakers 7.5 - v1.1.4

_{Mensen die opmerken dat ik alleen maar linkjes dump en niks qua plaatjes e.d. post: dat deed ik eerst, en dat werd óók als vervelend ervaren omdat ik het zo vaak deed. Daarom heb ik in overleg met een moderator een eigen tweakblog gestart waar ik mijn theme op kon tonen en waarover gediscussieerd kon worden.}

[F.West98]

Ramon schreef op zaterdag 17 november 2012 @ 16:32:
[...]

Hoe bedoel je precies?

Op smalle schermen gaat het niet naast elkaar passen (als je het leesbaar wil houden)

[Ramon]

F.West98 schreef op zondag 18 november 2012 @ 23:39:
[...]

Op smalle schermen gaat het niet naast elkaar passen (als je het leesbaar wil houden)

Dat snap ik. Maar ik heb een 24" scherm met 1920*1200 reso en ik maak die custom CSS voor mezelf en niet voor mensen met smalle schermen of lage resoluties Dit wat ik heb gemaakt is natuurlijk niet responsive, ik zei alleen dat het cool zou zijn als t.net zélf wat meer responsive dingen zou bouwen voor mensen met hoge reso schermen (en overigens ook voor kleine schermen, ik erger me rot aan het gebruiken van t.net op mijn HTC 8x).

[Wiethoofd]

Ik ben gewoon het topic report knopje helemaal links te hebben, heb nu al een paar keer (bijna) een topicreport in een topic geplaatst omdat ik op 'reageer' klikte... Nu geen verwarring meer. Topichandje kleurt ook mee als je net een report hebt ingediend en/of deze afgehandeld is.

Known issues
- Laag aantal posts per page en midden in het topic zitten => wrapping van topic acties.
> oplossing: verberg 1 van de knoppen (ik heb alle bookmarks uit (gebruik ik toch nooit))

Is er behoefte aan de CSS van bovenstaande?

Cascading Stylesheet:

/* fancy knoppen en icoontjes voor topic acties */
#forumheading .action_list li +li {
 margin-left: 4px;
}
#forumheading .action_list li:before {
 display: none;
}
#forumheading .action_list a {
 border: 1px solid #CBCDCB;
 padding: 4px 5px;
 border-radius: 5px;
 background-color: #EEE;
 box-shadow: 0 5px 5px #EFEFEF inset, 0 -3px 5px #DDD inset;
}
#forumheading .action_list a:hover {
 text-decoration: none;
 box-shadow: 0 5px 5px #DDD inset, 0 -3px 5px #EFEFEF inset;
}
#forumheading .action_list a:before {
 content: '';
 background: url(http://tweakers.net/ext/f/jZ3p891voZTFEg0V9ZvGEwcr/full.png) no-repeat 0 -1px;
 padding: 0 0 16px 16px;
 margin-right: 2px;
}
#forumheading .action_list a[href*=relations]:before {
 background-position: -16px 0;
}
#forumheading .action_list a[href*=topicreport]:before {
 background-position: -32px 0;
 padding: 0 0 15px 12px;
}
#forumheading .action_list a[title*=gelezen]:before {
 background-position: -56px 0;
}
#forumheading .action_list a[title*="niet afgehandeld"]:before {
 background-position: -44px 0;
}
#forumheading .action_list a[href*=bookmark]:before {
 background-position: -68px -1px;
 padding: 0 0 16px 13px;
}
#forumheading .action_list a[title*=reminder]:before {
 background-position: -81px -1px;
 padding: 0 0 16px 17px;
}

Cascading Stylesheet:

/* Bookmarks uit topic heading verbergen */
#forumheading .action_list a[href*=bookmark] { display: none; }

[ Voor 53% gewijzigd door Wiethoofd op 02-12-2012 21:32 ]

[F.West98]

Just share
Maar... Famfamfam past niet in het nieuwe tnet design En die knoppen kan je beter blauw/transparant(blauw onhover) maken om het meer in overeenstemming te laten zijn

[Ramon]

F.West98 schreef op woensdag 21 november 2012 @ 20:34:
Maar... Famfamfam past niet in het nieuwe tnet design En die knoppen kan je beter blauw/transparant(blauw onhover) maken om het meer in overeenstemming te laten zijn

Dit is wel het "hoe ziet jouw t.net uit"-topic, niet het "ik help t.net gratis met het verbeteren van de site"-topic. Voor dat laatst wil ik toch wel cold hard cash zien.

[F.West98]

Ramon schreef op woensdag 21 november 2012 @ 21:18:
[...]

Dit is wel het "hoe ziet jouw t.net uit"-topic, niet het "ik help t.net gratis met het verbeteren van de site"-topic. Voor dat laatst wil ik toch wel cold hard cash zien.

I know
Famfamfam wordt nu nog breed gebruikt, houden tot de overhaul van forum komt. ooit.
Die kleurtjes, volgens mij wordt de code vermindert als je de juiste classes meegeeft

[Wiethoofd]

F.West98 schreef op woensdag 21 november 2012 @ 21:25:
Die kleurtjes, volgens mij wordt de code vermindert als je de juiste classes meegeeft

Right, als gewone user kun je ook de classes aanpassen...

Vorige post geüpdate met wat CSS, als er comments nodig zijn, geef een gil

[Zeror]

Toch wel fijn dat die tracker veranderd is...... Nu heb ik moeten rommelen in mijn CSS en nu is heel mijn custom CSS om zeep. Ik heb natuurlijk geen backup gemaakt..

[CaptJackSparrow]

JohnD1 schreef op zaterdag 03 november 2012 @ 15:01:
Nieuwe versie van mijn greasemonkey/tampermonkey script.
script : http://userscripts.org/scripts/show/150717

Grootste verandering is dat ik de originele popupTracker migreer naar een inlineTracker, met behoud van de instellingen. Tevens een 'Fixeer' en 'Scroll' optie toegevoegd.

[afbeelding]

code:

    $(".trackerPopup").attr('id','inlineTracker');
    if ( $("#inlineTracker").length ) {
       $("#inlineTracker").attr('class','fpItem tracker');
       $("#inlineTracker").insertBefore("#contentArea");
   }

dus als eerst geef ik de trackerPopup een inlineTracker id en vervolgens vervang ik de class door een nieuwe class. gevolg is dat alle gedefineerde trackerPopup styles verdwenen zijn en je alles opnieuw kan definieren.
Alle css aanpassingen staan in het script.

Tweakers heeft jouw tracker die ik al een tijd in gebruik heb aardig geïmiteerd. Helaas wordt nu overal de rest van de pagina's om de een of andere reden een flink stuk naar rechts verplaatst zodat er een brede middengrijze kolom tussen de tracker en de rest van die pagina komt te staan en er een horizontale scrollbalk verschijnt omdat een deel van de pagina nu ook rechts 'buiten beeld' valt.

Aangezien uitschakelen van het hele GreaseMonkey script nog lang geen acceptabele site oplevert zou het mooi zijn als dit gerepareerd zou kunnen worden. Wellicht een simpele marginwaarde aanpassing? Ik heb er zelf nog niet mee geëxperimenteerd.

[F.West98]

FFUUUU mn hele layout om zeep geholpen door die tracker.
Eens CSS'en dan maar

[FiRePaTH]

Ik heb m'n custom CSS aangepast aan de update van tweakers.net, nu is ie weer lekker klein en compact!

http://userstyles.org/styles/77054/tweakers-net-7-0-pro (voor Stylish browser plugin)

Forum, Pricewatch en Meuktracker moeten ook nog compacter gemaakt worden, maar dat komt nog.

[QwaftZefoni]

hier hetzelfde FUUUUUUU moment
maar wil iemand me ajb helpen? > CSS op pastebin
zo'n held ben ik niet met CSS... veel ook bij elkaar gesprokkeld vanuit hier

had ik alles zo lekker staan.... nu schuift de tracker alles uit het lood
ik wil dat de tracker niet alle content opschuift? of bij tracker in beeld de content weer terug uitgelijnd in het midden van 1920p





ben benieuwd hoe jullie dit hebben opgelost

[Yorinn]

Iemand die weet hoe je met de nieuwe tracker een andere kleur kan toevoegen. Via onderstaande code blijft er nog een deel rood ipv. blauw. Dit komt door een nieuw element, maar daar kom ik op dit moment niet uit.

code:

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

h1, h2 { 
    color: #4775FF !important;

[Zartok]

Yorin schreef op woensdag 05 december 2012 @ 11:49:
Iemand die weet hoe je met de nieuwe tracker een andere kleur kan toevoegen. Via onderstaande code blijft er nog een deel rood ipv. blauw. Dit komt door een nieuw element, maar daar kom ik op dit moment niet uit.
...

Is dit wat je zoekt?

Cascading Stylesheet:

/*.fakeTop > div {
background-color: #0052CC !important;
background-image: none !important;
}
#trackerHeader {
background-color: #0052CC !important;
background-image: none !important;
}Nevermind moet beter lezen*/
#tracker .fakeTop {
background: #0052CC;
}

[ Voor 6% gewijzigd door Zartok op 05-12-2012 12:12 ]

[naaitsab]

_eXistenZ_ schreef op zondag 18 november 2012 @ 21:13:
Tweakers 7.5 changelog: Tweakers 7.5 - v1.1.4

_{Mensen die opmerken dat ik alleen maar linkjes dump en niks qua plaatjes e.d. post: dat deed ik eerst, en dat werd óók als vervelend ervaren omdat ik het zo vaak deed. Daarom heb ik in overleg met een moderator een eigen tweakblog gestart waar ik mijn theme op kon tonen en waarover gediscussieerd kon worden.}

Niet verkeerd Enkel de font size en regelafstand op de frontpage (nieuwsberichten) en forum topics (oa myreact) zijn me toch wat te klein om het lekker te lezen, zelfs op een laptop.

Is dit makkelijk te 'fixen'? Als ik zelf ga rommelen met de CSS wordt alle tekst op de FP groter, zal wel een class verkeerd gerbruiken

[Yorinn]

Zartok schreef op woensdag 05 december 2012 @ 12:08:
[...]

Is dit wat je zoekt?

Cascading Stylesheet:

/*.fakeTop > div {
background-color: #0052CC !important;
background-image: none !important;
}
#trackerHeader {
background-color: #0052CC !important;
background-image: none !important;
}Nevermind moet beter lezen*/
#tracker .fakeTop {
background: #0052CC;
}

Zonder mijn code werkt deze perfect, maar als ik mijn code toevoeg voor de andere helft van de pagina werkt jouw code niet meer.

Dit is de juiste code:

code:

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

h1, h2 { 
    color: #4775FF !important;
}

/*.fakeTop > div { 
background-color: #0052CC !important; 
background-image: none !important; 
} 
#trackerHeader { 
background-color: #0052CC !important; 
background-image: none !important; 
}Nevermind moet beter lezen*/ 
#tracker .fakeTop { 
background: #0052CC; 
}

[ Voor 30% gewijzigd door Yorinn op 05-12-2012 12:25 ]

[Saturnus]

F.West98 schreef op dinsdag 04 december 2012 @ 20:05:
FFUUUU mn hele layout om zeep geholpen door die tracker.
Eens CSS'en dan maar

Yeah hier ook. Gewoon link/rechts schuiven nu.

[F.West98]

View button back

View knop bij berichten terug! Komt vóór de quote knop te staan:
Greasemonkey/Tampermonkey

JavaScript:

// ==UserScript==
// @name        Add tabs to Forum
// @namespace   userscripts
// @include     http://*tweakers.net/*
// @include     https://*tweakers.net/*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @grant       none 
// ==/UserScript==

$('#messages .message').each(function() {
    var id = $(this).prev().attr('name');
    var item = $(this).find('.messageheader .action_list li:last-child');
    item.before('<li><a href="http://gathering.tweakers.net/forum/view_message/'+id+'">View</a></li>');
});

[JohnD1]

CaptJackSparrow schreef op dinsdag 04 december 2012 @ 18:41:
[...]

Tweakers heeft jouw tracker die ik al een tijd in gebruik heb aardig geïmiteerd. Helaas wordt nu overal de rest van de pagina's om de een of andere reden een flink stuk naar rechts verplaatst zodat er een brede middengrijze kolom tussen de tracker en de rest van die pagina komt te staan en er een horizontale scrollbalk verschijnt omdat een deel van de pagina nu ook rechts 'buiten beeld' valt.

Aangezien uitschakelen van het hele GreaseMonkey script nog lang geen acceptabele site oplevert zou het mooi zijn als dit gerepareerd zou kunnen worden. Wellicht een simpele marginwaarde aanpassing? Ik heb er zelf nog niet mee geëxperimenteerd.

Klopt ik liep gisteren tegen de nieuwe tracker aan, inderdaad hebben ze de fixeer/scroll optie overgenomen.
Script is weer aangepast op de nieuwe tracker : http://userscripts.org/scripts/show/150717

[Zeror]

Yorin schreef op woensdag 05 december 2012 @ 11:49:
Iemand die weet hoe je met de nieuwe tracker een andere kleur kan toevoegen. Via onderstaande code blijft er nog een deel rood ipv. blauw. Dit komt door een nieuw element, maar daar kom ik op dit moment niet uit.

code:

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

h1, h2 { 
    color: #4775FF !important;

Met de volgende code verander je het rode blok boven de tracker.

Cascading Stylesheet:

#tracker .fakeTop {
background: <vul kleur/gradient/image in naar wens> ;
}

En met de volgende code verander je het tracker-pijltje naar wens voor de liefhebbers:

Cascading Stylesheet:

#tracker .fakeTop  div {
background: url("AFBEELDINGSURL HIERZO") no-repeat scroll 0 0 transparent;
}

Dit is de afbeelding die de tracker nu gebruikt. Je kan dit als template gebruiken als het wil veranderen naar iets anders.

[ Voor 23% gewijzigd door Zeror op 05-12-2012 20:32 ]

[Yorinn]

Zeror schreef op woensdag 05 december 2012 @ 20:28:
[...]

Met de volgende code verander je het rode blok boven de tracker.

code:

#tracker .fakeTop {
background: <vul kleur/gradient/image in naar wens> ;
}

Ik had het antwoord ook al gevonden hierboven.

[Hero of Time]

Ik heb de #top nu boven de fixed tracker, geen hide knop meer en #contentArea sluit netjes aan bij de tracker. Dit stukje code heb ik ervoor gebruikt:

Cascading Stylesheet:

/* Schuif top naar links */
#top {
    margin-left: -336px;
}

/* contentArea tegen tracker aan */
#contentArea {
    margin-left: 10px;
}

/* Tracker wat aanpassen */
#tracker {
    padding-top: 0px;
    margin-top: 85px;
    top: 0px;
}

.fakeTop {
    display: none;
}

Ik heb #top fixed staan bovenaan, dus die zie ik altijd. De hoogte hiervan is 85 pixels, hence de margin-top bij #tracker. Geeft je alleen problemen bij MyReact e.d. waarbij #top hoger wordt.
Shotje:

[F.West98]

Tracker fix

Ik heb even een uurtje vrij gevonden dus ik ben bezig gegaan met de tracker. Inmiddels werkt hij weer gedeeltelijk als de oude tracker, maar mooi nieuw.
Scroll blijft ook relative en onder de header staan, dus mooi in design. De content schuift niet meer op.
Bij niet-fixed positie een gradient onder de tracker die een limited height heeft. Links, rechts, fixed of scroll. Het werkt allemaal goed.

Om dit te laten werken, zit al in mijn stylesheet, anders het volgende erbij zetten (of aanpassen als je mijn mod niet hebt):

Cascading Stylesheet:

        /* Tracker */
        #tracker .fakeTop { 
            height: 85px;
        }
        #tracker #trackerContainer {
            margin-top: 17px;
        }
        .trackerScroll #tracker { z-index: 0; }
        #tracker { top: 0px !important; }
        body.trackerVisible { margin-right: 0 !important; margin-left: 0 !important; }
        body.trackerRight #tracker { right: 0 !important; }
        body { overflow-x: hidden; }
        body.trackerScroll.trackerVisible #tracker { left: 0 !important; }
        body.trackerScroll.trackerRight.trackerVisible #tracker { left: auto !important; right: 0 !important; }
        body { margin-left: 0px !important; margin-right: 0 !important; }
        body.trackerScroll #tracker { background: none; position: fixed !important; }
        body.trackerScroll.trackerVisible #tracker { position: absolute !important; }
        body.trackerScroll #tracker #trackerContainer { background: none repeat scroll 0 0 #313232; }
        body.trackerScroll #tracker #trackerContainer:after {
            position: absolute;
            content: "";
            height: 100px;
            width: 100%;
            background: -webkit-gradient(linear, top left, bottom left, color-stop(#313232, 0%), color-stop(#3F3F3F 100%));
            background: -webkit-linear-gradient(#313232, #3F3F3F);
            background: -moz-linear-gradient(#313232, #3F3F3F);
            background: -ms-linear-gradient(#313232, #3F3F3F);
            background: -o-linear-gradient(#313232, #3F3F3F);
            background: linear-gradient(#313232, #3F3F3F);
        }

[F.West98]

Fmod v2

Na een heeeele tijd is hij er dan toch echt, de nieuwe versie van mijn mod!
Qua uiterlijk weinig veranderd, maar de techniek is sterk veranderd. Zo kan je nu je eigen settings maken in een online tooltje (slaat ie op in je account) en is de header op ALLE pagina's fixed, ook in PW en userpages.

Where to get:

Ga naar http://fwest98.nl/tnet_mod/ en maak een account aan. Activeer deze in de mail en log in. Set your settings, colors, and more. Druk op opslaan en plak de gekregen link (de link om er te komen + ?id= en je id)
Zet dat in je Custom CSS op tnet, in je Greasemonkey, whatever en je hebt de CSS.

Wil je geen account aanmaken?
Laad dan de CSS zonder id, hij laadt dan de CSS met de standaard settings. Daarvoor de volgende css:

Cascading Stylesheet:

@import url(http://fwest98.nl/tnet_mod/index.css?id=2);

Screenie's

Settingspane:

Vernieuwde header:

Fixed header, ook bij PW en galleries

Zoeken op forum:

Bookmarks & pagenav

Mobile header:

Mobile bookmarks:

Mobile forum:

Mobile modden:



Known Issues
• Onoplosbaar: Als je scrollt sneeuwt de sneeuw niet meer
• Onoplosbaar: Op pagina's met een verlengde header (profielen, v&a/pw) is de content verlaagd (anyone an idea to fix this? (DM))
• Fixed soon: De menubalk heeft dezelfde kleur als de achtergrond vd header in non-mozilla
• Fixed soon: De sneeuw valt niet recht op het logo als je tracker rechts is en je de browser verkleint tot < 1300px width
• Fixed Fixed soon: Waarschijnlijk valt de sneeuw raar in mobiele weergave (width < 1000px OF height < 700px)
• Fixed Looking for fix: Sneeuw valt raar op het logo
• Looking for fix: Error bij opslaan van settings als je niets hebt veranderd
• Coming soon: Geen 'herstel standaard' knop bij settings


De oude CSS linkt voortaan door naar de nieuwe met default settings!!!
Ideeën voor nieuwe settings zijn welkom!

[Hero of Time]

Onoplosbaar: Als je scrollt sneeuwt de sneeuw niet meer

Wijzig eens van tab, dan sneeuwt 't weer . Heb er met Opera ook last van met m'n eigen fixed header.

Onoplosbaar: Op pagina's met een verlengde header (profielen, v&a/pw) is de content verlaagd (anyone an idea to fix this? (DM))

Ik heb 't voor een paar aangepast, maar niet alles. Check m'n CSS maar eens die ik heb ingezonden, die heeft de paar pagina's die ik gefixt heb zodat #top niet over de info komt. Andere pagina's waar ik niet veel kom heb ik niet gedaan.

[F.West98]

Hero Of Time schreef op zondag 30 december 2012 @ 21:45:
[...]

Wijzig eens van tab, dan sneeuwt 't weer . Heb er met Opera ook last van met m'n eigen fixed header.

Met de oude oplossing in FF geen last van

[...]

Ik heb 't voor een paar aangepast, maar niet alles. Check m'n CSS maar eens die ik heb ingezonden, die heeft de paar pagina's die ik gefixt heb zodat #top niet over de info komt. Andere pagina's waar ik niet veel kom heb ik niet gedaan.

Ik had er ook een oplossing voor met @document maar dat is een vreselijk werk om het goed te houden. Ik zal nog eens kijken naar jouw oplossing
Ik zie jouw oplossing overigens niet?

[ Voor 6% gewijzigd door F.West98 op 02-01-2013 19:53 ]

[CaptJackSparrow]

JohnD1 schreef op woensdag 05 december 2012 @ 20:13:
[...]

Klopt ik liep gisteren tegen de nieuwe tracker aan, inderdaad hebben ze de fixeer/scroll optie overgenomen.
Script is weer aangepast op de nieuwe tracker : http://userscripts.org/scripts/show/150717

Ik ervaar ondertussen een nieuw probleem. Ik kan niets intikken in de zoekbalk met het script actief. Als ik het uitschakel en refresh dan werkt het wel. Tweakers lijkt iets aan de zoekfunctie gewijzigd te hebben waardoor het i.c.m. jouw script niet meer werkt.

[Hero of Time]

CaptJackSparrow schreef op woensdag 02 januari 2013 @ 19:58:
[...]

Ik ervaar ondertussen een nieuw probleem. Ik kan niets intikken in de zoekbalk met het script actief. Als ik het uitschakel en refresh dan werkt het wel. Tweakers lijkt iets aan de zoekfunctie gewijzigd te hebben waardoor het i.c.m. jouw script niet meer werkt.

Ik kan ook niet klikken in 't zoekveld, maar er heen tabben lukt wel. Als je wel kan klikken erin, maar niets typen, ja, dan moet 't aan z'n script liggen.

[Yorinn]

Dat is een probleem met Tweakers. Ik heb het ook met mijn code. De sneeuw ligt er overheen zodat je er niet in kan klikken.

[CaptJackSparrow]

Ah! Een 'seizoengebonden' probleem dus. Misschien dat iemand van de crew die 'in the know' is ons even kan verWITtigen hoelang we dit nog zullen houden.

[Hero of Time]

F.West98 schreef op woensdag 02 januari 2013 @ 19:36:
[...]

Met de oude oplossing in FF geen last van

[...]

Ik had er ook een oplossing voor met @document maar dat is een vreselijk werk om het goed te houden. Ik zal nog eens kijken naar jouw oplossing
Ik zie jouw oplossing overigens niet?

Ik had o.a. #tweakbase een margin-top van 125px gegeven. Heb wat verder gekeken en wat geklooid op werk en kwam uit op dit:

Cascading Stylesheet:

#layout #contentArea .tab_active {
    margin-top: 125px;
}

Pakt net even wat meer Had PW bijvoorbeeld eerst niet, pakt dit wel.

[CaptJackSparrow]

Merken andere mensen ook dat scripts (GreaseMonkey bij mij) niet meer goed werken? Heeft Tweakers weer zaken veranderd die aanpassing van die scripts vereisen?

De regelafstand bijv. is plotseling weer veel te groot.

[Wiethoofd]

Check even rechtsbovenin onder het tandwieltje waar je sliders staan, die van Dichtheid heeft betrekking op de regelafstand als ik het me goed herinner.

[NMe]

Sowieso heb je voor styling geen scripts nodig?

[CaptJackSparrow]

Wiethoofd schreef op maandag 18 februari 2013 @ 21:17:
Check even rechtsbovenin onder het tandwieltje waar je sliders staan, die van Dichtheid heeft betrekking op de regelafstand als ik het me goed herinner.

Had ik al gedaan. Stond nog als altijd op Cozy omdat bij Compact tabjes verdwijnen.

Ik gebruik het script van JohnD1.

[F.West98]

NMe schreef op maandag 18 februari 2013 @ 21:18:
Sowieso heb je voor styling geen scripts nodig?

Veel mensen hebben een Greasemonkey script die simpelweg CSS injecteert voor mensen die geen Custom CSS hebben, of als je een script nodig hebt.
Ik gebruik Greasemonkey enkel voor een uitklapmenuutje bij Forum.

Overigens heb ik nergens last van?

[Verwijderd]

F.West98 schreef op maandag 18 februari 2013 @ 21:31:
[...]

Veel mensen hebben een Greasemonkey script die simpelweg CSS injecteert voor mensen die geen Custom CSS hebben...

Bedoel je niet de Stylish plugin?

[CaptJackSparrow]

Daar kun je zowel Stylish als GreaseMonkey voor gebruiken. Staan bij mij ook allebei geïnstalleerd in FireFox.

[Ramon]

Is het misschien een idee om alle verschillende CSS/JS in een github repo te centraliseren? Lijkt me handig. Je kan ook vanuit github de code hosten.

[wontcachme]

Werkt bij jullie de myreact "ik ben de laatste poster in dit topic dus maak de titel rood" style nog? Sinds vandaag opeens niet meer bij mij

EDIT: De tooltip is veranderd in "Laatste reactie geplaatst door wontcachme" ipv "Laatste bericht geplaatst door wontcachme"

[ Voor 32% gewijzigd door wontcachme op 19-02-2013 13:58 ]

[CaptJackSparrow]

Ik vroeg me al af of mijn ervaringen te maken zouden kunnen hebben met dit.
plan: Development-round-up - Iteratie #30

[NMe]

wontcachme schreef op dinsdag 19 februari 2013 @ 13:49:
Werkt bij jullie de myreact "ik ben de laatste poster in dit topic dus maak de titel rood" style nog? Sinds vandaag opeens niet meer bij mij

EDIT: De tooltip is veranderd in "Laatste reactie geplaatst door wontcachme" ipv "Laatste bericht geplaatst door wontcachme"

Cascading Stylesheet:

a[title$=wontcachme]{ }

ervan maken dus.

[CLB]

Iemand die weet hoe ik die grijze balken met wijzig - bekijk - bookmark - quote kan veranderen:


Weet niet welk stukje 'code' het is namelijk :

code:

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());

En ik ben nog op zoek om de tabjes: forumlijst, actieve topics, bookmarks, myreact, mijn topics en faq aan te passen...

Ooit had ik dat volgens mij in de vorm van:

code:

$("#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);

maar ook dat krijg ik niet meer werkend en dus zie ik alle (onnodige) tabjes... Ook anyone?

Vrij basic, I'm sorry, maar ik kom er gewoon niet uit

[F.West98]

Het is .message .messageheader
Verder geen idee, ik kan je wel code geven om extra nav-items toe te voegen

[naaitsab]

Heeft iemand zo de class bij de hand voor de tekst die gebruikt wordt binnen het forum? Dus hetgeen wat je nu aan het lezen bent. Als ik zelf ga stoeien gaat alle tekst van formaat veranderen

Wil de tekst even wat groter zetten want dit is geen pretje op 1440p

[Joen]

De Web Developer plugin die ik in Firefox geinstalleerd heb staan zegt:

Cascading Stylesheet:

/* Line 169 */
.messagecontent
{
  font-size: 13px;
  width: 640px;
}

[naaitsab]

Joen schreef op dinsdag 16 juli 2013 @ 23:10:
De Web Developer plugin die ik in Firefox geinstalleerd heb staan zegt:

Cascading Stylesheet:

/* Line 169 */
.messagecontent
{
  font-size: 13px;
  width: 640px;
}

Dat is 'm inderdaad. Over het hoofd gezien bij de Chrome inspector
Bedankt Morgen eens wat gaan rommelen

[F.West98]

naaitsab schreef op dinsdag 16 juli 2013 @ 23:01:
Heeft iemand zo de class bij de hand voor de tekst die gebruikt wordt binnen het forum? Dus hetgeen wat je nu aan het lezen bent. Als ik zelf ga stoeien gaat alle tekst van formaat veranderen

Wil de tekst even wat groter zetten want dit is geen pretje op 1440p

.post .messagecontent

Mijn ding is weer up-to-date.
Verder, @CLB:
Het is .messageheader die nu enkel de datum bevat. Om de header een kleurtje te geven moet je met gradients werken:

Cascading Stylesheet:

/* AAA is bovenste in header, BBB onderste (en dus gelijk bij effen kleur), geen border */
.message {
    background: linear-gradient(#AAA 0px, #BBB 42px, #EDEEEE 42px);
}
/* nu met border, CCC */
.message {
    background: linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px);
}

Hopelijk heb je er iets aan

[Orion84]

Let wel: dat laatste is niet cross-browser. In elk geval de browser engine van iOS (webkit toch?) ondersteunt het niet.

Edit: tenzij je even een extra regeltje toevoegt met -webkit-linear-gradient.

[ Voor 25% gewijzigd door Orion84 op 17-07-2013 09:10 ]