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

[Saturnus]

Is er een manier om de tracker omhoog te krijgen?

code:

#tracker {
    top: -17px;
}

Die code wordt geblokkeerd door inline styling.

Edit:
Margin-top van gemaakt. Misschien dirty, idk.

Edit2:
Inderdaad dirty, bij omlaag scrollen verdwijnt een deel van de balk omhoog.

[ Voor 35% gewijzigd door Saturnus op 31-03-2014 20:56 ]

[Wiethoofd]

Om inline styles te overrulen, zet er een !imporant bij in je custom style

[Saturnus]

Thanks, met !important werkt het.

Wel een nieuw probleem: De tracker is nu statisch geworden en klikt niet meer tegen de bovenkant van de browser als er omlaag wordt gescrold.

[Hero of Time]

Ik heb de tracker statisch en geen probleem daarmee. Maar nu heb ik ook de #top en #menubar altijd zichtbaar. M'n code hiervoor staat een paar pagina's terug. Het idee heb ik van anderen die 't eerder deden.

[Saven]

wat cleaner naar mijn smaak denk dat ik die menubar nog rood maak om toch dat tweakers gevoel een beetje terug te krijgen

Is nog wel beetje buggy als je je browser klein resized, en de footer is nog niet netjes gemaakt maarja hier is de code

Cascading Stylesheet:

#contentArea, h3.bar, .sidebar, table.listing
{
border-radius: 5px !important;
}

.fakeTop
{
display: none;
}

body.trackerVisible
{
 margin-left: 346px !important;
}

#trackerContainer
{
background: #313232;
/*border: 1px solid #cfd0d0;*/
border-radius: 5px;
}

#tracker
{
margin-left: 0px;
background: none !important;
padding-top: 10px !important;
}

#logo:after {
  display: none;
}

#top
{
background: none !important;
}

#menubar{ width: 1062px; border-radius: 5px;

box-shadow: 0 0 0 1px rgba(255,255,255,0.2),0 -5px 15px rgba(0,0,0,.12) !important;

 } 

li.more span, li.last span
{
font-size:0px;
}

body, #searchbar, .galleryHeadingContainer, .pageTabsContainer
{
background: url(http://i.imgur.com/cVxX4ME.png) !important;
}

.galleryHeadingContainer>div
{
border-top:0;
}

[NMe]

Saturnus schreef op maandag 31 maart 2014 @ 21:19:
Thanks, met !important werkt het.

Wel een nieuw probleem: De tracker is nu statisch geworden en klikt niet meer tegen de bovenkant van de browser als er omlaag wordt gescrold.

Met position: fixed erbij ben je er dan waarschijnlijk al, denk ik.

[QwaftZefoni]

Ik ben na maanden toch weer aan het klooien met CSS zonder enige kennis
Forum gedeelte begint weer wat te lijken. Dekstop dan want mobile scaling is fubarred.

Maar, voor de opmaak van de uitgelichte nieuwsitems op de Frontpage gebruikte ik een deel van Zartok's code om ze 2 aan 2 en rechts uit te lijnen. Maar dat werkt niet meer?

code:

/*Afbeeldingen FP, naar rechts 2x2 */
#fpaItems                            { float:right; width:336px; }
#fpaItems .fpaItem                   { height: auto; width:167px; margin-right: 1px; margin-bottom: 1px;}
#fpaItems .fpaItem img               { height: auto; width:167px; }
#fpaItems .fpaItem div.textContainer { font-size:12px; line-height:15px; text-align: center; width: 100%; height: 30px; padding: 5px 0px; }

freak CSS so far: Pastebin

[Hero of Time]

QwaftZefoni schreef op woensdag 02 april 2014 @ 19:52:
Ik ben na maanden toch weer aan het klooien met CSS zonder enige kennis
Forum gedeelte begint weer wat te lijken. Dekstop dan want mobile scaling is fubarred.

Maar, voor de opmaak van de uitgelichte nieuwsitems op de Frontpage gebruikte ik een deel van Zartok's code om ze 2 aan 2 en rechts uit te lijnen. Maar dat werkt niet meer?

code:

/*Afbeeldingen FP, naar rechts 2x2 */
#fpaItems                            { float:right; width:336px; }
#fpaItems .fpaItem                   { height: auto; width:167px; margin-right: 1px; margin-bottom: 1px;}
#fpaItems .fpaItem img               { height: auto; width:167px; }
#fpaItems .fpaItem div.textContainer { font-size:12px; line-height:15px; text-align: center; width: 100%; height: 30px; padding: 5px 0px; }

freak CSS so far: Pastebin

Klopt, ze hebben het in een ander formaat gegoten. Nu zie je overigens nog maar 3 items, geen 4. Ik moet dat ook nog eens gaan fixen, maar de FP open ik te weinig om er momenteel moeite voor te doen.

[NMe]

Ik heb dit topic zojuist in overleg met Rukapul, zeef en F.West98 verplaatst naar LA. Custom CSS is inmiddels natuurlijk een feature die door de hele userbase gebruikt kan worden, en dat zijn dus ook gebruikers die wél op de frontpage zitten maar amper tot niet op het forum. Dit topic stond voorheen in Stuffis Generalis en was daardoor niet zichtbaar voor mensen met minder dan 50 posts. Omdat dit topic ook voor die mensen zinnig kan zijn staat het nu dus publiek.

[Zeror]

Oeh... wijziging aan de layout. Naja, een klein icoontje met een vlaggetje.
En die wil ik nie

Cascading Stylesheet:

li.countryNL, li.countryBE {display: none;}

*poof * weg vlaggetje

[Schnoop]

Ik heb na de update vandaag mijn stylesheet maar weer eens aangepast.
Nieuwe:


Ik vind het er zo toch een stuk beter uit zien dan de normale frontpage. Ik heb dan wel reclame uit i.v.m. abbo.
Zo ziet het er uit met reclame.

Cascading Stylesheet:

#search{padding-top:3px;}
#searchbar{height:35px;}

#contentArea{
padding-top:5px;
}

#newsletter,
#jobs,
#pricewatch,
#categoryBar,
#menubottombar,
#menubottom,
#Searchbar
{
display:none;
}

[_eXistenZ_]

Tweakers 7.5 is uiteraard still going strong, en heb ik zojuist gepatcht voor de nieuwe header.

http://tweakers-7punt5.github.io/

Ziet er door de nieuwe header iets anders uit dan op de screenshots, maar niet minder bruikbaar

Have fun!

[Hero of Time]

Ja, ik moet mijn CSS ook weer gaan ombouwen. Zeker omdat fixed header in de prefs zit, kan ik dat stukje uit m'n CSS halen. Nu heb ik het True logo half in de header, half over de site (hosted by op, logo er net onder).

[F.West98]

Ik heb met zeeeer veel gedonder mijn fixed header werkend gekregen, het werkt nu nog, dus ik ga dat er niet uit slopen

Binnen een paar uur zal ik mijn stylesheet ook bijgewerkt hebben.

[NMe]

F.West98 schreef op dinsdag 05 augustus 2014 @ 20:52:
Ik heb met zeeeer veel gedonder mijn fixed header werkend gekregen, het werkt nu nog, dus ik ga dat er niet uit slopen

...maar het zit nu in de site zelf?

Dit is voor mij de meest belangrijke custom CSS op het moment:

Cascading Stylesheet:

/* Menu en userbar verwisselen */
#menu .sitename + ul {
    margin-left: 540px;
}
#userbar {
    left: 180px;
}

/* Beter naar anchors kunnen springen */
a[name] {
    display:block;
    padding-top:45px;
    margin-top:-45px;
}
#messages a[name][href] {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Navigatie weer klikbaar maken */
#forumheading {
    position: relative;
    z-index: 10;
}

Die eerste is omdat ik het menu amper gebruik en mijn userbar wel, dus die twee heb ik omgewisseld. De andere twee stukjes zorgen ervoor dat je ook met de fixed header op het forum in elk geval geen content onder de headerbalk schuift als je op een anchor terechtkomt.

[F.West98]

Ik heb die hele balk wat aangepast (zoeken verplaatst, knopjes verplaatst, andere kleurtjes mogelijk gemaakt, enz) en het is lelijke code. En het werkt

Helaas verpest de nieuwe onhover AFBEELDING van de titel wel mijn mooie kleurtjes.....

[Hero of Time]

Ik zie nu pas dat de knopjes rechts (dropdown van je naam, DMs, notificaties en instellingen) bij mij niet werken door m'n fixed header dingen. Het Tnet logo is ook foetsie, header is super lelijk, search staat dwars door PW, V&A, Forum en Meer knoppen. Ik heb veel te fixen daar zo te zien.

[NMe]

Alles wat met de fixed header te maken heeft weggooien en de fixed header-optie aanzetten in je voorkeuren. Problem solved. Mijn headerbalk was eerst de helft van mijn toch al vrij forse custom CSS. Nu is voor de header alleen het bovenstaande stukje code over voor mij.

[F.West98]

Goed idee ja

[Maranello]

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.
[afbeelding]

[afbeelding]

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

Fixed voor de nieuwe header

En nog een plaatje van de forumview:


Nieuwe code op [Pastebin]

[Verwijderd]

Mooi gedaan Maranello, ik maak er graag gebruik van.

[nanoChip]

Maranello schreef op woensdag 06 augustus 2014 @ 16:02:
[...]

Fixed voor de nieuwe header
[afbeelding]
En nog een plaatje van de forumview:
[afbeelding]

Nieuwe code op [Pastebin]

Bedankt!

[Hero of Time]

Van bijna 60 regels naar dit voor de header. Ben er tevreden mee, maar 1 ding wil niet echt lekker werken: de searchbar is netjes in de top header als ik bovenaan sta, maar zodra ik ga scrollen, valt-ie weg. Nu kan ik wel z'n positie of die van #top fixeren, maar dan schuift-ie niet netjes mee als de breedte van de browser verandert. Misschien moet ik #top weer gewoon fixeren met CSS, ipv setting.

