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

[Blue-eagle]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 15:42:

Cascading Stylesheet:

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

@-moz-document domain("http://tweakers.net/") {
    body {
        background: #B4B4B4 url("file:///V:/image12.gif") repeat-y center;
    }
}

Je moet hem wel binnen de domain declaratie zetten natuurlijk.

[alex3305]

Inmiddels al flink wat CSS werk gedaan. Zo heb ik het forum aan elkaar gelijmd. De achtergrondkleur wat donkerder gemaakt. Berichten en Reg. datum weer terug zichtbaar gemaakt bij alle users. Abo's duidelijker gemaakt en de frontpage wat gerestyled.

Zo bevalt het me een stuk beter :

Cascading Stylesheet:

/* Uitvullen op de FP */
.article {text-align: justify;}

/* Achtergrondkleur veranderd */
#layout {background-color: #fafafa !important;} 

/* Linkkleur veranderd FP */
table.highlights a, table.listing a {color: #000 !important;}

 /* Linkkleur visited veranderd FP */
table.highlights a:visited, table.listing a:visited {color: #666 !important;}

 /* Tijd rechts uitgelijnd en lichter gemaakt */
table.highlights .time, div#highlights > table.highlights > tbody > tr > td > span {color: #999 !important; display: inline-block; float: right; }

/* Titel kleur van Headers op GoT veranderd in wit */
table.listing th.title a {color: #fff !important;}

/* Userdata weer klein zichtbaar */
.userdata .extra {display: block !important; font-size: 7pt} 

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

/* Action list rechts uitlijnen */
.action_list {float: right; margin-right: 20px; margin-top: 2px}

/* Action lijst kleiner gemaakt */
.action_list li {font-size: 9pt;} 

/* Sidebar weggehaald op forum */
#sidebar {display: none;} 

/* Forumberichten naar het midden verplaatst */
#messages {margin-left: 80px} 

/* Witruimte tussen berichten weggehaald */
#messages div.message {margin-bottom: 0px;} 

/* Eigen post gehighlight. Mooier dan de standaard :+ */
#messages div.message .ownpost {background-color: #D9ECFF !important;} 

/* Messageheader aangepast voor betere verschillen tussen twee berichten */
#messages div.message .messageheader {background-color: #ddd;} 

/* Messageheader aangepast voor TS */
#messages div.topicstarter .messageheader {background-color: #ccc;} 

 /* Pagecounter onderaan gefixed voor witruimte weghalen */
#messages p.pagecounter {display: block; margin-top: 15px}

/* Topic actions gefixed */
.topic_actions {width: 980px;} 

/* Actielijst gefixed */
.action_list {font-size: 8pt;}

 /* Reply-count fatsoenlijk leesbaar gemaakt in topic overview */
.commentCount {color: black; background: none;}

/* Social, Newsletter en Jobs meuk weggehaald op de FP */
.secondColumn #social, .secondColumn #jobs, .secondColumn #newsletter {display: none;} 

/* Topic Reply waarschuwing in het midden */
#topicReplyWarning p {margin-left: 0; text-align: center;}

/* Laatst gereageerd in een topic dikdrukken -- alex3305 natuurlijk vervangen door je eigen username */
table.listing .topic a[title$="alex3305"] {font-weight: bold}

/* Tracker knopje verbergen */
.tracker {display:none;}

/* Ruimte tussen fora en topics minder gemaakt. Scheelt nu 4px, je kunt zelf de 8px waarde verminderen om een nog compactere layout te krijgen */
table.listing td, table.listing th {padding: 8px 5px;}

Misschien niet allemaal even netjes geordend. Maar het is in ieder geval iets .

[ Voor 9% gewijzigd door alex3305 op 19-10-2012 18:49 . Reden: Dikdrukken van laatst gereageerd. -- Tracker verbergen -- Ruimte tussen listing verminderd ]

[windwarrior]

Ik heb zelf ook wat kleine aanpassingen gedaan


(klikken voor groot)

Cascading Stylesheet:

/* haalt de frontpage tabs weg, want die gebruik ik niet */
#fp_tabs_container{
    display: none;
}

/* geeft de achtergrond een iets fijner grijs tintje, minder fel aan de ogen */
#layout{
    background-color: #ccc;
}

/* daarmee moest ik de contentarea iets meer padding geven, anders stonden de letters tegen de zijkant aan */
#contentArea{
    padding: 20px;
    padding-bottom: 180px;
    background-color: white;
}

/* ook tabs op het forum gebruik ik niet */
#pageTabs{
    display:none;
}

/* iets rondere hoekjes aan de bovenbalk, geen idee waarom ik dat deed */
#menubar{
    border-radius: 5px !important;
}

/* verwijderd het menuitem "nieuws". Ik vind die blogview niet handig, en klik te vaak per ongeluk op nieuws */
#menu li:first-child{
    display: none;
}
/* helaas doet de bovenstaande 'hack' ook mijn account dingetje verdwijnen, dat moet even teruggehacked */
#menu #userbar li:first-child{
   display: block;
}

/* cosmetisch dingetje, onderste hr iets groter */
#bottom div.hr{
   background-color: #EDEEEE !important;
   height: 10px;
}

/* anders gaan de jobs advertentiedingetjes op het forum overflowen */
.nowrap{
   white-space: normal;
}

/* kleur de ts messages subtiel groen, geleend van Orion84 */
.topicstarter .messageheader {
    background: #eeffee !important;
}

[AndriesLouw]

Heren, ik ben weer helemaal blij dankzij jullie!

[Verwijderd]

Blue-eagle schreef op vrijdag 19 oktober 2012 @ 15:56:
[...]


Je moet hem wel binnen de domain declaratie zetten natuurlijk.

Als ik deze code gebruik dan wordt de achtergrond niet getoond. Heel gek het werkt alleen als ik het buiten het domein zet.

[ Voor 10% gewijzigd door Verwijderd op 19-10-2012 16:06 ]

[Blue-eagle]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 16:02:
[...]

Als ik deze code gebruik dan wordt de achtergrond niet getoond. Heel gek het werkt alleen als ik het buiten het domein zet.

Niet getest, ik gebruik iets anders, maar er stond een haakje teveel, zo dan?

Cascading Stylesheet:

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

@-moz-document domain("http://tweakers.net/") {
    body {
        background: #B4B4B4 url("file:///V:/image12.gif") repeat-y center;
    }
}

[Verwijderd]

Blue-eagle schreef op vrijdag 19 oktober 2012 @ 16:10:
[...]

Niet getest, ik gebruik iets anders, maar er stond een haakje teveel, zo dan?

Cascading Stylesheet:

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

@-moz-document domain("http://tweakers.net/") {
    body {
        background: #B4B4B4 url("file:///V:/image12.gif") repeat-y center;
    }
}

Nope zo werkt het ook niet . Klopt in die andere stond een haakje te veel maar die had ik al weggehaald. Ik heb ook al !important; ervan gemaakt na 'center' en ook dat helpt niet. Heel vreemd misschien een bug in Stylish dan .

[Ramon]

het domein moet "tweakers.net" zijn. Zonder slashes en http enzo.

[Verwijderd]

Ramon schreef op vrijdag 19 oktober 2012 @ 16:24:
het domein moet "tweakers.net" zijn. Zonder slashes en http enzo.

Thanks het werkt.

Maar weer ff verder knutselen ik ben eigenlijk toch nog niet tevreden over de breedte. Het is eigenlijk te breed.

[ Voor 22% gewijzigd door Verwijderd op 19-10-2012 16:35 ]

[BlackEyedAngel]

Pascal schreef op vrijdag 19 oktober 2012 @ 14:24:
Zo ook maar even me CSS posten, via knip en plak werk en wat zoeken binnen de source.

[afbeelding]
http://pastebin.com/sgDZvRFA

Sweet

[Madrox]

Mooi, het begint erop te lijken Dank aan allen hier

Nu wil ik nog wat grijze vensters op de andere pagina's aanpakken, hoe doe ik dat het beste ?
Waar vind ik die labels?

Zo ziet de FP er nu uit:



