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

[naaitsab]

Orion84 schreef op woensdag 17 juli 2013 @ 08:54:
Let wel: dat laatste is niet cross-browser. In elk geval de browser engine van iOS (webkit toch?) ondersteunt het niet.

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

Chrome op Android heeft ook gedonder met de grijze tekst in de signature. Is 2 a 3 font-sizes groter dan de rest.

[CLB]

F.West98 schreef op dinsdag 16 juli 2013 @ 23:23:
Verder, @CLB:
Het is .messageheader die nu enkel de datum bevat.
Om de header een kleurtje te geven moet je met gradients werken:

Cascading Stylesheet:

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

Hopelijk heb je er iets aan

Ik ga er even mee rondkloten... Vind 't maar weer lastig, alles was naar wens, nu alles over hoop...
Bookmark ofzo hoef ik ook nooit te zien in de message-header en ook niet bovenin als tabje enzovoort.

Kun jij is een screenshotje posten van jouw message-headers, ben wel benieuwd, want bij mij is 't

Dit was ik gewend dus daar wil ik weer naartoe werken:


EDIT: Ik zie dat daar ook al 'bookmark' stond enzo, dat ga ik ook proberen weg te poetsen, never use it!

[ Voor 18% gewijzigd door CLB op 17-07-2013 11:16 ]

[NSG]

Shiit, wat is er met de message headers gebeurd

Had ik het voorheen duidelijk een apart kleurtje voor posts van de TS en van mijzelf, ziet het er nu niet meer uit met een inimini balkje.

code:

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


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

[Verwijderd]

Enes_81 schreef op woensdag 17 juli 2013 @ 14:18:
Shiit, wat is er met de message headers gebeurd

Had ik het voorheen duidelijk een apart kleurtje voor posts van de TS en van mijzelf, ziet het er nu niet meer uit met een inimini balkje....

Het zijn plaatjes geworden.

Ik heb zo opgelost:

Cascading Stylesheet:

div.message.topicstarter {
background: url("http://tweakers.net/ext/f/jQAVqYla5cvQ3OHebDHF6p4W/full.jpg") repeat-x;
} 

div.message.ownpost {
background-image: url("http://tweakers.net/ext/f/FgPYoXIfjCY3L34v7pte5Kyk/full.png") repeat-x;
}

[NSG]

Verwijderd schreef op woensdag 17 juli 2013 @ 14:24:
[...]


Het zijn plaatjes geworden.

Ik heb zo opgelost:

Cascading Stylesheet:

div.message.topicstarter {
background: url("http://tweakers.net/ext/f/jQAVqYla5cvQ3OHebDHF6p4W/full.jpg") repeat-x;
} 

div.message.ownpost {
background-image: url("http://tweakers.net/ext/f/FgPYoXIfjCY3L34v7pte5Kyk/full.png") repeat-x;
}

Na mijn post van zojuist viel het mij ineens op ja, ik ga maar weer eens wat kleurtjes proberen.

[NMe]

Ik heb er dit van gemaakt:

Cascading Stylesheet:

/* Topicstarter markeren */
.message.topicstarter {
    background-image:url(http://tweakers.net/ext/f/1iuvsVcsrr41X5anTf3zZ1Pp/full.png);
    background-repeat:repeat-x;
    padding-top:7px;
}
div.message.topicstarter .poster > .username {
    margin-bottom:12px;
}
div.message.topicstarter .post {
    margin-top: 39px;
}

/* Eigen posts een betere kleur geven */
.message.ownpost {
    background-image:url(http://tweakers.net/ext/f/SpGUu7ZBx6g2iYmGRyHwGWOw/full.png) !important;
}

Ik ga alleen waarschijnlijk nog even wat sleutelen aan die rooie kleur, ik vind hem net iets te opvallend.

[Orion84]

Zoals gezegd: kan ook zonder plaatjes, maar met gradients:

Cascading Stylesheet:

/* messageheader topicstarter posts rood */
.message.topicstarter {
    background-image: -webkit-linear-gradient(#FFCCCC, #FFCCCC 35px, #DDDEDE 35px, #DDDEDE 36px, #EDEEEE 36px);
background-image: linear-gradient(#FFCCCC, #FFCCCC 35px, #DDDEDE 35px, #DDDEDE 36px, #EDEEEE 36px);
    }

/* messageheader ownpost groen */
.message.ownpost {
background-image: -webkit-linear-gradient(#C8E6D2, #C8E6D2 35px, #DDDEDE 35px, #DDDEDE 36px, #EDEEEE 35px) !important; 
background-image: linear-gradient(#C8E6D2, #C8E6D2 35px, #DDDEDE 35px, #DDDEDE 36px, #EDEEEE 35px) !important; 
}

[naaitsab]

Ik probeer elke header een zelfde kleurtje te geven maar om de een of andere manier werkt het niet met .message.

.message.topicstarter en .message.ownpost heb ik wel al voor elkaar even als de meeste fonts

[F.West98]

Orion84 schreef op woensdag 17 juli 2013 @ 08:54:
Let wel: dat laatste is niet cross-browser. In elk geval de browser engine van iOS (webkit toch?) ondersteunt het niet.

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

En -moz- en -o- en -ms- uiteraard voor alle achtertlopers
Maar die liet ik even weg, veel typewerk

Kijk dit zijn mijn messageheaders, dus tja

@CLB:
Zoals 't was wordt het nooit meer helemaal. Let op de positionering van .poster .title (iets omhoog om in de header te zetten) en zet verder usericon (.poster .thumb) en ondertitel (.poster .usertitle) iets omlaag.
De username zit niet meer in messageheader, maar in posterdiv, waardoor de algemene opbouw handiger en logischer is, maar voo custom CSS minder.
Verder is de ownpost class nu bij message en niet meer bij messageheader.
De gekleurde header is een background-image op .message, die kan je vervangen door mijn code (met andere kleurtjes), zet er wel !important achter want anders slaat ie het over (wordt overschreven door tnet CSS)

@Enes_81, zelfde als hierboven. Messageheader is not anymore. Maar een gradient. (zie hieronder voor volledig werkend)

naaitsab schreef op woensdag 17 juli 2013 @ 17:19:
Ik probeer elke header een zelfde kleurtje te geven maar om de een of andere manier werkt het niet met .message.

.message.topicstarter en .message.ownpost heb ik wel al voor elkaar even als de meeste fonts

Try !important

Algemene CSS voor een header-markering in je post:
#AAA is de kleur van je header, #BBB ook, tenzij je gradient in de header wil, dan is het de tweede kleur
#CCC is de kleur van de border, en dus #EDEEEE als je geen border wil.

Cascading Stylesheet:

.message {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0px, #AAA), color-stop(42px, #BBB), color-stop(42px, #CCC), color-stop(43px, #CCC), color-stop(43px, #EDEEEE)) !important;
    background-image: -webkit-linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px) !important;
    background-image: -moz-linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px) !important;
    background-image: -ms-linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px) !important;
    background-image: -o-linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px) !important;
    background-image: linear-gradient(#AAA 0px, #BBB 42px, #CCC 42px, #CCC 43px, #EDEEEE 43px) !important;
}

[ Voor 74% gewijzigd door F.West98 op 17-07-2013 19:24 ]

[Verwijderd]

Ik wilde mijn real estate terug (en meer)

WiP

Forumlijst zonder Custom CSS


Forumlijst met Custom CSS


Deze thread, zonder


...en met, met vast menu, en floating zoekbalk.

Allen op 1080p, Firefox en op 100%

[naaitsab]

F.West98 schreef op woensdag 17 juli 2013 @ 19:12:
Try !important

Algemene CSS voor een header-markering in je post:
#AAA is de kleur van je header, #BBB ook, tenzij je gradient in de header wil, dan is het de tweede kleur
#CCC is de kleur van de border, en dus #EDEEEE als je geen border wil.

Cascading Stylesheet:

.message {

Dat was 'm

Zelf nog het volgende even getweaked aan de balk

Cascading Stylesheet:

.message .poster .title, .message .poster .usertitle
{
padding-top: 10px;
}

.messagecontent
{
padding-top: 15px;
}

Net even wat mooier anders valt het zo weg onder dat grijze

[NMe]

F.West98 schreef op woensdag 17 juli 2013 @ 19:12:
[...]

Try !important

Nee, try specifieker maken van je CSS-rule. Als je eenmaal met important begint kom je er niet meer vanaf en zit je straks overal !importants aan toe te voegen. div.message gebruiken in plaats van .message is waarschijnlijk al genoeg.

[F.West98]

NMe schreef op woensdag 17 juli 2013 @ 20:07:
[...]

Nee, try specifieker maken van je CSS-rule. Als je eenmaal met important begint kom je er niet meer vanaf en zit je straks overal !importants aan toe te voegen. div.message gebruiken in plaats van .message is waarschijnlijk al genoeg.

Ja, maar ik vind het sowieso bullshit dat Tweakers overal div voor zet. Waar is dat nu voor nodig behalve extra tyowerk en dus uren voor de devvers

[Verwijderd]

Ze hebben wel wat meer dingen rekening om mee te houden dan met die ene single user met zeer specifieke eisen he

[crisp]

F.West98 schreef op woensdag 17 juli 2013 @ 20:57:
[...]

Ja, maar ik vind het sowieso bullshit dat Tweakers overal div voor zet. Waar is dat nu voor nodig behalve extra tyowerk en dus uren voor de devvers

Ik heb een heleboel rules al minder specifiek gemaakt

[F.West98]

crisp schreef op woensdag 17 juli 2013 @ 21:54:
[...]

Ik heb een heleboel rules al minder specifiek gemaakt

Mooi, maar volgens mij is het allemaal oudere CSS.... Maar ik zie het vanzelf wel goedgaan
Ach, mijn CSS is trouwens heel onoverzichtelijk. Inmiddels 1700 regels

[crisp]

F.West98 schreef op woensdag 17 juli 2013 @ 21:59:
[...]

Mooi, maar volgens mij is het allemaal oudere CSS.... Maar ik zie het vanzelf wel goedgaan
Ach, mijn CSS is trouwens heel onoverzichtelijk. Inmiddels 1700 regels

De CSS voor de opmaak van posts (dus zeg maar alles binnen .message) is nieuw geschreven. De rest is inderdaad ouder en is met wat quick hacks aangepast naar T7 vorig jaar. Ik probeer wel geregeld de CSS hier en daar weer op te schonen en netter/logischer te maken, maar met een website van ons formaat is dat een behoorlijke klus...

[Verwijderd]

F.West98 schreef op woensdag 17 juli 2013 @ 21:59:
[...]

...
Ach, mijn CSS is trouwens heel onoverzichtelijk. Inmiddels 1700 regels

Niet dat ik het een echte issue vind, maar heb je echt niets anders te doen?
_{stiekem hoop ik dat je later bij de dev crew komt, voor een baan}

Voor mij is het gewoon leuk om te doen, geen dagtaak, wat klooien zodat mijn scherm gevuld is met tekst, ipv lompe blokken met niets, todat mijn aandacht weer elders is.

[F.West98]

Verwijderd schreef op woensdag 17 juli 2013 @ 22:12:
[...]


Niet dat ik het een echte issue vind, maar heb je echt niets anders te doen?
_{stiekem hoop ik dat je later bij de dev crew komt, voor een baan}

Voor mij is het gewoon leuk om te doen, geen dagtaak, wat klooien zodat mijn scherm gevuld is met tekst, ipv lompe blokken met niets, todat mijn aandacht weer elders is.

Ik zou het niet erg vinden
Ik heb gewoon werk hoor. Dit heb ik in een paar weekjes (enkel avondjes) in elkaar gezet. En soms verveel ik me, en maak ik een 1-2 avonden weer wat nieuws. Zeker geen dagtaak. Maar ik vind het wel kut dat ik dan na een iteratie weer vanalles moet updaten. Ik vrees al voor de responsive-design update (beta anyone? ) want mijn CSS bevat ook veel responsive (wat niet werkt op mobile wegens missende meta-tag ).

[Verwijderd]

Met al die idiote full hd schermen op mobiel/tablet en betere browsers op dergelijke platformen vervalt responsive wel. Hooguit voor landscape/portrait, maar ik kijk liever breeeeeeeeeeed.

[NMe]

F.West98 schreef op woensdag 17 juli 2013 @ 22:23:
[...]

Ik zou het niet erg vinden
Ik heb gewoon werk hoor. Dit heb ik in een paar weekjes (enkel avondjes) in elkaar gezet. En soms verveel ik me, en maak ik een 1-2 avonden weer wat nieuws. Zeker geen dagtaak. Maar ik vind het wel kut dat ik dan na een iteratie weer vanalles moet updaten. Ik vrees al voor de responsive-design update (beta anyone? ) want mijn CSS bevat ook veel responsive (wat niet werkt op mobile wegens missende meta-tag ).

Tsja, als jij zo nodig 1700 regels CSS wil schrijven dan is het nogal wiedes dat er elke grote update wel wat breekt. Ik zit op 215 regels en dat zijn veelal tweaks. Het merendeel van die CSS zit in het fixeren van de headerbar tijdens het scrollen. Ik heb met de release van deze week voor het eerst iets moeten fixen en daarna was mijn CSS daadwerkelijk een stuk korter.

@Beta-toegang: daar heb je alleen maar meer frustratie mee omdat niets definitief is. Ga je straks allerlei rules bedenken die in de live-versie ineens niet meer werken.

[Wiethoofd]

Is er trouwens in de customcss.dsp css uitgehaald die de 'oude' #36 iteratie ondersteunde? Want ik had heel zeker CSS regels voor de messageheaders er in staan, kom deze nergens meer tegen, m'n #ABCDEF kleurtje moet weer terug

[Verwijderd]

Er is genoeg kapot stuk gegaan met de diverse irritaties Dat is het makke met Custom CSS en tweakers die er gebruik van maken

[F.West98]

NMe schreef op woensdag 17 juli 2013 @ 22:34:
[...]

Tsja, als jij zo nodig 1700 regels CSS wil schrijven dan is het nogal wiedes dat er elke grote update wel wat breekt.

Valt heel erg mee

Ik zit op 215 regels en dat zijn veelal tweaks. Het merendeel van die CSS zit in het fixeren van de headerbar tijdens het scrollen. Ik heb met de release van deze week voor het eerst iets moeten fixen en daarna was mijn CSS daadwerkelijk een stuk korter.

Stats:
70 regels Custom fonts (2)
130 regels header fixed met responsive en PW fix
230 regels header links (voor tablets)
80 regels trackerfixes
100 regels featured items caroussel
280 regels algemene forum fixes
50 regels responsive
60 regels reacties fix
110 regels nieuwe look reacties (gelijkgetrokken met nieuwe look forum)
260 regels nieuwe forum look
30 regels algemene meldingen
de rest is redelijk algemeen / verspreid / oncategoriseerbaar en/of PHP
Alles valt aan/uit te zetten, en ik heb nog 1000 regels code aan back-end en een database

@Beta-toegang: daar heb je alleen maar meer frustratie mee omdat niets definitief is. Ga je straks allerlei rules bedenken die in de live-versie ineens niet meer werken.

Die zet ik dan in een beta-file, en ik heb zelf een greasemonkey-script die een checkbox aanmaakt (rechtsonderin), die ervoor zorgt dat die aan/uit gaat (dus enkel als ik zin heb beetje sleutelen)
Ik heb ook scripts voor actieve topics/bookmarks toevoegen als dropdown bij forum in navigatie, en een interactieve reactor, dan kan ik zonder reload direct quoten & posten

[ Voor 6% gewijzigd door F.West98 op 17-07-2013 23:08 ]

[Verwijderd]

Echt respect voor je, maar is echt mijn reactie (net zoals de algemene reactie op mijn zwarte CSS kleuren hier was toen wit net begon, maar dit is echt extreem)

[F.West98]

Verwijderd schreef op woensdag 17 juli 2013 @ 23:16:
Echt respect voor je, maar is echt mijn reactie (net zoals de algemene reactie op mijn zwarte CSS kleuren hier was toen wit net begon, maar dit is echt extreem)

Ik vind 't leuk om te doen, en ik vind dit zo veeel beter dan de standaard layout. Het verbetert mijn CSS skillz best wel en het is altijd leuk om een ingewikkeld probleem opgelost te hebben

EditL
Zoals nu, heb ik een loos momentje, en ga ik even wat tweaken aan de CSS

[ Voor 8% gewijzigd door F.West98 op 18-07-2013 02:04 ]

[Zerora]

Ik heb best wel moeite om de achtergrondkleur van T.net goed te veranderen. Die de achtergrond instelling in het settingsmenu gooit nogal roet in het eten. Als ik namelijk de schuifbalk helemaal links heb staan zie ik de achtergrond van de #searhbar lichtgrijs worden (standaardkleur) en de de rest wordt dan donkergrijs (de kleur die ik wil hebben overal en ingesteld heb in de css). Ga ik naar rechts schuiven draaien de kleuren om.

Hoe kan ik de kleuren vast zetten ongeacht waar ik dat schuifdingetje heb staan?

[NMe]

Zerora schreef op vrijdag 19 juli 2013 @ 11:35:
Ik heb best wel moeite om de achtergrondkleur van T.net goed te veranderen. Die de achtergrond instelling in het settingsmenu gooit nogal roet in het eten. Als ik namelijk de schuifbalk helemaal links heb staan zie ik de achtergrond van de #searhbar lichtgrijs worden (standaardkleur) en de de rest wordt dan donkergrijs (de kleur die ik wil hebben overal en ingesteld heb in de css). Ga ik naar rechts schuiven draaien de kleuren om.

Hoe kan ik de kleuren vast zetten ongeacht waar ik dat schuifdingetje heb staan?

Cascading Stylesheet:

body { background: red; }

Doet precies wat ik verwacht?

[Zerora]

Ja, zover was ik ook al wel.

Alleen als ik het schuifje in die site-settings helemaal links zet, wordt de contentarea niet opgemaakt ofzo en als je het schuifje naar rechts zet wel. Daar loop ik mee te kutten. Krijg het niet voor elkaar om dan die achtergrond goed te krijgen. Ja, ik krijg het goed, maar wanneer ik alleen al op het knopje druk van die site settings veranderd alles weer. Daar wil ik vanaf als het kan.

Zal ff een screenshot toevoegen van wat ik bedoel.

[ Voor 6% gewijzigd door Zerora op 19-07-2013 12:04 ]

[NMe]

Maar als je in je custom CSS de achtergrond verandert, waarom zou je dan überhaupt nog aan dat schuifje zitten? Dat begrijp ik niet.

[Zerora]

Ik verander nog die artikeltypes op de frontpage van wat ik op dat moment wil zien. Dus druk ik dat knopje in voor die settings en dan veranderd alles.

Edit:



Zie screenshot hierboven. Wat ik wil is dat nummer 1 + 2 + 3 allemaal donkergrijs worden (het bovenste screenshot laat dat bijna correct (alleen 1 niet) zien). Wanneer ik op het settings knopje rechtsboven druk veranderd alles naar de situatie op het onderste screenshot.
Verder wil ik nog bereiken dat het content gedeelte wit is, net zoals op het onderste screenshot.

[ Voor 60% gewijzigd door Zerora op 19-07-2013 12:14 ]

[NMe]

.galleryHeadingContainer dezelfde kleur geven als je achtergrond.

Maar nogmaals: waarom zit je überhaupt aan die settings als je je achtergrond veranderd hebt? Dat heeft toch geen enkele zin? En als domweg klikken op die knop iets verkloot, dan is dat toch alleen zo voor die pageview en lost een refresh het op?

[Zerora]

NMe schreef op vrijdag 19 juli 2013 @ 12:28:
En als domweg klikken op die knop iets verkloot, dan is dat toch alleen zo voor die pageview en lost een refresh het op?

Ja, dat wel. Maar ik ben een zeikerd.
Ik ga eens verder kloten.

[Hero of Time]

Trap de search naar boven, true logo ook en maak die hele bar 1 pixel hoog ofzo, geen gezeik meer mee . Heb ik ook gedaan .
Met dit bijvoorbeeld:

Cascading Stylesheet:

/* Search form */
#search {
    position: relative !important;
    top: -53px;
}
/* True hosting logo */
#true {
    position: relative !important;
    top: 42px;
    left: 50px;
    z-index: 88;
    
}
/* Default gray bar holding the search form and true logo
    Do not use display: none, search will disappear */
#searchbar {
    height: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

[Creesch]

Dit topic kwam voorbij in mijn posthistory en dat herinnerde mij er aan dat er een paar dingen zijn aan de tweakers layout die mij nog steeds niet liggen.

Dus ik heb wat kleine tweaks gedaan:

• Font type naar segoe ui, een persoonlijke voorkeur. Ik vind het een zeer prettig lettertype om te lezen.
• Artikelen en forum posts heb ik de font-size iets groter van gemaakt, leest iets prettiger en brengt deze belangrijke tekstvlakken wat meer naar de voorgrond.
• Wat aanpassingen aan de tracker zodat ik niet steeds een zwarte balk aan de zijkant van het scherm heb als het ding is ingeklapt. Ook hoeft die knop van mij niet mee te scrollen.
• De informatie aan de rechterkant van nieuws artikelen heeft voor mij geen prioriteit dus die heb ik kleiner gemaakt.
• Comment nesting heb ik totaal overhoop gehaald.
• Userscript om collapse buttons toe te voegen aan alle comments en niet alleen bij hover.
• Avatar weg bij comments, alleen maar clutter op een klein oppervlakte.

edit:

• forum reacties allemaal een header gegeven en niet alleen speciale berichten.
• Wat borders weggehaald
• Her en der wat gradients weggehaald, ben ik geen fan van.

Screenshots






css:

Cascading Stylesheet:

body {
body, table, td, th, input, button, textarea, select, .bar, .sitename, .article h2 {
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
}

body div.messagecontent, div.article {
    font-size: 1.1em;
}

body #tracker {
    left: -336px;
}

body.hasTracker {
    position: relative;
    margin-left: 0px;
}

body #menubar {
    width: auto;
}

body #tracker .fakeTop>div {
    bottom: auto;
}