Cascading Stylesheet:

/* Get rid of that ugly single pixel gray line */
#top {
    border: none !important;
}

/* Remove the useless minibar with #slogan and #socialcount */
#menubottombar {
    display: none;
}
/* Default gray bar holding the search form and true logo
    Do not use display: none, search will disappear */
#searchbar {
    height: 0px !important;
}
/* Search form */
#search {
    position: relative !important;
    top: -50px;
    z-index: 101;
    width: 375px !important;
    left: 200px;
}
#search .keywordSearch {
    width: 300px !important;
    margin: 0px !important;
}

[SmokingCrop]

Hier is mijn Custom CSS: (er kunnen bugs ontstaan door updates van Tweakers, best te gebruiken met geen advertenties-abonnement/ad-block)
Code: http://pastebin.com/fi9PrHeQ (laatste update: 15 juni 2015)
Vooral gericht op alles 'cleaner' maken en usability vergroten (op zen minst voor mezelf dan toch).

• in het algemeen zeer veel borders weggedaan en veel overbodige elementen
• Frontpage cleaner, meer aandacht voor het nieuws
• nieuws/reviews ook meer aandacht voor het artikel, related dingen aan zijkant in zelfde stijl als andere pagina's
• verschillende pagina's wat beter gemaakt
• zoek-resultaat is groter

Thumbnail voorbeelden (klik voor groter)

---

---

---

---

[ Voor 161% gewijzigd door SmokingCrop op 15-06-2015 08:35 ]

[InFamous]

Vanavond ook druk bezig geweest om de niet fixed header na te maken:



Paar dingen loop ik echter tegen aan:

• De hover over de navigatie balk krijg ik niet gewijzigd
• Het linker menu werkt alleen fatsoenlijk op fixeer modus

Iemand enig hoe punt 1 op te lossen is?

[F.West98]

1) Neem de selector die Tweakers zelf gebruikt exact over, dan grootste kans dat het goed is
2) De tracker is kut

Verder zou je ook naar mijn implementatie van de oude (maar fixed) header kunnen kijken:


http://fwest98.nl/tnet_mod/

[InFamous]

F.West98 schreef op donderdag 07 augustus 2014 @ 01:42:
1) Neem de selector die Tweakers zelf gebruikt exact over, dan grootste kans dat het goed is
2) De tracker is kut

Verder zou je ook naar mijn implementatie van de oude (maar fixed) header kunnen kijken:
[afbeelding]

http://fwest98.nl/tnet_mod/

Die tracker heb ik vrede mee, maar die selector kan ik niet vinden.

Het probleem, de selector is hoger dan mijn menuwrapper en menubar, dus de selector komt er onderuit en de kleur is rood

[F.West98]

Wat heb je nu dan, en heb je een screenshot die je probleem illustreert?

[InFamous]

F.West98 schreef op donderdag 07 augustus 2014 @ 13:36:
Wat heb je nu dan, en heb je een screenshot die je probleem illustreert?

Dit dus, de rest werkt prima.

[F.West98]

Je moet de :hover overriden

Cascading Stylesheet:

#menu li:hover {
    background: /**/;
    height: /**/;
    border-bottom: none;
}

[InFamous]

Kijk die moest ik hebben, die kon in niet vinden

[AndriesLouw]

Met dank aan o.a. Cpt.Skydiver:

Paar eigen toevoegingen omdat ik liever blauw zie :

code:

/* Blauwe tint */
h1, h2, h1 a, h2 a, .fpaItem a:hover { color: #00497c !important;  }
#menubar, #tracker .fakeTop { background: #00497c !important;  background-image: -webkit-linear-gradient(#00497c,#0B4884 68px) !important;  background-image: -moz-linear-gradient(#00497c,#0B4884 68px) !important;  background-image: linear-gradient(#00497c,#0B4884 68px) !important; }
#tracker .fakeTop { border-bottom: 1px solid #385C7F; }
#menubar{ box-shadow: inset 0 -1px 0 #385C7F !important; }
#menu li:hover, #logo:hover, .dropdown ul li:hover,#menu .dropdown ul li:hover,.pageTabs .more>ul li:hover, #categoryBrowser li.active, #categoryBrowser li.active.more { background:#158; background-image:-webkit-linear-gradient(#158,#1D618E); background-image:-moz-linear-gradient(#158,#1D618E); background-image:linear-gradient(#158,#1D618E); }
#categoryBrowser li.active.more { background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, -webkit-linear-gradient(#158,#1D618E); background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, -moz-linear-gradient(#158,#1D618E); background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, linear-gradient(#158,#1D618E); }

[nanoChip]

F.West98 schreef op donderdag 07 augustus 2014 @ 01:42:
1) Neem de selector die Tweakers zelf gebruikt exact over, dan grootste kans dat het goed is
2) De tracker is kut

Verder zou je ook naar mijn implementatie van de oude (maar fixed) header kunnen kijken:
[afbeelding]

http://fwest98.nl/tnet_mod/

Ahh kan niet inloggen, SMTP settings staan niet goed? Krijg iig een warning

[F.West98]

* F.West98 gaat even een poging doen tot fixen

Je bent iig al geactiveerd

[ Voor 21% gewijzigd door F.West98 op 07-08-2014 20:25 ]

[InFamous]

Mijn Tweakers 7.5 creatie:


Punten die ik heb gewijzigd:
• oude logo terug
• robo... Lettertype weg
• font-size weer op 12px
• menu terug op de oude plek
• hover weer oude kleur gegeven
• slogan weg
• fb en twitter logo's weg


Laten we voorop stellen, dat ik bijna geen ervaring heb met CSS, het kan daarom enorm rommelig zijn.

Daarnaast is er één probleem, de Tracker moet altijd op fixeer staan.

Cascading Stylesheet:

/*FB, Twitter en slogan weg*/
#menubottombar a.twitter, #menubottombar a.facebook, #menubottombar .menubottom { display: none }
/*-------END------*/

/* robo... lettertype weg*/
#menu li {font-family: arial,helvetica,"Liberation Sans",sans-serif; 
font-size: 12px;
line-height: 35px;
height: 35px;
}
/*-------END-------*/

/* Tweakers 7.5 weergave*/
#menubar{
background: #313232;
margin-top: 40px;
height: 0px;
}


#menubottombar{ display: none}

html{
background: #b41039;

}

#tracker{
width: 338px;
padding-top: 0px;}

#tracker .fakeTop{
display: none;
}


#trackerHeader{
padding-top: 50px;}



#logo a{
background-image: url("http://tweakimg.net/g/if/v3/framework/logo_transparent.png"); 
position: absolute;
top: -50px;
left: -5px;
height: 85px;
width: 140px;

}

#searchbar{
margin-top: -10px;}

#menu .sitename + ul{
margin-left: 110px;
height:35px;}

#logo + .sitename{ width: 160px;
heigt: 35px;}


#userbar li.messages a{
background-position: 0 0px;}

#menu li:hover {
    background: #3e3e3e;
    height: 35px;
    border-bottom: none;
}

#userbar li.icon a{
margin-top: 0px;}

#menu .dropdown ul{
margin-top: -3px;}
/*-------END------*/


/* vlaggetje weg*/
#userbar li.display.icon div{
display:none;}
/*-------END------*/

offtopic:
Als iemand die wel de CSS kennis heeft deze code wilt opschonen, graag!

Als iemand trouwens een manier vindt om de usericon weer terug te krijgen, dan hoor ik dat graag.

[ Voor 11% gewijzigd door InFamous op 07-08-2014 23:17 ]

[F.West98]

Usericon terug: kan niet
Misschien met een greasemonkeyscript, denk ik niet e.g.

[SmokingCrop]

-- nevermind --

edit: om post toch nog ietwat nuttig te maken, kheb m'n code weer wat updated op vorige pagina: SmokingCrop in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

• geen "rapporteer" meer bij je eigen posts
• nog tal van nutteloze borders weggedaan die meestal al nauwelijks zichtbaar waren
• eigenposts & topic-makers mooier gemaakt (enkel top & bottom border ipv omkadering)

• klipklap aangepast:


• bug fix, verkeerde alignment in profiel -> karma

[ Voor 237% gewijzigd door SmokingCrop op 08-08-2014 04:59 ]

[alex3305]

SmokingCrop schreef op vrijdag 08 augustus 2014 @ 00:06:
-- nevermind --

edit: om post toch nog ietwat nuttig te maken, kheb m'n code weer wat updated op vorige pagina: SmokingCrop in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

• geen "rapporteer" meer bij je eigen posts
• nog tal van nutteloze borders weggedaan die meestal al nauwelijks zichtbaar waren
• eigenposts & topic-makers mooier gemaakt (enkel top & bottom border ipv omkadering)
[afbeelding]
• klipklap aangepast:
[afbeelding]

• bug fix, verkeerde alignment in profiel -> karma

Mooi deze gebruik ik nu ook, maar wel met de volgende tweaks om het eea wat duidelijker te maken:

Cascading Stylesheet:

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