Met floating tracker

[ Voor 30% gewijzigd door Madrox op 19-10-2012 16:49 ]

[Hero of Time]

Madrox schreef op vrijdag 19 oktober 2012 @ 16:48:
Mooi, het begint erop te lijken Dank aan allen hier

Nu wil ik nog wat grijze vensters op de andere pagina's aanpakken, hoe doe ik dat het beste ?
Waar vind ik die labels?

Zo ziet de FP er nu uit:

[afbeelding]

Leer nou dat voorbeeld en verstuur zijn omgedraaid

Ik gebruik Opera met Dragonfly om de CSS elementen te vinden die ik wil bewerken. Rechtermuisknop op een gedeelte, Inspect Element, hoppa, dat stukje wordt in de broncode weergegeven en aan de rechterkant heb je de CSS die er bij zit.

Denk dat Firefox Firebug extensie dat ook kan.

@ hieronder:
Dragonfly werkt precies hetzelfde. Klik op element en gaan, zodra je in DF zit. Komt netjes onder je pagina naar boven, is geen aparte tab oid. Werkt echt heerlijk.

[ Voor 10% gewijzigd door Hero of Time op 19-10-2012 16:57 ]

[Verwijderd]

Firebug voor FF werkt goed. Je kunt dan met de muis erop klikken om zo elementen te inspecteren .

[Hakker]

raar hier wil bij geen enkele de trackermenu in FF 16.0.1 werken

[Verwijderd]

Hakker schreef op vrijdag 19 oktober 2012 @ 16:53:
raar hier wil bij geen enkele de trackermenu in FF 16.0.1 werken

Tracker heeft te maken met de breedte van je scherm, volgens mij heb je minimaal 1920x of 1680x nodig.

[Hakker]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 16:54:
[...]

Tracker heeft te maken met de breedte van je scherm, volgens mij heb je minimaal 1920x of 1680x nodig.

Ik heb 1920x1200 dus dat kan het probleem dan niet echt zijn tenzij het ineens uber mega groot moet zijn

[Madrox]

Hero Of Time schreef op vrijdag 19 oktober 2012 @ 16:50:
[...]

Leer nou dat voorbeeld en verstuur zijn omgedraaid

Begrijp niet wat je wil zeggen hier

Ik gebruik Opera met Dragonfly om de CSS elementen te vinden die ik wil bewerken. Rechtermuisknop op een gedeelte, Inspect Element, hoppa, dat stukje wordt in de broncode weergegeven en aan de rechterkant heb je de CSS die er bij zit.

Denk dat Firefox Firebug extensie dat ook kan.

Bedoel je dat ik met die browsers de elementen makkelijk(er) kan vinden

Met de zalm look was er iig totaal geen kritiek geweest over knalled wit

Voor de liefhebbers, de code (v2):

spoiler: Zalmon-look

html
{
background: #FAEBD4;
}

#searchbar { display: none; }
.galleryHeadingContainer { display: none; }

#pricewatch, #jobs, #poll, #newsletter, #sponsored, #textlink, #social .twitterButton, #social .facebookButton {
background: none repeat scroll 0 0 #F9DCAF !important;
border: 1px solid #F9DCAF !important;
}

.popup.trackerPopup.fixed
{
margin-top: -20px;
margin-left: 20px;
position: fixed !IMPORTANT;
left: -26px !IMPORTANT;
top: 71px !IMPORTANT;
}

