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

[_Mystikal_]

Wiethoofd schreef op zondag 28 november 2010 @ 22:33:
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=A should do the trick

Held, tnx! Laat ik jullie weer rustig over CSS babbelen

[jmxd]

Met deze link zet je je device grade op standaard. (Wat in het geval van een desktop browser grade A is)

[Wiethoofd]

Ikzelf gebruik het 'Jobs' gedeelte uit het menu nooit, dus dan mag het van mij ook wel weg. N.B.: De selector om de boel te verbergen werkt pas vanaf IE9, Firefox 3.5 en alle webkit-enginebased browsers.

Voorwaarde is dat de tracker rechts staat of uitgeschakeld is, anders wordt het menu zo leeg aan de rechterkant.

Cascading Stylesheet:

/* Verbergen 'Jobs' in Tweakers.net menu met tracker rechts of uitgeschakeld */
.notracker #siteNav.buttons7 #siteMenu li:nth-last-child(2),
.trackerright #siteNav.buttons7 #siteMenu li:nth-last-child(2) { display: none; }
.notracker #siteNav.buttons7, .trackerright #siteNav.buttons7 { width: 707px; }
.notracker #siteMenu li, .trackerright #siteMenu li { width: 111px; }
.notracker #siteMenu li.last, .trackerright #siteMenu li.last { width: 112px; }
/* Achtergrondafbeelding correctie */
.notracker #siteMenu li, .trackerright #siteMenu li { background-image: url("http://tweakimg.net/g/if/v2/header/menu_buttons.png"); }

[F.West98]

hijdoetetniet
in ie9 hier.

[Wiethoofd]

F.West98 schreef op dinsdag 30 november 2010 @ 18:13:
hijdoetetniet
in ie9 hier.

Je moest wel de tracker naar rechts zetten of uitschakelen

Maar hij zou ook nu moeten werken zonder het uitschakelen of naar rechts verplaatst hebben van de tracker. Helaas heb je nu wel een groter rood vlak aan de rechterkant, maar het is beter dan niets

Cascading Stylesheet:

/* Verbergen 'Jobs' in Tweakers.net menu ongeacht trackerstatus */
#siteNav.buttons7 #siteMenu li:nth-last-child(2) { display: none; }
#siteNav.buttons7 { width: 707px; }
#siteMenu li { width: 111px; }
#siteMenu li.last { width: 112px; }
/* Achtergrondafbeelding correctie met tracker rechts of uitgeschakeld  */
.notracker #siteMenu li, .trackerright #siteMenu li { background-image: url("http://tweakimg.net/g/if/v2/header/menu_buttons.png"); }

N.B.: Gebruik je de header.php om een random headerkleur te krijgen dan laat je de achtergrondafbeelding correctie stylesheetregel weg. Er komt nog een fix voor de de tracker rechts of uitgeschakeld waar dan even een suffix voor toegevoegd moet worden.

[RuddyMysterious]

Ik amuseer me soms met het aanpassen van de looks van websites om ze meer te laten passen bij mijn eigen voorkeuren en noden. Persoonlijk ben ik zo iemand die zo min mogelijk padding en margin wilt, omdat ik zoveel mogelijk informatie tegelijk op mijn scherm wil hebben. Ik gebruik bijvoorbeeld in alle IDE's lucida console op 8pt omdat dat het lettertype is waarmee ik zoveel mogelijk lijnen code tegelijk kan bekijken.

Genoeg introductie, hier de code die ik gebruik. Even een waarschuwing: alle code komt rechtstreeks uit de html-debugger van mijn browser, dus die bevat zeer veel redundante en anders ook nog overbodige informatie, maar hij is er op die manier wel op voorzien om zo precies mogelijk te zijn, natuurlijk.

linkje naar het css bestand

Voorbeeldpics:

1) Frontpage



2) Nieuwsitem



3) Reacties op nieuwsitem



4) GoT overzichtpagina



5) GoT overzicht van een forum sectie



6) GoT AMD Topic



7) GoT Zoekresultaten



Er zitten ook enkele tweaks in het css bestand, zoals spoilers waarboven je kan hoveren ipv dat je de tekst moet selecteren, topic-starter zijn posts hebben eigen kleur ipv grijs, etc etc. De tracker had ik al een hele tijd uitgeschakeld dmv css, zoals velen waarschijnlijk.

Graag jullie commentaar! (buiten dat de css onnodig veel code is, dat weet ik zelf ook wel =) )

Nog even een overzichtje van de grootste veranderingen: op veel plaatsen margin, padding en line-height verkleind of zelfs tot nul herleid, zodat er minder witruimte tussen alles zit.

edit: aangepast zodat de images en links wél werken

[ Voor 26% gewijzigd door RuddyMysterious op 06-12-2010 00:00 ]

[jmxd]

even je afbeeldingen uploaden in je fotoalbum niet je private storage

[CodeCaster]

offtopic:
[insert all-aboard-the-failboat-plaatje]
Je screenshots werken niet zo, je moet de publieke link gebruiken van je fotoalbum. Private storage kun je niet publiceren.

[RuddyMysterious]

Oh damn.

Nuja, ik ging net slapen (vrouw roept al een tijd), ik ga het dus morgen in orde brengen. Geniet alvast van de css, als je het niet laten kan! Morgen fix ik dus de images.

[ Voor 8% gewijzigd door RuddyMysterious op 05-12-2010 23:34 ]

[Wiethoofd]

DevilsProphet schreef op zondag 05 december 2010 @ 23:33:
Geniet alvast van de css, als je het niet laten kan! Morgen fix ik dus de images.

Die staat dus in private storage, met de nadruk op _private_ en is dus niet door ons te bekijken

[RuddyMysterious]

Zo, in orde. Ik kon niet slapen voordat het in orde was. Slaapwel! =)

[Wiethoofd]

DevilsProphet schreef op maandag 06 december 2010 @ 00:01:
Zo, in orde. Ik kon niet slapen voordat het in orde was. Slaapwel! =)

Nu nog thumbs ipv full size pics

[traaymakers]

DevilsProphet schreef op zondag 05 december 2010 @ 23:31:
Ik amuseer me soms met het aanpassen van de looks van websites om ze meer te laten passen bij mijn eigen voorkeuren en noden. Persoonlijk ben ik zo iemand die zo min mogelijk padding en margin wilt, omdat ik zoveel mogelijk informatie tegelijk op mijn scherm wil hebben. Ik gebruik bijvoorbeeld in alle IDE's lucida console op 8pt omdat dat het lettertype is waarmee ik zoveel mogelijk lijnen code tegelijk kan bekijken.