/* Topic Action List dinges ook gefixed met achtergrondjes en zonder dingetjes */
.topic_actions .action_list li a {background: #D9ECFF; padding: 3px 5px; border-radius: 1px; display: inline-block; margin-right: 7px}
.topic_actions .action_list li a:hover {background: #0A8FC4; color: #fff; text-decoration: none;}
.topic_actions .action_list li:before {content: " "; margin: 0;}

/* Kleurtjes voor Topic Reports */
.topic_actions .action_list li a[title^="Rapporteer dit topic"] {background: #b98013; color: #fff;} /* Eigenlijk voor de tussenstaat, maar heb ik momenteel geen tekst van */
.topic_actions .action_list li a[title$="je laatste report is nog niet gelezen"] {background: #B9133C; color: #fff;}
.topic_actions .action_list li a[title$="je laatste report is afgehandeld"] {background: #42b913; color: #fff;}
.topic_actions .action_list li a[title="Rapporteer dit topic"] {background: #D9ECFF; color: #024368;}

/* Handje verwijderen bij TR's */
.topic_actions .action_list li a[title^="Rapporteer dit topic"] img {display: none;}

/* Action lijst: Weghalen van Reageer! */
.topic_actions .action_list li:first-child {display:none;}

/* Tracker verbergen */
.tracker, #tracker, #trackerStretch, body.hasTracker #tracker {display:none;}
body.hasTracker {margin-left: 0;}

#reacties, #reactieContainer {padding-left: 0 !important; border-left: none !important;}

[SmokingCrop]

Nieuws/review artikels pagina ook overhauled:
• Meer ruimte voor het artikel zelf (video ook groter)
• gerelateerde info kleiner en kwa design meer in lijn met de frontpage
• uitvullen van tekst en kleine rechts ge-aligneerde afbeeldingen weg (grotere foto's eronder wel nog)
• reacties zijn breder en "informatief" + "spotlight" zijn duidelijker. (zelfde kleur als het icoontje met grote transparantie)
• Weer minder borders en een paar dingen weggedaan (share button, platte weergave en faq bv)
• nog andere aanpassingen


(wat een kleurverschil trouwens bij die reacties tussen de dell ultrasharp en een oudere HP monitor bij die gekleurde reacties.. dus het ziet er misschien niet zo goed uit alsop mijn scherm )

code nog steeds op: http://pastebin.com/fi9PrHeQ (updated: 10 aug. 02u)

[ Voor 15% gewijzigd door SmokingCrop op 10-08-2014 02:49 ]

[NMe]

F.West98 schreef op vrijdag 08 augustus 2014 @ 00:01:
Usericon terug: kan niet
Misschien met een greasemonkeyscript, denk ik niet e.g.

Nee joh, is makkelijk zat. Alleen moet je zelf je icon in je CSS veranderen als je ooit een ander icon neemt:

Cascading Stylesheet:

#menubar #menu .username {
    background: url("http://ic.tweakimg.net/usericons/107051/jeroenmadtrix60.png") no-repeat scroll left top / auto 100%;
    padding-left: 52px;
}

En een beetje met de dropdown spelen die er vervolgens half overheen valt.

[InFamous]

NMe schreef op vrijdag 08 augustus 2014 @ 21:36:
[...]

Nee joh, is makkelijk zat. Alleen moet je zelf je icon in je CSS veranderen als je ooit een ander icon neemt:

Cascading Stylesheet:

#menubar #menu .username {
    background: url("http://ic.tweakimg.net/usericons/107051/jeroenmadtrix60.png") no-repeat scroll left top / auto 100%;
    padding-left: 52px;
}

En een beetje met de dropdown spelen die er vervolgens half overheen valt.

Of het icoon altijd dezelfde naam geven

Ik vind het toch best aardig gelukt met mijn carbage skills

Originele TW7.5:


Mijn versie:

[ Voor 23% gewijzigd door InFamous op 08-08-2014 23:51 ]

[mux]

Helaas is e.e.a. van mijn css/scriptzooi stukgegaan bij de aanpassingen van deze week, maar het is nog steeds naar wens. Mijn FP:



- alles weg wat ik niet gebruik (basically... alles behalve nieuwsberichten, zoekbalk, V&A, blogs en een deel van de headerknoppen
- alle padding, margins, etc. etc. weg. Ik wil alle nuttige informatie zonder te scrollen op mijn secundaire scherm hebben
- alle visuele clutter weg (true logo, slogan, tweakers logo, social media-knoppen)
- myreact direct bereikbaar vanaf frontpage (leidt naar /forum/find/poster/203831/topics)
- tweakblogs filter (blacklist voor niet-interessante bloggers)

Wanneer ik eens tijd heb ga ik m'n forum-css/scripts ook eens updaten. Die zijn sinds 7.5 helemaal stuk en heb ik uitgezet, maar het forum is daardoor op 1920x1080 bijna onnavigeerbaar geworden (één post = 75% van mijn vensterhoogte). Hoog tijd voor verbetering dus.

Tampermonkey:

code:

// ==UserScript==
// @name       Tweakers myreact
// @namespace  enijssen.com
// @version    0.1
// @description  changes forum into myreact
// @match      *.tweakers.net/*
// @copyright  2012+, You
// ==/UserScript==

tm_container = document.getElementById("navMenu");
tm_a = tm_container.childNodes[11].childNodes[0];
tm_a.innerText = "myReact";
tm_a.href = "http://gathering.tweakers.net/forum/find/poster/203831/topics";

De rest is voornamelijk met stylebot gedaan, indien gewenst kan ik specifieke mods wel delen, maar het is verder een vrij ongestructureerd zooitje aan CSS.

[ Voor 24% gewijzigd door mux op 10-08-2014 20:43 ]

[pimpimmers]

Is het ook mogelijk om de 3 reviews die bovenaan de FP staan onder elkaar te zetten en dan naar rechts te verplaatsen?
Ik ben er mee bezig geweest maar het is met niet gelukt.
Ik heb er geen kennis van maar heb zelf al heel wat aangepast (zie screenshot in mijn fotoalbum) maar dit lukt me niet.
Ik wil dus de reviews die met foto's onder de Poll plaatsen.

[mux]

Daarvoor wil je wel echt scripten. Heb je wat javascript-kennis? Identificeer met chrome tools (menu->tools->javascript tools->tab 'elements') het juiste element, neem die xpath (rechterklik op een element -> copy xpath), kopieer hem naar de nieuwe locatie (die je ook met xpath kunt identificeren) en delete het origineel.

[F.West98]

Oh dat kan prima met CSS.
Ik heb ze (in de vorige vorm) ook in een caroussel getransformeerd. Puur CSS

Ik zal vanavond eens kijken wat ik er van kan maken

[Hero of Time]

Als je trouwens erg gewend bent om je user icon naast je gebruikersnaam te zien, kan je de volgende CSS toepassen:

Cascading Stylesheet:

ul#userbar.loggedin li.more.last span.username {
    background-size: contain !important;
    padding-right: 40px !important;
    background-image: url('<link naar plaatje>') !important;
}

Enige punt is, is dat het plaatje aan de rechterkant staat, niet zoals eerder aan de linkerkant. En het dropdown dingetje is weg (niet bij 'Meer', die blijft).

Ben nog steeds hier en daar dingen aan 't tweaken. Volgende week ga ik er eens goed voor zitten om wat meer te veranderen waar nodig. Heb ook nog een paar pagina's waar ik maar half dingen heb gedaan voordat 7.5 live ging (zoals PW e.d.). Die carousel op de FP moet ik ook nog eens aanpassen, hele oude code staat er nog van toen 't 4 items waren.

[NielsNL]

Paar kleine aanpassingen, subtle and functional:
lijntjes weg, wat rondingen, enz... niet te overdreven.

Cascading Stylesheet:

div#social.fpItem, div#jobs.fpItem, div#newsletter.fpItem, div#categoryBar, a#true, #jobs, div#menubottombar, div.fakeTop{
display: none;
}

body{-ms-overflow-style: none}
#search{padding-top: 2px}
#searchbar{height: 33px; border-bottom: none}
#tracker{padding-top: 0px}
#menubar{border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px}
#menuwrapper{margin: 0px auto 3px;}
#searchbar{border-radius: 10px 10px 0 0}
#bottom div.hr{height: 10px; border-radius: 0 0 10px 10px}
div.fpaItem, div.fpaItemsWrapper{border: 0}
div#contentAreadis{background-color : transparent;}
.galleryHeadingContainer div{border-top: 0px}
.fpaImageContainer:after, .fpaImage{border-radius: 6px}
table.highlights, table.highlights tr:last-child td, .mainColumn.frontpage{border: 0}

[ Voor 15% gewijzigd door NielsNL op 15-08-2014 05:26 . Reden: Nog iets mooier. ]

[Zeror]

Hoe kan ik de background (die je met de slider lichter en donkerder kan maken) op de juiste manier nog donkerder?

Op een of andere manier blijven sommige vlakken en sommige pagina's naar de ingestelde waarde van de slider terugspringen.

[SmokingCrop]

Zeror schreef op woensdag 13 augustus 2014 @ 21:40:
Hoe kan ik de background (die je met de slider lichter en donkerder kan maken) op de juiste manier nog donkerder?

Op een of andere manier blijven sommige vlakken en sommige pagina's naar de ingestelde waarde van de slider terugspringen.

This should do the trick (rgb getallen lager/hoger voor donkerder/lichter)

Cascading Stylesheet:

body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
background-color: rgb(150,150,150) !important;
}

---

Overigens nog 3 bug fixes in mijn css gestoken & wat fixes op veranderingen van mezelf die sommige dingen stuk maakte.
http://pastebin.com/fi9PrHeQ

[ Voor 18% gewijzigd door SmokingCrop op 13-08-2014 22:03 ]

[Hero of Time]

Zeror schreef op woensdag 13 augustus 2014 @ 21:40:
Hoe kan ik de background (die je met de slider lichter en donkerder kan maken) op de juiste manier nog donkerder?

Op een of andere manier blijven sommige vlakken en sommige pagina's naar de ingestelde waarde van de slider terugspringen.

Blader anders eens een paar pagina's terug, daar staat mijn (verouderde) CSS die ik gebruik. Heel Tweakers heb ik donker gemaakt ongeacht wat je instelt met de slider. Pak eruit wat je wilt. Volgende week maak ik 'm helemaal nieuw, zet er zo veel mogelijk commentaar in (ook handig voor mijzelf ) en dump 'm op pastebin. Denk niet dat 't handig is als ik ~900 regels aan code hier plaats. M'n vorige heb ik al in 3 delen moeten doen omdat 't groter is dan het post limiet.

[Verwijderd]

AndriesLouw schreef op donderdag 07 augustus 2014 @ 19:58:
Met dank aan o.a. Cpt.Skydiver:

[afbeelding]

[afbeelding]

[afbeelding]

Paar eigen toevoegingen omdat ik liever blauw zie :

code:

/* Blauwe tint */
h1, h2, h1 a, h2 a, .fpaItem a:hover { color: #00497c !important;  }
#menubar, #tracker .fakeTop { background: #00497c !important;  background-image: -webkit-linear-gradient(#00497c,#0B4884 68px) !important;  background-image: -moz-linear-gradient(#00497c,#0B4884 68px) !important;  background-image: linear-gradient(#00497c,#0B4884 68px) !important; }
#tracker .fakeTop { border-bottom: 1px solid #385C7F; }
#menubar{ box-shadow: inset 0 -1px 0 #385C7F !important; }
#menu li:hover, #logo:hover, .dropdown ul li:hover,#menu .dropdown ul li:hover,.pageTabs .more>ul li:hover, #categoryBrowser li.active, #categoryBrowser li.active.more { background:#158; background-image:-webkit-linear-gradient(#158,#1D618E); background-image:-moz-linear-gradient(#158,#1D618E); background-image:linear-gradient(#158,#1D618E); }
#categoryBrowser li.active.more { background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, -webkit-linear-gradient(#158,#1D618E); background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, -moz-linear-gradient(#158,#1D618E); background: url(//tweakimg.net/g/if/categories/arrows.png) no-repeat 252px -18px, linear-gradient(#158,#1D618E); }

Thanks, was er al een tijdje naar op zoek!

[pimpimmers]

F.West98 schreef op dinsdag 12 augustus 2014 @ 09:15:
Oh dat kan prima met CSS.
Ik heb ze (in de vorige vorm) ook in een caroussel getransformeerd. Puur CSS

Ik zal vanavond eens kijken wat ik er van kan maken

Al gelukt?

[F.West98]

Totaal vergeten

Maar:

Cascading Stylesheet:

.fpaItemsWrapper { overflow: visible; border-bottom: none; }
.fpaItems { width: 300px; }
.fpaItem + .fpaItem { padding-left: 0; }

Here you go

[SmokingCrop]

F.West98 schreef op donderdag 14 augustus 2014 @ 01:30:
Totaal vergeten

Maar:

Cascading Stylesheet:

.fpaItemsWrapper { overflow: visible; border-bottom: none; }
.fpaItems { width: 300px; }
.fpaItem + .fpaItem { padding-left: 0; }

Here you go

Er moet nog een float: right; in de .fpaItemsWrapper

[F.West98]

Ik zat niet helemaal op te letten bij het kopiëren. Bedankt!

[pimpimmers]

Helemaal top het werkt

[SmokingCrop]

M'n code updated om de tweakers.net/video pagina te fixen van fouten door eigen css + verbeterd.
Ook bugfix door eigen css bij Downloads & nog wat algemene verbeteringetjes hier en daar.

code: http://pastebin.com/fi9PrHeQ
algemene screenies: SmokingCrop in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Ondertussen al 358 lijntjes , het is zeker niet echt gecodeerd om zo weinig mogelijk lijntjes te hebben etc.. maar ik ondervind geen problemen. Als je trouwens nog bug(s) vindt door m'n css, vertel het me dan

edit: ondertussen nog wel eens update gegeven voor fix-jes (personal message was te lang blijkbaar)

[ Voor 31% gewijzigd door SmokingCrop op 04-09-2014 03:19 ]

[Jofairden]

Ik vind een aantal aanpassingen die ik hier zie een stuk mooier dan het nu is

[LoeWn]

Zou iemand mij kunnen helpen?
Is het mogelijk om de tablet interface weg te laten, of desnoods aan te passen zodat ik er op mijn laptop geen last van heb?
Als ik namelijk mijn scherm ga verkleinen, zal de interface overschakelen naar tablet en gaat de zoekbalk verspringen. En dat ver****t een beetje mijn lay-out. Nou is dat opzich niet heel erg. Alleen bij het forum vallen er zo belangrijke knoppen weg. Hieronder wat plaatjes.

Zo is mijn normale desktop. Zoals je ziet heb ik de zoekbalk netjes verwerkt in het content blok


Ook op andere pagina's zoals het forum gaat dit goed


Maar als ik nu de browser verklein, gaat het mis

[ Voor 9% gewijzigd door LoeWn op 31-10-2014 13:22 ]

[NMe]

LoeWn schreef op vrijdag 31 oktober 2014 @ 13:21:
Zou iemand mij kunnen helpen?

Op deze pagina de desktopweergave forceren.

[LoeWn]

Oké, ik had er natuurlijk wel bij moeten zeggen dat ik de mobiele versie wel wil gebruiken voor mijn telefoon de tablet versie heb ik écht niet nodig. Maar dit is niet mogelijk of wel?

edit: Laat maar. Blijkbaar zijn die instellingen alleen voor je huidige apparaat. Het werkt dus wel. Thanks

[ Voor 23% gewijzigd door LoeWn op 31-10-2014 13:28 ]

[NMe]

Is over nagedacht.

[mux]

Als ik tweakers.net gebruik op m'n telefoon en desktopweergave forceer, dan springt alsnog bij elke reload de tracker een milliseconde in beeld om dan te verdwijnen. Is dit te fiksen? Ik wil de tracker eigenlijk continu in beeld.

(Android 4.4.3, Chrome).

[ Voor 9% gewijzigd door mux op 31-10-2014 13:54 ]

[LoeWn]

Ik ben begonnen aan mijn nieuwe projectje: Material Design. Tot nu toe ziet het er zo uit:



Ik weet alleen nog niet wat ik met de tracker ga doen. Ik heb nu een groene achtergrond met een card interface, maar dit is wel echt een faal

[ Voor 13% gewijzigd door LoeWn op 07-11-2014 11:59 ]

[WoutF]

Tof! ben benieuwd of je echt die Material Design look-and-feel weet te vangen

[LoeWn]

Haha grapjas. Geef me nog een jaar, en de mogelijkheid om custom javascript te schrijven en dan moet het wel dichtbij komen. Animaties etc is toch wel lastig.

Trouwens. Het 'knopje' om de tracker te openen en sluiten verspringt bij het scrollen van de pagina een pixel of 30.Is dit ergens aan te passen?

[NMe]

Hoe moeten wij dat weten als het jouw custom CSS is die dat gebroken heeft?

[mux]

Telepathie?

[Misha]

LoeWn schreef op maandag 10 november 2014 @ 12:16:
Haha grapjas. Geef me nog een jaar, en de mogelijkheid om custom javascript te schrijven en dan moet het wel dichtbij komen. Animaties etc is toch wel lastig.

Waarom gebruik je niet iets als Greasemonkey ernaast?

[LoeWn]

NMe schreef op maandag 10 november 2014 @ 12:17:
Hoe moeten wij dat weten als het jouw custom CSS is die dat gebroken heeft?

Is dat wel zo? Bij het originele ontwerp verspringt de 'tracker knop' toch ook?

Misha schreef op maandag 10 november 2014 @ 12:40:
[...]


Waarom gebruik je niet iets als Greasemonkey ernaast?

Dankje voor de tip. Daar zal ik eens naar kijken. Ik ken het nog niet.

[NMe]

LoeWn schreef op maandag 10 november 2014 @ 12:47:
[...]

Is dat wel zo? Bij het originele ontwerp verspringt de 'tracker knop' toch ook?
[afbeelding]
[afbeelding]

Niet wanneer hij als hamburgermenu getoond wordt.

Ik heb trouwens die trackerknop totaal verborgen met CSS dus ik zou het verder niet weten.

[ Voor 11% gewijzigd door NMe op 10-11-2014 12:50 ]

[Chris7]

LoeWn schreef op maandag 10 november 2014 @ 12:47:
[...]

Is dat wel zo? Bij het originele ontwerp verspringt de 'tracker knop' toch ook?
[afbeelding]
[afbeelding]

Het verspringt niet, bij scrollen overlapt de navigatiebalk de zwarte balk aan de bovenkant van de pagina. Lijkt me inderdaad iets dat in je eigen CSS niet goed gaat .

[Misha]

Ik verveelde me net in de trein, dus heb ook maar eens wat met custom css gedaan. Zijn vooral subtiele wijzigingen en wat kleursamenstellingen. Ik wil nog gaan kijken naar de typografie en uiteindelijk doortrekken naar smartphones & tablets. Wellicht straks in de trein terug

Er zitten nog een aantal bugjes in. Zo krijgen de nav-items on hover een margin-top van 1px omdat ik perse een border-bottom onder de actieve wil hebben, die precies even hoog is als de rest van de border-bottom van de gehele nav-bar. Zonder de margin-top zat de border-bottom on-hover net te hoog

code:

/*Fonts*/

@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);

@media screen and (min-width:1020px) {

                            /* Navigation */

/* Remove logos */

#search #true, #search #streamone {
    display: none;
}

/* Color change nav-bar */

#menubar {
    background: #455a64;
    background-image: -webkit-linear-gradient(#455a64,#455a64 68px);
    background-image: -moz-linear-gradient(#455a64,#455a64 68px);
    background-image: linear-gradient(#455a64,#455a64 68px);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.35);
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    border-bottom: 3px solid #3D4E56;
}

/* Font change nav-bar */

#menu li a {
    font-family: Roboto,"Roboto",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: -0.5px;
    font-size: 14px;
    line-height: 44px;
}

/* Make the active nav-item get a border and darker background color */

#menu li.active a {
    color: #8bc349;
    border-bottom: 3px solid #8bc349;
}

#logo:hover {
    border-bottom: 1px solid #28343A;
}

/* On hover, make the nav-item become darker */

#menu li:hover {
    background-image: -webkit-linear-gradient(#28343A,#28343A 68px);
    background-image: -moz-linear-gradient(#28343A,#28343A 68px);
    background-image: linear-gradient(#28343A,#28343A 68px);
    border-left: 0px solid;
    color: #8bc349;
    border-bottom: 3px solid #8bc349;
    margin-top: 1px;
}

/* Give the dropdown-nav-item the same font as rest of nav bar */

#menu .more {
    font-family: Roboto,"Roboto",Helvetica,Arial,sans-serif;
    letter-spacing: .01em;
    font-weight: 400;
    letter-spacing: -0.5px;
    font-size: 14px;
    line-height: 44px;
}

/* In order for the spacing to be correct, give a higher line-height */

#menu .dropdown li a {
    line-height: 30px;
}

/* When hovering in the dropdown nav-bar, give a different background color */

#menu .more:hover {
    background-image: -webkit-linear-gradient(#28343A,#28343A 68px);
    background-image: -moz-linear-gradient(#28343A,#28343A 68px);
    background-image: linear-gradient(#28343A,#28343A 68px);
    border-bottom: 1px solid #28343A;
}

/* Change the background color of the logo on hover */

#logo:hover {
    background-image: -webkit-linear-gradient(#28343A,#28343A 68px);
    background-image: -moz-linear-gradient(#28343A,#28343A 68px);
    background-image: linear-gradient(#28343A,#28343A 68px);
}

#userbar li.icon:hover {
    background-image: -webkit-linear-gradient(#28343A,#28343A 68px);
    background-image: -moz-linear-gradient(#28343A,#28343A 68px);
    background-image: linear-gradient(#28343A,#28343A 68px);
}

#userbar li.icon.selected:hover {
    background: #f7f9f9;
}

#menubottombar {
    display: none;
}

#searchbar {
    background: #f5f5f5;
    background-image: -webkit-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: -moz-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: linear-gradient(#f5f5f5,#f5f5f5);
}

.galleryHeadingContainer {
    background-color: #f5f5f5;
}

.pageTabsContainer {
    background: #f5f5f5;
}

#top {
    background-color: rgba(49, 50, 50, 0);
}

.dropdown ul li:hover, #menu .dropdown ul li:hover, .pageTabs .more>ul li:hover {
    background: #28343A;
    background-image: -webkit-linear-gradient(#28343A,#28343A);
    background-image: -moz-linear-gradient(#28343A,#28343A);
    background-image: linear-gradient(#28343A,#28343A);
}

#entity {
    background: #f5f5f5;
}

                        /* tracker */

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

body.hasTracker #tracker {
    display: none;
}

#layout {
    background-color: #e9eaed;
}

#bottom div.hr {
    background-color: #e9eaed;
}

#contentArea {
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    padding: 12px;
    border-top: 1px solid #ffffff;
}

                        /* Frontpage */

#categoryBar {
    display: none;
}

.fpaItemsWrapper {
    border-bottom: 2px solid #bcbdbd;
    margin-top: -10px;
}

.greyTopBorderBlock {
    border-top: 0px solid #bcbdbd;
}

.fpaImage {
    border-radius: 2px;
}

.fpaImageContainer:after {
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}

.fpaImageContainer:before {
    width: 101%;
}


                        /* Tabbladen */

.pageTabs li.active a, .pageTabs li.active a:hover {
    color: #333;
    border-left: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    background-image: -webkit-linear-gradient(#fff,#fff);
    background-image: -moz-linear-gradient(#fff,#fff);
    background-image: linear-gradient(#fff,#fff);
    margin-top: -1px;
}

.pageTabs li {
    border: 0px solid #d8d8d8;
    background: #f5f5f5;
    background-image: -webkit-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: -moz-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: linear-gradient(#f5f5f5,#f5f5f5);
}

.pageTabs li a {
    color: #00497c;
}

                            /* Thumbs */

.thumb img {
    border-radius: 2px;
}

                            /* CTA */

.fancyButton {
    border: 0px solid #0987b8;
    border-radius: 2px;
    background: #FF6E00;
    background-image: -webkit-linear-gradient(#FF6E00,#FF6E00);
    background-image: -moz-linear-gradient(#FF6E00,#FF6E00);
    background-image: linear-gradient(#FF6E00,#FF6E00);
}

.fancyButton:hover {
    color: #fff;
    border-color: 0px solid #F16400;
    background: #F16400;
    background-image: -webkit-linear-gradient(#F16400,#F16400);
    background-image: -moz-linear-gradient(#F16400,#F16400);
    background-image: linear-gradient(#F16400,#F16400);
}

.fancyButton.grey {
    background: #e2e5e5;
    background-image: -webkit-linear-gradient(#e2e5e5,#e2e5e5);
    background-image: -moz-linear-gradient(#e2e5e5,#e2e5e5);
    background-image: linear-gradient(#e2e5e5,#e2e5e5);
}

.fancyButton.grey:hover {
    background: #D2D6D6;
    background-image: -webkit-linear-gradient(#D2D6D6,#D2D6D6);
    background-image: -moz-linear-gradient(#D2D6D6,#D2D6D6);
    background-image: linear-gradient(#D2D6D6,#D2D6D6);
    color: #333;
}

                        /* Relevancy slots */
                        
.darkFpBlock {
    border: 0px solid #dddede;
    border-radius: 2px;
    background: #f5f5f5;
    background-image: -webkit-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: -moz-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: linear-gradient(#f5f5f5,#f5f5f5);
    box-shadow: inset 0 0 0 0px rgba(255,255,255,.0);
}

.relatedBlock, .rightInfoBlock {
    border: 0px solid #dddede;
    border-radius: 1px;
    background: #f5f5f5;
    background-image: -webkit-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: -moz-linear-gradient(#f5f5f5,#f5f5f5);
    background-image: linear-gradient(#f5f5f5,#f5f5f5);
    box-shadow: inset 0 0 0 0px rgba(255,255,255,.0);
}

#mytnet .sidebar {
    background: #f5f5f5;
    border: 0px solid #e8eaea;
    border-radius: 2px;
}

                        /* Filters */
#filter, .filterBlock {
    border: 0px solid #dddede;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 0 0 0 0px rgba(255,255,255,0.2);
}

.filterOption {
    border: 0px solid #fafbfb;
    border-radius: 2px;
    background: #f5f5f5;
    box-shadow: 0px 0px #d1d3d3;
}

                /* Comments */
                
.reactieBody {
    border: 0px solid #dddede;
    border-top: 3px solid #c3c6c6;
}

.reactieBody.informative {
    border-color: #60bf00;
}

.reactieBody.spotlight {
    border-color: #009d2c;
}

[Imprezzion]

@ Hierboven,
Ik vind hem erg nice maar bij mij werkt de tracker niet meer met die CSS
Wil hem graag gebruiken maar wel met tracker.

Ik heb zelf 0,0 verstand van CSS enz. dus zou ik mogen vragen om een ''fix"?

[Misha]

Imprezzion schreef op vrijdag 14 november 2014 @ 14:00:
@ Hierboven,
Ik vind hem erg nice maar bij mij werkt de tracker niet meer met die CSS
Wil hem graag gebruiken maar wel met tracker.

Ik heb zelf 0,0 verstand van CSS enz. dus zou ik mogen vragen om een ''fix"?

Dan moet je even alles onder /* Tracker */ t/m /* Frontpage */ verwijderen uit de custom css

[Imprezzion]

Misha schreef op vrijdag 14 november 2014 @ 14:01:
[...]


Dan moet je even alles onder /* Tracker */ t/m /* Frontpage */ verwijderen uit de custom css

Ah, het is dus werkelijk zo simpel. Thanks! Gebruik hem nu gecombineerd met de ''blauwe tint'' van AndriesLouw en het is erg nice!

Thanks heren.

[LoeWn]

WoutF schreef op vrijdag 07 november 2014 @ 12:48:
Tof! ben benieuwd of je echt die Material Design look-and-feel weet te vangen

De eerste stappen naar de 'look-and-feel' van material design zijn gezet. Ik ben bezig met een custom tracker, gebasseerd op het uiterlijk van material design. Alleen weet ik nog niet of custom wel helemaal gaat werken. Daar heb ik enige hulp bij nodig. Op het moment dat de tracker niet aan staat, zal de content ook niet opgehaald worden (logisch). Er staat wel dit stukje javascript code in de bron:

JavaScript:

            if(window.Tracker)Tracker.refresh();

Lijkt me vrij logisch. Als de Tracker aanwezig is, roep de functie refresh aan, welke de content op gaat halen. So far so good right? Maar is het mogelijk om dit na te bootsen? Of te wel, is het dus mogelijk om die refresh aan te roepen via bijvoorbeeld Tampermonkey?

Hierbij een filmpje van mijn custom tracker so far.
In het echt is het wel echt vloeiend, zoals bij material design. Ik krijg camStudio niet vloeiend.

[YouTube: http://youtu.be/SMVrmcg7PM0]

Ik heb het nu geprobeerd door bij het onclick event van de hamburger/arrow icoon letterlijk de code 'Tracker.refresh();' te zetten (in mijn custom script in Tampermonkey). Chrome debugger console geeft class onbekend. Enigzins logisch. Maar hier houd voor mij de kennis wel aardig op.
Een omweg is dat ik eerst de content op laat halen op de traditionale manier, en vervolgens die content met Jquery (.append() ) overzet naar mijn custom tracker. Hiervoor moet ik wel een onclick op de orginele tracker button forceren, zodat de content opgehaald wordt. oké, dit lijkt niet helemaal te werken. Als ik de pagina open gaat dit niet goed, doordat het content ophalen een tijdje blijkt te duren, en in die tijd probeert mijn script de content al door te pasen naar mijn custom tracker. Bij het overgaan naar een andere pagina werkt het wel, omdat dan niet de 'laatste versie' overgezet wordt. Hier het stukje code uit Tampermonkey

JavaScript:

$('#tracker .fakeTop>div').trigger( "click" );
alert($('#trackerContent').html());
$('body').append('<div class="wrapper"><div class="material-design-hamburger"><div class="material-design-hamburger__icon"><span class="material-design-hamburger__layer"></span></div></div><div id="wrapperContent" class="menu menu--off">Dit is mijn menu</div></div>');
$('#wrapperContent').append($('#trackerContent').html());

Hier is trouwens de code en een voorbeeld van de code te vinden om zelf een material design wrapper/tracker te maken.

[ Voor 34% gewijzigd door LoeWn op 14-11-2014 15:20 ]

[Zeror]

De nieuwe reply-tekstballonnetjes op de frontpage vind ik iets teveel van het goede. Hoe was het was imho prima.

Dus veranderd naar dit:

Cascading Stylesheet:

table.highlights .replies .commentCount {
  background: none;
  color: #bbb !important;
  text-align: right;
}

[ Voor 3% gewijzigd door Zeror op 18-11-2014 17:43 ]

[SmokingCrop]

Mijn versie een update gegeven aangezien er heel wat bugs bijgekomen waren door de updates op Tweakers. ^^
code: http://pastebin.com/fi9PrHeQ

in plaats van

en nog heel wat meer veranderingen op forum en dergelijke.
meer screenshots: https://gathering.tweaker...message/42675517#42675517

edit: aparte settings voor 10"+ schermen en kleiner dan 10" (niet getest op tablet)

[ Voor 49% gewijzigd door SmokingCrop op 27-11-2014 02:25 ]

[Bosmonster]

Met de nieuwe layout gaan wat dingen stuk hierin (Poll hing ineens ergens onderaan), maar die heb ik inmiddels weer opgelost

Mijn volledige CSS (beetje rommeltje, sorry):

Cascading Stylesheet:

#fp_tabs_container,
#pricewatch.fpItem,
#newsletter.fpItem,
#jobs.fpItem,
#community.fpItem,
#ticker,#about,
#relatedTags,
#forumdays,
div.forum_actions ul.action_list,
#title p.mods,
#tweakbase_relations,
#categoryBar { display: none; }

#layout {
    padding-bottom: 20px;
}

#relatedTags + .forum_actions {
    margin-top: -38px;
}

#title {
    margin-right: 100px;
}

#logo + .sitename {
   text-indent: -9999px;
}
#socialButtonsContainer {
display: none;
}
div.menubottom {
display: none;
}

tr.inbetweenContent {
display: none;
}

div#news p.readMore {
display: none;
}

#true {
display: none !important;
}

#tracker, #trackerStretch {
display: none !important;
}

body.hasTracker {
margin-left: 0;
}

.highlightedProductsWrapper, #recentlyTested,
.fpaItemsWrapper + .mainColumn + .secondColumn,
.fpaItemsWrapper + .mainColumn + .secondColumn +br.clear,
.fpaItemsWrapper + .mainColumn + .secondColumn +br.clear + .highlightedProductsWrapper + .mainColumn {
display: none;
}

Misschien zit er ook wat oude zooi in, maar het werkt als een trein. Ook wat kleiner aanpassingen aan het forum.

[Kid_Stevie]

LoeWn schreef op vrijdag 14 november 2014 @ 14:48:
[...]
(...)
[video]
(...)

Ben op dit moment ook bezig met Tweakers te Material Design-en Ging op t forum kijken en zie dat jij er ook mee bezig bent geweest. Maar ik zag dat jij je searchbar hebt gehide, kun je deze ook weer te voorschijn toggle-en? Want dat kreeg ik niet voor elkaar

[LoeWn]

Ja. Op dit moment heb ik met tampermonkey een stukje jquery geschreven die er voor zorgt dat er een zoekbalk onder mijn menubalk geplaatst wordt. Deze is uiteraard ook fixed, net als de menubalk. Ik moet zeggen dat mijn ontwerp ook nog steeds niet klaar is. Ik heb nog enorme bugs, maar het komt al een heel eind.

[F.West98]

Je zou, afhankelijk van hoe het in elkaar zit, een :hover kunnen doen die dan de zoekbalk zichtbaar maakt.

[LoeWn]

Dat kan zeker.
Ik heb het nu zo:

een onclick op de zoekknop toont de zoekbalk. Bij het intypen in die zoekbalk opent zich het standaard zoekvenster. Ik zou dit nog graag aan willen passen naar één blok. Het ziet er nu een beetje aan elkaar geplakt uit. Verdere aanpassingen die je op deze screnshot ziet:

- menu balk in material design. met knoppen en 'profielfoto' zoals voorschreven in material design.
- tracker klapt uit zoals bij material design
- content blok is breder geworden
- flinke aanpassingen aan de blokken op de frontpage
- het 'uit de community' blok staat nu rechts van de nieuwsitems
- nieuwstype aanduiding weg gehaald
- kleuren en schaduwen als material design
- knoppen in material design (je ziet het alleen aan het x-je

Zoals je kunt zien moet ik nog wel even de breedte van de nieuwsregels aanpassen. Deze is na de laatste update niet meer netjes uitgelijnd.

EDIT: let trouwens niet op de verhoudingen van grootten. Die zijn goed. Zoomlevel stond op 125%

[ Voor 4% gewijzigd door LoeWn op 16-12-2014 17:46 ]

[Kid_Stevie]

Thanks voor de uitleg. Ben even verder gaan puzzelen en heb het nu met het nodige gepuzzel zonder javascript voor elkaar gekregen, met nog wat meer Material Design flair. Zal van de week eens een video maken, is wat leuker met de animaties ipv wat screenshots

Heb weer even naar je screenshots gekeken en zie weer wat leuke aanpassingen die ik ook nog wil doen. Zou de tracker ook zo willen doen als bij Material Design, maar dat gaat niet lukken zonder js ben ik bang. Al heb ik nog 1 ideetje voor een hack, maar dat gaat veel werk worden. Al moet ik zeggen dat het het wel waard is, want kan ondertussen niet meer terug naar de oude/normale tweakers

[Rubman]

Ik heb inmiddels mijn Tweakers behoorlijk aangepakt met Custom CSS, geleend/gejat/verkregen van anderen maar loop nu toch tegen een foutje aan zo hier en daar.

Op mobile view mis ik de zoekfunctie volledig in het forum (en staat Henk eigenlijk wel wat in de weg )
Daarnaast heeft op mijn thuis pc 23" Full HD de berichtenknop een vreemde lay-out als ik hem aanklik (kan niet naar berichten klikken bijvoorbeeld).
Zie ik nu echt hele simpele dingen over het hoofd, of ben ik gedoemd om zonder kennis van het opbouwen van een CSS te stuntelen met deze of terug te gaan naar de oude situatie?

Mijn CSS:

code:

/* ### Frontpage ### */
 
/* Headerkleur aanpassing, inclusief dropdowns */
#tracker div.fakeTop, div#menubar {
        background: #0A93CA;
        background-image: linear-gradient(#0A93CA,#72C3DB 68px);
        box-shadow: inset 0 -1px 0 #117FAB;
}
 
#tracker div.fakeTop {
        height: 44px;
        border-bottom: none;
}
 
#menu li:hover, #logo:hover {
        background: #117FAB;
        background-image: linear-gradient(#117FAB, #5C9BAE);
        border-bottom: 1px solid #117FAB;
}
 
.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*="JeGebruikersnaam"] {
        font-style: italic;
        color: #D1D1D1 ;
}
.frontPageLink:visited {
color:#7D0000 !important;
}
body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
background:url('http://www.dennisdaamen.nl/wp-content/uploads/2012/08/website-achtergrond-grijs-definitief.jpg');
}
.frontPageLink, .frontPageLink:link {
color:#000040 !important;
}
/* Als laatste in topic gereageerd 'verbergt' topictitel */ 
table.listing tbody tr td.topic a[title~="hyptonize"], 
table.listing tbody tr td.topic a[title~="hyptonize"] + small a { 
 color: #BBB; 
}

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

/* Compactere forum tabellen */ 
table.listing td, table.listing th { 
 padding: 5px; /* is standaard 10px boven/onder en 5px links/rechts */ 
}

/* Achtergrondkleur spoiler naar grijs */ 
div.messagecontent div.spoiler:hover, div.messagecontent div.message-quote-div div.spoiler:hover { 
 color:#fff;
}

/* Kutslogan weg. */
span.slogan { display: none }

/* Stomme social media meuk weg */
div.socialcount { display: none !important }
p.social, p.wvhj { display: none }

/* Balk waar bovenstaand in stond mag dan wel kleiner */
#menubottombar { height: 3px; }

/* Die tracker is ook niet zo boeiend */
//div.fakeTop div{ display: none !important }
div.fakeTop div {
  bottom:-42px !important;
}

/* Roboto is best een kutfont */
#menuwrapper {
  font-family: "Helvetica" !important;
}

/* Font wat verkleinen */
#menu li {
font-size: 13px !important;
}

#search #true{
  display: none; /*dag truelogo*/
}

#userbar {
  position: absolute !important;
  left: 820px !important;
  width: 200px !important;
}

div#menubottombar{
  height: 0px;
}

/* NL vlaggetje weg */
.flagNL div{
   visibility: hidden !important;}
#bottom{display:none;}

[sj31]

TweakCSS+ Versie 1.02

Hallo Mede Tweakers,

Ik ben bezig om voor de huidige site een volledige custom CSS te maken. Elke keer als ik een nieuwe reactie post heb ik iets aangepast aan de code, ook zal ik de Patch Note dan bijwerken met wat ik heb gedaan in die update/bijwerking.

CSS Code

Cascading Stylesheet:

/* TweakCSS+ Version 1.02 ©*/
/* Gemaakt door SJ31 - http://tweakers.net/gallery/661497 */

/* Menu / Header */
#menubar{
background: #2c3e50;
box-shadow: inset 0 -2px 0 #C9EF29;
}

#logo a {
height: 42px;
}

#logo a:hover {
-webkit-animation-name: shake; 
animation-name: shake;
-webkit-animation-duration: 3.5s; 
animation-duration: 3.5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}

#menu li a:hover {
border-left:0px;

}
#menu li:hover,
#logo:hover{
height:43px;
background-image:-webkit-linear-gradient(#2c3e50,#C9EF29);
background-image:-moz-linear-gradient(#2c3e50,#C9EF29);
border-bottom:0px;
}

 /* Menu Dropdown */
#menu li.dropdown li:hover {
background-image:-moz-linear-gradient(#C9EF29,#C9EF29);
background-image:-webkit-linear-gradient(#C9EF29,#C9EF29);
}

#menu li.active a:hover {
color:#e0e2e2;
}

.dropdown li:hover,
dropdown li:hover a{
color:#000!important;
}

#menubottombar {
background-color: #2c3e50;
}

