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

[F.West98]

Met CSS kun je websites vormgeven en opmaken. Zo zijn lettertypes aan te passen, tekst in verschillende groottes neer te zetten of zelfs alles standaard bold te maken. Om nog maar wat te noemen: alles groen of rood En dan de achtergrond blauw

Op Tweakers.net heb je de mogelijkheid met eigen CSS de standaard gedefiniëerde CSS te 'overrulen'. Dit is een Karmastore-feature, namelijk de Custom CSS, welke voor 500 karmapunten per half jaar aan te schaffen is. Mocht je niet genoeg karma verdiend hebben afgelopen jaar, geen nood, Firefox gebruikers kunnen de Stylish-addon installeren.

Je krijgt na 'aankoop' van de feature bij je layout-voorkeuren een extra vak erbij. Eerst een vinkje zetten en je kan alle code erin zetten die je wilt.

Algemeen (FP + GoT)

[list][/list]

Tweakers.net Frontpage

[list][/list]

GoT

[list][/list]

Aanbevolen

[list][/list]

Regels voor het posten van eigen CSS

• Plaats geen CSS die de site ontoegankelijk kan maken!
• Alle CSS dient geplaatst te worden tussen [code=css][code]-tags
• Graag een screenshot van de uitwerking (thumbnails of afbeelding van maximaal 600px breed)

Posts tegen elkaar aan

Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

DM knoppen terug

Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Nieuw bericht melding meer in de nieuwe stijl

Credits aan ikbenwouter: ikbenwouter in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Minder ruimte tussen topictitels

Credits aan Kamstra & Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Blauwe header

Credits aan Maramello: Maranello in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Paginaknopjes mod

By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

IT Banen en whitepapers weg uit menu

By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Postheaders oude kleur en meer kleurtjes

By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Alles breed, sidebars weg

By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

"Uit de community" zonder usericon

Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Henk is back!

Credits aan FireWood: FireWood in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Twk5 is back???

Credits aan Darkstone: Anoniem: 303530 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Zeeer donker

Credits aan HoT: Hero Of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Zoekbar weg, rare dingetjes FP weg

Credits aan blue-eagle: Blue-eagle in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Zon, strand en zee!

Credits aan blue-eagle: Blue-eagle in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Blue-ish

Credits aan wontcatchme: wontcachme in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

TOPICSEARCH

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

Forumknop uitgebreid

By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"


Dus... Post hieronder jouw CSS-styles!!
Alle CSS-styles zijn gepikt uit de bronnen
Aanvullingen of opmerkingen, DM kan altijd!

[ Voor 255% gewijzigd door F.West98 op 16-12-2012 21:08 ]

[Slapstick]

Dude, hoeveel tijd zit er in deze ts?

Wel leuk idee om het abotopic hierheen te kopiëren. Altijd een hoop geleerd uit het abo topic

[F.West98]

Slapstick schreef op donderdag 23 september 2010 @ 19:57:
Dude, hoeveel tijd zit er in deze ts?

Wel leuk idee om het abotopic hierheen te kopiëren. Altijd een hoop geleerd uit het abo topic

weinig... een avondje...
best lang, in totaal niet veel...

[ Voor 6% gewijzigd door F.West98 op 23-09-2010 19:58 ]

[Anoniem: 19894]

Ik dacht even dat ik opeens in /63 zat

[Matthew]

Waarom in de HK?

Die van mij is grijs. Nogmaals bedankt Wiethoofd

[Slapstick]

Misschien dat dit beter in SG past?

[Matis]

Matthew schreef op donderdag 23 september 2010 @ 20:02:
Waarom in de HK?

Die van mij is grijs. Nogmaals bedankt Wiethoofd

Wiethoofd heeft (godzijdank ) geen HKXS, dus hij zal je berichtje wss nooit lezen Daarnaast heeft hij ook geen DM-rechten meer, dus ook op die manier kun je hem niet bedanken
Misschien kun je zijn specifieke blog-bericht gebruiken voor bedankjes

[F.West98]

Matthew schreef op donderdag 23 september 2010 @ 20:02:
Waarom in de HK?

Die van mij is grijs. Nogmaals bedankt Wiethoofd

Slapstick schreef op donderdag 23 september 2010 @ 20:03:
Misschien dat dit beter in SG past?

heb daarover zitten discussiëren met NMe, SmartDodo, en nog wat lui.
Niet WEB, het is te simpel
Niet LA, het is geen feedback
Niet SG, het is niet serieus
Niet HK, daar past het niet.
Uiteindelijk HK...

[Slapstick]

Het is dan wel niet serieus, maar het heeft een serieuze inslag dan de rest van de hk. Als dit topic in SG gepost zou worden zou het 10* meer reacties krijgen m.i.

[CoolGamer]

Twee kleine aanpassingen die ik zelf wel handig vind:

---

Cascading Stylesheet:

.listing .topic a[title~="TheCoolGamer"]
{
color: #AAAAAA !important;
font-style: italic;
}

Wanneer je als laatste op een topic hebt gereageerd dan kleurt die grijs.

---

Cascading Stylesheet:

div.topicstarter .messageheader { /* maak de header van de topicstart oranje */
background: yellow url(http://tweakimg.net/g/if/v2/table_headers.png) repeat-x scroll 0 -155px !important;
}

Verkleurd alle posts van de ts('sen) binnen het gehele topic.

[ Voor 4% gewijzigd door CoolGamer op 23-09-2010 21:30 ]

[alex3305]

Alhoewel ik vind dat dit topic in het ABO forum moet, bij deze toch mijn styles:

Cascading Stylesheet:

/** Informatie over de poster tonen */
div.message div.post div.userdetails div.userdata div.extra { display: block; } 

/** Duidelijker GoT */
table.listing td {padding-top: 0px; padding-bottom: 0px;}

/** Anti reclame */
#relatedProducts {display: none; visibility: hidden;}
.relatedJobs, .jobImage {display: none;}

/** Kleurtjes voor speciale users */
a.abonnee { color: #6174a0 !important; }
div.topicstarter div.messageheader { background: #ccc; }

[Gleighton]

Je hebt geen abbo nodig om dit te activeren, dus in het abboforum lijkt me niet nodig. Als je een goede karmaslet bent kun je dit ook gebruiken zonder er voor te betalen.

[F.West98]

bedankt, zal morgen in de TS zetten

[Onbekend]

Ik heb 2x zoveel regels op m'n scherm als zonder deze aanpassing.
Hierdoor heb ik sneller en een beter overzicht van het forum.

Cascading Stylesheet:

table.listing td, table.listing th{
padding: 0px;
margin: 0px;
}

#myfavourites,#mybookmarks,#myactivetopics,#myposthistory,#mycontacts,#mynotes,#mypushmessages {
padding: 0px;
margin: 0px;
}

h3.inverted{
line-height:13px;
}

div.content{ 
margin-top: 0px; 
background-color: #FFFFFF;
}
div.forumheading{
padding: 0px;
margin: 0px;
}

http://img826.imageshack.us/img826/8670/tnet.png

[Hoite]

Matis schreef op donderdag 23 september 2010 @ 20:04:
[...]

Wiethoofd heeft (godzijdank ) geen HKXS, dus hij zal je berichtje wss nooit lezen Daarnaast heeft hij ook geen DM-rechten meer, dus ook op die manier kun je hem niet bedanken
Misschien kun je zijn specifieke blog-bericht gebruiken voor bedankjes

Kan je Wiethoofd ook een keer niet zo ongelofelijk afzeiken?
Het zonodig overal moeten melden dat hij een DM-ban heeft en geen HK-XS inclusief de nodige haha's enz.
Ik zou echt niet weten waarom je een hekel aan hem zou moeten hebben.
Ondanks dat hij niet het beste vriendje is van een stapel mods/admins betekend hij toch een hele hoop voor T.net.
Zoals de stapels bugmeldingen in LD, een leuke blog met tips/tweaks/verhaaltjes en is hij zeer behulpzaam op en buiten het forum.

[Anoniem: 19894]

Hoite schreef op donderdag 23 september 2010 @ 23:26:
[...]


...
Ondanks dat hij niet het beste vriendje is van een stapel mods/admins betekend hij toch een hele hoop voor T.net.
Zoals de stapels bugmeldingen in LD, een leuke blog met tips/tweaks/verhaaltjes en is hij zeer behulpzaam op en buiten het forum.

Amen.

[AW_Bos]

Henk wordt bij het hoveren gekleurd

Cascading Stylesheet:

/* Transparante Henk in kleur */
div.index:hover {
    background: url(http://tweakers.net/ext/f/ysnnTZgm1SJ8lGjtTbW5Wk7u/full.png) no-repeat scroll 650px bottom transparent  !important;
}

We houden van Henk

Cascading Stylesheet:

/* In elke channel willen wij Henk */
body.core #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.pro #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.games #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.electronics #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.mobile #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 


#logo { 
    height: 105px; 
    width: 232px; 
    position: absolute; 
    z-index: 10; 
    background: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px 0px; 
} 

#logo a { 
    background: none !important; 
} 

#logopointer{ 
display:none !important; 
}

[F.West98]

AW_Bos schreef op vrijdag 24 september 2010 @ 00:21:
Henk wordt bij het hoveren gekleurd

Cascading Stylesheet:

/* Transparante Henk in kleur */
div.index:hover {
    background: url(http://tweakers.net/ext/f/ysnnTZgm1SJ8lGjtTbW5Wk7u/full.png) no-repeat scroll 650px bottom transparent  !important;
}

We houden van Henk

Cascading Stylesheet:

/* In elke channel willen wij Henk */
body.core #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.pro #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.games #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.electronics #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 
body.mobile #logo { 
    background-image: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png); 
} 


#logo { 
    height: 105px; 
    width: 232px; 
    position: absolute; 
    z-index: 10; 
    background: url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px 0px; 
} 

#logo a { 
    background: none !important; 
} 

#logopointer{ 
display:none !important; 
}

wat wordt die laatste?

TS grote update, zal later nog jumps toevoegen

[Matis]

TheCoolGamer schreef op donderdag 23 september 2010 @ 21:28:
Twee kleine aanpassingen die ik zelf wel handig vind:

---

Wanneer je als laatste op een topic hebt gereageerd dan kleurt die grijs.

Thnx

[Hoite]

Matis schreef op vrijdag 24 september 2010 @ 16:19:
[...]

Thnx

Die is inderdaad verrekte handig.

[Bosmonster]

TheCoolGamer schreef op donderdag 23 september 2010 @ 21:28:
Twee kleine aanpassingen die ik zelf wel handig vind:

---

Cascading Stylesheet:

.listing .topic a[title~="TheCoolGamer"]
{
color: #AAAAAA !important;
font-style: italic;
}

[afbeelding]

Wanneer je als laatste op een topic hebt gereageerd dan kleurt die grijs.

---

Ow die is wel briljant!

[F.West98]

Inmiddels index met jumps...

[Hoite]

Ik krijg net een aanpassing van Wiethoofd binnen die de letters erachter ook bijkleurt:

code:

table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
 color: #F00;
}

edit:
Het bijbehorden screenshot:


De witte tracker en de roze header zijn ook het werk van Wiethoofd.

[ Voor 35% gewijzigd door Hoite op 24-09-2010 19:22 ]

[F.West98]

Hoite schreef op vrijdag 24 september 2010 @ 17:06:
Ik krijg net een aanpassing van Wiethoofd binnen die de letters erachter ook bijkleurt:

code:

table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
 color: #F00;
}

welke letters precies?
laat maar zal toevoegen

[ Voor 3% gewijzigd door F.West98 op 24-09-2010 17:09 ]

[Hoite]

F.West98 schreef op vrijdag 24 september 2010 @ 17:08:
[...]

welke letters precies?
laat maar zal toevoegen

Dit is een aanpassing op de grijze letters van een topic waar je als laatst op hebt gereageerd.
Ikzelf heb ze rood gemaakt.

edit:
Mijn beschrijving was inderdaad een beetje vaag, maar het gaat om de cijfers van de pagina's achter de TT.

[ Voor 16% gewijzigd door Hoite op 24-09-2010 17:44 ]

[F.West98]

Hoite schreef op vrijdag 24 september 2010 @ 17:43:
[...]


Dit is een aanpassing op de grijze letters van een topic waar je als laatst op hebt gereageerd.
Ikzelf heb ze rood gemaakt.

edit:
Mijn beschrijving was inderdaad een beetje vaag, maar het gaat om de cijfers van de pagina's achter de TT.

kan je ze ook grijs maken? dan voeg ik hem toe

[Bosmonster]

Ja, dan maak je de kleur grijs

[Tim]

Omdat ik lui ben: spoilers zijn leesbaar als je je muis er boven houd

Cascading Stylesheet:

div.spoiler:hover {
   color: white !important;
 }

En omdat ik graag zelf bepaal hoe breed alles is: GoT op 100% breedte (wel de tracker uitzetten)

Cascading Stylesheet:

div.notracker, div#layout {
 width: 98% !important;
}

div.content {
 width: 100% !important;
}

div#contentArea {
 -moz-border-radius-bottomleft: 10px !important;
 -moz-border-radius-bottomright: 10px !important;
}

div#contentBottom {
 background: none !important;
}

div.messagecontent {
 width: inherit !important;
 padding-right: 10px !important;
}

textarea#messageBox {
 width: 98% !important;
}

[Hoite]

F.West98 schreef op vrijdag 24 september 2010 @ 18:23:
[...]

kan je ze ook grijs maken? dan voeg ik hem toe

Vergeet niet de naam te veranderen

[wontcachme]

Aantal zeer mooie aanvullingen gevonden hier. Bedankt hiervoor. Ik heb echter wel twee verzoekjes als dat hier mag.