Genoeg introductie, hier de code die ik gebruik. Even een waarschuwing: alle code komt rechtstreeks uit de html-debugger van mijn browser, dus die bevat zeer veel redundante en anders ook nog overbodige informatie, maar hij is er op die manier wel op voorzien om zo precies mogelijk te zijn, natuurlijk.

linkje naar het css bestand

etc.

wel een rlxe indeling moet ik zeggen. Daar ga ik in de toekomst misschien ook wel gebruik van maken. Mijn Karma voor dit halfjaar staat echter pas op 300 dus ik moet nog even sparen .

[RuddyMysterious]

Als het van belang zou zijn: mijn css code komt rechtstreeks uit een css bestand dat ik gebruik als lokaal css bestand in de browser (user css, in opera) en zou dus direct moeten werken. Zo moet je niet wachten op je karma.

[traaymakers]

Cool, thnx.

zal eens kijken hoe ik dit in firefox aan de praat krijg

[GieltjE]

TheCoolGamer schreef op donderdag 23 september 2010 @ 21:28:

---

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

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

Ik heb een beetje gespeeld met het plaatje en de css om de overloop wat minder hard te maken (iets minder het blokkerige effect). Vind ik zelf persoonlijk wat mooier, hulde aan het idee

Cascading Stylesheet:

/* Geef topic starter andere header (iets donkerdergrijs) */
div.topicstarter .messageheader { 
    background:yellow url("http://www.hazelhof.nl/t.net/header/table_headers.png") repeat-x scroll 0 0px !important;
}

[Wiethoofd]

traaymakers schreef op maandag 06 december 2010 @ 08:38:
zal eens kijken hoe ik dit in firefox aan de praat krijg

Stylish-plugin

[traaymakers]

had het idd al gevonden, maar bedankt.

Wel fijne vormgeving, ga er nog wel wat aan tweaken maar op mijn laptop is het ideaal dat ik nu in een oogopslag 2x zoveel info heb Bedankt!

[RuddyMysterious]

Je mag altijd laten weten (en laten zien) wat je allemaal hebt veranderd, natuurlijk. Wie weet groeit dit uit tot de officiële slim-skin van t.net.

[RuddyMysterious]

Ondertussen een iets verbeterde versie uit van mijn stylesheet, met ondersteuning voor meer pagina's dan bij de vorige versie: v0.1.1.

[F.West98]

Update van de icoon achter link

Er komen nu ook iconen achter interne links, DM's, IRC's, Gallery's, Mailadressen, Tweakblogs, niet achter pics en anchors. (Alleen in berichten)
De volgende iconen zijn toegevoegd:

Afbeelding voor interne links

Afbeelding voor Links naar Tweakblogs en IRC's binnen irc.tweakers.net

Afbeelding voor DM-links en Mail-adressen

Afbeelding voor Gallery's

Cascading Stylesheet:

@import url('http://wiethoofd.info/css/linktweaks.css');

Voorbeeld:
[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'
Wiethoofds meuk en 'overige'
DM F.West98
F.West98
Resultaat:


edit:
Sommige mensen willen in de edit-mededelingen en signatures geen iconen, die moeten dit even in de CSS onderaan plaatsen:

Cascading Stylesheet:

/* Edit- en signature-iconen weg */
div.messagecontent p.edit [href], .signature [href] {
padding-right: 0;
background: none;
}

[ Voor 32% gewijzigd door F.West98 op 14-12-2010 20:50 ]

[HyperBart]

Was er nu iemand die een CSS had die ervoor zorgt dat de topics cursief zijn als je de laatste bent geweest die gereplied heeft?

[wontcachme]

HyperBart schreef op dinsdag 14 december 2010 @ 21:12:
Was er nu iemand die een CSS had die ervoor zorgt dat de topics cursief zijn als je de laatste bent geweest die gereplied heeft?

Er staat er hier wel een waarmee de kleur veranderd van het topic in myreact. Cursief volgens mij niet

[CoolGamer]

Staat in de TS: TheCoolGamer in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."
Zowel kleur veranderen als cursief.

[Wiethoofd]

F.West98 schreef op dinsdag 14 december 2010 @ 19:33:
edit:
Sommige mensen willen in de edit-mededelingen en signatures geen iconen, die moeten dit even in de CSS onderaan plaatsen:

Cascading Stylesheet:

/* Edit- en signature-iconen weg */
div.messagecontent p.edit [href], .signature [href] {
padding-right: 0;
background: none;
}

de hele [href] is onnodig

Cascading Stylesheet:

/* Uitschakelen afbeelding internet/externe links in signature en edit melding */
div.messagecontent p.edit a, div.messagcontent .clear p.signature a {
    padding-right: 0;
    background: none;
}

---

HyperBart schreef op dinsdag 14 december 2010 @ 21:12:
Was er nu iemand die een CSS had die ervoor zorgt dat de topics cursief zijn als je de laatste bent geweest die gereplied heeft?

Makkelijk voor jezelf te maken: http://wiethoofd.info/customcss/highlight_laatste.php

Cascading Stylesheet:

/* Topics waarin 'Wiethoofd' als laatste gereageerd heeft schuingedrukt */
table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
    font-style: italic;
}

[ Voor 3% gewijzigd door Wiethoofd op 14-12-2010 21:57 ]

[Verwijderd]

Wiethoofd schreef op dinsdag 14 december 2010 @ 21:57:
[...]

Makkelijk voor jezelf te maken: http://wiethoofd.info/customcss/highlight_laatste.php

Cascading Stylesheet:

/* Topics waarin 'Wiethoofd' als laatste gereageerd heeft schuingedrukt */
table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
    font-style: italic;
}

dat is..wreed, maar als ik wil dat de achtergrond van de destbetreffende tabel een kleur krijgt, kan dat dan?

[HyperBart]

Wiethoofd schreef op dinsdag 14 december 2010 @ 21:57:
Makkelijk voor jezelf te maken: http://wiethoofd.info/customcss/highlight_laatste.php

Cascading Stylesheet:

/* Topics waarin 'Wiethoofd' als laatste gereageerd heeft schuingedrukt */
table.listing tbody tr td.topic a[title~="Wiethoofd"],
table.listing tbody tr td.topic a[title~="Wiethoofd"] + small a {
    font-style: italic;
}

Held!
De laatste: hoe hide je iemand zijn blog weer? zodat het volledige blokje uit de tracker wordt verwijderd (en niet alleen de tekst)

[Wiethoofd]

Verwijderd schreef op dinsdag 14 december 2010 @ 23:48:
dat is..wreed, maar als ik wil dat de achtergrond van de destbetreffende tabel een kleur krijgt, kan dat dan?