#menubottombar a.facebook {
background:url(http://www.eurosong.be/wp-content/themes/eurosongbe/images/icon_facebook.png) no-repeat;
}

#top #menubottombar a.twitter {
background:url(http://www.iknowuwill.com/images/Twitter_bird_icon.png) no-repeat;
background-size: 16px 16px;
background-position: 0px 0px !important;
}

#menubottombar span.slogan {
color: #EDEEEE;
text-shadow: 0px 2px 2px rgba(201, 239, 41, 1);
font-style: italic;
}
#menubottombar span.slogan:hover {
color: #C9EF29;
text-shadow: 0px 2px 2px rgba(237, 238, 238, 1);
}


@-webkit-keyframes shake { 
    0%, 80%, 100% {-webkit-transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {-webkit-transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 80%,100% {transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {transform: translateX(10px);} 
} 

#menubottombar span.arrow-left {
border-right: 5px solid #EDEEEE;
}
#menubottombar span.count {
background-color: #EDEEEE;
border: 1px solid #C8C8C8;
border-left:0;
}

#userbar li.icon.unread {
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-delay: 2s;
animation-delay: 2s;
} 

@-webkit-keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {-webkit-transform: translateY(0);} 
20%, 30% {-webkit-transform: translateY(-10px);} 

} 

@keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {transform: translateY(0);} 
20%, 30% {transform: translateY(-10px);}
}

Als je een voorkeur hebt voor iets dat jij anders wilt hebben laat het mij weten en ik zal het wellicht meenemen naar een volgende versie.

Iets opgemerkt of een fout ontdenkt?, Laat het mij weten en ik zal het aanpassen!

Screenshots:

Screenshot 1
Screenshot 2

Screenshot recente update:

Patch Notes

Hieronder vind je de laatste 5 Patch Notes

Patch Notes Versie 1.02
- Bounce animatie bij ongelezen bericht / notificatie

Patch Notes Versie 1.01
- Logo animatie
- Slogan aangepast
- Social aangepast

Patch Notes Versie 1.0
- Header aangepast
- Menu aangepast

[ Voor 91% gewijzigd door sj31 op 16-03-2015 15:57 . Reden: Nieuwe update ]

[sj31]

LoeWn schreef op maandag 10 november 2014 @ 12:16:
Haha grapjas. Geef me nog een jaar, en de mogelijkheid om custom javascript te schrijven en dan moet het wel dichtbij komen. Animaties etc is toch wel lastig.

Trouwens. Het 'knopje' om de tracker te openen en sluiten verspringt bij het scrollen van de pagina een pixel of 30.Is dit ergens aan te passen?