body #tracker {
    padding-top: 10px;
}

body #tracker .fakeTop {
    background: #313232;
    background-image: none;
    height: 10px;
}

body div.relevancyColumn {
    float: right;
    width: 200px;
    margin-left: 0px;
    font-size: 0.8em;
    line-height: 0.8em;
}

body div.relationboxBlock {
    margin-bottom: 0px;
}

body div#relationbox, div#rbEntitylist, #rbEntitylist ul {
    margin: 0px;
    border: 0;
}

body .relevancyColumn h2 {
    font-size: 1em;
    margin: 5px 0 5px;
}

body .articleColumn {
    width: 60em;
}

body #reacties {
    width: 60em;
}

body .newsArticleColumn .nextPrevDay {
    max-width: none;
}

body #collapseButtons, #collapseButtons .toggleThread {
    visibility: visible !important;
}

body .reactieHeader {
    padding-left: 40px;
}

body #collapseButtons {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 20px;
}

body .usericonsmall {
    display: none;
}

body #reacties #reactieContainer {
    border: 0;
    padding: 0;
}

body .reactie {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
    margin-bottom: 8px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    padding: 5px 8px 0 5px;
}

body .reactie,
body .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie {
    background-color: #fff;
}

body .reactie .reactie,
body .reactie .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie,
body .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie .reactie {
    background-color: #F7F7F8;
}

