Kleine Tracker ook op hoge resoluties

[Bubblewrap]

Voor alle geïnteresseerden, ik vind de nieuwe tracker helemaal geweldig maar op grote resolutie vind ik hem te groot. Op kleine resolutie past de tracker zijn ontwerp aan naar een mooi kleiner modelletje. Deze wilde ik ook graag zo zien op grotere resoluties. Ook boeien de tijden van de artikelen mij niet zo omdat het immers altijd de (in mijn geval 5) meest recente artikelen zijn.

Nu biedt Tweakers de mooie functionaliteit om je eigen .css regeltjes toe te voegen aan het ontwerp (eerst deze optie kopen in de Karmastore) en zodoende heb ik de kleine Tracker ook op grote resolutie gerealiseerd (met de originele regels van de Tweakers devvs.)

Wie dit ook wil moet even bij zijn profiel voorkeuren de volgende regeltjes .css in het daarvoor bestemde vak plaatsen:

Cascading Stylesheet:

/* Verwijderen van publicatie tijd van artikelen */
#tracker .trackeritem li .time {display:none!important;}

/* Tracker links = 5% - Tracker rechts = 15% */
#contentArea {margin-left: 5%;}

/* Opmaak voor kleine Tracker */
 #tracker{left:-230px;width:236px}
body.trackerVisible{margin-left:236px}
body.trackerRight.trackerVisible{margin-right:236px}
body.trackerScroll #tracker{left:-236px}
.trackerScroll.trackerRight.trackerVisible #tracker,.trackerRight.trackerVisible #trackerStretch{right:-236px}
.trackerRight.trackerVisible #tracker, #trackerContentContainer{width:236px}
 #trackerHeader{width:202px}
 #trackerHeader h4{padding-left:0;background:0}
 #trackerContent, #trackerSettings, #trackerSettings table{width:209px}

Toelichting:
Verwijder de 1e regel als je toch de publicatie tijden wilt zien van de artikelen.
De 2e regel zorgt ervoor dat de site weer enigszins in het midden wordt uitgelijnd, mits je de Tracker aan de linkerkant weergeeft zoals ik dat doe.)
Heb je de Tracker liever aan de rechterkant, verander dan in de 2e regel de 5% naar 15%.
De rest gaat over het kleine model van de Tracker.

[ Voor 7% gewijzigd door RobIII op 05-12-2012 12:07 . Reden: code tags toegevoegd ]

[RobIII]

Sorry, maar dit hoort niet in WEB (zie ook Waar hoort mijn topic?). Ik denk dat je dit beter in een tweakblog oid. kunt zetten.

Even een momentje, ik ga even kijken of een topicmove zinnig is.
Ik zal 't voorlopig even parkeren in LA (hoewel t' daar ook niet echt hoort, maar er hebben meer dergelijke topics gestaan).

[ Voor 33% gewijzigd door RobIII op 05-12-2012 11:00 ]

[Bubblewrap]

Dankjewel, ik heb ook gekeken waar ik hem zou plaatsen maar er is niet echt iets wat hierop aansluit... Niet echt Tweakers heh!?

[Misha]

Cool! Tof gedaan. Ff gecheckt. Jammer dat de footer alleen nu een gat heeft

[Bubblewrap]

Inderdaad, was me nog niet opgevallen! Bedankt voor het opmerken hiervan. Om het zelfde resultaat te behalen en het ontwerp van Tweakers intact te laten wijzig het volgende:

verwijder: #layout {margin-left: -50px;}
voeg toe: #contentArea {margin-left: 50px;}

Originele bericht aangepast met deze wijziging!

[DarkShadow16]