[afbeelding]

[afbeelding]

Animaties hoeft niet alleen Javascript te zijn, je zou ook simpele CSS animaties kunnen gebruiken. Tenzij je natuurlijk heel uitgebreid gaat

[remyblok]

Naar aanleiding van de gebreken aan de nieuwe image viewer (zie ook Imageviewer-topic) heb even met CSS zitten priegelen om de viewer iets gebruiksvriendelijker te maken. Ik deel de CSS hier zodat jullie er ook je voordeel mee kunnen doen

Wat veranderd deze CSS:

• Zorgt ervoor dat er weer een magin zichtbaar is aan de randen. Door hierop te klikken sluit de image viewer.
• De vorige/volgende knop zijn nu 40% van de image viewer breed en beslaan de gehele hoogte. Je kunt nu dus veel makkelijker op de knoppen klikken.
• De Close knop is weg

Cascading Stylesheet:

/* Zorgt ervoor dat de overlay klikbaar wordt, daarop klikken is viewer sluiten. 
   Je kunt spelen met de waarden om het klik gebied kleiner/groter te maken */
#imageViewer
{
    width: 86%;
    height: 86%;
    margin: 7%;
    background-color: rgba(18,20,20, 0.70);
}

/* Ander kleurtje, zodat het duidelijk is waar de viewer ophoud en de overlay begint */
#imageOverlay
{
    opacity: .55;
}