nop, is niet mogelijk. Het feit dat je als laatste gereageerd hebt op een topic staat in het title element in een link in een van de cellen, de hele rij highlighten is dan onmogelijk tenzij er op een hoger niveau een classe wordt toegevoegd dat de daarop volgende cellen aan moeten kunnen geven dat in die rij een topic staat waarin jij als laatste gereageerd hebt.

---

HyperBart schreef op woensdag 15 december 2010 @ 00:01:
Held!
De laatste: hoe hide je iemand zijn blog weer? zodat het volledige blokje uit de tracker wordt verwijderd (en niet alleen de tekst)

volledige blokje/regel hiden is geen nette oplossing voor. Het lijstelement waarin de link staat heeft net als bij bovenstaande topiclink geen classe waarin staat van wie de blog is (welke vervolgens met css te verbergen zou zijn) dit staat in het link element een niveau lager en met CSS zijn hogere niveaus waarin die specifieke lager gelegen niveaus zich bevinden niet van opmaak te voorzien.

[F.West98]

Wiethoofd schreef op dinsdag 14 december 2010 @ 21:57:
[...]

de hele [href] is onnodig

Cascading Stylesheet:

/* Uitschakelen afbeelding internet/externe links in signature en edit melding */
div.messagecontent p.edit a, div.messagcontent .clear p.signature a {
    padding-right: 0;
    background: none;
}

ja, kan ook

[Wiethoofd]

F.West98 schreef op woensdag 15 december 2010 @ 17:05:
ja, kan ook

Het is zelfs netter

[F.West98]

Nieuw project:

Posts breder

Ideaal voor mobiele browsers, de post is op de 100% breedte van de header, dus geen usericons, ed. meer.
Dit is de uitwerking:

Je kan in je voorkeuren (Forum > myreact > voorkeuren) de usericons ed uitschakelen, dan hoef je het volgende niet te gebruiken:

Cascading Stylesheet:

/* Subtitle, usericon en andere iconen weg */
div.message div.post div.userdetails {
display: none;
}

Dan gebruik je alleen dit:

Cascading Stylesheet:

/* Posts en (signatures) op de volle breedte */
div.message div.post div.messagecontent,
div.message div.clear p.signature {
    margin-left: 0;
    width: 100%;
}

/* Tekst in posts iets van de linker kant afzetten */
div.message div.post div.messagecontent {
    padding-left: 2px;
}

/* Post naar links verplaatsen */
div.message div.post {
    padding-left: 10px;
}

Voor mensen die geen zin hebben om usericon, subtitle al die dingen uit te zetten, doen dit allebei. (Voor trage browsers kan het laden langer duren)
Willen mensen dan de edit-mededeling weg, dan kan dit er nog bij:

Cascading Stylesheet:

/* Edits weg */
div.messagecontent p.edit {
display: none;
}

En geen signature:

Cascading Stylesheet:

/* Signature weg */
.signature {
display: none;
}

Dit is nog versie 1, bij multi-user topics zijn de mede-auteurs NIET vermeld. Dat is volgens Wiethoofd onmogelijk .

[F.West98]

Volgende CSS alweer:

Posts naar links verplaatsen

Dit is eigenlijk versie 2 van hierboven. Maar is de post niet op 100% breedte, maar op 82% en 4 pixels
De usericon-ruimte links is ingekort, zodat de post meer naar links kan. Ook is het wat duidelijker door een lijntje links naast de post te plaatsen. Die moet nog de hele post worden, maar das even klooien...
Maar hier de uitwerking:

Met de volgend code activeer je het:

Cascading Stylesheet:

div.message div.post div.userdetails div.userdata div {
min-width: 0;
max-width: 120px;
white-space: normal;
}
div.message div.post div.userdetails {
width: 120px;
}
div.message div.post div.messagecontent {
margin-left: 125px;
border-left-style: solid;
border-left-color: #dcdcda;
border-left-width: 1px;
padding-left: 6px;
width: 83%
}
div.message div.clear p.signature {
margin-left: 125px;
border-left-style: solid;
border-left-color: #dcdcda;
border-left-width: 1px;
padding-left: 5px;
}
div.message div.post div.userdetails div.userdata div.extra {
width: 120px;
max-width: 120px;
}

Bij de update zal ik het vermelden en het gewijzigde gedeelte vermelden

[RuddyMysterious]

Aha, een beetje zoals wat ik gedaan heb, al heb ik geen border-right gegeven aan die linkerkolom met avatar en al die knopjes.

[F.West98]

DevilsProphet schreef op donderdag 16 december 2010 @ 18:32:
Aha, een beetje zoals wat ik gedaan heb, al heb ik geen border-right gegeven aan die linkerkolom met avatar en al die knopjes.

op hoeveel px van links zit jouw tekst?
Moet min.120 px zijn aangezien er 6 icoontje kunnen staan (myreact, msn, ICQ, enz.die onder het usericoon) is dat 6x16 + 6x4, er zit 4px padding tussen

[RuddyMysterious]

Ik weet het niet juist. Wat je trouwens kan doen is die icoontjes kleiner maken, schalen naar een procent of 75 à 80 kan direct al heel wat schelen in plaatsverbruik.

[wontcachme]

Ik wilde net het bookmark logo aanpassen. Dacht slim te zijn en de "topic report" code te gebruiken. Nu heb ik dit:

code:

/** Aangepast bookmark knopje */
#title fieldset a[href*="insert_bookmark"] {
    background: url("http://tweakers.net/ext/f/LI7mV7lTO7TYVjHcRF8yoH1x/full.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 16px;
    vertical-align: bottom;
    width:16px;
}
#title fieldset img[alt*="Bookmark"] {
    display:none;
}

Dit werk, echter staat dit icoon ook onder de bookmark todo icoon. Iemand een idee hoe dat aan te passen? Eigenlijk wil ik de bookmark todo helemaal weg (gebruik het nooit). Hoe kan je dat doen?

[Wiethoofd]

De topic-report code is eigenlijk ook al achterhaald, je moet namelijk de individuele afbeelding en niet de omliggende url 'verbergen' en vervangen.

Cascading Stylesheet:

/* Verbergen 'todo' bookmarkknopje */
#title fieldset a img[src$="bookmark-todo.gif"] { display: none; }

/* Vervangen bookmark toevoegenknopje */
#title fieldset a img[src$="bookmark.gif"] {
    width: 0;
    height: 0;
    padding: 8px;
    background: url(http://tweakers.net/ext/f/LI7mV7lTO7TYVjHcRF8yoH1x/full.png) no-repeat;
}

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 14:46:
De topic-report code is eigenlijk ook al achterhaald, je moet namelijk de individuele afbeelding en niet de omliggende url 'verbergen' en vervangen.

Cascading Stylesheet:

/* Verbergen 'todo' bookmarkknopje */
#title fieldset a img[src$="bookmark-todo.gif"] { display: none; }