div#contentArea
{
padding-left: 20px;
padding-right: 20px;
background-image: linear-gradient(bottom, #FAEBD4 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -o-linear-gradient(bottom, #FAEBD4 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -moz-linear-gradient(bottom, #FAEBD4 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -webkit-linear-gradient(bottom, #FAEBD4 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -ms-linear-gradient(bottom, #FAEBD4 1%, #ABABAB 51%, #E0E0E0 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.01, #FAEBD4),
color-stop(0.51, #ABABAB),
color-stop(1, #E0E0E0)
);

}
#menubar { width: 1020px; height: 14px; margin-bottom: 40px; padding-bottom: 20px; }


.galleryHeadingContainer, .pageTabsContainer, .notificationsContainer
{
margin: 0 auto;
width: 1020px;
padding-top: 14px;
padding-bottom: 0px;
background: #FAEBD4;
}
.pageTabsContainer
{
border-bottom: 1px solid #FAEBD4;
}
#top
{
border-bottom: 0;
}

[ Voor 60% gewijzigd door Madrox op 19-10-2012 17:05 ]

[Verwijderd]

Madrox schreef op vrijdag 19 oktober 2012 @ 16:59:
[...]

Begrijp niet wat je wil zeggen hier


[...]

Bedoel je dat ik met die browsers de elementen makkelijk(er) kan vinden

Nee. Gebruik Firebug addon voor Firefox. Vervolgens kun je gemakkelijk elementen selecteren en zie je naast de html code ook de CSS code.

Links naast die 'bug' staat een blauwe pijl die kun je gebruiken om elementen te selecteren en te inspecteren. Onder zie je html en rechts zie je de CSS erbij. Vervolgens pas je de kleuren aan dit kun je in Firebug doen maar ook gewoon in Stylish of in een tekstbestand. Dit is bijvoorbeeld het element van de FP die ik je pas had gegeven. Vervolgens om het te laten werken in Stylish moet je van de ';' tekens !important; maken. Belangrijk je moet de boel wel kopiëren naar Stylish of een andere Custom CSS die je gebruikt. Als je de pagina vernieuwt zijn de wijzigingen in Firebug weer weg .

[ Voor 13% gewijzigd door Verwijderd op 19-10-2012 17:06 ]

[Verwijderd]

Het wordt al beter:



900px breed en geen scrollbalken op die breedte. Precies de helft van mijn 1080p scherm. Nu moet ik het nog voor elkaar krijgen dat de gerelateerde content niet ergens lullig onderin een hoek beland

[Chris7]

Phyxion schreef op vrijdag 19 oktober 2012 @ 14:15:
Vrij veel aangepast, comments @ frontpage zijn nog lelijk (als iemand suggesties heeft, let me know ):

[...]

Vrijwel precies wat ik ook wilde, één dingetje: door .forum_actions een float: left; mee te geven verdwijnt bij fora de optie 'Nieuw Topic'. Ik denk dat die wegvalt achter de dropdown links waarmee je op tijd kan filteren. Helaas zit de 'Reageer' knop weer onder de Quickreply als je de float weghaalt. Ik kon zo snel niet vinden hoe er voor te zorgen dat beide op de juiste plek staan.

[Madrox]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 17:03:
[...]

Nee. Gebruik Firebug addon voor Firefox. Vervolgens kun je gemakkelijk elementen selecteren en zie je naast de html code ook de CSS code.

En dan kan ik het gewoon in IE9 overnemen, via mijn voorkeuren hier op de site, toch ?

Links naast die 'bug' staat een blauwe pijl die kun je gebruiken om elementen te selecteren en te inspecteren. Onder zie je html en rechts zie je de CSS erbij. Vervolgens pas je de kleuren aan dit kun je in Firebug doen maar ook gewoon in Stylish of in een tekstbestand. Dit is bijvoorbeeld het element van de FP die ik je pas had gegeven. Vervolgens om het te laten werken in Stylish moet je van de ';' tekens !important; maken. Belangrijk je moet de boel wel kopiëren naar Stylish of een andere Custom CSS die je gebruikt. Als je de pagina vernieuwt zijn de wijzigingen in Firebug weer weg .
[afbeelding]

Gewoon meteen injecteren bij mijn voorkeur hier op de site werkt toch ook ?

[Verwijderd]

Madrox schreef op vrijdag 19 oktober 2012 @ 17:08:
[...]

En dan kan ik het gewoon in IE9 overnemen, via mijn voorkeuren hier op de site, toch ?


[...]

Gewoon meteen injecteren bij mijn voorkeur hier op de site werkt toch ook ?

Ja, gewoon zoals je de andere CSS code ook gebruikt . In IE weet ik niet hoe je gemakkelijk en overzichtelijk achter de CSS code komt.

[Chris7]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 17:03:
[...]

Nee. Gebruik Firebug addon voor Firefox. Vervolgens kun je gemakkelijk elementen selecteren en zie je naast de html code ook de CSS code.

Links naast die 'bug' staat een blauwe pijl die kun je gebruiken om elementen te selecteren en te inspecteren. Onder zie je html en rechts zie je de CSS erbij. Vervolgens pas je de kleuren aan dit kun je in Firebug doen maar ook gewoon in Stylish of in een tekstbestand. Dit is bijvoorbeeld het element van de FP die ik je pas had gegeven. Vervolgens om het te laten werken in Stylish moet je van de ';' tekens !important; maken. Belangrijk je moet de boel wel kopiëren naar Stylish of een andere Custom CSS die je gebruikt. Als je de pagina vernieuwt zijn de wijzigingen in Firebug weer weg .
[afbeelding]

Dat zit tegenwoordig grotendeels ook standaard al in Firefox onder Firefoxknop/menu Extra > Webontwikkelaar > Inspecteren.
Werkt ook prima en het handige is dat het in elke Fx-installatie zit.

[Madrox]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 17:09:
[...]

Ja, gewoon zoals je de andere CSS code ook gebruikt . In IE weet ik niet hoe je gemakkelijk en overzichtelijk achter de CSS code komt.

Dankje, ga ik Firefox even bestellen

[Verwijderd]

Chris7 schreef op vrijdag 19 oktober 2012 @ 17:10:
[...]


Dat zit tegenwoordig grotendeels ook standaard al in Firefox onder Firefoxknop/menu Extra > Webontwikkelaar > Inspecteren.
Werkt ook prima en het handige is dat het in elke Fx-installatie zit.

Even bekeken maar het spreekt niet zo voor zich als met Firebug. Ik kan ook niet 1,2,3 de CSS code van een geselecteerd element vinden.

[Verwijderd]

no?

[Raven]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 17:04:
Het wordt al beter:

[afbeelding]

900px breed en geen scrollbalken op die breedte. Precies de helft van mijn 1080p scherm. Nu moet ik het nog voor elkaar krijgen dat de gerelateerde content niet ergens lullig onderin een hoek beland

En als je nu ook laat zien hoe je het gedaan hebt?

[Verwijderd]

Ik twijfelde of ik de CSS zou posten. Maar het is nog in progress. Dus even wachten. o.a. bij tags komen er grafische glitches.

[Verwijderd]

Je hebt gelijk ik zie nu ook de knop stijl . Ik zei ook niet dat het niet bestond maar dat ik het niet 1,2,3 kon vinden .

[Chris7]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 17:15:
[...]

Even bekeken maar het spreekt niet zo voor zich als met Firebug. Ik kan ook niet 1,2,3 de CSS code van een geselecteerd element vinden.

^Wat Darkstone laat zien, ik zie gelijk de CSS en die tool is erg handig om die even te bekijken (en het aan te passen). En je kunt zaken als :hover en :active toepassen en daarvan de stijl bekijken.

[Saven]

css is niet heel netjes maarja gaat om het idee misschien dat ik er nog een beetje verder aan ga sleutelen. hij is in iedergeval niet meer zo licht enzo

Cascading Stylesheet:

.pageTabs ul li
{
background: #f5f5f5;
}

#layout
{
background: #fff url(http://i.imgur.com/Wj3m8.png);
}

li.more span, li.last span
{
font-size:0px;
}
h1, h2{
color: #444;
}
#menubar{ width: 1000px;
-webkit-box-shadow: 0px -5px 15px rgba(255, 255, 255, 0.12);
-moz-box-shadow:    0px -5px 15px rgba(255, 255, 255, 0.12);
box-shadow:         0px -5px 15px rgba(255, 255, 255, 0.12);
 }
#top{
background: #353535;
background: -moz-linear-gradient(top,  #353535 1%, #000000 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#353535), color-stop(51%,#000000));
background: -webkit-linear-gradient(top,  #353535 1%,#000000 51%);
background: -o-linear-gradient(top,  #353535 1%,#000000 51%);
background: -ms-linear-gradient(top,  #353535 1%,#000000 51%);
background: linear-gradient(to bottom,  #353535 1%,#000000 51%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#000000',GradientType=0 );

}

.eenReactie .topBorder
{
background: none;
}

.reactieFooter
{
padding-bottom: 15px;
}

.reactieContainer
{
border: 0px;
}

.reactie.last > .reactieContainer
{
border: 0px;
}

[Sando]

wontcachme schreef op vrijdag 19 oktober 2012 @ 09:26:
[afbeelding]

Met oa:

Dat ding is wel relaxed! Maar dat witte contentgeval schiet te ver door naar boven in Chromium.

Hier is een fix:

Cascading Stylesheet:

#contentArea{
    background-color:#FFFFFF;
    padding-left:5px;
    padding-top: 0;
    top: 6px;
}

[Sando]

Wow we zouden een overzicht moeten hebben van alle UserCSS, en de UserJS uit andere topics, en dat mensen hun eigen zaken op de zelfde locatie steeds aanpassen zodat we allemaal makkelijk updates kunnen terugvinden.

Met die bagger van Tweakers V7 is Tweakers net Linux geworden. Je moet het zelf in elkaar zetten anders ziet het er niet uit!

[Sando]

Voor Chrome/Chromium:

Meerdere styles beheren per site doe je met:
• Stylish (simpel doch zeer effectief)

GreaseMonkey-scripts op een compatibele manier beheren doe je met:
• TamperMonkey (netjes!)

[F.West98]

Hmmm
Custom CSS nu ook op forum!!

* F.West98 is bezig met dark versie ultimate

[ Voor 43% gewijzigd door F.West98 op 19-10-2012 18:11 ]

[Senaxx]

Nu ben heel erg content met mijn CSS maar ik heb nog 1 kleine bug. Bij de reacties zit nog een witregel. Dit wordt volgensmij veroorzaakt door een .png. Deze witregel wordt bij elke header van de reactie herhaald.

Voorbeeld:


Iemand een fix?

[ Voor 37% gewijzigd door Senaxx op 19-10-2012 18:19 ]

[wontcachme]

Sando schreef op vrijdag 19 oktober 2012 @ 17:51:
[...]

Dat ding is wel relaxed! Maar dat witte contentgeval schiet te ver door naar boven in Chromium.

Hier is een fix:

Cascading Stylesheet:

#contentArea{
    background-color:#FFFFFF;
    padding-left:5px;
    padding-top: 0;
    top: 6px;
}

Fixed

[Verwijderd]

Senaxx schreef op vrijdag 19 oktober 2012 @ 18:11:
Nu ben heel erg content met mijn CSS maar ik heb nog 1 kleine bug. Bij de reacties zit nog een witregel. Dit wordt volgensmij veroorzaakt door een .png. Deze witregel wordt bij elke header van de reactie herhaald.

Voorbeeld:
[afbeelding]

Iemand een fix?

Die heb ik ook maar volgens mij als je daar aan gaat pielen dan komen die streepjes die de comments met elkaar verbinden niet goed meer uit. Edit wat misschien kan is je eigen gif maken gelijk in de goede kleur zetten van je background en die dan laden op de plaats van het huidige lijntje.

[ Voor 9% gewijzigd door Verwijderd op 19-10-2012 18:20 ]

[Appel105]

Pascal schreef op vrijdag 19 oktober 2012 @ 14:24:
Zo ook maar even me CSS posten, via knip en plak werk en wat zoeken binnen de source.

[afbeelding]
http://pastebin.com/sgDZvRFA

Top! alleen dat gele icoontje is toch niet helemaal mijn smaak

[Sando]

wontcachme schreef op vrijdag 19 oktober 2012 @ 18:12:
[...]

Fixed

Cool. Kan je ook nog die margin fixen? Ik zou je een tip willen geven, maar try as I might, ik kan niet vinden waar ik dat aanpas..

Searchbar klopt ook niet bij in- en uitzoomen (grote of kleine monitor). Bij mijn vorige poging tot CSS was ie wel goed, maar we hebben dat beiden zo anders aangepakt dat ik ze niet zo goed kan mergen..

Jij (en iedereen met complete styles) zou je style op http://userstyles.org/ moeten zetten zodat iedereen met een stylish-extensie gewoon updates kan downloaden.



(Ja ik heb de breadcrumbs teruggehaald en de tracker aangepast, maar verder gebruik ik nu jouw css. )

Voor de liefhebber:

Cascading Stylesheet:

/* Tracker aansluiten */
.trackerPopup.fixed {
    width: 300px;
    position: absolute;
    top: 0;
    left: -336px !important;
    display: block;
}
/* Tracker lettertjes */
.trackerPopup .trackeritem li {
    padding: 1px 0 1px 0;
}

/* Achtergrondkleur ietsje lichter weer*/ 
body{
    background-color:#666666;
} 

F.West98 schreef op vrijdag 19 oktober 2012 @ 18:03:
Hmmm
Custom CSS nu ook op forum!!

* F.West98 is bezig met dark versie ultimate

Waarom is jouw berichtje zalmkleurig? Heb ik of wontcatchme perongeluk iets van jou geleend wat niet de bedoeling was?

[ Voor 37% gewijzigd door Sando op 19-10-2012 18:50 ]

[Senaxx]

Hierbij mijn css nogmaals hier zit nog wel de comment witte regel "bug" in, maar voor de rest is hij strak getrokken. Heb alle kleine foutjes zover mogelijk er uit gehaald. Deze werkt ook prima op het forum.




[code=css]
html {
background: #444444;
}
#layout {
background-color: #666;
min-width: 1714px;
}
#top {
border-bottom: 0;
}
a {
color: #000000;
text-decoration: none;
}
div#contentArea {
padding-top: 0px;
padding-left: 20px;
padding-right: 20px;
background: #F7F7F7;
}
.eenReactie, .reactie {
background: #F7F7F7;
}
#menubar {
width: 980px;
}
#searchbar {
margin: 34px auto 0 auto;
width: 1020px;
}
.galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
margin: 0 auto;
width: 1020px;
}
.pageTabsContainer {
border-bottom: 1px solid #C3C6C6;
}
table.highlights td {
line-height: 5px;
padding: 5px 5px;
}
#menubar {
width: 1024px;
border-radius: 6px 6px 0 0;
}
.articleColumn {
line-height: 1.4;
}
#socialButtons {
display: none !important;
}
div.resizewarning div {
display: none !important;
}
img.resized {
border: 2px #000000 !important;
display: block;
float: none;
}
#jobs_relations {
display: none;
}
p {
-webkit-margin-after: 0.5em;
}
#fpaItems .fpaItem {
height: 155px;
width: 160px;
margin-bottom: 0px;
}
#fpaItems {
margin-bottom: 0px;
}
#fpaItems .fpaItem div.imageContainer {
width: 160px;
height: 75px;
margin-bottom: 0px;
}
#fpaItems .fpaItem div.imageContainer img {
width: 160px;
height: 75px;
}
#fpaItems .fpaItem div.textContainer {
padding-bottom: 0px;
padding: 4px 2px 2px 2px;
height: 40px;
padding-top: 6px;
line-height: 15px;
text-align: center;
font-size: 12px;
}
#fp_tabs_container {
margin-bottom: 5px;
}
.secondColumn {
margin-top: -155px;
}
[/code=css]

