Must-have forum Custom CSS tweaks (non-layout related)

Door Wiethoofd op zaterdag 20 oktober 2012 20:30 - Reacties (2)
Categorie: Custom stylesheet, Views: 16.630

Ik kan net als iedere blogger die me deze afgelopen dagen voorging complete lappen CSS dumpen om het forum/frontpage de stylefouten en layoutflaws van de designer(s) te fixen, maar ik mag voor Tweakers hopen dat ze zichzelf genoeg respecteren en komende week met een grote update uitkomen.

Tot die tijd zijn er een aantal dingetjes die voor een semi-actief forumgebruiker eigenlijk onmisbaar zijn en naar mijn mening zelf standaard in de Tweakers.net stylesheets mogen zonder dat er met de layout gekloot wordt.

Show me the magic
Bij elk stukje CSS staat een regeltje commentaar wat het doet met eventueel een screenshot. Naar eigen wens kopiŽren naar je eigen Custom CSS veld.

Berichtkoppen
In TWK7 is de berichtkop iets getweakt, het 'Verzonden op' en 'Geplaatst op' voor respectievelijk DM's en forumreacties is weggehaald, terugzetten kan met een simpel stukje CSS.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
/* 'Verzonden op' en 'Geplaats op' terug in berichtkoppen */
.message .messageheader .date a {
 text-transform: lowercase;
}
.message .messageheader .date a:before {
 content: 'Geplaatst op ';
 text-transform: none;
}
#pmessages .date a:before {
 content: 'Verzonden op '
}


Als laatste gereageerd in een topic
In grote lijsten met topictitels is het soms lastig kijken in welk topic je als laatste gereageerd hebt, onderstaande 'verbergt' deze titels. Wil je een lekker pittig kleurtje, genereer onderstaande CSS met je eigen username hier. In onderstaande 'Wiethoofd' natuurlijk even vervangen door je eigen username.

Cascading Stylesheet:
1
2
3
4
5
/* Als laatste in topic gereageerd 'verbergt' topictitel */
table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
 color: #BBB;
}


Mede-auteur van een topic
Was ik nou mede-auteur van dit topic of... Nu kun je makkelijk herkennen of je meegewerkt hebt aan een topic en als mede-auteur gemarkeerd staat, natuurlijk wel even je eigen username invullen.

Cascading Stylesheet:
1
2
3
4
/* Topics waar je mede-auteur van bent gekleurd icoontje geven */
table.listing tr.multiauthor td.poster span[title*="Wiethoofd"] {
 background-image: url(http://tweakers.net/ext/f/8EQUH8RuzONAWqhWXuzwlDvg/full.png);
}


Uitklappen userdata
In de 'userdata' staat hoeveel posts iemand heeft en hoe lang hij/zij al geregistreerd is. Mocht je dit standaard zichtbaar willen hebben en/of de avatars van mede-auteurs uit willen schakelen, neem dan onderstaande over.
Standaard userdata in bericht Uitgeklapte userdata in bericht

Cascading Stylesheet:
1
2
3
4
5
6
7
/* Tonen extra userdata en verbergen klipklap */
div.message div.post div.userdetails div.userdata div.extra {
 display: block;
}
div.messageheader div.poster img.klipklap {
 display: none;
}


Cascading Stylesheet:
1
2
3
4
/* Multi-user TS verbergen iconen mede-auteurs */
div.message div.post div.userdetails div.contributors div.contributor img.usericon {
 display: none;
}


Compacter forum
Standaard veel padding levert veel witruimte op, niet iedereen is daar even van gecharmeerd, onderstaande levert een iets compacter forum op.

Cascading Stylesheet:
1
2
3
4
/* Compactere forum tabellen */
table.listing td, table.listing th {
 padding: 5px; /* is standaard 10px boven/onder en 5px links/rechts */
}


Topics negeren in posthistory
Sinds het mogelijk is topics uit je posthistory te filteren kan dit een veel makkelijker te volgen lijst opleveren, het knopje ervoor is echter standaard nogal aanwezig.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Topic negeerknopje posthistory */
th.ignore { text-indent: -9999px; }
table.listing .ignore {
 width: 8px;
 padding: 4px 0 0;
}
table.listing tr td.ignore a {
 display: none;
 margin-left: -25px;
}
table.listing tr:hover td.ignore a,
table.listing tr td.ignore a[href*=unignore] {
 display: inline;
}


Verzamelscreenshotje
De volgende CSS is zichtbaar anders (rechts) dan de default opmaak (links):
- Negeerknopje (zichtbaar bij hover)
- Compactere forumlijsten
- Mede-auteur gekleurd icoontje
- Als laatste gereageerd in topic highlight/verbergen
- Tweakers-layout forummapjes

Posthistory (TWK7 vs. TWK(ed)7)

Toegift: spoilers
Spoilers zijn standaard niet te lezen en moet je selecteren om dat wel te kunnen, dubbelklikken om de tekst te selecteren gaat 95% van de tijd fout, dus waarom niet de achtergrondkleur wijzigen naar iets lichters dan zwart.

Cascading Stylesheet:
1
2
3
4
/* Achtergrondkleur spoiler naar grijs */
.spoiler, div.messagecontent div.spoiler a, div.messagecontent div.message-quote-div div.spoiler a, div.messagecontent div.spoiler a:hover, div.messagecontent div.message-quote-div div.spoiler a:hover {
 background-color: #999;
}

Volgende: Qliner Hotkeys (x64 fix) 09-'12 Qliner Hotkeys (x64 fix)

Reacties


Door Tweakers user AW_Bos, zaterdag 20 oktober 2012 22:31

Bravo, leuke verzameling van handige CSS-tweaks....

Door Tweakers user hyptonize, donderdag 25 oktober 2012 15:56

Thanks, ik had alles per ongeluk verwijderd sinds T7.

…ťn ding, die spoilers zie je nu alsnog gewoon, maar dan met een grijs achtergrondkleurtje en zwarte tekst. Als ik het me goed herinner had je vroeger een stukje CSS waarmee het een spoiler bleef, maar de tekst pas zichtbaar werd zodra je je muis op het zwarte vlak hield. Dus dat heb ik even gereconstrueerd.


Cascading Stylesheet:
1
2
3
div.messagecontent div.spoiler:hover, div.messagecontent div.message-quote-div div.spoiler:hover { 
 color:#fff;
}


Reageren is niet meer mogelijk