/* Vervangen bookmark toevoegenknopje */
#title fieldset a img[src$="bookmark.gif"] {
    width: 0;
    height: 0;
    padding: 8px;
    background: url(http://tweakers.net/ext/f/LI7mV7lTO7TYVjHcRF8yoH1x/full.png) no-repeat;
}

Bedankt. Weet je toevallig ook hoe je dan bijvoorbeeld de bookmark_message.gif icoon kan vervangen? Net geprobeerd met jouw code, maar die pakte hij niet

[Wiethoofd]

Je moet wel de juiste divs etc. te grazen nemen:

Cascading Stylesheet:

div.messageheader div.date a img[src$="bookmark_message.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(/*hier je linkje naar een 10x10px vervangafbeelding*/) no-repeat;
}

Door de padding op 5px te zetten krijg je ruimte voor een 10x10px afbeelding, 6px dus 12x12 en 'padding: 5px 6px' een 12 brede en 10px hoge afbeelding.

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 16:09:
Je moet wel de juiste divs etc. te grazen nemen:

Cascading Stylesheet:

div.messageheader div.date a img[src$="bookmark_message.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(/*hier je linkje naar een 10x10px vervangafbeelding*/) no-repeat;
}

Door de padding op 5px te zetten krijg je ruimte voor een 10x10px afbeelding, 6px dus 12x12 en 'padding: 5px 6px' een 12 brede en 10px hoge afbeelding.

You are my hero

[Wiethoofd]

wontcachme schreef op donderdag 23 december 2010 @ 16:22:
You are my hero

Dan nu screenshots

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 16:23:
[...]

Dan nu screenshots

Die zullen komen. Ben nu ff aan het kijken of ik de online/offline plaatjes naast de post bookmark kan aanpassen. Leek me hetzelfde als de post bookmark manier. Werkt alleen nog niet

[F.West98]

mmm
ik zal zo mijn css-styles even plaatsen
lange post...

[Wiethoofd]

wontcachme schreef op donderdag 23 december 2010 @ 16:50:
Die zullen komen. Ben nu ff aan het kijken of ik de online/offline plaatjes naast de post bookmark kan aanpassen. Leek me hetzelfde als de post bookmark manier. Werkt alleen nog niet

Je moet dan de 'a' even uit die regel halen, die online/offline afbeelding staat namelijk niet in een <a> (non-clickable) en dan zou ie wel moeten werken

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 17:05:
[...]

Je moet dan de 'a' even uit die regel halen, die online/offline afbeelding staat namelijk niet in een <a> (non-clickable) en dan zou ie wel moeten werken

And now i love you

Hoe het er nu uitziet bij mij:


Nu nog kijken of ik de afbeeldingen die ik gebruik transparant kan maken. Heb nu de achtergrond kleur er "vast" ingezet door ze eerst in paint te bewerken. Maar dat werkt al niet meer bij mijn eigen posts omdat die groen gekleurd zijn.

[Wiethoofd]

wontcachme schreef op donderdag 23 december 2010 @ 17:40:
And now i love you
Hoe het er nu uitziet bij mij: [afbeelding]

Maar wat voor afbeelding heb je dan als de TS online is? die hebben standaard het 'pijltje' d'r bij in oranje om aan te geven dat ze de topicstarter zijn.

Nu nog kijken of ik de afbeeldingen die ik gebruik transparant kan maken. Heb nu de achtergrond kleur er "vast" ingezet door ze eerst in paint te bewerken.

Portable Photoshop

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 17:44:
[...]

Maar wat voor afbeelding heb je dan als de TS online is? die hebben standaard het 'pijltje' d'r bij in oranje om aan te geven dat ze de topicstarter zijn.

[...]

Portable Photoshop

Gewoon hetzelfde plaatje. Gedaan met de nette oplossing (code kopieren en _ts erin plaatsen )

[F.West98]

Jobs weg - aangepast voor tracker links

Je kon Jobs weghebben en de tracker weg/rechts, maar de tracker links kon niet, code niet geschikt, maar vooral: Er komt een gat. Nu heb ik de code aangpast voor alle trackers; links, rechts en uit. De tekst Jobs verdwijnt uit de optie, de link bestaat niet meer, bij hoveren komt er geen 'inhoud', enz, enz. Foto's zeggen meer dan 1000 woorden; bij deze:

Met de code:

Cascading Stylesheet:

/* Jobs onderdeel uit header */
div#header div#mainNav div.buttons7 ul#siteMenu li:nth-child(7) [href*='tweakers.net'] {
display: none;
visibility: hidden;
}

/* My Tnet naar rechts */
div#header div#mainNav div.buttons7 ul#siteMenu li:nth-child(8) {
border-left-width: 10px;
}
/* Links onder Jobs weg */
div#header div#groupNav div#groupNav6 {
visibility: hidden;
}
div#mainNav div#siteNav div#siteMenu li:nth-child(7):hover {
display: none;
visibility: hidden;
}

Mededelingen weg en titels forum omhoog

Bij actieve topics de mededeling: 'Actieve topics zonder filter bekijken' weghalen (indien ingesteld) en de titels omhoog, dit scheelt al 100px hoogte, handig voor netbooks, smartphone's, tablets, enz, enz (tenzij je naar m.tweakers.net gaat )
Afbeelding:

En natuurlijk de code:

Cascading Stylesheet:

/* Geen mededeling: Bekijk zonder forumfilter indien ingesteld */
div.content div#content div.info {
display: none;
}
/* Alle content naar boven verplaatsen */
div.content {
padding-top: 0px;
}
div.content div#forumheading {
padding-top: 0px;
}

De 3e: Aanpassing op Twylight

Twylight maakte ts-posts groen, eigen posts weer anders en grotere headers, ik heb daar een (naar mijn voorkeur) aanpassing op gemaakt. De header van ts is oranje, abonnees zijn naam-t.net-rood en eigen headers evt. de standaard kleur. Ook zijn er andere aanpassingen, maar kijken zegt meer dan lezen

Cascading Stylesheet:

/* Hogere messageheader met custom background */
div.message div.messageheader {
background-image: url('http://tweakers.net/ext/f/2VzMqzv9CPG4j6sGgN78JZIW/full.png');
 }

/* Username highlights */
/* Hightlight gebruikersnaam bij normale users */
div.messageheader div.poster a:hover {
 color: #666;
 text-decoration: none !important;
 }

/* Hightlight gebruikersnaam bij crew */
div.messageheader div.poster a[class*="crew"]:hover {
 color: #d9004c;
 }

/* Posts iets verder van elkaar af */
div.message {
 margin-bottom: 4px !important;
 }