[Hero of Time]

Madrox schreef op vrijdag 19 oktober 2012 @ 16:59:
[...]

Begrijp niet wat je wil zeggen hier

Wat ik bedoel te zeggen, is dat als je reageert, de helft er pas staat, je het dan door hebt dat je geen voorbeeld hebt, maar direct hebt gepost en dan je post nog eens bewerkt om het af te maken .

[...]

Bedoel je dat ik met die browsers de elementen makkelijk(er) kan vinden

Met de zalm look was er iig totaal geen kritiek geweest over knalled wit

Wel de definitie van de elementen die je zou willen wijzigen. Voor Firebug heb je al een mooie uitleg. Hier een shotje van Dragonfly, wat mijns inziens prettiger is omdat je ziet wat waar gedefinieerd is en wat overruled is.

[Joosie200]

wontcachme schreef op vrijdag 19 oktober 2012 @ 09:26:
[afbeelding]

Met oa:
- Higlight TS en eigen posts
- Donkere post headers
- Alles donkerder
- Forum breeder
- Notepad kleiner --> meer myreact ruimte
- Titels/headers blauw
- Irritante dingen (voor mij ) verwijderd
- En nog veel meer

Dank voor het delen, ik gebruik het nu naar tevredenheid Toch blijf ik met een ding wel zitten: is het niet mogelijk om de kleurrijke onderverdeling op het forum terug te brengen? Dus zoals je in layout v6 had, want ik vind het nu zo monotoom allemaal in dezelfde kleur staan.

[Yorinn]

Weet iemand hoe ik deze verder moet aanpassen?

code:

/* Laatst gereageerd in een topic dikdrukken  */ 
table.listing .topic a[title$="Yorin"] 
   { font-weight: bold; } 
   { background-color: #FF0000; }

De kleur van de background veranderd niet mee naar rood toe. Ik weet dat de kleur nu donkerrood is, maar dat kan ik zelf nog aanpassen naar mijn eigen wensen. De text wordt al wel dikgedrukt.

Hopelijk weet iemand het.

[Verwijderd]

Je hebt slechts één {} blok nodig voor X aantal rules.

[Yorinn]

Verwijderd schreef op vrijdag 19 oktober 2012 @ 19:06:
Je hebt slechts één {} blok nodig voor X aantal rules.

Merci, dat is hem ja.

En hoe kan ik de tekstkleur wijzigen? Met text-color en font-color werkt het niet.

[ Voor 18% gewijzigd door Yorinn op 19-10-2012 19:07 ]

[Verwijderd]

le google?

[Verwijderd]

Daar hebben we al een topic voor: [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[F.West98]

Yorin schreef op vrijdag 19 oktober 2012 @ 19:06:
[...]


Merci, dat is hem ja.

En hoe kan ik de tekstkleur wijzigen? Met text-color en font-color werkt het niet.

color:

[McBoom]

Bierkameel schreef op vrijdag 19 oktober 2012 @ 15:32:
http://userstyles.org/styles/76816/tweakers-old-background

Die is idd wel een aanrader als je de CSS plugin niet kan kopen

Die is bijna perfect.... Alleen de rode letters (topictitel) lijken een beetje off qua verhoudingen (lijken te hoog of te smal). Maar voor de rest...... Wat een rust aan de ogen

Verwijderd schreef op vrijdag 19 oktober 2012 @ 19:09:
Daar hebben we al een topic voor: [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

Als je het topic gewoon even gelezen had had je kunnen lezen dat iemand je al voor was geweest

Fiber schreef op vrijdag 19 oktober 2012 @ 15:43:
Waarom gaan we dit nou weer dubbel doen? Hier is al minstens één en waarschijnlijk al wel meer draadjes over...: [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[Slapstick]

In dat bovenstaande topic staat nog veel van Tweakers.net i.p.v. tweakers 7...

[kamstra]

alex3305 schreef op vrijdag 19 oktober 2012 @ 15:56:
Inmiddels al flink wat CSS werk gedaan. Zo heb ik het forum aan elkaar gelijmd. De achtergrondkleur wat donkerder gemaakt. Berichten en Reg. datum weer terug zichtbaar gemaakt bij alle users. Abo's duidelijker gemaakt en de frontpage wat gerestyled.

Zo bevalt het me een stuk beter :

Cascading Stylesheet:

SHITLOAD CODE

Misschien niet allemaal even netjes geordend. Maar het is in ieder geval iets .

Hulde! Dit is idd heel nice!

[Phyxion]

Phyxion schreef op vrijdag 19 oktober 2012 @ 14:15:
Vrij veel aangepast, comments @ frontpage zijn nog lelijk (als iemand suggesties heeft, let me know ):

Wat heb ik o.a. aangepast:
- Achtergrond kleur naar licht grijs.
- Reageer knop boven de Quickreply.
- Verstuur bericht en Bekijk bericht omgewisseld (en deze ook boven de smilies e.d. geplaatst).
- 1, 2, 3... [laatste] een makkelijker te klikken vak van gemaakt.
- Afstand tussen posts @ forum verkleind.
- Search bar naar boven geplaatst.
- Social media spul helemaal gehide.
- Text van de vier "uitgelicht" dingen op de frontpage wat verkleind, size hiervan ook aangepast.
- Nieuwsbrief gehide van de frontpage.
- Quickreply vak vergroot.

Wat ik nog wil aanpassen:
- Comments op frontpage.
- Iets meer verschil in contrast bij de "Pricewatch" en "IT Banen" bar aan de rechterkant.
- Iets meer verschil in contrast bij de "Nieuwe reactie" op het forum.

[afbeelding]

[afbeelding]

[afbeelding]

[afbeelding]

Inmiddels mijn laatste drie punten ook gefixed.


Hier en daar nog wat kleine probleempjes die ik nog even moet oplossen maar dat geloof ik eerst wel

[Yorinn]

Nog een laatste vraagje, ik krijg nu alleen de achtergrond van de tekst in een andere kleur, hoe kan ik die hele balk een andere kleur meegeven?

[Vaudtje]

Dood aan al die witruimte!
Er zijn nog bugs, maar nu kan ik tenminste sommige artikelen weer lezen zonder te scrollen...

Cascading Stylesheet:

.trackerPopup .trackeritem li {
    padding: 0 0 0 1px;
}
#trackerFixateLink {
  display:none;
}
.trackerPopup.fixed .close {
  display:none;
}
td, table.pwListTable td, table.pwListTable td.label {
  padding-top: 4px;
  padding-bottom: 3px;
}
table.highlights td {
  padding: 2px;
}
.articleColumn, .reactie {
  line-height: 1.0;
  background-color: #F8F8F8;
}
.reviewToc {
  line-height: 1.1;
}
#reacties > .spacer {
    margin: 0;
}
.eenReactie {
    margin-top: 0;
}
.relatedContent li {
    margin-bottom: 2px;
}
.reactieHeader {
  padding: 0;
}
h1, h2 {
  font-family: "Helvetica Bold", helvetica;
  font-weight: bold;
}
table.listing td {
    padding: 0;
}
#ScoreCardDiv ul li {
  padding-bottom: 0;
}
div.message, div.faq {
    line-height: 1;
    margin-bottom: 3px;
}

div.message div.post {
    padding: 3px 0 3px 14px;
}
div.message div.messageheader {
 background-color: #F5F6F6;
    padding-top: 3px;
    padding-bottom: 6px;
}
#fp_tabs_container, #fpaItems  {
    margin-bottom: 5px;
}
#contentArea {
  padding-top: 5px;
}
#community li {
  padding-top: 0;
  padding-bottom: 0;
}