/* Close button in niet nodig */
#iClose
{
    display: none;
}

/* Maak de volgende/vorige knoppen groter zodat je er makkelijker op kunt klikken */
#thumbPrev, #thumbNext
{
    top: 0px;
    width: 40%;
    height: 100%;
    background: none;
}

#thumbPrev:before, #thumbNext:before
{
    font-size: 120px;
    font-family: webdings;
    color: white;
    margin: 66% -30px;
    height; 100%;
    display: block;
}

#thumbPrev:hover:before, #thumbNext:hover:before
{
   color: #72C2DA;
}

#thumbPrev:before
{
    content: "3";
}

#thumbNext:before
{
    content: "4";
    text-align: right;
}

Ohja, ik heb dit enkel getest met Chrome en IE11. Garantie tot aan de deur.

[Inspector]

remyblok schreef op dinsdag 14 april 2015 @ 16:06:
Naar aanleiding van de gebreken aan de nieuwe image viewer (zie ook Imageviewer-topic) heb even met CSS zitten priegelen om de viewer iets gebruiksvriendelijker te maken. Ik deel de CSS hier zodat jullie er ook je voordeel mee kunnen doen

Wat veranderd deze CSS:

• Zorgt ervoor dat er weer een magin zichtbaar is aan de randen. Door hierop te klikken sluit de image viewer.
• De vorige/volgende knop zijn nu 40% van de image viewer breed en beslaan de gehele hoogte. Je kunt nu dus veel makkelijker op de knoppen klikken.
• De Close knop is weg

Ohja, ik heb dit enkel getest met Chrome en IE11. Garantie tot aan de deur.

Ik waardeer je werk houd er wel rekening mee dat bij de volgende release de meeste van deze issues sowieso al gefixed zijn en je cusom CSS wellicht niet meer helemaal zal functioneren.

[batjes]

Sorry, weinig zin zo 26 pagina's door te bladeren en het stond ook niet in de FP.

Maar is er een CSS die zoveel mogelijk zwart maakt? Ik neem amper nog de moeite mobiel op Tweakers te komen omdat al dat overkill aan wit mijn accuduur vernaggeld. Tweakers.net is (samen met Neowin.net) 1 van de weinige websites die er voor zorgen dat ik de accuduur terug zie lopen elke seconde.

1tje die goed is voor AMOLED of TN-Paneeltjes zoals in de Lumia 920 zou erg gewaardeerd worden

[Hero of Time]

Zoek naar mijn CSS, die is redelijk donker. Echter heb ik 'm niet getest en gemaakt voor de responsive design die je mobiel krijgt. Je zal dus het een en ander moeten ombouwen om tot de juiste waardes te komen.

[ Voor 3% gewijzigd door Hero of Time op 20-04-2015 20:35 ]

[batjes]

Hero of Time schreef op maandag 20 april 2015 @ 20:34:
Zoek naar mijn CSS, die is redelijk donker. Echter heb ik 'm niet getest en gemaakt voor de responsive design die je mobiel krijgt. Je zal dus het een en ander moeten ombouwen om tot de juiste waardes te komen.

Ah stond wel in het overzicht, vreemd zag hem gister niet Thanks.