/** Kleurtjes voor speciale users */ 
a.abonnee { color: #c0002d !important; } 
div.topicstarter div.messageheader { background: #DB5B0E; } 

Dit kan je qua kleuren ed zelf nog aanpassen, daarvoor moet je zelf maar prutsen
Nu eerst eens een hele lading op tweakblogs zetten en daarna nog in de TS, dus ik ben voorlopig niet aan nieuwe CSS.

edit:

[quote]wontcachme schreef op donderdag 23 december 2010 @ 17:40:
[...]

And now i love you

Hoe het er nu uitziet bij mij:
[afbeelding]

Nu nog kijken of ik de afbeeldingen die ik gebruik transparant kan maken. Heb nu de achtergrond kleur er "vast" ingezet door ze eerst in paint te bewerken. Maar dat werkt al niet meer bij mijn eigen posts omdat die groen gekleurd zijn.
[/quote]
Goed bezig!! Ik kan jouw pics wel even transparant maken, DM even: http://gathering.tweakers...end_privatemessage/306933

[ Voor 9% gewijzigd door F.West98 op 23-12-2010 18:13 ]

[wontcachme]

Ik ben voor nu even klaar denk ik. Nu ook de TS een speciaal online/offline icoon

Cascading Stylesheet:

/* Vervangen Topic Report plaatje */
#title fieldset a img[src$="icon_hand.gif"] {
    width: 0;
    height: 0;
    padding: 8px;
    background: url(http://tweakimg.net/g/if/icons/exclamation.png) no-repeat;
}

/* Verbergen 'todo' bookmarkknopje */
#title fieldset a img[src$="bookmark-todo.gif"] { display: none; }

/* Vervangen bookmark toevoegenknopje */
#title fieldset a img[src$="bookmark.gif"] {
    width: 0;
    height: 0;
    padding: 8px;
    background: url(http://tweakers.net/ext/f/LI7mV7lTO7TYVjHcRF8yoH1x/full.png) no-repeat;
}

/* Vervangen bookmark post knopje */
div.messageheader div.date a img[src$="bookmark_message.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(http://tweakers.net/ext/f/qGPTColpsYF6CjVZCXw3XnBr/full.png) no-repeat;
}
div.messageheader div.date a img[src$="bookmark_message_new.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(http://tweakers.net/ext/f/qGPTColpsYF6CjVZCXw3XnBr/full.png) no-repeat;
}

/* Vervangen online icoon */
div.messageheader div.date img[src$="online.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(http://tweakers.net/ext/f/hkcX97KMrBZtIx9CwJERWOLU/full.png) no-repeat;
}
div.messageheader div.date img[src$="online_ts.gif"] {
    width: 0;
    height: 0;
    padding: 5px 6px;
    background: url(http://tweakers.net/ext/f/ELib61gQpI5nFkvXygWB3ae0/full.png) no-repeat;
}

/* Vervangen offline icoon */
div.messageheader div.date img[src$="offline.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(http://tweakers.net/ext/f/VD8l38fkreisSyqhVLT2m7ri/full.png) no-repeat;
}
div.messageheader div.date img[src$="offline_ts.gif"] {
    width: 0;
    height: 0;
    padding: 5px 6px;
    background: url(http://tweakers.net/ext/f/e6mMUe4DKbVUxpJ0Q7s7btaE/full.png) no-repeat;
}

[Wiethoofd]

wontcachme schreef op donderdag 23 december 2010 @ 18:53:
Ik ben voor nu even klaar denk ik. Nu ook de TS een speciaal online/offline icoon

Netjes, maar je CSS kan een stuk efficiënter Zo zijn de statusiconen netjes in 1 sprite te vangen en had daar zelfs de bookmark nog wel bij gekund om nog een request te voorkomen.

Cascading Stylesheet:

/* Bookmarks en Topicreport voor titel */
#title fieldset a img[src$="icon_hand.gif"], #title fieldset a img[src$="bookmark.gif"] {
    width: 0; height: 0; padding: 8px;
}
/* Bookmarks voor titel aanpassen en verbergen */
#title fieldset a img[src$="bookmark.gif"] {
    background: url(http://tweakers.net/ext/f/LI7mV7lTO7TYVjHcRF8yoH1x/full.png) no-repeat;
}
#title fieldset a img[src$="bookmark-todo.gif"] { display: none; }

/* Topicreport */
#title fieldset a img[src$="icon_hand.gif"] {
    background: url(http://tweakimg.net/g/if/icons/exclamation.png) no-repeat;
}

/* Bookmark en statusiconen in berichtkop */
div.messageheader div.date a img[src*="bookmark_message"],
div.messageheader div.date img[src*="online"], div.messageheader div.date img[src*="offline"] {
    width: 0; height: 0; padding: 5px;
}

/* Bookmark */
div.messageheader div.date a img[src*="bookmark_message"] {
    background: url(http://tweakers.net/ext/f/qGPTColpsYF6CjVZCXw3XnBr/full.png) no-repeat;
}

/* Statusiconen */
div.messageheader div.date img[src*="online"], div.messageheader div.date img[src*="offline"] {
    background: url(http://tweakers.net/ext/f/wkCAeOHAKPrFcDEL4ss7EE8k/full.png) 0 0 no-repeat;
}
div.messageheader div.date img[src$="_ts.gif"] { padding: 5px 6px; }
div.messageheader div.date img[src$="online_ts.gif"] { background-position: 0 -30px; }
div.messageheader div.date img[src$="offline.gif"] { background-position: 0 -15px; }
div.messageheader div.date img[src$="offline_ts.gif"] { background-position: 0 -45px; }

[wontcachme]

Wiethoofd schreef op donderdag 23 december 2010 @ 19:36:
[...]

Netjes, maar je CSS kan een stuk efficiënter Zo zijn de statusiconen netjes in 1 sprite te vangen en had daar zelfs de bookmark nog wel bij gekund om nog een request te voorkomen.

Mijn CSS is net als mijn Russisch. Ik ken een paar woorden/onderdelen ervan, maar daar houd het ook mee op

[F.West98]

wontcachme schreef op donderdag 23 december 2010 @ 18:53:
Ik ben voor nu even klaar denk ik. Nu ook de TS een speciaal online/offline icoon

[afbeelding]

Cascading Stylesheet:

/* code */

ziet er goed uit!
evt een aanvulling, sommige dingen kunnen wat korter:

Cascading Stylesheet:

/* Vervangen bookmark post knopje */
div.messageheader div.date a img[src$="bookmark_message.gif"], div.messageheader div.date a img[src$="bookmark_message_new.gif"] {
    width: 0;
    height: 0;
    padding: 5px;
    background: url(http://tweakers.net/ext/f/qGPTColpsYF6CjVZCXw3XnBr/full.png) no-repeat;
}

Dingen die door hetzelfde vervangen moeten worden kunnen samen, met een komma gescheiden. Was maar 1 ding, maar scheelt toch alweer snel 6 opmaak-regels. Bij een grote kan dat erg onoverzichtelijk worden

edit:
wiethoofd, je was me net even voor

[ Voor 63% gewijzigd door F.West98 op 23-12-2010 19:50 ]

[Wiethoofd]

Zo, de header.php CSS ook naar de kerstversie aangepast, als je dus de rode header hebt vandaag, morgen en/of overmorgen dan geeft ie netjes de kerstheader. Nu nog even kijken of ik hem elke andere random kleur laat overrulen.

---

F.West98 schreef op donderdag 23 december 2010 @ 19:41:
Dingen die door hetzelfde vervangen moeten worden kunnen samen, met een komma gescheiden.

Hij kan dus nog korter als je de extensie weghaalt en voor een wat algemenere versie gaat met een wildcard ipv de regex dat hij de match aan het einde moet vinden.

[ Voor 46% gewijzigd door Wiethoofd op 24-12-2010 18:00 ]

[F.West98]

En weer 2x een CSS... houd je vast voor grote CSS

Vervangende Smileys

(bijna) alle smileys zijn vervangen door andere!
Hier even een overzicht:

Met de korte code:

Cascading Stylesheet:

@import url('http://wiethoofd.info/css/smileys.css');

Oud en Nieuw header

En hier de header:
Voorbeeld:

Cascading Stylesheet:

@import url('http://wiethoofd.info/css/header.php?color=sneeuw');

[ Voor 86% gewijzigd door F.West98 op 29-12-2010 21:24 ]

[BounceMeister]

Heeft er al iemand een stylesheet gemaakt waarbij de achtergrond zwart is en de tekst wit?
Ik hoop daarmee stroom te besparen op m'n android telefoon. Ik had begrepen dat een amoled scherm meer stroom verbruikt voor wit dan voor zwart.


Edit Donderdag 10:15:
Voor mij is CSS helemaal nieuw. Ik heb een klein stukje kunnen veranderen, maar niet helemaal het gewenste resultaat. Op de FP zijn de topics helemaal zwart. Het forum is onveranderd.
Is er een manier om alle achtergrond zwart te maken en alle tekst wit?
Ik heb nu dit geprobeerd:

code:

div.content {
color: white;
background-color:black;
}

[ Voor 44% gewijzigd door BounceMeister op 20-01-2011 10:18 ]

[alex3305]

Wiethoofd schreef op vrijdag 24 december 2010 @ 17:55:
Zo, de header.php CSS ook naar de kerstversie aangepast, als je dus de rode header hebt vandaag, morgen en/of overmorgen dan geeft ie netjes de kerstheader. Nu nog even kijken of ik hem elke andere random kleur laat overrulen.

---

[...]

Hij kan dus nog korter als je de extensie weghaalt en voor een wat algemenere versie gaat met een wildcard ipv de regex dat hij de match aan het einde moet vinden.

Als je de kerstheader nog wilt wijzigen... Mits je Photoshop gebruikt, doe dan een Bevel & Emboss met een hoge smooth op de sneeuw-layer zodat je een soort van 3D-effect krijgt voor de sneeuw.

[Wiethoofd]

Mochten er mensen de witte Tweakers.net tracker gebruiken, deze is nu weer helemaal up to date. Tweakers.net had de nodige wijzigingen doorgevoerd met het spriten van de instellingenknopjes en de eigenschappen knopjes, maar mijn CSS is ook weer up to date. Een Ctrl+F5 zou al moeten werken mocht de opmaak van je witte tracker niet meer kloppen.

[RuddyMysterious]

Nieuwe versie van mijn space-save stylesheet, met hier en daar lichte verbeteringen, en met nog meer plaatsbesparingen op GoT: versie 0.2.0

De code heb ik alvast in mijn eigen custom stylesheet geplakt, en werkt in een andere browser (chrome) vrij perfect.

Waarschuwing: het bestand is niet elegant noch zo klein mogelijk opgesteld, het zijn puur identifier-strings die ik uit mijn browser-html-debugger knip en plak.

[ Voor 20% gewijzigd door RuddyMysterious op 29-03-2011 15:59 ]

[jmxd]

DevilsProphet schreef op dinsdag 29 maart 2011 @ 15:56:
Nieuwe versie van mijn space-save stylesheet, met hier en daar lichte verbeteringen, en met nog meer plaatsbesparingen op GoT: versie 0.2.0

De code heb ik alvast in mijn eigen custom stylesheet geplakt, en werkt in een andere browser (chrome) vrij perfect.

Waarschuwing: het bestand is niet elegant noch zo klein mogelijk opgesteld, het zijn puur identifier-strings die ik uit mijn browser-html-debugger knip en plak.

wat doet het?

[RuddyMysterious]

Wreed veel witruimte waar er hier op t.net zo kwistig mee wordt omgesprongen is kleiner gemaakt of geheel weggehaald. Ik ben persoonlijk een fan van ruimtebesparing.

[Wiethoofd]

Een @import van je stylesheet is niet helemaal prettig, dan staat namelijk de DevilsProphet highlight als laatste reageerder als standaard ingesteld

[RuddyMysterious]

Juist ja, zoiets moet veranderd worden.

[Yorinn]

Wiethoofd schreef op dinsdag 29 maart 2011 @ 19:03:
Een @import van je stylesheet is niet helemaal prettig, dan staat namelijk de DevilsProphet highlight als laatste reageerder als standaard ingesteld

Bedankt, die was ik kwijt, maar heb hem nu weer.

[Wiethoofd]

Tweakers.net heeft aan de header zitten sleutelen, de smalle layout (tracker rechts/uitgeschakeld of lage reso) heeft nu een eigen sprite, in de header.php is deze al gecountered.

---

Daarnaast ben ik nog steeds geen fan van de tweakers_ng layout, dus heb ik nu iig m'n topicoverzichten en m'n myreact wat meer naar de tweakers-layout gekregen:

Cascading Stylesheet:

/* Mapiconen naar de tweakers-layout */
@import url(http://wiethoofd.info/css/candycolors.php?templateset=tweakers);

/* Tabellen met topicoverzichten opmaken */
table.listing td, table.listing th {
 line-height: 17px;
 padding: 4px 5px 4px 1px;
}
#my-react table.listing td, #my-react table.listing th {
 font-size: 12px;
}
table.listing .ind {
 width: 25px;
 text-align: center;
 padding: 4px 0;
}
table.listing .frm {
 width: 35px;
 text-align: center;
}
table.listing .tagicon {
 padding: 0 2px 0 0;
}
table.listing .poster {
 width: 100px;
}
table.listing td.replies {
 padding: 2px 0;
}
table.listing .time {
 text-align: center;
}

Eventueel nog de active topics etc. van de om en om achtergrondkleur voorzien:

Cascading Stylesheet:

table.listing tr td, table.listing tr.alt2 td, table.find tr.example td {
    background: url("http://tweakimg.net/g/forum/templates/tweakers/images/layout/nightlife/bg1.gif") repeat-x scroll 0 0 #F5F5F4;
}
table.listing tr.alt1 td, table.listing tr.heading td, table.find tr td {
    background: url("http://tweakimg.net/g/forum/templates/tweakers/images/layout/nightlife/bg2.gif") repeat-x scroll 0 0 #EEEEED;
}

[ Voor 3% gewijzigd door Wiethoofd op 12-04-2011 21:09 ]

[jmxd]

Jij rekent zeker ook nog om naar Guldens Guido?

[Yorinn]

Jammer dat de headerkleurtjes niet meer werken. Vond de DSP-kleur altijd wel mooi.

[Sebazzz]

Yorin schreef op donderdag 14 april 2011 @ 08:12:
Jammer dat de headerkleurtjes niet meer werken. Vond de DSP-kleur altijd wel mooi.

Hoe bedoel je? Ik heb hier gewoon nog een mooie blauwe balk

[Yorinn]

Hier is die weer rood geworden

[Wiethoofd]

De custom css @import werkt inderdaad niet (meer) omdat tweakers.net een wijzigin heeft doorgevoerd aan de header/menu en de afbeeldingen.

Ik zal kijken of ik een quick fix heb totdat ik een nieuwe versie heb. Quick Fix online gezet, een Ctrl+F5 should do the trick.

[ Voor 13% gewijzigd door Wiethoofd op 14-04-2011 12:03 ]

[F.West98]

Ongemodereerde reacties oranje maken

Vanaf nu kunnen de headers van ongemodereerde reacties oranje worden, met de volgende code:

Cascading Stylesheet:

/* Ongemodereerde reacties weergeven */
.reactie .unmodded {
background-image: url("http://tweakers.net/ext/f/zbkYxis2aDeiRFBoYc2BQs2L/full.png") !important;
}

[Wiethoofd]

Dat kan al een tijdje hoor Ikzelf maak de tekst in de header van ongemodereerde reacties blauw:

Cascading Stylesheet:

#reacties .reactie .unmodded p, #reacties .reactie .unmodded p a,
#reacties .reactie .unmodded p a span.new { color: #0000FF; }
#reacties .reactie .unmodded p a:hover span.new { color: #ED053E; }

[F.West98]

Wiethoofd schreef op zaterdag 23 april 2011 @ 13:42:
Dat kan al een tijdje hoor Ikzelf maak de tekst in de header van ongemodereerde reacties blauw:

Cascading Stylesheet:

#reacties .reactie .unmodded p, #reacties .reactie .unmodded p a,
#reacties .reactie .unmodded p a span.new { color: #0000FF; }
#reacties .reactie .unmodded p a:hover span.new { color: #ED053E; }

kon m niet vinden, was zo in 5min klaar

[Wiethoofd]

m'n custom css voor mooiere knoppen etc. werkt ook in PM's
*doet zichzelf herinneren nog een blogpost over deze CSS te kloppen*

[jmxd]

Wiethoofd schreef op vrijdag 29 april 2011 @ 19:38:
m'n custom css voor mooiere knoppen etc. werkt ook in PM's
*doet zichzelf herinneren nog een blogpost over deze CSS te kloppen*

[Wiethoofd]

Twylight schreef op vrijdag 29 april 2011 @ 20:24:

Doe jij nog eens een extra kleur aan die sprite toevoegen, de buttons voor submitten/preview zijn te onopvallend in de (quick)reply forms, tintje donkerder of iets andere kleur...

[jmxd]

Wiethoofd schreef op vrijdag 29 april 2011 @ 20:26:
[...]

Doe jij nog eens een extra kleur aan die sprite toevoegen, de buttons voor submitten/preview zijn te onopvallend in de (quick)reply forms, tintje donkerder of iets andere kleur...

Doe zelf maar, is toch jouw css

[Wiethoofd]

Twylight schreef op vrijdag 29 april 2011 @ 20:27:
Doe zelf maar, is toch jouw css

Jij was de man van de sprites

[F.West98]

Verbeterde jobs-weg, nu ook voor tracker-left, en alle reso's!

De jobs-li wordt weggehaald, en de margin-left hoger met 50px om het te centreren, ook wordt de totale width van de knoppen met 111px smaller, zodat de achtergrond nog wel past bij de knoppen. Voor kleiner venster en tracker-right zijn het andere aanpassingen.
Er zit één css-selector in die alleen werkt bij IE9+, FF3.6+ (iig eentje uit css3)
Bugje: Bij tracker-right is er geen mooie rand rechts van de my tnet knop, die krijg ik niet goed. Dat zoek ik nog uit.

Cascading Stylesheet:

/* Jobs onderdeel uit header */
.buttons7#siteNav #siteMenu li:nth-child(7) {
display: none;
}
.buttons7#siteNav {
width: 717px;
}
#siteNav {
margin-left: 276px;
}
.res1024 #siteNav {
margin-left: 193px;
}
.trackerright .buttons7#siteNav {
width: 615px;
}
.trackerright #siteNav {
margin-left: 168px;
}