body .reactieBody {
    border: 0;
}

body table.listing td {
    border-bottom: 1px solid #E2E2E2;
    border-top: 0px solid #F9FCFC;
    background: #EDEEEE;
    background-image: none;
}

body table.listing td.ind, table.listing td.ind2 {
    border-left: 0;
}

body table.listing td.last {
    border-right: 0;
}

body div.message {
    background-image: url(http://tweakers.net/ext/f/hD9Vqt8SK2Yk6hoDO80ET50J/full.png);
    background-repeat: repeat-x;
    border: 0;
}

body div.message .post {
    margin-top: 39px;
}

body div.message .poster>.username {
    margin-bottom: 12px;
}

en de userscript

JavaScript:

// ==UserScript==
// @name       tweakers collapes buttons
// @namespace  http://tweakers.net/gallery/48718
// @version    0.1
// @description  collapse buttons voor alle comments op de fp
// @include     http://tweakers.net/*
// @include     https://tweakers.net/*
// @include     http://gathering.tweakers.net/*
// @include     https://gathering.tweakers.net/*
// @include     https://secure.tweakers.net/*
// @require    http://code.jquery.com/jquery-1.10.1.min.js
// ==/UserScript==

$.noConflict();
jQuery(document).ready(function($) {
$('.reactieBody').append('<div id="collapseButtons"><span class="toggleThread" title="Thread in/uitklappen"></span><span class="toggleReaction" title="Reactie in/uitklappen"></span></div>');
});

[ Voor 11% gewijzigd door Creesch op 23-07-2013 16:41 ]

[Zerora]

Voor op het forum:
Hoe krijg alles wat onder de username valt wat pixels verder naar onderen?

Daarvoor moet ik volgens mij de class "username ellipsis" voor hebben. Maar als ik daar een padding/margin aan de onderkant instel gebeurd er niks. Wel als ik het live doet via de de firefox plugin Firebug.
Margin of paddings instellen op de elementen die eronder vallen heeft geen zin, want niet iedereen heeft ondertitels of abbo-titels of avatars in gebruik.

Ik niet meer snap...

[ Voor 18% gewijzigd door Zerora op 24-07-2013 11:40 ]

[Room42]

Zerora schreef op woensdag 24 juli 2013 @ 11:38:
[...]

In Firebug kun je ook zien of een rule overruled wordt. Dan staat er een streep doorheen. Dan moet je de selector specifieker maken, of er !important achter zetten.

[Zerora]

Dafuq. Ik was vergeten een ergens een tekentje vergeten te verwijderen. Dat verklaard waarom ie niet werkte
Maar toch bedankt.

[Maranello]

Tweakers Azuurblauw

Kleur gebaseerd op het azuurblauw wat er her en der al gebruikt wordt in de standaard layout. Veel stukken code zijn bij elkaar gesprokkeld uit dit topic.




Hoofdpunten aanpassingen:

• De hoofdelementen die bordeauxrood waren azuurblauw gemaakt
• Forumoverzicht weer onderverdeeld in kleuren
• In de topicview de berichtheaders weer terug voor meer contrast tussen verschillende berichten

Cascading Stylesheet:

/* ### Frontpage ### */

/* Headerkleur aanpassing, inclusief dropdowns */
#tracker div.fakeTop, div#top {
    background: #0A93CA;
    background-image: linear-gradient(#0A93CA,#72C3DB 68px);
}

.pageTabs li.active a, .pageTabs li.active a:hover {
    color: #0B94BF;
}

.dropdown ul li:hover, #menu .dropdown ul li:hover {
    background-image: linear-gradient(#72C3DB,#0A93CA);
}

/* Alle titels andere kleur */
h1, h2, h1 a, h2 a, h2 a:hover {
    color: #0B94BF ;
}

/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
    background-color: #FFFFFF;
}