Ziet er oke uit, zal wel wat karma puntjes uitgeven en kijken of het goed werkt (eventueel wat tweaken, hoe meer #000 hoe beter)

Mocht ik hem aanpassen, probleem als ik hem hier dan bij post? (met credits natuurlijk )

[Hero of Time]

batjes schreef op dinsdag 21 april 2015 @ 19:05:
[...]

Ah stond wel in het overzicht, vreemd zag hem gister niet Thanks.

Ziet er oke uit, zal wel wat karma puntjes uitgeven en kijken of het goed werkt (eventueel wat tweaken, hoe meer #000 hoe beter)

Mocht ik hem aanpassen, probleem als ik hem hier dan bij post? (met credits natuurlijk )

Ga je gang, maar misschien wil je liever m'n laatste versie pakken, die ik even voor 't gemak op

Members only:

Alleen zichtbaar voor ingelogde gebruikers. Inloggen

heb gezet.
Er zitten uiteraard nog wel wat fouten in e.d., maar het is iig veel bruikbaarder dan die ik hier destijds heb gepost.

[batjes]

Hero of Time schreef op woensdag 22 april 2015 @ 08:40:
[...]

Ga je gang, maar misschien wil je liever m'n laatste versie pakken, die ik even voor 't gemak op

Members only:

Alleen zichtbaar voor ingelogde gebruikers. Inloggen

heb gezet.
Er zitten uiteraard nog wel wat fouten in e.d., maar het is iig veel bruikbaarder dan die ik hier destijds heb gepost.

Vandaag de custom CSS maar eens gehaalt, zijn die karma punten teminste ergens goed voor.

Cool thanks, ziet er wel oke uit, voor op de desktop, hou zelf ook van rood/zwart combo Hij schaalt helaas erg slecht (helemaal niet).
Ik ga eens even pielen

[Hero of Time]

batjes schreef op donderdag 23 april 2015 @ 13:12:
[...]

Vandaag de custom CSS maar eens gehaalt, zijn die karma punten teminste ergens goed voor.

Cool thanks, ziet er wel oke uit, voor op de desktop, hou zelf ook van rood/zwart combo Hij schaalt helaas erg slecht (helemaal niet).
Ik ga eens even pielen

Als je wilt dat 't schaalt, moet je de width definities weghalen. Dat is de reden waarom ze bovenaan staan. Er staat nog ergens anders een width genoteerd, maar dat is een 100% ding even uit 't hoofd, niet zo heel spannend eigenlijk.

[batjes]

Hero of Time schreef op donderdag 23 april 2015 @ 13:56:
[...]

Als je wilt dat 't schaalt, moet je de width definities weghalen. Dat is de reden waarom ze bovenaan staan. Er staat nog ergens anders een width genoteerd, maar dat is een 100% ding even uit 't hoofd, niet zo heel spannend eigenlijk.

Handig dat het lekker boven instaat.
Aantal vlakken wat zwarter gemaakt. Searchbar plek gereset en de user menu
Hero of Time's iets zwartere CSS

Erg bedankt Mijn eigen halfbakken poging had ik de frontpage zwart, was de rest allemaal erg lelijk.

Vandaag/morgen vrij, zal volgende week eens kijken hoe het verschilt in accuduur op de telefoon.


Frontpage heeft de +internet points, forum en user profiel niet? Bij deze +internet punten.

[ Voor 6% gewijzigd door batjes op 23-04-2015 14:52 ]

[Hero of Time]

Je bent echt naar zwart gegaan zie ik. Paar aanpassingen die ik had toegevoegd, zoals user icon bij de naam heb je weer verwijdert. Je had vast ook moeite met 't bestand openen in Notepad.

[remyblok]

Nadat ik m'n Image Viewer aanpassingen (die maar een kort leven beschoren waren) had gepost, heb ik ook m'n andere CSS aanpassingen is opgeschoond en verbeterd. Deze wil ik ook met jullie delen. Heb nog niet direct een andere style gezien die hetzelfde doet dus dat leek me een leuke toevoeging Laat me weten als er foutjes in zitten, dan zal ik kijken wat ik kan fixxen.

Hierbij eerst wat screenshotjes van de Frontpage, Pricewatch en de Frontpage op klein scherm met de CSS toegepast:


De aanpassingen zijn:

• Zwarte menu balk + ander logo
• Grote Frontpage items verplaatst naar de zij kolom
• Search bar geïntegreerd met layout
• Pricewatch header geïntegreerd
• Hoop zaken weggehaald (Footer, logotjes, setting van tracker, social dingen etc.)

Ik heb het vooral in Chrome getest. IE10 ook wel af en toe, maar weet niet of alles goed werkt. IE10 op Windows Phone werkt iig goed. Heb wel rekening gehouden met kleine scherm formaten, maar op m;n phone lees ik eigenlijk alleen nieuws artikelen, dus daar kan nog een foutje zitten.

Ik geprobeerd om alle settings werkend te houden, maar dat heb ik niet uitvoerig getest.De settings die ik gebruik in T.net werken iig goed:

• Tracker gefixed aan de linker kant
• Achtergrond kleur op donker (op z'n lichts krijg je nu borders)
• Dichtheid van de tekst op compact

En dan nu de lap CSS:

Cascading Stylesheet:

/* remove all social buttons and references*/
#socialButtons,
#social,
#modernSocialButtonsContainer,
#socialButtonsContainer,
#menubottombar,
/* remove category bar displayed at the top of the front page*/
#categoryBar,
/* remove the partner-logos */
#search #true,
#streamone,
/* remove the streamer from the articles */
.article .streamer,
/* remove the flag icon from the display options */
#displayOptionsPopupButton > div,
/* remove the back button from the Pricewatch*/
#filterBackButton,
/* remove the complete footer from the page*/
#bottom,
/* remove the tracker settings and fix the fakeTop*/
#tracker .fakeTop,
#trackerHeader, 
/* remove the hightligther products header from the front page, fixed by other CSS*/
#highlightedProductsHead,
/* remove the newsletter subscription from the front page*/
#newsletter,
/* remove the video list with images from the  front page*/
#videos ul,
/* ?? can't remember / obsolete? */
#promo,
.bar.ok
{
    display: none;
}

/****************************************************************************************************/
/* the following pieces make the big front page items listed in the second column                   */
/****************************************************************************************************/

/* on small devices there is no second column, so remove alltogether */
@Media (max-width: 1000px), (max-device-width: 1000px) {
    .fpaItemsWrapper {
        display: none;
    }
}

.fpaItemsWrapper {
    border: 0;
    float: right;
    padding-top: 10px;
    margin-right: -20px;
}

.fpaItemsWrapper > .fpaItems {
    width: auto;
}

.fpaItemsWrapper > .fpaItems:before {
    white-space: pre;
    color: #b9133c;
    font-size: 19px;
    line-height: 23px;
    font-family: "Roboto Condensed",arial,helvetica,"Liberation Sans",sans-serif;
    font-weight: 400;
    padding-left: 20px;
}

/* add a title to the Reviews */
#contentArea > .fpaItemsWrapper > .fpaItems:before {
    content: "Review overzicht\a";
}

/* add a title to the Price watch items */
/* the original header is not displayed, to much work to get it in place*/
#highlightedProducts > .fpaItems:before {
    content: "Het bekijken waard\a";
    margin-bottom: 3px;
    display: block;
}

.fpaItemsWrapper .fpaItem {
    clear: both;
    padding: 9px 20px 9px 20px;
    width: 298px;
}

.fpaItemsWrapper .fpaItem .fpaMeta {
    height: 19px;
}

.fpaItemsWrapper .fpaItem, .mainColumn.frontpage {
    border-right: 1px solid White;
}

/* the second column is split in two, with a break*/
/* this will move the hightlighted products up as if there is no break*/
/* buggy, because of the specific value */
#highlightedProducts {
    margin-top: -580px;
}

#highlightedProducts .productTitle {
    border-top: 1px solid #e8eaea;
}

#highlightedProducts .fpaItem {
    border-top: 0;
}


/****************************************************************************************************/
/* the following pieces make the search bar as big as the page and glued to the page frame          */
/****************************************************************************************************/
@Media (min-width: 1000px) {
    #searchbar {
        border-radius: 1px;
        height: auto;
        background-image: none;
    }

    #search .keywordSearch {
        margin: 0 -40px;
        width: auto;
        border-bottom: 0;
    }

    #search input.text {
        padding-left: 40px;
    }

    /* change the color of the seachbar background to match the rest of the page */
    body:not(.customColor) #searchbar {
        background-color: white;
    }
}


/****************************************************************************************************/
/* the following pieces change some general layout stuff                                            */
/****************************************************************************************************/

/* make the menu bar black*/
#menubar {
    box-shadow: none;
    background-image: none;
    background: #313232;
}

#layout {
    padding-bottom: 1px;
}

/* make sure the tracker is long enough on short pages, needed becuase the footer is removed */
/* this may cause issues on other resolutions */
#tracker {
    margin-bottom: -70px;
}

.notificationsContainer {
    padding-bottom: 0;
}

#notifications {
    width: 1060px;
}

.bar {
    padding-right: 40px;
    padding-left: 40px;
}

/* remove the fat borders from the frontpage*/
.frontpage #community .communityReviews,
.frontpage #community .communityTopics,
.frontpage #community .communityBlogs {
    border-bottom: 0;
}

/****************************************************************************************************/
/* the following pieces change the tabs on the frontpage/pricewatch and the Forum                   */
/* the tabs now span the whole page and the background is white including the product info          */
/****************************************************************************************************/

#forum_tabs {
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 50px;
    padding-right: 40px;
}

#fp_tabs_container {
    margin-left: -40px;
    margin-right: -40px;
}

#fp_tabs {
    padding-left: 50px;
}

/* this doesn't look ok on small screen devices*/
@Media (min-width: 1000px) {

    div:not(#forum_tabs) > .pageTabs {
        background-color: white;
        padding: 0 39px;
        border-left: 1px solid rgb(180,181,181);
        border-right: 1px solid rgb(180,181,181);
    }

    #entity > div, .galleryHeadingContainer > div {
        background-color: white;
        border-left: 1px solid rgb(180,181,181);
        border-right: 1px solid rgb(180,181,181);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/****************************************************************************************************/
/* the following pieces forces the same view of the page borders etc, when the page is displayed    */
/* with a white background, this fixes issues with the other stuff. This is normally only applied   */
/* when the .customColor class is set on the body                                                   */
/****************************************************************************************************/

body {
    min-width: 1060px;
}

body #contentArea {
    padding-left: 39px;
    padding-right: 39px;
    border-radius: 1px;
}

body #top {
    border-bottom-width: 0;
}

@media (max-width:1084px) {
    body {
        min-width: 1000px;
    }

    body #contentArea {
        padding-left: 0;
        padding-right: 0;
        border: 0;
        border-radius: 0;
    }

    body, body #bottom div.hr {
        background: #fff;
    }

    body #top {
        border-bottom-width: 1px;
    }
}

#contentArea, #top, #mainSearch, #entity > div, .entityHeader .thumb, .galleryHeading .thumb, .pageTabs li {
    border-color: rgb(180,181,181);
}

#contentArea {
    border: 1px solid rgb(180,181,181);
}

#entity > div,
.galleryHeadingContainer > div {
    width: 1060px;
    border-color: #c3c6c6;
}

[ Voor 0% gewijzigd door remyblok op 28-04-2015 13:00 . Reden: Nieuw Tweakers logo ]

[OB1]

Ik heb het oude Henk logo voor een deel erin gezet, ik vind het zo wel grappig eruit zien.

Cascading Stylesheet:

#logo {  
    height: 45px;  
    width: 150px;  
    background:  
url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -1px; 
}  

#logo:hover {
   height: 44px;  
    width: 150px;  
 background:  
url(http://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -1px; 
}

#logo a {  
    background: none !important;  
}  

Kan iemand de code zo maken dat bij hoveren het logo ook gewoon blijft? Nu verdwijnt 'ie.

edit : fixed

[ Voor 13% gewijzigd door OB1 op 28-04-2015 12:22 ]