- Heeft/weet iemand code om de messageheaders donkerder te krijgen (zoals de headers in myreact) en de tekst in de messageheader dezelfde kleur als in myreact headers. Dus lijkt wat op de CSS code om de topic starter een kleur te geven, maar nu voor alle posts.
- Wanneer ik op GoT zit (en niet op de FP) dat de pagina links uitlijnt zoals de oude template.

Alvast bedankt mocht iemand hier tijd aan willen besteden.

[F.West98]

Bosmonster schreef op vrijdag 24 september 2010 @ 18:26:
Ja, dan maak je de kleur grijs

Ja, maar HOE

Tim schreef op vrijdag 24 september 2010 @ 18:41:
Omdat ik lui ben: spoilers zijn leesbaar als je je muis er boven houd

Cascading Stylesheet:

div.spoiler:hover {
   color: white !important;
 }

---

En omdat ik graag zelf bepaal hoe breed alles is: GoT op 100% breedte (wel de tracker uitzetten)

Cascading Stylesheet:

div.notracker, div#layout {
 width: 98% !important;
}

div.content {
 width: 100% !important;
}

div#contentArea {
 -moz-border-radius-bottomleft: 10px !important;
 -moz-border-radius-bottomright: 10px !important;
}

div#contentBottom {
 background: none !important;
}

div.messagecontent {
 width: inherit !important;
 padding-right: 10px !important;
}

textarea#messageBox {
 width: 98% !important;
}

hmmm... de eerste zal ik zeker plaatsen, de tweede misschien als aanvuling bij de no-tracker

[Hoite]

F.West98 schreef op vrijdag 24 september 2010 @ 19:35:
[...]

Ja, maar HOE
[...]

http://www.wolframalpha.com/input/?i=grey

[Slapstick]

Is er trouwens al een keer een workaround voor het feit dat die andere kleur header er erg lelijk uitziet op een klein formaat scherm?

[The Realone]

Ooit door iemand @ abo forum gepost. Sindsdien staat het er bij mij zo op. Niks aparts maar wel mijn favo kleur.

Cascading Stylesheet:

#menu 
{ 
    height: 77px; 
    background: #cb103a url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -88px; 
    position: relative; 
} 
#logo a { 
    background: url(https://dsp.tweakers.net/dg/menu/logo.gif) no-repeat; 
} 
#logo a:hover { 
    background-image: url(https://dsp.tweakers.net/dg/menu/logo_mouseover.gif); 
} 
/* Menu */ 
#mainNav { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) no-repeat right top; 
} 
#siteNav { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) repeat-x 0 -140px; 
} 
#siteNav fieldset { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat left -181px; 
} 
#siteMenu { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat right -222px; 
} 
#siteMenu li { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat; 
} 
#groupNav { 
    background: #000 url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x left -129px; 
} 

#groupNav fieldset { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) no-repeat right -41px; 
} 
#groupNav fieldset div ul li { 
    background: url(https://dsp.tweakers.net/dg/menu/buttons.gif) no-repeat; 
} 
#headerWrapper { 
    padding-top: 11px; 
    margin: 0 11px; 
    background: #fff url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -77px; 
} 

#header { 
background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -88px; 
}

[Xardas]

The Realone schreef op vrijdag 24 september 2010 @ 20:19:
Ooit door iemand @ abo forum gepost. Sindsdien staat het er bij mij zo op. Niks aparts maar wel mijn favo kleur.

Tof!

[F.West98]

The Realone schreef op vrijdag 24 september 2010 @ 20:19:
Ooit door iemand @ abo forum gepost. Sindsdien staat het er bij mij zo op. Niks aparts maar wel mijn favo kleur.

[afbeelding]

Cascading Stylesheet:

#menu 
{ 
    height: 77px; 
    background: #cb103a url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -88px; 
    position: relative; 
} 
#logo a { 
    background: url(https://dsp.tweakers.net/dg/menu/logo.gif) no-repeat; 
} 
#logo a:hover { 
    background-image: url(https://dsp.tweakers.net/dg/menu/logo_mouseover.gif); 
} 
/* Menu */ 
#mainNav { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) no-repeat right top; 
} 
#siteNav { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) repeat-x 0 -140px; 
} 
#siteNav fieldset { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat left -181px; 
} 
#siteMenu { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat right -222px; 
} 
#siteMenu li { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_buttons.gif) no-repeat; 
} 
#groupNav { 
    background: #000 url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x left -129px; 
} 

#groupNav fieldset { 
    background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) no-repeat right -41px; 
} 
#groupNav fieldset div ul li { 
    background: url(https://dsp.tweakers.net/dg/menu/buttons.gif) no-repeat; 
} 
#headerWrapper { 
    padding-top: 11px; 
    margin: 0 11px; 
    background: #fff url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -77px; 
} 

#header { 
background: url(https://dsp.tweakers.net/dg/menu/menu_inner_bg.gif) repeat-x 0 -88px; 
}