Misschien beter om dat in dit topic te plaatsen?
[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[Misha]

Ah nu sluit ie mooi aan Nog wat; als je de tracker weer inklapt blijft de site wel links of rechts staan niet dat ik zou weten waarom iemand de tracker zou uitzetten als ie hem gebruikt, maar toch

[Bubblewrap]

Je hebt geen toegang tot dit forum

Je hebt geen toegang tot Stuffis Generalis (SG). Toegang tot Stuffis Generalis krijg je automatisch wanneer je langer dan 30 dagen geregistreerd bent en meer dan 50 posts hebt gemaakt op het forum.

@Misha, dat klopt inderdaad. Ik kan (voor zover ik weet) met css alleen niet nagaan of iemand de Tracker aan of uit heeft staan en daarop aangepaste css tevoorschijn halen.

Het is ook meer voor eigen gebruik en ik wou het delen met de community omdat ik denk dat niet iedereen dit zelf kan maar er misschien wel behoefte aan is.

Edit: Originele bericht weer aangepast voor mensen die willen kiezen tussen Tracker links of rechts.

/* Tracker links = 5% - Tracker rechts = 15% */
#contentArea {margin-left: 5%;}

[ Voor 52% gewijzigd door Bubblewrap op 05-12-2012 11:56 ]

[RobIII]

Ik heb je startpost even voorzien van code tags

[Nomad]

Ah seht gut aus, mijn dank . Vind dit een mooiere tracker dan het origineel.
En met 2560x1440 pixels scherm (en dual screen) mag ik dan ruimte genoeg hebben, die blijft mooier

Edit, gaat fullscreen toch niet helemaal goed:



Zou kunnen dat het komt door mijn andere custom CSS, maar ik kan geen CSS (behalve copy-paste ), dus ik zie niet waarom het mis gaat.

Dit is mijn custom CSS, zit in de andere CSS de fout, of gaat je aanpasing uberhaupt niet goed op hoge resoluties?

Cascading Stylesheet:

.popup.trackerPopup.fixed
{
  margin-top: -20px;
  margin-left: 20px;
}
.trackerPopup.fixed {
        position: fixed !IMPORTANT;
        left: 30px !IMPORTANT;
        top: 160px !IMPORTANT;
}
html
{
  background: #BBBBBB;
}
div#contentArea
{
  padding-left: 20px;
  padding-right: 20px;
background-image: linear-gradient(bottom, #E3E3E3 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -o-linear-gradient(bottom, #E3E3E3 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -moz-linear-gradient(bottom, #E3E3E3 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -webkit-linear-gradient(bottom, #E3E3E3 1%, #ABABAB 51%, #E0E0E0 100%);
background-image: -ms-linear-gradient(bottom, #E3E3E3 1%, #ABABAB 51%, #E0E0E0 100%);

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

}
#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;
}
#top
{
  border-bottom: 0;
}
/*Automatisch weergeven van registratiedatum, en postcount van users*/ 
div.message div.post div.userdetails div.userdata div.extra { display: block; } 

/* Posts van topicstarter markeren met blauwe header */ 
div.topicstarter div.messageheader { 
background: #c8cde5; 
} 

/* Automatisch spoilers tonen bij hover */ 
div.spoiler:hover {   
color: white !important;   
} 

/** On-hover showen van "ignore topic"-knopjes in post history **/ 
table.listing tr td.ignore a { 
    display: none; 
} 
table.listing tr:hover td.ignore a { 
    display: inline; 
}
/* compacte forumposts */
div.message div.messageheader {padding: 3px 14px !important;}
div.message div.messageheader div.date {top: 3px !important;}
div.message {margin-bottom: 5px !important;}
div.message div.post {padding: 5px 0px 6px 14px !important;}
div.message div.post p.signature {margin: 6px 13px 0px 126px;}

/* border onder messageheader */
div.message div.messageheader {border-bottom: 1px solid rgb(221, 222, 222) !important;}

/* Verwijderen van publicatie tijd van artikelen */ 
#tracker .trackeritem li .time {display:none!important;} 

/* Tracker links = 5% - Tracker rechts = 15% */ 
#contentArea {margin-left: 5%;} 

/* Opmaak voor kleine Tracker */ 
 #tracker{left:-230px;width:236px} 
body.trackerVisible{margin-left:236px} 
body.trackerRight.trackerVisible{margin-right:236px} 
body.trackerScroll #tracker{left:-236px} 
.trackerScroll.trackerRight.trackerVisible #tracker,.trackerRight.trackerVisible #trackerStretch{right:-236px} 
.trackerRight.trackerVisible #tracker, #trackerContentContainer{width:236px} 
 #trackerHeader{width:202px} 
 #trackerHeader h4{padding-left:0;background:0} 
 #trackerContent, #trackerSettings, #trackerSettings table{width:209px}

edit:

Zo ziet hij eruit exclusief de andere CSS die ik draai. Beter, maar nog niet helemaal zoals het hoort.
Ziet iemand een snelle fix zodat ik de CSS allemaal kan draaien of gaat dat niet zomaar?

[ Voor 94% gewijzigd door RobIII op 05-12-2012 13:25 . Reden: code tags gefixed :P ]

[Bubblewrap]

@Nomad, ik zie dat jouw custom css de header een vaste breedte meegeeft, ik neem aan dat je de content onder jouw vaste header wilt om het er voor jou goed uit te laten zien. Omdat ik zelf niet zo'n brede resolutie kan nabootsen zul je even zelf moeten spelen met de waarden van de volgende regel:

Cascading Stylesheet:

/* Tracker links = 5% - Tracker rechts = 15% */ 
#contentArea {margin-left: 5%;}

Ik denk dat je beter gebruik kunt maken van pixels in plaats van procenten in dit geval, haal bovenstaande regel weg en vervang die voor deze:

Cascading Stylesheet:

/* Positie content area met tracker links */ 
#contentArea {margin-left: 400px;}

Probeer nu even te spelen met het getal 400 (meer of minder) om het contentvak uit te lijnen onder jouw header.

Ik hoor graag of het je is gelukt!

[Nomad]

Bubblewrap schreef op woensdag 05 december 2012 @ 13:12:
@Nomad, ik zie dat jouw custom css de header een vaste breedte meegeeft, ik neem aan dat je de content onder jouw vaste header wilt om het er voor jou goed uit te laten zien. Omdat ik zelf niet zo'n brede resolutie kan nabootsen zul je even zelf moeten spelen met de waarden van de volgende regel:

Cascading Stylesheet:

/* Tracker links = 5% - Tracker rechts = 15% */ 
#contentArea {margin-left: 5%;}

Ik denk dat je beter gebruik kunt maken van pixels in plaats van procenten in dit geval, haal bovenstaande regel weg en vervang die voor deze:

Cascading Stylesheet:

/* Positie content area met tracker links */ 
#contentArea {margin-left: 400px;}

Probeer nu even te spelen met het getal 400 (meer of minder) om het contentvak uit te lijnen onder jouw header.

Ik hoor graag of het je is gelukt!

644 pixels did the trick . Betekent wel dat ik tweakers fullscreen moet bekijken, vanwege de nu vaste afstand, maar dat deed ik in de praktijk toch al.

thank you

Edit: Daarentegen door te werken met relatieve afstanden, procenten, krijg ik het nog mooier voor elkaar. Heb nu:

code:

/* Tracker links = 10% - Tracker rechts = 10% */  
#contentArea {margin-left: 27,5%;}

En dat komt precies uit, inclusief met resizen van window , 100% alsof het zo hoort

[ Voor 12% gewijzigd door Nomad op 05-12-2012 14:05 ]

[Bubblewrap]

Graag gedaan, leuk om te lezen dat je het kunt waarderen. Je kunt proberen in plaats van pixels procenten te gebruiken. Op die manier kan de content mee schuiven. Mocht je het willen proberen stel ik voor eens te beginnen bij 25%.

Edit: Poster boven mij was zo slim en was zijn post aan het editen terwijl ik mijn antwoord aan het typen was!

[ Voor 20% gewijzigd door Bubblewrap op 05-12-2012 14:07 ]

[Nomad]

Bubblewrap schreef op woensdag 05 december 2012 @ 14:06:
Graag gedaan, leuk om te lezen dat je het kunt waarderen. Je kunt proberen in plaats van pixels procenten te gebruiken. Op die manier kan de content mee schuiven. Mocht je het willen proberen stel ik voor eens te beginnen bij 25%.

Edit: Poster boven mij was zo slim en was zijn post aan het editen terwijl ik mijn antwoord aan het typen was!

Great minds think alike , komt mooi uit zoals het nu is en die tracker bevalt me zo goed. Dus mijn dank daarvoor

[Dubbeldrank]

Wat een drama die nieuwe tracker, ik heb hem links staan, nu drukt hij de site naar rechts en zit er een enorm stuk witruimte tussen de tracker en de content. Ik kan me niet voorstellen dat dit stuk witruimte fijn is op lagere resoluties, juist waarvoor de tracker aangepast is. Is het mogelijk om de voorgaande situatie optioneel te maken voor mensen met een hogere resolutie zoals 1680x1050 en hoger?

[ Voor 18% gewijzigd door Dubbeldrank op 06-12-2012 13:13 ]

[crisp]

Dubbeldrank schreef op donderdag 06 december 2012 @ 13:12:
Wat een drama die nieuwe tracker, ik heb hem links staan, nu drukt hij de site naar rechts en zit er een enorm stuk witruimte tussen de tracker en de content. Ik kan me niet voorstellen dat dit stuk witruimte fijn is op lagere resoluties, juist waarvoor de tracker aangepast is.

Op lagere resoluties is dat 'stuk witruimte' natuurlijk ook een stuk kleiner. Hier op 1600 breed vind ik het erg prettig iig

Is het mogelijk om de voorgaande situatie optioneel te maken voor mensen met een hogere resolutie zoals 1680x1050 en hoger?

Alles is mogelijk natuurlijk, of we het ook (willen) doen is een tweede

---

even ontopic over de custom CSS; in feite zou je genoeg moeten hebben aan de .smallTracker rules in framework.css. Als je die toepasbaar maakt zonder dat de body expliciet die class heeft zou het m.i. moeten werken.

[Bubblewrap]

Ik was ook niet helemaal blij met de nieuwe tracker, vandaar dat ik dus heb besloten 'het heft in eigen hand' te nemen! Zo kun je hem proberen aan te passen naar je eigen wensen.