/* Pricewatch categorie kleuren */
#categoryBrowser li.active.more {
    background: url(../../g/if/categories/more2.png) no-repeat 283px -35px, linear-gradient(#72C3DB,#0A93CA) 0 0;
}

/* Grijze bezochte links op de frontpage */
.frontPageLink:visited {
    color: #5A5C5C ;
}

/* ### GoT ### */

/* Forumoverzicht kleuren, ieder deel andere achtergrond kleur (gradient indien mogelijk) */
.forumList:nth-child(2) table.listing tr th {
    background-image: linear-gradient(#9C9E9E,#626363);
}

.forumList:nth-child(3) table.listing tr th {
    background-image: linear-gradient(#B4113C,#760D29);
}

.forumList:nth-child(4) table.listing tr th {
    background-image: linear-gradient(#573077,#2B0A46);
}

.forumList:nth-child(5) table.listing tr th {
    background-image: linear-gradient(#1BA53C,#074416);
}

.forumList:nth-child(6) table.listing tr th {
    background-image: linear-gradient(#FF5A00,#9E3B06);
}

.forumList:nth-child(7) table.listing tr th {
    background-image: linear-gradient(#50D7FA,#14505F);
}

.forumList:nth-child(8) table.listing tr th {
    background-image: linear-gradient(#21428B,#112551);
}

.forumList:nth-child(9) table.listing tr th {
    background-image: linear-gradient(#9C9E9E,#626363);
}

/* Henk op GoT */
#henk {
    height: 63px;
    top: -63px;
}
/* Geen jobs */
div#jobs_relations {
    display: none ;
}
/* Topics met laatste eigen reactie markeren */
td.topic a[title*="Maranello"] {
    font-style: italic;
    color: #D1D1D1 ;
}

/* Topicview aanpassingen berichtheaders */
div.message {
    padding-top: 7px;
    background-image: url(http://tweakers.net/ext/f/untaLIvpZewASXmfeP5PLpHJ/full.png);
    background-repeat: repeat-x;
}

div.message.ownpost {
    background-image: url(http://tweakimg.net/g/forum/images/layout/ownpost_bg.png) !important;
}

div.messageheader .date .oldage {
    color: #0B94BF;
}

div.message .poster>.username {
    margin-bottom: 12px;
}

div.message .post {
    margin-top: 39px;
}

[NMe]

Zerora schreef op woensdag 24 juli 2013 @ 11:38:
Daarvoor moet ik volgens mij de class "username ellipsis" voor hebben.

De class "username ellipsis" bestaat niet. Classnamen mogen geen spatie bevatten. Een spatie betekent dat er twee classes op een element zitten, niet dat er een complete zin staat. Jij wil dus .username.ellipsis hebben, oftewel een element dat zowel de class username als de class ellipsis heeft. Niet te verwarren met .username .ellipsis trouwens, want dat zou een element met de class ellipsis binnen een ander element met de class username betekenen.

[Zerora]

Heb het al voor elkaar, NMe. Enkel als class .username gebruiken was al voldoende.

[Hero of Time]

Ik gebruik een vaste bovenbalk en heb om de anchor link te fixen het volgende in m'n CSS staan:

Cascading Stylesheet:

a[name] {
    display: block;
    padding-top: 85px;
    margin-top: -85px;
}

Echter geeft dit nu naar het blijkt een ongewenst resultaat: de linkjes bovenaan voor topic report, reageer, navigatie en gekoppelde onderwerpen werken niet. Het element zit er 'boven'. Ik kan wel de tekst selecteren, maar niet klikken om een link te volgen of de selectie ongedaan te maken.

Hoe kan ik dit het beste oplossen?

[Wiethoofd]

Specifieker zijn met je CSS regel? Het lijkt me dat dit ook de nodige anchors (voor springen naar posts en stukken in TS'en) om zeep helpt.

[Hero of Time]

Nee, het fixt juist het springen naar de betreffende post. Haal ik 't weg, dan staat de post header en een gedeelte van de post (in jouw geval de hele tekst) onder de bovenbalk (waar het Tweakers logo staat enzo).
Het vreemde is juist dat het gedeelte wat gemaakt wordt boven elke post staat, maar niets met de signatures e.d. doet, alleen helemaal bovenaan met navigatie en TR maken knoppen. Voor de laatste .plan iteratie had ik hier vziw geen last van. Sinds de onderwerpen en producten van rechts naar boven zijn verhuist is 't te merken. Zijn er producten gelinkt, dan doen de knoppen voor TR het wel omdat de producten deze buiten het block brengt.

[F.West98]

Misschien kan je een :not attribute gebruiken?

[NMe]

Niet zo moeilijk denken.

Cascading Stylesheet:

#forumheading {
    position: relative;
    z-index: 10;
}

[Hero of Time]

F.West98 schreef op zaterdag 03 augustus 2013 @ 23:18:
Misschien kan je een :not attribute gebruiken?

Hoe bedoel je? Alle anchors naar posts is in de vorm van <a name="[post ID]"/>. Hoe moet ik :not hier dan bij gebruiken?

NMe schreef op zaterdag 03 augustus 2013 @ 23:28:
Niet zo moeilijk denken.

Cascading Stylesheet:

#forumheading {
    position: relative;
    z-index: 10;
}

Ff testen...
...
Een z-index van 1 is al genoeg, dus dat heb ik maar gebruikt. Ik zat hier ook al naar te kijken, maar dan voor a[name], wat idd moeilijk gaat omdat 't geen positie heeft.

[ Voor 15% gewijzigd door Hero of Time op 03-08-2013 23:35 ]

[NMe]

Het probleem was juist dat de anchor tag van de eerste post van een topic over je forumheadings viel. If anything wil je die dus een lagere z-index geven, maar dit werkt net zo goed.

@F.West98: :not is trouwens geen attribuut maar een pseudoclass. Nogal een verschil.

[F.West98]

@NMe: /care
Attribute of class, zolang je maar begrijpt wat ik bedoel

[Hero of Time]

F.West98 schreef op zaterdag 03 augustus 2013 @ 23:39:
@NMe: /care
Attribute of class, zolang je maar begrijpt wat ik bedoel

Nee, dat doe ik dus niet.

[F.West98]

Hero of Time schreef op zaterdag 03 augustus 2013 @ 23:40:
[...]

Nee, dat doe ik dus niet.

Ik zit op mobiel, weet dus de source hier niet, maar wat je zou kunnen doen is, als alle linkjes die zonder stijl moeten in een div met class zitten of een class hebben, is de volgende stijl gebruiken:

Cascading Stylesheet:

div:not(.classvandivmetstijllozelinkjes) a:not(.classvanstijllozelinkjes) { /*stijl*/ }

Met in sommige browsers meerdere classes mogelijk, gescheiden met een komma...

[josvane]

Na tijden zit ik weer eens te te rommelen met custom css. Weet iemand of het mogelijk is op de FP bepaalde channels (vooral games) te verbergen. Ik ben daar totaal niet in geïnteresseerd, en wil alle nieuwsberichten in de categorie games verbergen.

[Zartok]

josvane schreef op zondag 25 augustus 2013 @ 11:31:
Na tijden zit ik weer eens te te rommelen met custom css. Weet iemand of het mogelijk is op de FP bepaalde channels (vooral games) te verbergen. Ik ben daar totaal niet in geïnteresseerd, en wil alle nieuwsberichten in de categorie games verbergen.

Als ik het zo zie kun je de games enkel onderscheiden aan het icoontje dat ervoor staat.

HTML:

<span class="sprite contentIcon games review" title="Review | Games">Review</span>

Maar je wil de parent van de parent verbergen, als ik dat google, dan lijkt het niet te kunnen om parents aan te passen met css. Wat je wel kan doen is een scriptje maken dat de parents verbergt en dat draaien in iets als tampermonkey (wat je misschien al voor custom css gebruikt).

[F.West98]

Zartok schreef op zondag 25 augustus 2013 @ 11:56:
[...]

Als ik het zo zie kun je de games enkel onderscheiden aan het icoontje dat ervoor staat.

HTML:

<span class="sprite contentIcon games review" title="Review | Games">Review</span>

Maar je wil de parent van de parent verbergen, als ik dat google, dan lijkt het niet te kunnen om parents aan te passen met css. Wat je wel kan doen is een scriptje maken dat de parents verbergt en dat draaien in iets als tampermonkey (wat je misschien al voor custom css gebruikt).

In CSS4 kan dat wel
Is dat niet gewoon een instelling op tnet?

[jmxd]

F.West98 schreef op zondag 25 augustus 2013 @ 22:41:
[...]

In CSS4

[Verwijderd]

Twylight schreef op zondag 25 augustus 2013 @ 22:54:
[...]
[afbeelding]

Hahahahaha, sorry, geen nuttige info in mijn post (mijn excuses) maar dit is toch wel DE reactie van 't jaar vind ik :-)

[F.West98]

I don't really get it?

Ik ben dom ja, I know

[SmokingCrop]

Maranello schreef op donderdag 25 juli 2013 @ 13:44:

Tweakers Azuurblauw

Kleur gebaseerd op het azuurblauw wat er her en der al gebruikt wordt in de standaard layout. Veel stukken code zijn bij elkaar gesprokkeld uit dit topic.

Mooi! Heb ik even overgenomen en nog een klein beetje aangepast
(achtergrond & links op front page zijn lichtblauw als ik ze nog niet visited heb)



Heb dit er bv ook bijgevoegd:
- eigen posts & topic starter's posts hebben een header met kleur (vooral handig bij aankoopadvies topics) en de rest heeft geen header (die code dus weggedaan)
- pijltje naast naam vind ik mooier zonder border & background

Cascading Stylesheet:

div.message.ownpost
{
  background-image: url(http://tweakers.net/ext/f/yKPs8Uogv5qMdA8eftfJi1fY/full.png) !important;
  background-repeat: repeat-x
}

div.message.topicstarter
{
  background-image: url(../../g/forum/images/layout/ownpost_blue_bg.png) !important;
  background-repeat: repeat-x
}

.userklipklap 
{
  border: none !important;
  background: transparent !important;
  background-image: none !important
}

Wat er dan zo uit komt te zien:

[ Voor 44% gewijzigd door SmokingCrop op 27-08-2013 17:23 ]

[Catorce]

Sinds een uurtje heb ik ook Custom CSS via de karmastore, heb meteen gebruik gemaakt van de code die Maranello maakte voor een blauw thema. Nu loop ik echter tegen een klein probleempje aan en jullie kunnen mij daar vast mee helpen. Het lijkt alsof de avatar (en de tekst die daar boven staat) wat te hoog staat, zoals in het volgende screenshotje wel te zien is.



Bij user BamBoomBots vind ik zelf '~MiaSanMia~' te hoog staan, bijna tegen de balk aan. Bij user apis29 is de avatar zelf overlappend met diezelfde balk. Zelf kom ik er niet uit waarom dit gebeurt, iemand een oplossing?

EDIT: Wat mij tevens nu opvalt is dat bij het ene topic de reactie datumaanduiding (in de eerder genoemde balk met username, 'quote' ed.) gekleurd is, blauw, en bij anderen grijs blijft. Wat is hier een oorzaak voor? Ik kan dit niet vinden in de code.

[ Voor 16% gewijzigd door Catorce op 05-12-2013 22:41 ]

[Zerora]

Ik heb dat opgelost met:

code:

.username {
padding-bottom: 10px; 
}

[Catorce]

Zerora schreef op donderdag 05 december 2013 @ 22:46:
Ik heb dat opgelost met:

code:

.username {
padding-bottom: 10px; 
}

Dank, het is nu gelukt! Wel merk ik dat mijn eigen avatar later staat dan die van anderen, maar dat is slechts een klein dingetje. Was voorheen ook al, daar merkte ik uiteindelijk weinig van

[NMe]

Catorce schreef op donderdag 05 december 2013 @ 22:39:
EDIT: Wat mij tevens nu opvalt is dat bij het ene topic de reactie datumaanduiding (in de eerder genoemde balk met username, 'quote' ed.) gekleurd is, blauw, en bij anderen grijs blijft. Wat is hier een oorzaak voor? Ik kan dit niet vinden in de code.

Hover er eens over met je muis.

[Catorce]

NMe schreef op donderdag 05 december 2013 @ 23:46:
[...]

Hover er eens over met je muis.

Het is inmiddels niet meer voorgekomen, slechts in dit topic was het ook het geval. Wanneer hoverde boven die datum kwam er slechts een balke onder (als in, klikbare hyperlink, toch?), verder niets. Geen idee wat en waarom het gebeurde, maar het lijkt nu weg te zijn.

Nog een laatste vraag: Om het helemaal af te maken zou ik graag de admin/mod kleuren willen veranderen in een blauwe tint ipv de donkerrode die het nu is. Is dit uberhaupt mogelijk?

[Bestla]

Misschien, want ik heb een code draaien die abo's blauw kleurt.

code:

/* Abo highlighter */
.abonnee {color: #0A8FC4;}

Ik zie alle abo's dus als blauwe users.

[ Voor 48% gewijzigd door Bestla op 06-12-2013 10:55 ]

[Bestla]

dubbel

[ Voor 161% gewijzigd door Bestla op 06-12-2013 10:54 ]

[Catorce]

Bestla schreef op vrijdag 06 december 2013 @ 10:49:
Misschien, want ik heb een code draaien die abo's blauw kleurt.

code:

/* Abo highlighter */
.abonnee {color: #0A8FC4;}

Ik zie alle abo's dus als blauwe users.

Hier heb ik dan even van gemaakt

code:

/* admin highlighter */
.admin {color: #0A8FC4;}

En dan admin veranderen door 'administrator' werkt helaas ook niet, ik zie bijvoorbeeld de naam van NMe nog steeds in rood.

Nu kan ik redelijk om gaan met computers, maar coding/programmeren heb ik vrijwel geen ervaring in. Wat voel je je soms zo dom, zeker hier op Tweakers

[Chris7]

De class van Admins is .crew. Dus dit werkt wel:

Cascading Stylesheet:

/* admin highlighter */
.crew {color: #0A8FC4;} 

En voor wat betreft de hover, een andere kleur (standaard rood) geeft dit aan:

[Catorce]

Chris7 schreef op vrijdag 06 december 2013 @ 11:44:
De class van Admins is .crew. Dus dit werkt wel:

Cascading Stylesheet:

/* admin highlighter */
.crew {color: #0A8FC4;} 

En voor wat betreft de hover, een andere kleur (standaard rood) geeft dit aan:
[afbeelding]

Wat een goede hulp zijn jullie, veel dank!

[SmokingCrop]

Catorce schreef op vrijdag 06 december 2013 @ 11:45:
[...]


Wat een goede hulp zijn jullie, veel dank!

Misschien een late post, maar probeer F12 in Chrome te gebruiken of rechts klikken op iets en dan "inspect element"

bv door rechts klik op Grrrrrene en inspect element te doen, kom je op volgende:

-> je ziet dat deze link 2 classes heeft namelijk "user" en "crew"
-> rechts zie je dat dat crew die rode kleur maakt ^.^

[Chris7]

Voor mensen met weinig programmeerervaring kan dat misschien wel wat overweldigend overkomen. Dan krijg je bijvoorbeeld dit:
BtM909 in "De Devschuur Coffee Corner - Iteratie 4"

[Bundin]

Als complete css nitwit heb ik met wat kopieer/plakwerk en logisch nadenken een beetje geprutst aan de layout van Tweakers (lang leve dat inspector-geval om achter de juiste naampjes van de beestjes te komen). Nu staat er echter ineens "Wij stellen technologie op de proef" in de rode balk, dat plakt precies over mijn verplaatste searchbar heen. Met die inspector krijg ik 't ding niet te pakken. En als echte newb houdt mijn "kennis" daarmee acuut op

Hoe kom ik van dat ding af?

edit: toevoeging
Bedankt NMe!

[ Voor 4% gewijzigd door Bundin op 17-03-2014 18:27 ]

[NMe]

Bundin schreef op maandag 17 maart 2014 @ 17:21:
Hoe kom ik van dat ding af?

Cascading Stylesheet:

#logo:after { display: none }

[SinergyX]

Werkt CSS ook trouwens voor de mobiele versie? Of beter, juist specifiek voor de mobiele layout?

Desktop versie is wel aardig, maar de mobiele versie is een beetje pagina al gigantisch veel scrollen.

[F.West98]

Dan moet je met media queries werken.
En die slogen is echt het dieptepunt van Tweakers' hele codebase. Een foto in een :after

[NMe]

F.West98 schreef op maandag 17 maart 2014 @ 18:14:
Dan moet je met media queries werken.
En die slogen is echt het dieptepunt van Tweakers' hele codebase. Een foto in een :after

Ik weet niet waar jij het over hebt maar daar is niks mis mee.

[F.West98]

NMe schreef op maandag 17 maart 2014 @ 18:20:
[...]

Ik weet niet waar jij het over hebt maar daar is niks mis mee.

Het is een slecht idee. Ze kunnen beter een nieuwe span met tekst doen, of een :after met tekst, maar een :after met foto om TEKST te doen is wel erg slecht.

[NMe]

F.West98 schreef op maandag 17 maart 2014 @ 18:22:
[...]

Het is een slecht idee. Ze kunnen beter een nieuwe span met tekst doen, of een :after met tekst, maar een :after met foto om TEKST te doen is wel erg slecht.

Het is geen foto maar een afbeelding. Ze hadden kunnen kiezen voor tekst in plaats van een plaatje maar dan hadden ze ook weer een custom font moeten includen voor die ene uiting. Of je nou een plaatje toevoegt aan je request of een font maakt ook geen bal uit.

[F.West98]

NMe schreef op maandag 17 maart 2014 @ 18:27:
[...]

Het is geen foto maar een afbeelding. Ze hadden kunnen kiezen voor tekst in plaats van een plaatje maar dan hadden ze ook weer een custom font moeten includen voor die ene uiting. Of je nou een plaatje toevoegt aan je request of een font maakt ook geen bal uit.

Afbeelding/plaatje, zelfde
Maar aangezien ik een andere headerkleur heb staat het lelijk (roze op blauw)

Los daarvan is het hele idee van die slogan slecht.

[Saturnus]

Is er nog een manier om het logo te vervangen?

Voor vorige week deed ik dat nog dirty door het huidige logo naar onderen te duwen.

code:

#top #menubar #menu #logo a img {
    display: block;
    background: url("http://linknaarcustomtweakerslogo.png");
    background-repeat: no-repeat;
    padding-top: 96px;
}

Nu werkt dat niet meer. Mogelijk is een z-index aangepast waardoor het logo over de content komt te liggen.

[NMe]

Opacity: 0 op het logo gooien en je nieuwe logo stylen met #logo:before of #logo:after?

[Saturnus]

Het is niet gelukt. Als ik http://stackoverflow.com/...ent-not-showing-up-on-img lees kan het ook niet. Bedoel je een andere manier?

[LoeWn]

Hierbij mijn resultaat na een ochtendje knutselen:


Klik op de foto's voor een vergroting

Foto 1: De bovenkant van de pagina:


Foto 2: De onderkant van de pagina:


Foto 3: En nog een foto met de tacker 'enabled'


Wat heb ik veranderd?

• Menubar op 'fixed' gezet (blijft altijd in zicht)
• Menubar kleiner gemaakt
• Logo verkleind en 'bijgeknipt'
• Tekst in menubalk hoofdletters
• de groene en zwarte kleuren (tekst) veranderd in menubalk
• schaduw om de zoekbalk
• schaduw om de 'container'
• footer verwijderd
• categoriën op de hoofdpagina verwijderd
• een paar simpele verplaatsingen (marges iets vergoten of verkleinen)
• een paar kleurtjes aangepast

To do list

• Reacties op berichten aanpassen (Zorgen dat ze verticaal wat minder ruimte in beslag nemen zodat ik minder hoef te scrollen. Waarschijnlijk ga ik dit doen door de username en avatar links van de reactie te zetten
• De blauwe knoppen met witte tekst aanpassen. Ik weet alleen nog niet wat er voor in de plaats komt
• Verder wat ik ter plekke tegen kom

Op foto 2 zie je een groene pijl staan. Deze geeft mijn eerste 'bug' aan. De tacker springt namelijk omhoog, ook al staat deze op fixed. Ik weet nog niet of ik dit met CSS op kan lossen

Op foto 3 staat de pijl in de menubalk. Hierbij wordt het knopje 'meer' wit zodra je over één van de onderliggende items hovered. Dit is volgens mij ook niet aan te passen met CSS.

[ Voor 3% gewijzigd door LoeWn op 26-03-2014 10:28 ]

[maussie95]

Mijn versie van Tweakers. Het zijn slechts kleine aanpassingen.

• Achtergrond met een houtpattern
• Breedte aangepast naar 1000px
• Tracker standaard aan en lelijke knopje weggehaald
• Nieuwe slogan verwijderd

[QwaftZefoni]

^ oh, die slogan wil ik ook wel kwijt, hoe doe ik dat?

het markeren van de messageheader van eigen posts in GoT wil me ook niet lukken, help pls?

code:

/* Forum Messageheader Eigen Posts blauw*/
div.message div.ownpost {
     background: #72C3DB !important;
     opacity: 0.7!important; 
}

[Bestla]

QwaftZefoni schreef op vrijdag 28 maart 2014 @ 17:20:
^ oh, die slogan wil ik ook wel kwijt, hoe doe ik dat?

het markeren van de messageheader van eigen posts in GoT wil me ook niet lukken, help pls?

code:

/* Forum Messageheader Eigen Posts blauw*/
div.message div.ownpost {
     background: #72C3DB !important;
     opacity: 0.7!important; 
}

Plak dit : #logo:after { display: none }

Ergens op een regel Bron : NMe

[Hero of Time]

QwaftZefoni schreef op vrijdag 28 maart 2014 @ 17:20:
^ oh, die slogan wil ik ook wel kwijt, hoe doe ik dat?

het markeren van de messageheader van eigen posts in GoT wil me ook niet lukken, help pls?

code:

/* Forum Messageheader Eigen Posts blauw*/
div.message div.ownpost {
     background: #72C3DB !important;
     opacity: 0.7!important; 
}

Ik heb dit, naar eigen smaak aanpassen:

Cascading Stylesheet:

/* Make your own post more visible, now with gradient! */
div.message.ownpost {
    background-image: linear-gradient(#404040 10px, #212323 40px) !important;
}

Je moet wel "Eigen reactie highlighten" aan hebben staan in voorkeuren. Let ook op de 40px in mijn gradient, dat geeft de hoogte aan van de highlight. Doe je dat niet, dan heb je mogelijk alleen de timestamp van de post die verandert.

[NMe]

Bestla schreef op vrijdag 28 maart 2014 @ 18:00:
[...]

Ergens op een regel Bron : NMe

Amper 10 posts boven de vraag zelfs. NMe in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

[koesie10]

Ik heb net even een generator gemaakt om custom CSS te maken. Veel van de tweaks uit de TS zitten erin, maar sommige deden het niet meer helemaal goed en die zitten er dan ook niet in. Hij staat tenminste online op http://tweakers.koenv.nl/. Ik accepteer ook pull requests voor nieuwe tweaks op GitHub.

[Zerora]

koesie10 schreef op zaterdag 29 maart 2014 @ 14:09:
Ik heb net even een generator gemaakt om custom CSS te maken. Veel van de tweaks uit de TS zitten erin, maar sommige deden het niet meer helemaal goed en die zitten er dan ook niet in. Hij staat tenminste online op http://tweakers.koenv.nl/. Ik accepteer ook pull requests voor nieuwe tweaks op GitHub.

Jij bent goed bezig!
Nu verder aanvullen met wensen vanuit hier.

[F.West98]

Zoiets had ik ook al

http://fwest98.nl/tnet_mod

Je kan daar dan met één include je CSS hebben, en die kan je daar veranderen en opslaan, en dan is het direct doorgevoerd. Nooit meer je settings in dus!

[NMe]

F.West98 schreef op zaterdag 29 maart 2014 @ 17:38:
Zoiets had ik ook al

http://fwest98.nl/tnet_mod

Je kan daar dan met één include je CSS hebben, en die kan je daar veranderen en opslaan, en dan is het direct doorgevoerd. Nooit meer je settings in dus!

Waarom zou wie dan ook jou moeten vertrouwen met hun wachtwoord?

[F.West98]

NMe schreef op zaterdag 29 maart 2014 @ 17:43:
[...]

Waarom zou wie dan ook jou moeten vertrouwen met hun wachtwoord?

Omdat 'a' ook werkt.

En:
Ik maak gebruik van de fancy PHP versleutel dingen

edit:
Ik zal eens kijken of ik binnenkort de code op GH zet

edit2:
https://github.com/FWest98/TnetFMod

[ Voor 20% gewijzigd door F.West98 op 29-03-2014 18:00 ]

[Creepy]

Really? http://fwest98.nl/tnet_mod/activate.php?id=44. Thats it?

[F.West98]

Het is geen .NET hè. En het project is ook al meer dan een jaar oud. In die tijd veel geleerd op het gebied van security.

[NMe]

Mja, en daarom zou ik wel twee keer nadenken voor ik mijn Tweakerswachtwoord in die site zou stoppen om de wijzigingen aan mijn CSS van daaruit uit te voeren. Aangenomen dat dat is wat je bedoelt met "...en dan is het direct doorgevoerd. Nooit meer je settings in dus!"

[F.West98]

Neeeee
Je plaatst een @include naar mijn server in je settings en dan kan je op mijn site best een willekeurig wachtwoord gebruiken, ook 'a' ofzo.
De @include gaat naar een php die de CSS adhv jouw settings (of de default) in elkaar frutselt.

[jmxd]

lol NMe

[Jochemd13]

Ik heb door wat gerommel een achtergrond ingesteld alleen hij klopt niet 100%. Want ik krijg maar de helft van het beeld de achtergrond. Weet iemand een oplossing?

Dit is de code die ik gebruik
body{background-image:url("http://qwallpapers.net/wp-content/uploads/2014/03/abstract-backgrounds-for-desktop-wallpaper-zoo-7swi7mhq.jpg");background-repeat:repeat;}

[ Voor 8% gewijzigd door Jochemd13 op 01-04-2014 19:47 ]

[Hero of Time]

Jochemd13 schreef op maandag 31 maart 2014 @ 18:32:
Ik heb door wat gerommel een achtergrond ingesteld alleen hij klopt niet 100%. Want ik krijg maar de helft van het beeld de achtergrond. Weet iemand een oplossing?

Dit is de code die ik gebruik

Cascading Stylesheet:

body{background-image:url("http://qwallpapers.net/wp-content/uploads/2014/03/abstract-backgrounds-for-desktop-wallpaper-zoo-7swi7mhq.jpg");background-repeat:repeat;}

[afbeelding]

Dat is goed zo hoor. Wat verwacht je dan? De rest is een div met dus andere styling.

[NMe]

Die balk verdwijnt als je de kleurstelling van de lichtste stand af haalt (met het tandwieltje bovenin).