[Rostvertol-Mil]

Voor mij zou een instelling om de regelgroote te verminderen alles al oplossen. Krijg hier echt scroll rsi van

[McBoom]

alex3305 schreef op vrijdag 19 oktober 2012 @ 15:56:
Inmiddels al flink wat CSS werk gedaan. Zo heb ik het forum aan elkaar gelijmd. De achtergrondkleur wat donkerder gemaakt. Berichten en Reg. datum weer terug zichtbaar gemaakt bij alle users. Abo's duidelijker gemaakt en de frontpage wat gerestyled.

Ik heb #fafafa vervangen door #a4a4a4 Vind ik persoonlijk wat lekkerder. De frontpage wordt daardoor wel wat donkerder in het geheel, maar zeker niet minder prettig

[alex3305]

McBoom schreef op vrijdag 19 oktober 2012 @ 19:49:
[...]

Ik heb #fafafa vervangen door #a4a4a4 Vind ik persoonlijk wat lekkerder. De frontpage wordt daardoor wel wat donkerder in het geheel, maar zeker niet minder prettig

Ook goed natuurlijk. Maar voor mij is zo het felle er al vanaf, en dat helpt gruwelijk . Bedankt voor de complimenten natuurlijk

Momenteel ben ik nog bezig met de reacties op de FP. Om deze meer forum-like te maken. Als deze klaar zijn zal ik deze hier posten .

[Verwijderd]

Meest zinvolle css:

code:

#contentArea {display: none !important; }

Toch alleenmaar onzin geblaat hier op tweakers

[wontcachme]

Joosie200 schreef op vrijdag 19 oktober 2012 @ 19:01:
[...]


Dank voor het delen, ik gebruik het nu naar tevredenheid Toch blijf ik met een ding wel zitten: is het niet mogelijk om de kleurrijke onderverdeling op het forum terug te brengen? Dus zoals je in layout v6 had, want ik vind het nu zo monotoom allemaal in dezelfde kleur staan.

Geen flauw idee hoe dat zou moeten. Dat kan je beter aan Wiethoofd vragen. Ik heb voor gisteren nog nooit CS gebruikt, dus ik doe nog de simpele dingen

[F.West98]

Nee dat is niet mogelijk
De code daarvoor is weggehaald. Dacht ik

[Standeman]

Ik ben even in overleg wat er moet gaan gebeuren in dit topic, want:

a) het is zonde om dit HK-only te houden
b) pas beter in SG of zelfs /13
c) wordt misscien gemerged met [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?' ofzoiets...

Ik zal later even een update geven (of jullie merken het wel )

[ Voor 11% gewijzigd door Standeman op 19-10-2012 20:14 ]

[Blue-eagle]

Sando schreef op vrijdag 19 oktober 2012 @ 18:41:
[...]

Jij (en iedereen met complete styles) zou je style op http://userstyles.org/ moeten zetten zodat iedereen met een stylish-extensie gewoon updates kan downloaden.

Tweakers.net 7 black: http://userstyles.org/styles/76887/tweakers-7-black

Zoiets?

Weet niet hoe compatible dit convert tussen Chrome en Firefox. Deel het alleen maar zodat mensen het zelf ook kunnen oppakken

[ Voor 4% gewijzigd door Blue-eagle op 19-10-2012 20:17 ]

[filenox]

/13 lijkt me niet echt een gepaste plek voor dit soort topics, SG lijkt me dan beter.

[Infinchible]

Blue-eagle schreef op vrijdag 19 oktober 2012 @ 20:15:
[...]


[afbeelding]

Tweakers.net 7 black: http://userstyles.org/styles/76887/tweakers-7-black

Zoiets?

Weet niet hoe compatible dit convert tussen Chrome en Firefox. Deel het alleen maar zodat mensen het zelf ook kunnen oppakken

Thanks! Ik vind hem er erg netjes uitzien! Heb hem geïnstalleerd via Stylish en dat werkt gewoon goed. Stuk beter zo met dat donkere!

Edit: Wel het idee dat er nu een klein beetje 'lag' zit in het scrollen. Op zich niet erg, maar je merkt het wel iets. Ook geen idee of dat aan de css ligt of aan de addon voor Chrome.

[ Voor 14% gewijzigd door Infinchible op 19-10-2012 20:26 ]

[Asgaro]

Wow, van een actief topic gesproken.

Ik heb uit het assortiment van CSS files hier reeds een favoriet gekozen en daar maak ik nu tevreden gebruik van!
Maar ik vroeg me af: is het mogelijk om via CSS het comments-systeem onder artikels wat compacter te maken?

[kKaltUu]

Inderdaad, waarom dit dubbelop doen terwijl wiethoofd en fwest al een topic hiervoor hebben die uitgebreid kan worden voor de nieuwe layout?

[Zartok]

Asgaro schreef op vrijdag 19 oktober 2012 @ 20:23:
Wow, van een actief topic gesproken.

Ik heb uit het assortiment van CSS files hier reeds een favoriet gekozen en daar maak ik nu tevreden gebruik van!
Maar ik vroeg me af: is het mogelijk om via CSS het comments-systeem onder artikels wat compacter te maken?

Ja dat is tot op zekere hoogte zeker mogelijk en dat heb ik in mijn stijl dan ook gedaan. Ik ben hem nu aan het testen en zal hem binnen een uurtje denk ik hier posten als de meeste vervelende bugs eruit zijn. Je kan hier een oude versie vinden: Zartok in "[bug] Pagina's te wit!" .

[F.West98]

Menu verbeterd
Nu wordt het forum knopje uitgebreid. Onhover of onclick wordt de rest getoond (net zoals 'meer'):

JavaScript:

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

vervang op regel 13 "hover" voor "click" als je het wil laten openen onclick

nog wat css:

Cascading Stylesheet:

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

[ Voor 8% gewijzigd door F.West98 op 19-10-2012 21:23 ]

[Bestla]

alex3305 schreef op vrijdag 19 oktober 2012 @ 15:56:
Berg werk maar Prima Donna
[/code]

Misschien niet allemaal even netjes geordend. Maar het is in ieder geval iets .

Ik vind hem zeer netjes, mijn dank.

Woei Abo's Nicks zijn blauw, I'm blue dabbadi......

[ Voor 8% gewijzigd door Bestla op 19-10-2012 20:51 ]

[Soul__assasin]

alex3305 schreef op vrijdag 19 oktober 2012 @ 15:56:
Inmiddels al flink wat CSS werk gedaan. Zo heb ik het forum aan elkaar gelijmd. De achtergrondkleur wat donkerder gemaakt. Berichten en Reg. datum weer terug zichtbaar gemaakt bij alle users. Abo's duidelijker gemaakt en de frontpage wat gerestyled.

Zo bevalt het me een stuk beter :

Cascading Stylesheet:

Coole code

Misschien niet allemaal even netjes geordend. Maar het is in ieder geval iets .

ik heb hem alvast in gebruik... het felle wit dat weg is kijkt al wat makkelijker weg

[Hero of Time]

Nnoitra schreef op vrijdag 19 oktober 2012 @ 12:41:
[...]


[...]

Daar gaat Hero Of Time ook mee aan de gang; Hero Of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Ja, zou ik wat mee gaan doen. Heb er nu 2 uur in gestoken, gaat niet lukken. Ik kan 'm niet neerzetten met CSS, want het is o.a. geregeld via javascript. Dat ken ik ook niet en is een drama om uit te pluizen zoals 't hier gebruikt wordt. Apache2 maakt er een grote tering bende van. Op de server zal het als bestand prima leesbaar zijn, maar zodra je 'm download, is 't dat niet meer.

Dus, ik ga aan mijn eigen CSS werken.

F.West98 schreef op vrijdag 19 oktober 2012 @ 11:51:
Damn wat een boel reacties
Vanmiddag heel snel aannde slag met een dark pack.

Dat is mijn dark style? Of wil je toch nog wel wat 'wit' behouden?

[F.West98]

Ik kan mijn topic TS best leeghalen hoor... En de nieuwe dingen erin zetten. Ik snap de nut van dit topic niet helemaal

@plekdiscussie: na een lange discussie is besloten voor SG voor mijn oude topic

[ Voor 25% gewijzigd door F.West98 op 19-10-2012 21:12 ]

[F.West98]

Ik ga een totale dark versie maken, zoals mijn oude (die nooit af was, forum nog niet bijv). Worden 3 aparte

[Hero of Time]

En dat is de mijne niet? Heb je m'n CSS geprobeerd en m'n shotjes gezien? Donkerder krijg je 'm haast niet. Nouja, krijg je wel door mijn missende onderdelen nog te verven .

[F.West98]

Ja, gezien. Maar ik maak een grijzige. Naja anders dan de jouwe, alles omvattend met meerdere tweaks enzo. Duurt een week+.

[Xesxen]

Ondertussen ben ik ook weer tevreden





(Ohja, henk is leuk )

[Nnoitra]

Hero Of Time schreef op vrijdag 19 oktober 2012 @ 21:08:
[...]

Ja, zou ik wat mee gaan doen. Heb er nu 2 uur in gestoken, gaat niet lukken. Ik kan 'm niet neerzetten met CSS, want het is o.a. geregeld via javascript. Dat ken ik ook niet en is een drama om uit te pluizen zoals 't hier gebruikt wordt. Apache2 maakt er een grote tering bende van. Op de server zal het als bestand prima leesbaar zijn, maar zodra je 'm download, is 't dat niet meer.

Dus, ik ga aan mijn eigen CSS werken.

Oh well.. Thx for trying in iedergeval!
Overigens heb ik ergens gelezen dat de devvers een poging gaan doen om de tracker bij lagere resoluties op het scherm te houden

Succes met je CSS!

[The-Source]

Xesxen schreef op vrijdag 19 oktober 2012 @ 21:20:
Ondertussen ben ik ook weer tevreden

[afbeelding]
[afbeelding]
[afbeelding]

(Ohja, henk is leuk )

En heb je de css daar ook van?

[Zartok]

Bij deze dan mijn stijl, hij is deels geinspireerd op een stijl van Ethelind, maar die vond ik veel te donker. De key-features van de stijl:

• Zo min mogelijk aangepast aan de positionering (ik wil niet alles overhoop gooien), maar wel een fixed breedte van de content, zodat de content efficient blijft staan en niet beweegt bij resizen (breedte = 1020px).
• Meer duidelijkheid, weg met die witte achtergrond waarin alles wegviel en wat kleur aanpassingen her en der die in mijn ogen de stijl beter tot zijn recht doen komen.
• Content dichtheid verhogen, meer koppen/topics/reacties/etc in een blik te zien. Niet te overdreven, maar zodanig dat de nieuwe layout beter tot zijn recht komt.

Wat zijn er nog voor bugs, danwel minpunten:

• Op deze pagina staan de vacatures bovenaan niet goed
• Ik ben niet tevreden met de layout van de zijbalk naast een artikel (gerelateerde content ed)
• De 'verwijder selectie' button bij bookmarks staat raar naar links
• Tevens hebben bij de bookmarks enkele topics een dubbele hoogte omdat ze veel reacties hebben (it's not a bug it's a feature?)
• Ik gebruik de tracker niet, maar die overlapt aan de rechterkant het content gedeelte

Voorbeeldjes

FP	reacties
Fora	Stuffis Genralis
Topic

Klik = groot

Code

Cascading Stylesheet:

/* Breedte aanpassingen*/
#searchbar {
  margin: 34px auto 0 auto;
  width: 1020px;
}
#bottom div.hr,
.pageTabsContainer,
.galleryHeadingContainer {
    width: 1020px;
    margin: 0px auto 0 auto;
}
#contentArea{
    width: 980px;
    padding: 20px 20px 180px 20px;
    background-color: #ffffff; 
}
#menubar { width: 982px; }
#fp_tabs_container,
#forum_tabs {
    margin-left: -20px;
    margin-right: -20px;
}
#footer{ margin-right: 20px; }

/*Achtergrondkleur minder licht*/
#layout { background-color: #dcdddd; }

/*FP reacties, ruimte correcties, duidelijke header en mod opmaak*/
.eenReactie { margin-top: 5px; width: 600px; }
.reactieContent { padding: 5px 15px 5px 0px; }
.reactieHeader {
    padding: 1px 0px 1px 15px;
    background-color: #E7E8E8;
    margin-left: -20px;
}
.reactieBody.hidden .reactieHeader {
    padding: 0px 10px;
    opacity: 0.35;
}
.reactieBody.informative, 
.reactieBody.informative .reactieHeader {
    background-color: #EFFFE2;
    border-left: 1px solid #CFD4C9;
}
.reactieBody.spotlight, 
.reactieBody.spotlight .reactieHeader {
    background-color: #D8FFC2;
    border-left: 1px solid #BECFBE;
}