ga ik er niet in zetten, zoals in abo forum had wiethoofd hem korter gemaakt, je kan hem ook kiezen uit een van de 14 kleuren uit [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[ Voor 3% gewijzigd door F.West98 op 24-09-2010 20:23 ]

[F.West98]

Inmiddels een update van de TS met dank aan wiethoofd
de witte tracker is korter en nog wat dingetjes..

[SmartDoDo]

=> SG

En tegelijkertijd het verzoek om bij een post ook wat achtergrond info te geven wat een stuk CSS doet met liefst een screenshot erbij.

[F.West98]

Matis schreef op donderdag 23 september 2010 @ 20:04:
[...]

Wiethoofd heeft (godzijdank ) geen HKXS, dus hij zal je berichtje wss nooit lezen Daarnaast heeft hij ook geen DM-rechten meer, dus ook op die manier kun je hem niet bedanken
Misschien kun je zijn specifieke blog-bericht gebruiken voor bedankjes

offtopic:
oppassen, hij zit in de SG nu

offtopic:
hij zit te typen

Ehm... Voor de newbies, Hier dus je eigen CSS posten met commentaar en screenshot

[ Voor 12% gewijzigd door F.West98 op 26-09-2010 21:08 ]

[Wiethoofd]

F.West98 schreef op vrijdag 24 september 2010 @ 20:21:
ga ik er niet in zetten, zoals in abo forum had wiethoofd hem korter gemaakt, je kan hem ook kiezen uit een van de 14 kleuren uit [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

15

Veel CSS tegengekomen in dit topic wat veel korter/efficiënter kan Maar leuk zo'n topic

---

De CSS om de userdata altijd te tonen heb ik nog wat getweakt om ook de afbeelding wat het in/uitklappen verzorgt te verbergen, deze is namelijk overbodig.

Cascading Stylesheet:

/* Tonen extra userdata en verbergen klipklap afbeelding */
div.message div.post div.userdetails div.userdata div.extra {
display: block;
}
div.messageheader div.poster img.klipklap {
display: none;
}

Verder vind ik de usericons in multi-user topicstarts hinderlijk aanwezig:

Cascading Stylesheet:

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

Matis

[F.West98]

Wiethoofd schreef op zondag 26 september 2010 @ 21:08:
[...]

15

Veel CSS tegengekomen in dit topic wat veel korter/efficiënter kan Maar leuk zo'n topic

---

De CSS om de userdata altijd te tonen heb ik nog wat getweakt om ook de afbeelding wat het in/uitklappen verzorgt te verbergen, deze is namelijk overbodig.

Cascading Stylesheet:

/* Tonen extra userdata en verbergen klipklap afbeelding */
div.message div.post div.userdetails div.userdata div.extra {
display: block;
}
div.messageheader div.poster img.klipklap {
display: none;
}

Verder vind ik de usericons in multi-user topicstarts hinderlijk aanwezig:

Cascading Stylesheet:

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

Matis

morgen toegevoegd als er meer dan 5 nieuwe dingen zijn

[marcop23]

Ik snap het even niet... Ookal weet ik zeker dat ik weer iets stoms doe, ik las dit topic en activeerde direct de custom css feature, maar nou de vraag: Waarom werkt bij de volgende code alleen de eerste (headerkleurtjes)? Ik heb het lettelijk zo in mijn instellingen staan.

Cascading Stylesheet:

/* Elke dag andere kleur */ 
@import url(http://wiethoofd.info/css/header.php); 

/* Kleur vastzetten */ 
/* Mogelijke opties: red, blue, dsp, green, grey, orange, pink */ 
@import url(http://wiethoofd.info/css/header.php?color=orange);

.listing .topic a[title~="marcop23"]  
{  
color: #AAAAAA !important;  
font-style: italic;  
}

div.topicstarter .messageheader { /* maak de header van de topicstart oranje */  
background: yellow url(http://tweakimg.net/g/if/v2/table_headers.png) repeat-x scroll 0 -155px !important; 
 }

/* Transparante Henk in kleur */  
div.index:hover {  
background: url(http://tweakers.net/ext/f/ysnnTZgm1SJ8lGjtTbW5Wk7u/full.png) no-repeat scroll 650px bottom transparent !important; 
 }

div.spoiler:hover {  
color: white !important;  
}

[F.West98]

je moet als je een kleur wilt alleen de 'alleen een kleur'-code hebben staan.
de rest moet goed zijn

[Hoite]

marcop23 schreef op maandag 27 september 2010 @ 20:22:
Ik snap het even niet... Ookal weet ik zeker dat ik weer iets stoms doe, ik las dit topic en activeerde direct de custom css feature, maar nou de vraag: Waarom werkt bij de volgende code alleen de eerste (headerkleurtjes)? Ik heb het lettelijk zo in mijn instellingen staan.

Cascading Stylesheet:

/* Elke dag andere kleur */ 
@import url(http://wiethoofd.info/css/header.php); 

/* Kleur vastzetten */ 
/* Mogelijke opties: red, blue, dsp, green, grey, orange, pink */ 
@import url(http://wiethoofd.info/css/header.php?color=orange);

.listing .topic a[title~="marcop23"]  
{  
color: #AAAAAA !important;  
font-style: italic;  
}

div.topicstarter .messageheader { /* maak de header van de topicstart oranje */  
background: yellow url(http://tweakimg.net/g/if/v2/table_headers.png) repeat-x scroll 0 -155px !important; 
 }

/* Transparante Henk in kleur */  
div.index:hover {  
background: url(http://tweakers.net/ext/f/ysnnTZgm1SJ8lGjtTbW5Wk7u/full.png) no-repeat scroll 650px bottom transparent !important; 
 }

div.spoiler:hover {  
color: white !important;  
}

Als je elke dag een andere kleur wilt moet je alleen deze regel hebben:

code:

/* Elke dag andere kleur */ 
@import url(http://wiethoofd.info/css/header.php);

als je een vaste kleur wilt, moet je dit hebben:

code:

/* Kleur vastzetten */ 
/* Mogelijke opties: red, blue, dsp, green, grey, orange, pink */ 
@import url(http://wiethoofd.info/css/header.php?color=[b]orange[/b]);

^ is in dit voorbeeld oranje, als je blauw wilt moet je er '' blue '' van maken.

In jou code overruled de 2e helft de random kleuren, zodat ze alleen oranje blijven.

[marcop23]

Hoite schreef op dinsdag 28 september 2010 @ 21:37:
[...]


Als je elke dag een andere kleur wilt moet je alleen deze regel hebben:

code:

/* Elke dag andere kleur */ 
@import url(http://wiethoofd.info/css/header.php);

als je een vaste kleur wilt, moet je dit hebben:

code:

/* Kleur vastzetten */ 
/* Mogelijke opties: red, blue, dsp, green, grey, orange, pink */ 
@import url(http://wiethoofd.info/css/header.php?color=\[b]orange\[/b]);

^ is in dit voorbeeld oranje, als je blauw wilt moet je er '' blue '' van maken.

In jou code overruled de 2e helft de random kleuren, zodat ze alleen oranje blijven.

Oke bedankt, ik had inderdaad nu 2x dezelfde kleur.
En sinds net doen alle andere coden het ook in 1 keer. Ik heb geen idee hoe het jomt, ik heb niets gewijzigd, maar hij doet het

[Wiethoofd]

Mocht je trouwens een headerkleur uit willen kiezen: heel simpel, maar het werkt: http://wiethoofd.info/header/

[ Voor 7% gewijzigd door Wiethoofd op 02-05-2011 18:56 ]

[F.West98]

Even een paar geruchten plaatsen XD

Er komt een hele grote CSS aan, met een hele boel forum-veranderingen...
De eerste code heb ik al, ik test hem.
Om jullie nieuwsgierig te maken heb ik een paar screenies:
'

letterlijk een páár

[Wiethoofd]

Schijnbaar is de CSS voor de usernames op de schop gegaan en hebben abonnees waar je de myreact/profile van bekeken hebt nu geen underline meer, oplossing, extra class toevoegen of een !important er achter prakken.

Cascading Stylesheet:

/* Abonnees van een lijntje voorzien onder username in messageheader */
a.user.abonnee {
    text-decoration: underline;
}

/* Alternatieve oplossing */
.abonnee {
    text-decoration: underline !important;
}

[ Voor 6% gewijzigd door Wiethoofd op 11-10-2010 23:34 ]

[wontcachme]

F.West98 schreef op donderdag 30 september 2010 @ 21:26:
Even een paar geruchten plaatsen XD

Er komt een hele grote CSS aan, met een hele boel forum-veranderingen...
De eerste code heb ik al, ik test hem.
Om jullie nieuwsgierig te maken heb ik een paar screenies:
[afbeelding]'
[afbeelding]
letterlijk een páár

al een ETA hiervoor?

[Wiethoofd]

wontcachme schreef op maandag 11 oktober 2010 @ 23:36:
al een ETA hiervoor?

CSS komt van mijn hand, en geen ETA when it's done it's done Het is zelfs nu zo dat er nog een paar delen nog niet meegenomen zijn in de CSS en ik wil meteen een mogelijkheid bieden om zelf te kiezen wat er allemaal via de CSS aangepast wordt, beetje zoals de eerder genoemde optie voor de t.net headerkleuren

[Slapstick]

Slapstick schreef op donderdag 23 september 2010 @ 20:18:
Het is dan wel niet serieus, maar het heeft een serieuze inslag dan de rest van de hk. Als dit topic in SG gepost zou worden zou het 10* meer reacties krijgen m.i.

Okey, volgens mij had ik deze keer niet gelijk . Hoewel ik wel snel doorhad dat het beter hier paste

[Wiethoofd]

Mocht je nu mede-auteur van een topic zijn dan zie je dit niet zonder met je muis over het -icoontje te hoveren, met onderstaande CSS wordt de grijze versie vervangen door de gekleurde. Natuurlijk wel je eigen username neerzetten Screenie rechts voor uitwerking >>

Cascading Stylesheet:

/* Topics waar je mede-auteur van bent gekeurd icoontje geven */
table.listing tr.multiauthor td.poster span[title*="Wiethoofd"] {
    background-image: url(../g/forum/images/icons/group.png);
}

[F.West98]

oeh, wat een CSS...
Ik zal over een tijdje weer eens een update doen, eerst even bijkomen van de UBB-problems in mn review

[Matis]

Nadat ik de CSS-code van Onbekend in "[verzamel] CSS-styles; 'Hoe ziet jouw T...." had toegepast, gebeurde het mij regelmatig dat ik op de verkeerde link klikte. Dit komt (denk ik) doordat de regels zo dicht op elkaar zitten. Om dat te omzeilen heb ik het volgende stukje CSS toegevoegd

Cascading Stylesheet:

tr.noalt:hover td {
background-color: yellow !important;
}

Met als resultaat als je over een bepaalde regel scrolt

De kleur is natuurlijk zelf te tweaken, maar ik vind geel wel duidelijk en de font is dan ook nog goed leesbaar

[jmxd]

Twylight: Betere pagina-navigatie op GoT

Cascading Stylesheet:

@import url('http://files.jamiemarciano.me/tweakers/custom.css');

[ Voor 16% gewijzigd door jmxd op 25-11-2010 14:10 ]

[Gerco]

Geen idee van wie hij is, maar ik gebruik deze al een hele tijd. Nooit meer op neplinkjes klikken:

Cascading Stylesheet:

div.messagecontent a
{
    padding-right: 13px;
    background: url('http://tweakers.net/ext/f/svy0NJYJqEkfgYoZAOBSL7y9/full.png') center right no-repeat;
}

.signature a
{
    padding-right: 13px;
    background: url('http://tweakers.net/ext/f/svy0NJYJqEkfgYoZAOBSL7y9/full.png') center right no-repeat;
}

Je kan zelf kiezen of je linkjes in signatures ook wilt decoreren of niet. Screenshot:

[Muthas]

Werkt dat altijd ja?

[Gerco]

Muthas schreef op donderdag 25 november 2010 @ 14:58:
Werkt dat altijd ja?

Het is een echt linkje. Dat het nergens heengaat is natuurlijk een heel ander verhaal...

[jmxd]

Het is balen dat quotes met van jezelf niet te stijlen zijn, als het nou een title met naam er in had, maar helaas

[Matis]

Twylight schreef op donderdag 25 november 2010 @ 15:07:
Het is balen dat quotes met van jezelf niet te stijlen zijn, als het nou een title met naam er in had, maar helaas

Echt wel

[jmxd]

Ik heb gisteren crisp al iets laten aanpassen om mijn pagina-navigatie te laten werken, dus laat ik maar niet weer gaan zeuren

[F.West98]

Twylight schreef op donderdag 25 november 2010 @ 13:26:
Twylight: Betere pagina-navigatie op GoT

[afbeelding]

Cascading Stylesheet:

@import url('http://files.jamiemarciano.me/tweakers/custom.css');

Zal de ts even updaten

[F.West98]

Gerco schreef op donderdag 25 november 2010 @ 14:00:
Geen idee van wie hij is, maar ik gebruik deze al een hele tijd. Nooit meer op neplinkjes klikken:

Cascading Stylesheet:

div.messagecontent a
{
    padding-right: 13px;
    background: url('http://tweakers.net/ext/f/svy0NJYJqEkfgYoZAOBSL7y9/full.png') center right no-repeat;
}

.signature a
{
    padding-right: 13px;
    background: url('http://tweakers.net/ext/f/svy0NJYJqEkfgYoZAOBSL7y9/full.png') center right no-repeat;
}

Je kan zelf kiezen of je linkjes in signatures ook wilt decoreren of niet. Screenshot:
[afbeelding]

werkt verkeerd. Bij mijn TS zijn er anchors, daar staat ook zo'n logo. Kijk zelf maar.

TS geupdate

[jmxd]

Nog iets leuks:

Cascading Stylesheet:

.poster a[href*="155072"] {
 color: #0071c0 !important;
 }

Geef je eigen naam een ander kleurtje, wel even je eigen userid invullen

en mooiere messageheaders

Cascading Stylesheet:

/* Hogere messageheader met custom background */
.messageheader {
 height: 35px !important;
 background-image: url('http://tweakers.net/ext/f/mwSzXQZz9h0RNSKebClfCHKn/full.png') !important;
 }

/* Geef de posts van de topicstarter een groene header */ 
.topicstarter .messageheader {
 background-image: url('http://tweakers.net/ext/f/eVwrmXSWngumcDcC2A3w5GqN/full.png') !important;
 }

/* Geef je eigen post een blauwe header */
/* LET OP: Hiervoor moet je wel de optie "Eigen berichten highlighten?" aanvinken in je forum voorkeuren! */
.ownpost {
 background-position: 0 -38px !important;
 }

/* Username in messageheader iets naar onderen */
.messageheader .poster {
 margin-top: 3px;
 font-size: 10.2pt !important;
 }

/* Crew titles kleiner, en naar rechts */
.title {
 font-size: 7.5pt !important;
 padding-left: 14px;
 }

/* Post datum en quote icons iets naar onderen */
.date, .icons {
 padding-top: 3px;
 }

[ Voor 72% gewijzigd door jmxd op 25-11-2010 20:38 ]

[Sabbi]

Twylight schreef op donderdag 25 november 2010 @ 13:26:
Twylight: Betere pagina-navigatie op GoT

[afbeelding]

Cascading Stylesheet:

@import url('http://files.jamiemarciano.me/tweakers/custom.css');

Nice!
Het werkt aleen net niet helemaal lekker in Opera, de balk met paginanummers bovenaan een topic (pagecounter) is net wat te lang waardoor de 'nieuw topic' knop naar beneden wordt weggeduwd. Ook wordt de 'last' link niet gestyled als je op de last pagina zelf zit (maar dat is een gebrek in de html van T.net)

[jmxd]

@sabbi: in andere browsers worden die knoppen oog gestyled, dat werkt alleen niet in opera en er is geen workaround helaas want het is al een redelijke hack. Dus helaas.

De last button ontbreekt inderdaad bij gebrek aan html maar ik ik heb al aan crisp gevraagt of hij die ook even tussen <b> zet

[jmxd]

Okay ik heb de message-headers geperfectioneerd. Dit in de CSS zetten:

Cascading Stylesheet:

/* LET OP: Voor blauwe headers bij eigen posts moet je 
   "Eigen berichten highlighten?" aanvinken in je forum voorkeuren! */ 

@import url('http://files.jamiemarciano.me/tweakers/messages.css');

[ Voor 39% gewijzigd door jmxd op 26-11-2010 12:41 ]

[Wiethoofd]

Twylight schreef op vrijdag 26 november 2010 @ 12:38:
Okay ik heb de message-headers geperfectioneerd. Dit in de CSS zetten:

Hij werkt ook netjes in de 'oude' tweakers layout (net als de paginanummers fyi) maar ik vind het messageheaderkleurtje van de reguliere posters teveel weghebben van de messagecontent kleur, zou je ook in een donkerdere versie kunnen voorzien? Net zoals de messageheader in de tweakers-layout een #CFCFCE kleurtje heeft (maar dan dus nog de gradient mist )

[jmxd]

Ik zal straks wel even naar een donkerdere versie kijken, maar hier werkt hij trouwens niet in de oude layout? Hij past de custom css helemaal niet toe ?

[Wiethoofd]

Twylight schreef op vrijdag 26 november 2010 @ 13:00:
Ik zal straks wel even naar een donkerdere versie kijken, maar hier werkt hij trouwens niet in de oude layout? Hij past de custom css helemaal niet toe ?

Lang leve Firefox + Firebug zal ik dan maar zeggen

Je moet inderdaad in de tweakers-template in je preferences een externe CSS-file inladen die ook de default CSS-files importeert.

Cascading Stylesheet:

/* Importeren default t.net CSS (Nightlife template met gecentreerd forum) */
@import url('http://tweakimg.net/g/forum/templates/tweakers/css/default.css');
@import url('http://tweakimg.net/g/forum/templates/tweakers/css/nightlife.css');
@import url('http://tweakimg.net/g/forum/templates/tweakers/css/nightlife_c.css');

/* Hieronder je eigen CSS-tweaks voor op het forum in de tweakers-layout */
.foobar {
 foo: bar;
}

Mijn versie is te vinden op http://wiethoofd.info/css/got.css

offtopic:
zou jij me op msn toe kunnen voegen of een mailtje kunnen sturen?

[jmxd]

Cascading Stylesheet:

/* messageheader met donkerdere background */
.messageheader {
 background-image: url('http://tweakers.net/ext/f/S5ab7JWtSWxHDAvt98BdkIWM/full.png') !important;
 }

Als je dit aan je css toevoegt wordt hij iets donkerder, vind het zelf niet echt mooi though zeg maar als je hem toch nog iets lichter wil hebben. of nog donkerder

offtopic:
ik stuur je wel een dm met m'n email-adres

edit:
Oh, je hebt geen dm. check je profilepage

[ Voor 5% gewijzigd door jmxd op 26-11-2010 13:14 ]

[NitroX infinity]

F.West98 schreef op donderdag 23 september 2010 @ 19:56:
Bron: NitroX infinity in "Hoe ziet jouw T.net er uit?" (link abo only)
Je kan met deze code een effect creëren in de header.

Cascading Stylesheet:

 div.tabItemBig { display: none; }
div.frontpageItem div#reviewTab { display: none; }
ul.announcementList { width: 100%; }

Header? Dit heeft niets met de header te maken. Deze code sloopt de plaatjes uit 'Reviews & Features' op de frontpage.

Zonder de code;


Met de code:

[wontcachme]

Twylight schreef op vrijdag 26 november 2010 @ 13:11:

Cascading Stylesheet:

/* messageheader met donkerdere background */
.messageheader {
 background-image: url('http://tweakers.net/ext/f/S5ab7JWtSWxHDAvt98BdkIWM/full.png') !important;
 }

Als je dit aan je css toevoegt wordt hij iets donkerder, vind het zelf niet echt mooi though zeg maar als je hem toch nog iets lichter wil hebben. of nog donkerder

[afbeelding]

offtopic:
ik stuur je wel een dm met m'n email-adres

edit:
Oh, je hebt geen dm. check je profilepage

Zou je ook iets donkere versie ervan kunnen maken? Niet veel, maar net wat meer contrast tussen de header en vorige post.

Weet je misschien iets om de tekst "Geplaatst op donderdag 25 november 2010 13:26" en de tekst bij bv de quote button iets donkerder te maken?

[NitroX infinity]

Cascading Stylesheet:

<div class="date"><p><a href="http://gathering.tweakers.net/forum/insert_bookmark/1427166/35105759"><img src="images/icons/bookmark_message_new.gif" width="11" height="10" alt="bookmark" title="Voeg dit topic op deze plaats toe aan mijn bookmarks"></a> <img src="images/icons/online.gif" width="8" height="10" alt="online" title="wontcachme is aanwezig op het forum"> <a href="http://gathering.tweakers.net/forum/list_message/35105759#35105759" rel="nofollow">Geplaatst op vrijdag 26 november 2010 19:52</a></p></div>

Dus dan moet je het volgende gebruiken om de kleur aan te passen;

Cascading Stylesheet:

div.date a { color: #xyxyxy }

Als ik me niet vergis.

De tekst bij de quote button is onderdeel van de afbeelding en valt volgens mij niet aan te passen met css (aangezien de afbeelding in html is geplaatst en niet in de css).

[ Voor 11% gewijzigd door NitroX infinity op 26-11-2010 19:59 ]

[jmxd]

@wontcachme
De post die je quote is al de donkerdere versie, maar Wiethoofd wou zelf ook een nóg donkerdere versie dus die had ik ook gemaakt, even de img-url van bovenstaande code aanpassen naar de versie die je wil:



1 is standaard, daarvoor hoef je dus alleen de @import te doen van mijn originele post, de tweede is de gene die je net quotte en de 3e is een nog iets donkerdere versie.

[wontcachme]

Twylight schreef op vrijdag 26 november 2010 @ 20:00:

Thanx

NitroX infinity schreef op vrijdag 26 november 2010 @ 19:58:

Cascading Stylesheet:

<div class="date"><p><a href="http://gathering.tweakers.net/forum/insert_bookmark/1427166/35105759"><img src="images/icons/bookmark_message_new.gif" width="11" height="10" alt="bookmark" title="Voeg dit topic op deze plaats toe aan mijn bookmarks"></a> <img src="images/icons/online.gif" width="8" height="10" alt="online" title="wontcachme is aanwezig op het forum"> <a href="http://gathering.tweakers.net/forum/list_message/35105759#35105759" rel="nofollow">Geplaatst op vrijdag 26 november 2010 19:52</a></p></div>

Dus dan moet je het volgende gebruiken om de kleur aan te passen;

Cascading Stylesheet:

div.date a { color: #xyxyxy }

Als ik me niet vergis.

De tekst bij de quote button is onderdeel van de afbeelding en valt volgens mij niet aan te passen met css (aangezien de afbeelding in html is geplaatst en niet in de css).

Mijn css ervaring eindigt bij het kopieren van de code hier naar mijn voorkeuren, dus ik heb geen flauw idee wat je hier mee bedoelt. Alleen die div.date kopieren naar custom stylesheet of moet er nog wat bij.

[ Voor 4% gewijzigd door wontcachme op 26-11-2010 20:36 ]

[NitroX infinity]

Je moet alleen die div.date kopieren en xyxyxy in de gewenste hexadecimale kleurcode veranderen.

[wontcachme]

NitroX infinity schreef op vrijdag 26 november 2010 @ 20:40:
Je moet alleen die div.date kopieren en xyxyxy in de gewenste hexadecimale kleurcode veranderen.

Moet alleen nog 1 ding bij

Cascading Stylesheet:

div.date a { color: #000000 !important; }

[jmxd]

Je vergeet hem alleen af te sluiten, er moet nog een ; achter

[wontcachme]

Twylight schreef op vrijdag 26 november 2010 @ 20:55:
Je vergeet hem alleen af te sluiten, er moet nog een ; achter

Staat er gewoon hoor

[Wiethoofd]

Twylight schreef op vrijdag 26 november 2010 @ 20:55:
Je vergeet hem alleen af te sluiten, er moet nog een ; achter

Hoeft dus niet als het de laatste of de enige opmaakregel tussen de { } is

[GieltjE]

Tim schreef op vrijdag 24 september 2010 @ 18:41:
En omdat ik graag zelf bepaal hoe breed alles is: GoT op 100% breedte (wel de tracker uitzetten)

-knip-

Is er ook een manier om dit te doen zonder de frontpage tracker te breken? (heeft "NitroX infinity" dit ookal gevraagd? Ben er nog niet aan toe gekomen HK access aan te vragen.)

[ Voor 14% gewijzigd door GieltjE op 26-11-2010 23:11 ]

[Wiethoofd]

F.West98 schreef op donderdag 25 november 2010 @ 18:39:
werkt verkeerd. Bij mijn TS zijn er anchors, daar staat ook zo'n logo. Kijk zelf maar.

Cascading Stylesheet:

/* Afbeelding achter externe links */
div.messagecontent a, .signature a {
    padding-right: 12px;
    background: url('http://tweakers.net/ext/f/svy0NJYJqEkfgYoZAOBSL7y9/full.png') center right no-repeat;
}
/* Afbeelding voor interne links en anchors uitschakelen */
div.messagecontent a[href*='tweakers.net'], div.messagecontent a[name] {
    padding-right: 0;
    background: none;
}

Zo worden alleen externe linkjes van die afbeelding voorzien, tevens is de code wat compacter

---

Twylight en ik zijn atm bezig aan een valid CSS met zo min mogelijk gebruik van !important. Ik heb em meteen wat compacter en ook werkend gemaakt in de tweakers-layout (de oude). Via de @import ben je altijd up to date. Frontpage en Forum worden nu volledig voorzien van nette knoppen en clickable paginanummers.

Cascading Stylesheet:

/* Paginanavigatie tweaks rev2 */
@import url('http://wiethoofd.info/css/pagenav.css');

[ Voor 11% gewijzigd door Wiethoofd op 27-11-2010 10:46 . Reden: CSS even van comments voorzien ]

[jmxd]

NitroX infinity schreef op vrijdag 26 november 2010 @ 19:35:
[...]


Header? Dit heeft niets met de header te maken. Deze code sloopt de plaatjes uit 'Reviews & Features' op de frontpage.

Zonder de code;
[afbeelding]

Met de code:
[afbeelding]

Zou het ook mogelijk zijn om het er uit te laten zien zoals bij Grade B?

[Wiethoofd]

Twylight schreef op zaterdag 27 november 2010 @ 18:54:
Zou het ook mogelijk zijn om het er uit te laten zien zoals bij Grade B?

Nee, is niet mogelijk, die gegevens voor de categorie, tijd/datum en aantal reacties staan niet of niet op de juiste plaats in de html.

[NitroX infinity]

Ik heb 'm wat aangepast en nu lijkt het wat meer op de rest van de site;

Met de oude code;


Met de nieuwe code;

Cascading Stylesheet:

div.tabItemBig { display: none; }
div.frontpageItem div#reviewTab { display: none; }
ul.announcementList { width: 100%; }

ul.announcementList li { background: none; }
ul.announcementList li { height: 16px !important; }
ul.announcementList li { border: 0px; }
ul.announcementList li { border-bottom: 1px solid #E0E0E0; }

ul.announcementList li.active {background-color: transparent !important; border-color: #E0E0E0;}

ul.announcementList li.active a { color: #000000 !important; }
ul.announcementList li a:hover { color: #ED053E !important; }

De javascript code die de verschillende items highlight is nog steeds actief alleen is de opmaak zodanig dat het niet meer opvalt.

Ik heb geprobeerd om span.reactionLink te tonen maar die blijft onzichtbaar op de één of andere manier, of ik kijk er overheen Zal daar nog wel wat mee gaan prutsen. Span.reactionLink is trouwens de span waar de link naar de reacties in staat, de link zelf is het aantal reacties.

[Wiethoofd]

NitroX infinity schreef op zondag 28 november 2010 @ 11:36:
Ik heb 'm wat aangepast en nu lijkt het wat meer op de rest van de site;

Ik heb geprobeerd om span.reactionLink te tonen maar die blijft onzichtbaar op de één of andere manier, of ik kijk er overheen Zal daar nog wel wat mee gaan prutsen. Span.reactionLink is trouwens de span waar de link naar de reacties in staat, de link zelf is het aantal reacties.

Die reactionLink staat in de .tabItemBig .announcementBigContent

[NitroX infinity]

Je hebt gelijk, ik keek op de verkeerde plek. Reacties wil dus niet, jammer.

[Wiethoofd]

NitroX infinity schreef op zondag 28 november 2010 @ 12:11:
Reacties wil dus niet, jammer.

Niet helemaal waar, je moet alleen de juiste meuk gaan stylen

Cascading Stylesheet:

/* Standaard alle tabs laten zien */
#reviewTab1, #reviewTab2, #reviewTab3, #reviewTab4, #reviewTab5, #reviewTab6, #reviewTab7, #reviewTab8, #reviewTab9, #reviewTab10 { display: inline !important; }

/* Nodeloze dingen uitschakelen */
.frontpageItem #reviewTabList, .frontpageItem #reviewTab ul, .announcementBigBox,
.frontpageItem #reviewTab div .hr-light, #reviewTab div a.announcementBigBackground,
.frontpageItem .announcementBigContent .announcementText { display: none; }

/* Hoogte vastzetten en weer bovenin uitlijnen */
.announcementTabs .tabItemBig, .announcementBigBox, .announcementBigContent { height: 22px; left: 0; }
.frontpageItem .tabItemBig .announcementBigBox, .frontpageItem .tabItemBig .announcementBigContent { top: 1px; }

/* Opmaak etc. */
#reviewTab .tabItemBig { margin-bottom: 0; border-bottom: 1px solid #E0E0E0; }
#reviewTab #reviewTab1 .tabItemBig { border-top: 1px solid #E0E0E0; height: 24px; }
#reviewTab1 .announcementBigContent { padding-top: 3px; }
.announcementBigBox { background: none; }
.announcementBigContent { width: 100%; padding: 0; }
.announcementBigContent h4, .announcementBigContent h4 a, .announcementBigContent .reactionLink, .announcementBigContent .reactionLink a { color: #000000; font-weight: normal; font-size: 11px; }
.announcementBigContent h4, .announcementBigContent span.reactionLink, .announcementBigContent span.reactionLink a { margin: 0; }
.announcementBigContent h4 a { padding: 5px 4px 5px 0; margin: 0; }
.announcementBigContent h4 a:hover, .announcementBigContent .reactionLink a:hover { color: #ED053E; }

Levert op:

[NitroX infinity]

Okee, ik begreep je dus niet goed

Is het mogelijk om span.date ook te tonen?

[ Voor 38% gewijzigd door NitroX infinity op 28-11-2010 13:24 ]

[Yorinn]

NitroX infinity schreef op zondag 28 november 2010 @ 13:16:
Okee, ik begreep je dus niet goed

Is het mogelijk om span.date ook te tonen?

En is het dan heel misschien ook nog mogelijk om er een gekleurd blokje voor te zetten? Al is het maar grijs, het is al goed dan.

[NitroX infinity]

Kijkend naar de code zeg ik nee, ik zie tenminste geen code waarin de categorie wordt gedefiniëerd.

[Yorinn]

Ok, maar de datum/tijd kan er wel in verwerkt worden?

[CodeCaster]

Ik heb zelf de knoppenbalk bij het invoeren van een bericht uitgeschakeld, gebruik dat drukke ding toch nooit, maar dan is je tekstvak ook niet meer te vergroten.

Dan maar altijd een groot vak, net als de quickreply:

Cascading Stylesheet:

#message_form textarea#messageBox {
  height: 450px;
}

#quickreply_form textarea#messageBox {
  height: 250px;
}

[Wiethoofd]

NitroX infinity schreef op zondag 28 november 2010 @ 13:16:
Is het mogelijk om span.date ook te tonen?

Yorin schreef op zondag 28 november 2010 @ 15:14:
Ok, maar de datum/tijd kan er wel in verwerkt worden?

Nee, deze staat in de verborgen .frontpageItem .announcementBigContent .announcementText. Qua blokjes is er inderdaad ook niets aan toe te voegen, deze staat niet in de html gedefinieerd, helaas.

[_Mystikal_]

Heren, vraagje ik heb vanmiddag door dit topic heen zitten bladeren. ondanks dat ik custom CSS niet aan heb staan, heb ik wel last van enkele css scripts. Ik heb in ieder geval de effecten van deze:

F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."

en deze:

F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."

Ik heb mn volledige browserhistory, temp files en cookies al verwijderd, en mn browser gerestart, maar ik heb die effecten nog steeds. Iemand enig idee hoe ik dit weg haal? (IE8)

[Wiethoofd]

De linkjes in je post werken niet, en het is volgens mij onmogelijk om last te hebben van de CSS die hier gepost is als je geen custom CSS in hebt geschakeld...

[Onbekend]

Een CTRL+F5 zou genoeg moeten zijn.
Weet je zeker dat je de tekst niet meer in de css hebt staan?

[_Mystikal_]

Wiethoofd schreef op zondag 28 november 2010 @ 22:17:
De linkjes in je post werken niet, en het is volgens mij onmogelijk om last te hebben van de CSS die hier gepost is als je geen custom CSS in hebt geschakeld...

Dezë:

Bron: Hacku in "Hoe ziet jouw T.net er uit?" (link abo only)
Tracker en productkoppelingen weg met de volgende code:

Cascading Stylesheet:

#utracker { display: none; }
#page.trackerright { padding-right: 0; width: 966px; }

#relatedProducts, .addproduct { display: none; }

en deze:

Op de homepage het reviews en features deel zonder afbeelding en wit.

Cascading Stylesheet:

/* Standaard alle tabs laten zien */ 
#reviewTab1, #reviewTab2, #reviewTab3, #reviewTab4, #reviewTab5, #reviewTab6, #reviewTab7, #reviewTab8, #reviewTab9, #reviewTab10 { display: inline !important; }
 
/* Nodeloze dingen uitschakelen */ 
.frontpageItem #reviewTabList, .frontpageItem #reviewTab ul, .announcementBigBox,
 .frontpageItem #reviewTab div .hr-light, #reviewTab div a.announcementBigBackground,
 .frontpageItem .announcementBigContent .announcementText { display: none; } 

/* Hoogte vastzetten en weer bovenin uitlijnen */ 
.announcementTabs .tabItemBig, .announcementBigBox, .announcementBigContent { height: 22px; left: 0; }
 .frontpageItem .tabItemBig .announcementBigBox, .frontpageItem .tabItemBig .announcementBigContent { top: 1px; }
 
/* Opmaak etc. */ 
#reviewTab .tabItemBig { margin-bottom: 0; border-bottom: 1px solid #E0E0E0; } 
#reviewTab #reviewTab1 .tabItemBig { border-top: 1px solid #E0E0E0; height: 24px; }
 #reviewTab1 .announcementBigContent { padding-top: 3px; } 
.announcementBigBox { background: none; } 
.announcementBigContent { width: 100%; padding: 0; } 
.announcementBigContent h4, .announcementBigContent h4 a, .announcementBigContent .reactionLink, .announcementBigContent .reactionLink a { color: #000000; font-weight: normal; font-size: 11px; }
 .announcementBigContent h4, .announcementBigContent span.reactionLink, .announcementBigContent span.reactionLink a { margin: 0; }
 .announcementBigContent h4 a { padding: 5px 4px 5px 0; margin: 0; } 
.announcementBigContent h4 a:hover, .announcementBigContent .reactionLink a:hover { color: #ED053E; } 

Ik weet ook niet hoe het kan. Maar ik weet wel dat het er ook nog steeds is nadat ik IE heb gereset naar zn defaults.

Onbekend schreef op zondag 28 november 2010 @ 22:17:
Een CTRL+F5 zou genoeg moeten zijn.
Weet je zeker dat je de tekst niet meer in de css hebt staan?

Ik heb nooit custom css gehad, ik heb die feature nooit geactiveerd Ik neem aan dat je dat bedoelt? Overigens heb ik een CTRL F5 ook al geprobeerd

[ Voor 7% gewijzigd door _Mystikal_ op 28-11-2010 22:31 ]

[Wiethoofd]

Ah, ik denk dat ik weet wat er mis is, je DeviceGrade staat op B of C, waar dit A moet zijn
Even op http://tweakers.net/devicedetect kijken of http://tweakers.net/devicedetect?forceDeviceGrade=0 should do the trick