Bij niet-CSS3 browsers is het mismaakt (warning)

[jmxd]

@F.West98





Chrome 11

[F.West98]

heb ik ook in IE8, ondersteund wrschnlijk geen X:nth-child
ehm
doet-ie wel
ah!
spatie tussen buttons7 en de # weghalen

[jmxd]

nice!
Maar kan die niet helemaal naar rechts? Ik druk zo vaak perongelijk op die jobs knop

also ik heb geen rand naast Community

[ Voor 39% gewijzigd door jmxd op 30-04-2011 23:01 ]

[F.West98]

de margin-left in de css dan 61px hoger zetten

[Wiethoofd]

Waarom het wiel opnieuw uitvinden? Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."

[F.West98]

Wiethoofd schreef op zondag 01 mei 2011 @ 01:38:
Waarom het wiel opnieuw uitvinden? Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."

mijne heeft ook tracker-links en lage reso's (volgens jouw onmogelijk)
(en binnenkort ook IE8/7 support ) (weet ik bijna zeker, k heb een css3-htc voor ie gevonden, nu nog de behavior-tag laten werken, steeds acces-denied

Twylight schreef op zaterdag 30 april 2011 @ 22:58:
nice!
Maar kan die niet helemaal naar rechts? Ik druk zo vaak perongelijk op die jobs knop

also ik heb geen rand naast Community

[afbeelding]

Jobs bevatte die rand, sorry, bugje..

[ Voor 47% gewijzigd door F.West98 op 01-05-2011 02:52 ]

[F.West98]

Jobs verbergen Versie 3!

Nu ook IE7/IE8 support!

Nieuwe code:

Cascading Stylesheet:

/* Jobs onderdeel uit header */
.buttons7#siteNav #siteMenu li+li+li+li+li+li+li {
display: none;
}
/* My T.net behouden */
.buttons7#siteNav #siteMenu li+li+li+li+li+li+li+li {
display: block;
}
/* Breedte instellen voor tracker links */
.buttons7#siteNav {
width: 707px;
}
/* header naar rechts (max. 61px hoger voor rechts en max. 50px lager voor naar links) */
#siteNav {
margin-left: 276px;
}
/* header naar rechts voor lage reso (zelf maximalen uitzoeken) */
.res1024 #siteNav {
margin-left: 193px;
}
/* Breedte voor tracker right */
.trackerright .buttons7#siteNav {
width: 615px;
}
/* Header naar rechts voor tracker-right (maximalen waarschijnlijk zelfde als bij lage reso's) */
.trackerright #siteNav {
margin-left: 168px;
}