/*FP hoogte en kleur nieuwsitems*/
table.highlights td { line-height: 0px; padding: 5px 8px; }
.frontPageLink { color: #212323; text-decoration: none; }
.frontPageLink:visited { color: #B9133c; }

/*Forum gedeelte, lage (dunne) regels*/
table.listing td, 
table.listing th { padding: 1px 5px; }

[Caelorum]

Iemand hier vroeg of er commentaar bij de CSS kon worden geplaatst. Bij deze mijn Custom Stylesheet. Het is bijna af. Ik heb er alleen een lelijke oplossing inzitten voor de zoekbalk. Werkt perfect op mijn scherm met deze resolutie, maar een iets andere resolutie geeft een iets lelijker resultaat. De zoekbalk blijft namelijk altijd links in de browser uitgelijnd. Ik ga denk ik morgen eens kijken hoe ik het op die mooie plek kan krijgen zonder dat ongewenste gedrag

FrontPage:

Forum:


Code:

Cascading Stylesheet:

/* lijst van nieuwsitems op de frontpage compacter maken */
.highlights tbody tr td { padding-top: 3px; padding-bottom: 3px;}
.fpItem h2 { margin-bottom: 5px; }
.fpItem table.highlights { margin-bottom: 8px;}

/* witruimte rondom main content area weghalen (schuift het iets omhoog en zorgt ervoor dat de footer een behoorlijk stuk omhoog schuift) */
#contentArea { padding-top: 0px; padding-bottom: 80px;}

/* Grootte van uitgelichte items met plaatjes verkleinen (tot ongeveer 1/4e van de oorspronkelijke grootte)  */
#fpaItems { margin-bottom: 0px; }
#fpaItems .fpaItem { height: 150px; width: 150px; }
#fpaItems .fpaItem div.imageContainer { width: 150px; height: 75px; }
#fpaItems .fpaItem div.imageContainer img { width: 150px; height: 75px; }
#fpaItems .fpaItem div.textContainer { padding-bottom: 0px; overflow: hidden; line-height: 15px; }
#fpaItems .fpaItem div.textContainer:hover { padding-bottom: 0px; overflow: visible;}

/* witruimte verminderen onder tabs op frontpage */
#fp_tabs_container { margin-bottom: 5px; }

/* lijst in tracker compacter maken */
#trackerContent .trackeritem li { padding-bottom: 2px; padding-top: 2px; }

/* rechter kolom op frontpage naar boven schuiven zodat deze aansluit bij de tabs (in de ruimte waar eerst de uitgelichte items met plaatjes zat) */
.secondColumn { margin-top: -150px; }

/* zorgen dat de trackerPopup weer aansluit */
div.trackerPopup { margin-top: 22px; }

/* DIRRRRTY: verplaatsen van zoekveld naar lege ruimte links van het menu en boven de tracker  */
#mainSearch { margin-left: 0px; margin-right: 0px; }
#mainSearch.keywordSearch { width: 277px; margin-left: 12px;}
#mainSearch.keywordSearch input.text { width: 220px; }
#searchbar { height: 20px; background: #ffffff; }
#search { float: left; width: 304px; }
#true , #streamone { display: none; } /* TODO: manier vinden om deze weer te geven zonder dat het zoekveld kapot gaat */
.mainSearchSuggest { z-index: 1000; }

/* header iets naar beneden plaatsen bij nieuwsartikelen zodat deze strakker aansluit bij de rest van de site */
#header { margin-top: 5px;  height: 32px; }

/* border van bovenkant weghalen */
#top { border: 0px; }

/* footer van site een stuk compacter maken */
#bottom, #about { height: auto; }
#about p { float: left;  margin-top: 6px; margin-left: 12px; }
#about p:first-child { margin-top: 6px; margin-left: 0px; }

/* ruimte tussen boxes in de rechterkolom op de frontpage verminderen  */
.secondColumn .fpItem { margin-top: 6px; margin-bottom: 6px; }

/* tabs compacter maken */
.pageTabs ul { margin-left: -5px; }
.pageTabs li { margin-right: 5px; }

/* loze witruimte verminderen in forumoverzichtlijst */
div.forumList table.listing { margin-bottom: 6px; }
table.listing td, table.listing th { padding-top: 4px; padding-bottom: 4px; }

/* loze witruimte verminderen bij posts op het forum */
#messages .message { margin-bottom: 6px;}
div.message div.messageheader, div.message div.post { padding-top: 6px; padding-bottom: 6px; }

/* kruisje, fixeer links link en knop voor tracker verwijderen zodat de tracker niet persongeluk wordt verborgen */
.fixed.trackerPopup .close, #trackerFixateLink, #menu li a#trackerPopupButton { display: none; }

/* ruimte tussen items in "Uit de Community"-box op de frontpage verminderen */
#community ul li { padding-top: 3px;  padding-bottom: 3px;}

/* ruimte tussen items in "Pricewatch"-box op de frontpage verminderen  */
#pricewatch  { margin-top: 0px; }
#pricewatch ul li a { width: auto; height: auto; }
#pricewatch ul li a img { width: 30px; height: 25px; }
#pricewatch ul li p.title { margin-top: 0px; margin-bottom: 0px; margin-right: 8px; clear: right; }
#pricewatch ul li ul.bulletSeparatedList { float: left; }

/* ruimte tussen items in "Gesponsorde acties op Tweakers"-box op de frontpage verminderen */
#sponsored li { padding-top: 4px;}
#sponsored li a.thumb, #sponsered li p { margin-bottom: 4px;}

/* witruimte tussen items in lijst aan de rechterkant van de frontpage verminderen */
#contentArea .secondColumn .fpItem { padding-top: 6px; padding-bottom: 6px; }

/* reacties minder hoog maken (loze witruimte verminderen) */
div.reactieHeader { padding-top: 6px; padding-bottom: 6px; }
div.eenReactie { margin-top: 0px; }

[_eXistenZ_]

Hier gaattie ook lekker:





Ik ben begonnen met een blank sheet, maar natuurlijk geinspireerd door wat ik hier gezien heb.
Alles is d.m.v. CSS aangepast, er komt geen JS aan te pas.
Binnenkort te downloaden als userscript! (ook al gebruik ik alleen CSS, ik heb geen zin in greasemonkey én userstyles in men Firefox.)

[Verwijderd]

Misschien is deze suggestie al eerder gepost, maar een optie om zelf te kunnen kiezen uit meerdere "background" kleuren zou erg gewenst zijn, met meerdere bedoel ik dus niet één regenboog, maar bijvoorbeeld WIT, GRIJS, DONKERGROEN, ZWART etc, of zelfs een dim functie mocht je een product video review willen bekijken ( niet in fullscreen )


PS: Persoonlijk zou als ik zou kunnen kiezen, voor het ontwerp van Caelorum of BLUE-EAGLE gaan, enigszins in de oude vertrouwde stijl, maar toch iets moderner.


Afzender een NOOB op gebied van CSS/HTML etc.

[Fish]

klaasbram schreef op vrijdag 19 oktober 2012 @ 21:27:
[...]

En heb je de css daar ook van?

idd ook iintrested here

[NielsNL]

Ik ben ook lekker bezig geweest al zeg ik het zelf, alles wat compacter gemaakt.
En donkerdere achtergrond.

[thof]

Zartok schreef op vrijdag 19 oktober 2012 @ 21:30:
Bij deze dan mijn stijl, hij is deels geinspireerd op een stijl van Ethelind, maar die vond ik veel te donker. De key-features van de stijl:

• Zo min mogelijk aangepast aan de positionering (ik wil niet alles overhoop gooien), maar wel een fixed breedte van de content, zodat de content efficient blijft staan en niet beweegt bij resizen (breedte = 1020px).
• Meer duidelijkheid, weg met die witte achtergrond waarin alles wegviel en wat kleur aanpassingen her en der die in mijn ogen de stijl beter tot zijn recht doen komen.
• Content dichtheid verhogen, meer koppen/topics/reacties/etc in een blik te zien. Niet te overdreven, maar zodanig dat de nieuwe layout beter tot zijn recht komt.

Wat zijn er nog voor bugs, danwel minpunten:

• Op deze pagina staan de vacatures bovenaan niet goed
• Ik ben niet tevreden met de layout van de zijbalk naast een artikel (gerelateerde content ed)
• De 'verwijder selectie' button bij bookmarks staat raar naar links
• Tevens hebben bij de bookmarks enkele topics een dubbele hoogte omdat ze veel reacties hebben (it's not a bug it's a feature?)
• Ik gebruik de tracker niet, maar die overlapt aan de rechterkant het content gedeelte

Voorbeeldjes

FP [afbeelding]	reacties [afbeelding]
Fora [afbeelding]	Stuffis Genralis [afbeelding]
Topic [afbeelding]

Klik = groot

Code

Cascading Stylesheet:

/* Breedte aanpassingen*/
#searchbar {
  margin: 34px auto 0 auto;
  width: 1020px;
}
#bottom div.hr,
.pageTabsContainer,
.galleryHeadingContainer {
    width: 1020px;
    margin: 0px auto 0 auto;
}
#contentArea{
    width: 980px;
    padding: 20px 20px 180px 20px;
    background-color: #ffffff; 
}
#menubar { width: 982px; }
#fp_tabs_container,
#forum_tabs {
    margin-left: -20px;
    margin-right: -20px;
}
#footer{ margin-right: 20px; }

/*Achtergrondkleur minder licht*/
#layout { background-color: #dcdddd; }

/*FP reacties, ruimte correcties, duidelijke header en mod opmaak*/
.eenReactie { margin-top: 5px; width: 600px; }
.reactieContent { padding: 5px 15px 5px 0px; }
.reactieHeader {
    padding: 1px 0px 1px 15px;
    background-color: #E7E8E8;
    margin-left: -20px;
}
.reactieBody.hidden .reactieHeader {
    padding: 0px 10px;
    opacity: 0.35;
}
.reactieBody.informative, 
.reactieBody.informative .reactieHeader {
    background-color: #EFFFE2;
    border-left: 1px solid #CFD4C9;
}
.reactieBody.spotlight, 
.reactieBody.spotlight .reactieHeader {
    background-color: #D8FFC2;
    border-left: 1px solid #BECFBE;
}

/*FP hoogte en kleur nieuwsitems*/
table.highlights td { line-height: 0px; padding: 5px 8px; }
.frontPageLink { color: #212323; text-decoration: none; }
.frontPageLink:visited { color: #B9133c; }

/*Forum gedeelte, lage (dunne) regels*/
table.listing td, 
table.listing th { padding: 1px 5px; }

Ik vind hem er zeer netjes uit zien, alleen die tracker valt er nog een beetje buiten / niet passend. Misschien dat je daar nog eens een keer naar kunt kijken? Heb zo 1,2,3 helaas nog geen suggestie

[Sando]

Blue-eagle schreef op vrijdag 19 oktober 2012 @ 20:15:
[...]


[afbeelding]

Tweakers.net 7 black: http://userstyles.org/styles/76887/tweakers-7-black

Zoiets?

Weet niet hoe compatible dit convert tussen Chrome en Firefox. Deel het alleen maar zodat mensen het zelf ook kunnen oppakken

Die is ook mooi! ik zou daar wel een beetje van willen jatten..
Alles wat ik van iedereen jat wat ik bij elkaar stop ook maar even hier neergezet:
http://userstyles.org/styles/76897/

[tweaker2010]

Blue-eagle schreef op vrijdag 19 oktober 2012 @ 20:15:
[...]
Tweakers.net 7 black: http://userstyles.org/styles/76887/tweakers-7-black

Zoiets?

Weet niet hoe compatible dit convert tussen Chrome en Firefox. Deel het alleen maar zodat mensen het zelf ook kunnen oppakken

Nice! Heb hem gelijk ingesteld op Chrome! Ziet er erg goed uit en die zwarte achtergrond leest erg prettig.

[F.West98]

Kan men even stoppen met de eigen versie dumpen? Het wordt onoverzichtelijk zo en uiteindelijk heeft niet echt iedereen er wat aan.
Ik ben nu bezig met het opnieuw opbouwen van de TS, daar komen alle nieuwe dingen in en kan iedereen een eigen ding ophalen.

Alles lijkt zoveel op elkaar en dit topic wordt overspoeld

[Sando]

verzamel CSS styles topic is verzamel CSS styles topic.

[F.West98]

Ja, maar tot nu toe allemaal unieke dingen, die echt iets toevoegen. Dat was de bedoeling. Nu wordt het een dumpplek van je eigen collectie van andermans ideeën. Dat kunnen anderen ook zelf wel.

En een verzameling is pas leuk als er niet 1 ding in zit wat 100 keer dubbel is

[Verwijderd]

@F.West98
Sommige mensen dumpen hun eigen versie maar daar zitten toch weer nieuwe leuke dingen in. Dus laat mensen het maar dumpen. Dan kun je zelf kijken wat je in je eigen versie wilt gebruiken toch .

[Tsurany]

Dus enkel wanneer het jou "seal of approval" heeft met betrekking tot uniek zijn mag je het hier posten? Beetje arrogantie ten top.

[Xesxen]

klaasbram schreef op vrijdag 19 oktober 2012 @ 21:27:
[...]

En heb je de css daar ook van?

fish schreef op vrijdag 19 oktober 2012 @ 22:13:
[...]

idd ook iintrested here

Die is nog een rommel van >250 regels...

_eXistenZ_ schreef op vrijdag 19 oktober 2012 @ 21:54:
[afbeelding]

Leuk gedaan (dadelijk even mijn template aanpassen)

[Nnoitra]

Eigenlijk moet je de Devvers de huid vol gaan schelden!

Als de Devvers gewoon een fatsoenlijke frontpage en forum ontworpen zouden hebben, dan was er in dit topic niets aan de hand geweest!

[F.West98]

Neeee. Zo bedoel ik het niet.
Ik bedoel van. Iedereen zet nu zijn eigen versie erop, die nauwelijks verschilt met die van anderen. Komt op hetzelfde neer. Mijn doel van dit topic was dat je echt leuke toevoegingen neerzet.
Veel dingen (ik zet niet alle!!) komen op hetzelfde neer.

@ChicaneBT: Inderdaad, als je dan die nieuwe dingen post blijft het leuk. Maar de al bekende 100 regels code hoeven niet nogmaals. Wordt het niet duidelijker op
@Tsurany: Helemaal niet. Iedereen mag het posten, maar dit is 13 in een dozijn en het is al bekend. Dit motiveert mij ook niet om de TS op orde te houden
En je mag best iets bekends neerzetten, maar zorg er dan voor dat het overzichtelijk blijft. Dit is teveel van hetzelfde.

Er zijn genoeg verschillen, die mag je ook posten. Maar veel dingen zijn enkel background andere kleur. Post dat liever niet nogmaals, kennen we al.

@Nnoitra
Inderdaad, in de testperiode hoorde ik waren er al veel mensen die erover klaagden maar het is blijkbaar niet meegenomen

[ Voor 7% gewijzigd door F.West98 op 19-10-2012 22:46 ]

[Sando]

Eigenlijk heeft West wel een beetje gelijk. Ik dump mijn toevoegingen aan andermans code ook alleen maar omdat het aso is om andermans truukjes te gebruiken en je eigen toegevoegde truukjes niet terug te delen.

Maargoed, als iedereen nu eens met http://userstyles.org/ ging werken, dan hoefden we niet steeds code te plempem en kon iedereen automatisch elkaars updates downloaden.

[Madrox]

Dat is nu juist een probleem lijkt me, ik wil niet automatisch alle updates. Zo heb ik die hele zoekbalk eruit gesloopt, met dank aan sommigen hier en die wil ik echt niet terug zien

Zou wel handig zijn om het in elementen op te splitsen en die te rangschikken.

[ Voor 18% gewijzigd door Madrox op 19-10-2012 22:51 ]

[Stukfruit]

Ik vind het eigenlijk wel stoer dat iedereen z'n ding post

Als CSS-noob is dat wel handig ook

[F.West98]

Kijk en die mag je best neerzetten, maar dan liever niet met de al 100 keer voorbij gekomen bgcolor. Die: "ik heb nu dit blabla [7screens][100regelsCSS]" is niet echt heel interessant

@Stukfruit, als echte tweaker kan je wel plakken en knippen