Met dank aan Wiethoofd voor de li+li... tip

De h1/h2 op T.net met ronde hoeken

Sorry, onmogelijk ivm blokkades op tnet
Mogelijk!!!

DMV een afbeelding lukt het...

Cascading Stylesheet:

/* H1 met ronde hoeken */
.post .messagecontent h4 {
background-image: url('http://tweakers.net/ext/f/WLKT6IArvMbFKnCduJA81MWI/full.gif') !important
}

[ Voor 17% gewijzigd door F.West98 op 04-05-2011 19:17 ]

[Wiethoofd]

Je vergeet trouwens de .res1152 en .res1100 in je CSS voor de smallere layouts die toch nog een tracker hebben.

h1 heeft toch standaard ronde hoeken....

[F.West98]

Wiethoofd schreef op woensdag 04 mei 2011 @ 11:46:
Je vergeet trouwens de .res1152 en .res1100 in je CSS voor de smallere layouts die toch nog een tracker hebben.

Sorry, kan jij die dan uitzoeken?

h1 heeft toch standaard ronde hoeken....

Niet in IE7/ie8, maar het lukt niet, ivm blokkades ed
Gelukt
[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[ Voor 20% gewijzigd door F.West98 op 04-05-2011 19:19 ]

[YoghurtO_o]

Beetje dit topic doorgespit, maar helaas niet tegengekomen. Heeft iemand mischien een Donkere/zwarte CSS voor Tnet en GoT? Soort van Perfect Dark google 1. Ik heb zelf uren geprobeerd een CSS te maken maar ik bak er eigenlijk helemaal niks van

[Wiethoofd]

Heb je screenshot/voorbeeld van wat je wilt? Er is altijd iets bij elkaar te kloppen

[ Voor 15% gewijzigd door Wiethoofd op 07-05-2011 07:59 ]

[F.West98]

Wiethoofd schreef op zaterdag 07 mei 2011 @ 07:56:
Heb je screenshot/voorbeeld van wat je wilt? Er is altijd iets bij elkaar te kloppen

zwarte header, (heb je die al?)
tracker al zwart genoeg, background maybe iets donkerder, elk mapje voor een topic zwart, enz, enz.
(heb ik nu geen zin in, ben al 28 uur op en ben nog duizelig van de turbulentie in het vliegtuig... (oef...))

[Wiethoofd]

Ik heb een zwarte header, maar de menu_buttons zou nog opnieuw moeten, net als eigenlijk alle kleuren

Een zwart mapje lijkt me dan weer niet logisch, die zijn prima, de achtergrondkleur moet naar zwart en tekst (gebroken) wit/grijs volgens mij.

[YoghurtO_o]

Wiethoofd schreef op zaterdag 07 mei 2011 @ 07:56:
Heb je screenshot/voorbeeld van wat je wilt? Er is altijd iets bij elkaar te kloppen

Ik heb 2 stijlen(niet door mij gemaakt) die redelijk rustig voor de ogen zijn 's nachts en er ook nog eens goed uitzien.


voor youtube vind ik deze zelf fijner om naar te kijken.

http://userstyles.org/sty...outube-dark-2010-redesign

en voor google dit
http://userstyles.org/sty...assic-perfect-dark-google


Want ik heb nu dat ik 's nachts aan het surfen ben en dan allemaal donkere sites bekijk en ik dan opeens bijna blind wordt als ik weer naar tweakers ga

[Verwijderd]

alt+shift+printscreen.

[YoghurtO_o]

Verwijderd schreef op zaterdag 07 mei 2011 @ 23:32:
alt+shift+printscreen.

Ik weet ook wel hoe printscrn werkt

maar daar staan de stijlen waar ik het over heb met screenshot en code erbij, lijkt me handiger dan beide te gaan knippen en plakken.

[Verwijderd]

Wat? Alt-shift-printscreen doet wat anders dan een screenshot maken. Met die shortcut schakel je high contrast mode in. Zo ziet GoT er dan uit:


Werkt alleen met windows 7, overigens.

[ Voor 8% gewijzigd door Verwijderd op 08-05-2011 00:23 ]

[YoghurtO_o]

Verwijderd schreef op zondag 08 mei 2011 @ 00:23:
Wat? Alt-shift-printscreen doet wat anders dan een screenshot maken. Met die shortcut schakel je high contrast mode in. Zo ziet GoT er dan uit:
[afbeelding]

Werkt alleen met windows 7, overigens.

Ik zie het, maar dat werkt dan alleen een beetje raar, gezien ik nu in het reageerveld gewoon weer de oude versie heb, vol in het wit.

[Verwijderd]

F5?

[Matis]

Wat maakt Win7 daar achterlijke geluidjes bij Het lijkt wel of je op een kuikentje gaat staan op het moment dat je die combo doet

[Ryan_]

Een kleine bijdrage van mij.
Deze CSS code laat een reactie oplichten die nog gemodereerd dient te worden.

Cascading Stylesheet:

#reacties .reactie .unmodded {
    background: #FFF6BF;
    border: 2px solid #FFD324;
}

Voorbeeld:

_(566x552)

[ Voor 15% gewijzigd door Ryan_ op 12-05-2011 18:59 . Reden: geoptimaliseerd met dank aan Wiethoofd ]

[Wiethoofd]

Waarom 4 regels CSS voor iets wat in 1 'border' regel kan? border: 2px solid #FFD324;