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

[LodanMax]

Ik ben nog even bezig, maar loop tegen een probleempje aan:

Stel ik deze in als:

Cascading Stylesheet:

#menubar
{
background:#0B1E36;
background-color:#0B1E36;
background-image:-webkit-linear-gradient(top,#0B1E36,#7BC7EF 68px);
background-image:-moz-linear-gradient(#0B1E36,#7BC7EF 68px);
background-image:linear-gradient(to bottom,#0B1E36,#7BC7EF 68px);
border-bottom:1px solid #333;
box-shadow:inset 0 -1px 0 #333;
height:44px;
left:0;
position:relative;
z-index:110;
}

a
{
color:#80a4c9 !important;
text-decoration:none !important;
}

a:hover,a.highlightlink
{
color:#7BC7EF !important;
text-decoration:underline !important;
}

.useVisitedState a:visited
{
color:#a17cae !important;
}

Dan krijg ik het volgende resultaat:


Dit is natuurlijk onwenselijk, want ik wil eigenlijk dat de a, a:hover en a:visited in de menubar gewoon lekker wit blijven.

nu heb ik het met de volgende opties geprobeerd om het te fixen:

Cascading Stylesheet:

#menubar
{
color:#FFFFFF !important;
background:#0B1E36;
background-color:#0B1E36;
background-image:-webkit-linear-gradient(top,#0B1E36,#7BC7EF 68px);
background-image:-moz-linear-gradient(#0B1E36,#7BC7EF 68px);
background-image:linear-gradient(to bottom,#0B1E36,#7BC7EF 68px);
border-bottom:1px solid #333;
box-shadow:inset 0 -1px 0 #333;
height:44px;
left:0;
position:relative;
z-index:110;
}

Cascading Stylesheet:

a:not(#menubar)
{
color:#80a4c9 !important;
text-decoration:none !important;
}

Maar dit werkte niet bepaald.

Iemand die hier wijs uit kan worden en kan helpen?

[Hero of Time]

@LodanMax, je moet wel de juiste selectie pakken:

Cascading Stylesheet:

#menu>ul>li>a, #menu>ul>li.more>span {
    color: #00FF00;
}

Gebruik eens vaker rmb > Inspecteer element. Vind je een hoop mee. Die !important is nergens voor nodig dan. Restantje van mij zeker?

[LodanMax]

Hero of Time schreef op maandag 24 april 2017 @ 21:50:
@LodanMax, je moet wel de juiste selectie pakken:

Cascading Stylesheet:

#menu>ul>li>a, #menu>ul>li.more>span {
    color: #00FF00;
}

Gebruik eens vaker rmb > Inspecteer element. Vind je een hoop mee. Die !important is nergens voor nodig dan. Restantje van mij zeker?

Nee, important is hier wel nodig om een later deel van de CSS te overrulen, er zit meer in dan wat je hier ziet

Ik kijk vaak naar de inspect element, maar die kon ik daarin niet vinden, ik ben zelf nog aan het uitzoeken en leren, maar dat gaat niet altijd geweldig

[Hero of Time]

Hoe heb je dat element niet kunnen vinden dan? Ik krijg 'm zo voor m'n neus als ik rmb > inspect element doe op de knoppen (Nieuws, Reviews, PW, V&A).

[Chester]

Een WIP:




Wanneer ik de frontpage, artikels & reviews meer af heb zal ik hier mijn CSS posten. Daarna wil ik de pricewatch en het forum nog doen. En daarna de rest. Er is zo veel

[Hero of Time]

Hehe, welkom in mijn wereld. Voor je het weet heb je over de 1000 regels code.

[Chester]

Mja, ik heb het ook op werk. Maar dat is wel een beetje gecheat, met LESS kun je met redelijk weinig regels, best veel CSS genereren Iig genoeg dat bless noodzakelijk werd,,,
En nog een auto-prefixer die automatisch nog een lading toevoegt. Wat zijn browsers toch leuk

[ Voor 18% gewijzigd door Chester op 25-04-2017 23:21 ]

[mbenjamins]

Hoe gaan jullie met de nieuwe functionaliteit die Tweakers toevoegd om?
Of merk je dan gelijk dat je css niet meer klopt?

[Hero of Time]

mbenjamins schreef op woensdag 26 april 2017 @ 23:30:
Hoe gaan jullie met de nieuwe functionaliteit die Tweakers toevoegd om?
Of merk je dan gelijk dat je css niet meer klopt?

In mijn geval zie ik dus delen die niet meer donker zijn. Maar ik zie dus niet of er code opeens overbodig is geworden. Ik moet wel nog steeds een stukje fixen, want op de FP kan je alle reacties weergeven/inklappen die een onder een bepaalde score vallen. Daar kan je ook opgeven alleen de ongemodereerde reacties te laten zien. Stond eerst "Ongemodereerd", welke ik dankzij een andere Tweaker heb verandert naar een vraagteken. Nu is dit stuk, want er staat niets meer als icoon en alleen het aantal reacties dat je te zien krijgt met dat filter.

[Mister Hardware]

P_Tingen schreef op donderdag 13 april 2017 @ 08:23:
[...]

Dank! Dit is al heel mooi. De Henk-achtige zaken heb ik er maar even uitgehaald, het gaat mij vooral om de kleur. Ook de titelbalk heb ik nog weer donker gemaakt:

[afbeelding]

Heb nog geen verstand van programmeren.
Ik weet wel gelukkig dat css een programma is waarmee je html kan veranderen. Kan iemand mij uitleggen hoe ik dit kan bewaren?
Ik snap dat dit een code(of regel) is die ik by source moet invullen en daardoor een andere lay-out krijg maar hoe save ik het want 1maal als ik naar een andere pagina binnen tweakers ga is het weer weg.

[Hero of Time]

Mister Hardware schreef op maandag 1 mei 2017 @ 19:32:
[...]

Heb nog geen verstand van programmeren.
Ik weet wel gelukkig dat css een programma is waarmee je html kan veranderen.

CSS is geen programma, maar een opmaaktaal. Zie het als dat je met Word netjes titel, kopteksten, cursief, vet, etc kan geven aan tekst.

Kan iemand mij uitleggen hoe ik dit kan bewaren?
Ik snap dat dit een code(of regel) is die ik by source moet invullen en daardoor een andere lay-out krijg maar hoe save ik het want 1maal als ik naar een andere pagina binnen tweakers ga is het weer weg.

Om de code die hier door mensen gedeeld wordt te kunnen gebruiken dien je genoeg Karma te hebben om in https://tweakers.net/my.tnet/karmastore/ de optie 'Custom CSS' te kunnen 'kopen'. Je krijgt daarmee in je voorkeuren een extra optie beschikbaar en als je die aanzet, komt er een tekstvak waar je die code in kan plakken.

Er zijn ook browser add-ons beschikbaar (afhankelijk van welke browser je gebruikt) zoals Stylish waarmee je dit vanuit je browser kan regelen. Echter werkt dit voor sommige zaken minder ideaal dan het via de beschikbare optie van Tweakers zelf, maar is een begin indien je nog niet genoeg karma hebt verzameld.

[Mister Hardware]

Hero of Time schreef op maandag 1 mei 2017 @ 22:47:
[...]

CSS is geen programma, maar een opmaaktaal. Zie het als dat je met Word netjes titel, kopteksten, cursief, vet, etc kan geven aan tekst.


[...]

Om de code die hier door mensen gedeeld wordt te kunnen gebruiken dien je genoeg Karma te hebben om in https://tweakers.net/my.tnet/karmastore/ de optie 'Custom CSS' te kunnen 'kopen'. Je krijgt daarmee in je voorkeuren een extra optie beschikbaar en als je die aanzet, komt er een tekstvak waar je die code in kan plakken.

Er zijn ook browser add-ons beschikbaar (afhankelijk van welke browser je gebruikt) zoals Stylish waarmee je dit vanuit je browser kan regelen. Echter werkt dit voor sommige zaken minder ideaal dan het via de beschikbare optie van Tweakers zelf, maar is een begin indien je nog niet genoeg karma hebt verzameld.

ik heb het al gekocht. ik heb alles net al klaar gemaakt moet alleen nog de tweakers logo veranderen en het opslaan zodat het voor altijd zo blijft. 1 Ding, ik weet niet hoe ik het moet opslaan en het bewaren. Heb wel de gehele source code gekopieerd en het in een word document gegooid voor het geval dat het mis.

[Hero of Time]

Mister Hardware schreef op maandag 1 mei 2017 @ 23:13:
[...]


ik heb het al gekocht. ik heb alles net al klaar gemaakt moet alleen nog de tweakers logo veranderen en het opslaan zodat het voor altijd zo blijft. 1 Ding, ik weet niet hoe ik het moet opslaan en het bewaren. Heb wel de gehele source code gekopieerd en het in een word document gegooid voor het geval dat het mis.

Ga naar https://tweakers.net/instellingen/layout/ en zet daar Custom CSS aan. Plak de code in dat veld en klik onderaan de pagina op 'Opslaan'. Dat is alles.

Overigens is het beter om dit soort code in kladblok op te slaan dan Word. Word heeft namelijk de nare gewoonte om bepaalde tekens te veranderen, zoals aanhalingstekens naar 'smart' quotes waardoor het zijn effect verliest als je het weer uit Word kopieert. Dan ga je je afvragen waarom sommige dingen niet werken.

[Mister Hardware]

Hero of Time schreef op maandag 1 mei 2017 @ 23:20:
[...]

Ga naar https://tweakers.net/instellingen/layout/ en zet daar Custom CSS aan. Plak de code in dat veld en klik onderaan de pagina op 'Opslaan'. Dat is alles.

Overigens is het beter om dit soort code in kladblok op te slaan dan Word. Word heeft namelijk de nare gewoonte om bepaalde tekens te veranderen, zoals aanhalingstekens naar 'smart' quotes waardoor het zijn effect verliest als je het weer uit Word kopieert. Dan ga je je afvragen waarom sommige dingen niet werken.

Momenteel loop ik nog tegen 1 ding aan en dat is dat ik de normale achtergrond niet zwart krijg. Weet u misschien de code daarvoor. Daarnaast heb ik ook mijn css op pastebin gegooid.

[url]https://https://pastebin.com/z4CkEhW8/url]

Als het kan kunt u dan misschien kijken wat er mis mee is. 3 dingen werken niet. kleuren van de tracker(de bekeken moest oranje zijn en de nieuwe posts moesten licht blauw zijn). de kleuren van de balk onderin en de kleuren die ik hoor te krijgen als ik op bijvoorbeeld price watch klik. Als u daar naar kunt kijken en een feedback geven zou ik dat heel erg waarderen.

[Mister Hardware]

tijdens de preview gaat wel alles goed behalve op sommige teksten dat alles zwart wordt maar als ik alles ga bekijken op tweakers.net en ga daarop de source plakken gaat wel alles goed

[Hero of Time]

Je bent geen programmeur, weet niet wat CSS precies is, maar hebt wel een CSS van 970 regels. Daar klopt iets niet. Volgens mij heb je de CSS van Tweakers zelf in je custom CSS veld gegooid en past daar een paar dingen aan vergeleken met het origineel. Ik denk dat je al snel >900 regels kan weglaten.

Ga dus eerst eens na wat je nou precies wilt aanpassen en welke delen code hiervoor nodig is. Pas dan kunnen we zeggen wat je moet aanpassen.

[MazzaG]

Even een vraagje... Is het mogelijk om fonts die niet in Tweakers.net zitten (zoals Raleway of iets dergelijks) in de custom css in te laden en zo het font van T.net aan te passen?

[MazzaG]

Chester schreef op dinsdag 25 april 2017 @ 22:27:
Een WIP:
[afbeelding]

[afbeelding]

Wanneer ik de frontpage, artikels & reviews meer af heb zal ik hier mijn CSS posten. Daarna wil ik de pricewatch en het forum nog doen. En daarna de rest. Er is zo veel

Wow. Dit is gaaf. Ik heb misschien wel 1 puntje van feedback voor je.
Toen Tweakers 7 werd ingevoerd klaagden gigantisch veel Tweakers over dat er zo veel lege ruimtes waren en dat zo weinig info op 1 pagina meer stond. Jouw stylesheet zorgt ervoor dat er nog minder info op staat. Is het niet een idee om de sidebar te behouden (recent getest, BBG's) en om de fonts allemaal wat kleiner te maken?

Qua design: 10/10!

[Hero of Time]

MazzaG schreef op donderdag 4 mei 2017 @ 10:27:
Even een vraagje... Is het mogelijk om fonts die niet in Tweakers.net zitten (zoals Raleway of iets dergelijks) in de custom css in te laden en zo het font van T.net aan te passen?

Je kan verwijzen naar fonts die op jouw systeem staan. Zorg wel dat je fallback fonts opgeeft voor het geval je ergens zit en het eerste font er niet is.

[MazzaG]

Hero of Time schreef op donderdag 4 mei 2017 @ 11:08:
[...]

Je kan verwijzen naar fonts die op jouw systeem staan. Zorg wel dat je fallback fonts opgeeft voor het geval je ergens zit en het eerste font er niet is.

Hoe ziet dat er dan uit? Zou je de css kunnen geven om h1 "Raleway Bold" te maken?

[Chester]

MazzaG schreef op donderdag 4 mei 2017 @ 11:05:
[...]


Wow. Dit is gaaf. Ik heb misschien wel 1 puntje van feedback voor je.
Toen Tweakers 7 werd ingevoerd klaagden gigantisch veel Tweakers over dat er zo veel lege ruimtes waren en dat zo weinig info op 1 pagina meer stond. Jouw stylesheet zorgt ervoor dat er nog minder info op staat. Is het niet een idee om de sidebar te behouden (recent getest, BBG's) en om de fonts allemaal wat kleiner te maken?

Qua design: 10/10!

Tnx. Ik weet dat veel mensen er over geklaagd hebben, maar daar heb ik 0,0 rekening mee gehouden, ik heb het puur gemaakt op wat ik zelf mooi/fijn vind. Daarom zijn heel veel dingen verborgen, en wat ik wil zien is lekker groot en duidelijk

MazzaG schreef op donderdag 4 mei 2017 @ 11:31:
[...]


Hoe ziet dat er dan uit? Zou je de css kunnen geven om h1 "Raleway Bold" te maken?

Ongeveer zo:

code:

@font-face {
  font-family: "Raleway Bold";
  src: url("http://url.naar/je/font");
}

h1 {
  font-family: "Raleway Bold";
}

[ Voor 9% gewijzigd door Chester op 04-05-2017 11:58 ]

[MazzaG]

Chester schreef op donderdag 4 mei 2017 @ 11:57:
Ongeveer zo:

code:

@font-face {
  font-family: "Raleway Bold";
  src: url("http://url.naar/je/font");
}

h1 {
  font-family: "Raleway Bold";
}

Bedankt voor je hulp maar helaas werkt het niet
Doe ik iets verkeerd? Zie hier mijn code:

code:

@font-face {
  font-family: "Roboto Black";
  src: url("http://files.thebrandcode.nl/tweakers/Roboto-Black.ttf");
}

h1, h2 {
  font-family: "Roboto Black", sans-serif;
}

Zoals je kan zien als je naar http://files.thebrandcode.nl/tweakers/ gaat heb ik het ttf bestand toch daadwerkelijk geupload

[Chester]

Ah, ja, mijn fout, @font-face kun je alleen gebruiken als je font op hetzelfde domein staat. Voor Google fonts kun je @import gebruiken:

code:

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

[MazzaG]

Chester schreef op donderdag 4 mei 2017 @ 12:47:
Ah, ja, mijn fout, @font-face kun je alleen gebruiken als je font op hetzelfde domein staat. Voor Google fonts kun je @import gebruiken:

code:

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

Dat deed het hem! Nice, bedankt!

[MazzaG]

Iemand die mij kan helpen met het volgende? Ik heb de balk met het motto weggehaald maar er blijft nog steeds een grijs streepje over tussen de menu bar en de search bar, zie onderstaande afbeelding.


Die grijze streep ertussen moet dus weg. Iemand die weet hoe je er vanaf komt?
Dit is mijn code:

code:

#menubar {
background-color: #7f0f26;
background-image: none;
box-shadow: none;
border: none!important;
}

#menubottombar {
display: none!important;
box-shadow: none;
border: none!important;
}

Alvast bedankt!

[Hero of Time]

Ik haal die in de mijne weg, maar heb 't nu even te druk op werk om te zoeken welk stukje dat nou precies doet. Mijn pastebin zou het nog moeten doen, dan na regel 840 is het ergens te vinden. Heel duidelijk aangegeven met /** New header **/ oid.

[Chester]

MazzaG schreef op donderdag 4 mei 2017 @ 14:12:
Iemand die mij kan helpen met het volgende? Ik heb de balk met het motto weggehaald maar er blijft nog steeds een grijs streepje over tussen de menu bar en de search bar, zie onderstaande afbeelding.
[afbeelding]

Die grijze streep ertussen moet dus weg. Iemand die weet hoe je er vanaf komt?
Dit is mijn code:

code:

#menubar {
background-color: #7f0f26;
background-image: none;
box-shadow: none;
border: none!important;
}

#menubottombar {
display: none!important;
box-shadow: none;
border: none!important;
}

Alvast bedankt!

Ik heb dit staan om een gedeelte te verbergen:

code:

#menubottombar, .fakeTop, body.hasTracker #tracker, #search #true, #search .fancyButton.categoryBrowser, #categoryBar, #newsletter, #jobs, #community, #bottom, .secondColumn.frontpage, .highlightedProductsWrapper, #news .more, .relatedArticlesContentContainer, .relatedSubjectsContentContainer, .articleActionsBar, .relevancyColumn, #streamone {
  display: none;
}

Ik verwacht dat je één van de eerste paar selectors moet hebben.

[MazzaG]

Chester schreef op donderdag 4 mei 2017 @ 15:57:
[...]


Ik heb dit staan om een gedeelte te verbergen:

code:

#menubottombar, .fakeTop, body.hasTracker #tracker, #search #true, #search .fancyButton.categoryBrowser, #categoryBar, #newsletter, #jobs, #community, #bottom, .secondColumn.frontpage, .highlightedProductsWrapper, #news .more, .relatedArticlesContentContainer, .relatedSubjectsContentContainer, .articleActionsBar, .relevancyColumn, #streamone {
  display: none;
}

Ik verwacht dat je één van de eerste paar selectors moet hebben.

Heb zelfs om er zeker van te zijn dat ik de goeie had alle selectors overgekopieerd maar het maakt geen verschil met wat ik al had... Huh

Edit: Blijkbaar had #top (de div van de menu + bottom bar) een zwarte achtergrond en sluiten menu en bottom niet helemaal aan, daardoor zag je een stukje van die zwarte achtergrond. De achtergrondkleur van #top veranderen naar die van menu bar loste mijn probleem op. Alsnog bedankt voor de hulp!

[ Voor 16% gewijzigd door MazzaG op 04-05-2017 16:20 ]

[Bonno]

Zeror schreef op dinsdag 3 november 2015 @ 21:04:
Al een hele tijd vind ik de spoiler-tag vind ik nogal storend zoals ie op GoT is. Grote zwarte vlakken is gewoon heel lelijk.

Daarom heb ik met custom css daar wat verandering in aangebracht.

*knip*

Grote voordeel is dus: Geen grote zwarte balken meer (ook geen kleine )
Onzichtbaar issie ingeklapt en neemt dus ook weinig extra ruimte in beslag. Gevolg: Geen storende spoiler-blokken meer op GoT.

Note: Er zijn nog wel wat dingetjes die verbeterd moeten worden.... Opgelost als goed is.

Thanks voor je custom css. Ik heb wat toevoegingenF.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."
doorgevoerd waardoor de spoiler blocks nu ook uitklappen bij een mouse-over zodat er geen click meer nodig is.

Cascading Stylesheet:

/* NIEUWE SPOILER LAYOUT - DOOR ZEROR */

.spoiler {
    background-color: #DAE64A;
    color: rgba(218, 230, 74, 0);
    cursor: pointer;
    font-size: 1pt;
    height: 8px;
    padding: 8px;
    border-radius: 3px;
    margin-top: -10px;
    border: 1px dashed rgba(0,0,0,0);
}

.spoiler.visible, .spoiler:hover {
    background-color: rgba(0,0,0,0);
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding-top: 28px !important;
    border: 1px dashed #C4C4C4;
}

.spoiler:hover > * {
    pointer-events: auto;
    visibility: visible;
}

.spoiler a,
.messagecontent div.spoiler a,
.messagecontent .message-quote-div div.spoiler a,
.messagecontent div.spoiler a:hover,
.messagecontent .message-quote-div div.spoiler a:hover {
    display: none;
}

.spoiler.visible a,
.spoiler:hover a,
.messagecontent div.spoiler.visible a,
.messagecontent div.spoiler:hover a,
.messagecontent .message-quote-div div.spoiler.visible a,
.messagecontent .message-quote-div div.spoiler:hover a,
.messagecontent div.spoiler.visible a:hover,
.messagecontent div.spoiler:hover a:hover,
.messagecontent .message-quote-div div.spoiler.visible a:hover,
.messagecontent .message-quote-div div.spoiler:hover a:hover {
    display: inline;
    background-color: rgba(0,0,0,0) !important;
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding: 0 !important;
    border: 0;   
    border-radius: 0;
}

.messagecontent div:not([class]) small,
.message-quote-div div:not([class]) small {
    margin-top: 8px;
    padding: 4px;
    background-color: #DAE64A;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: capitalize;
    color: #434343;
}

div.spoiler div.resizewarning {
    display: none;
}

div.spoiler.visible div.resizewarning,
div.spoiler:hover div.resizewarning,
div.spoiler.visible div.resizewarning a,
div.spoiler:hover div.resizewarning a,
div.spoiler.visible div.resizewarning a:hover,
div.spoiler:hover div.resizewarning a:hover {
    font-size: 11px !important;
    color: white !important;
    background-color: rgba(0,0,0,0) !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small,
div.messagecontent a small,
div.messagecontent td div small,
div.messagecontent div[style*="text-align:center"] small,
div.messagecontent div[style*="text-align:left"] small,
div.messagecontent div[style*="text-align:right"] small {
    background-color: rgba(0,0,0,0) !important;
    border-radius: 0;
    font-weight: normal;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    text-transform: none !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small {
    color: white !important;
}

div.messagecontent a small {
    color: #014c93 !important;
}

div.messagecontent a:hover small {
    color: #b9133c !important;
}

[Zeror]

Bonno schreef op vrijdag 5 mei 2017 @ 13:32:
[...]


Thanks voor je custom css. Ik heb wat toevoegingenF.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T...."
doorgevoerd waardoor de spoiler blocks nu ook uitklappen bij een mouse-over zodat er geen click meer nodig is.

Ik had bewust op klik gedaan zodat je content niet per ongeluk ziet.
Maargoed. Het is maar wat je zelf prettig vind.

[Bonno]

Zeror schreef op vrijdag 5 mei 2017 @ 14:44:
[...]

Ik had bewust op klik gedaan zodat je content niet per ongeluk ziet.
Maargoed. Het is maar wat je zelf prettig vind.

Haha, ja dat kan natuurlijk ook

[MazzaG]

Chester schreef op donderdag 4 mei 2017 @ 15:57:
*knip*

Ben begonnen om mijn design ook Material design te maken, net zoals jij. Ik loop echter tegen een probleempje aan. Ik heb net zoals jij #contentarea een beetje over de header heen laten lopen. Echter gaat hij nu volledig over #entity (de secties waar bijvoorbeeld specs van een product in staan) heen. Zie onderstaande afbeelding.


Nu zie ik dus de naam van het product, de specs en willen & hebben knoppen niet meer. #contentarea loopt er dus overheen. Dit is ook zo als ik naar een profiel ga. Ik zie alleen de persoonlijke gegevens en alles daaronder, niet de sectie met profielfoto, hoeveelheid karma, etc.

Hoe ik #contentarea omhoog heb geplaatst:

code:

#contentArea {
    margin-top: 20px;
    padding: 20px 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);;
    position: absolute;
    z-index: 100;
    top: 85px;
    left: 0;
    right: 0;
}

Ik heb alleen wat basic css kennis en heb pas 1x echt een website gemaakt. Nooit css van websites veranderd dus heb geen idee hoe ik dit aan moet pakken aangezien op de homepage deze code wel goed uit pakt (daar is geen #entity). Er zou dus per pagina verschillende stukken css moeten zijn lijkt mij. Hoe heb jij dit opgelost?

[ Voor 15% gewijzigd door MazzaG op 07-05-2017 22:10 ]

[Chester]

MazzaG schreef op zondag 7 mei 2017 @ 22:09:
[...]


Ben begonnen om mijn design ook Material design te maken, net zoals jij. Ik loop echter tegen een probleempje aan. Ik heb net zoals jij #contentarea een beetje over de header heen laten lopen. Echter gaat hij nu volledig over #entity (de secties waar bijvoorbeeld specs van een product in staan) heen. Zie onderstaande afbeelding.
[afbeelding]

Nu zie ik dus de naam van het product, de specs en willen & hebben knoppen niet meer. #contentarea loopt er dus overheen. Dit is ook zo als ik naar een profiel ga. Ik zie alleen de persoonlijke gegevens en alles daaronder, niet de sectie met profielfoto, hoeveelheid karma, etc.

Hoe ik #contentarea omhoog heb geplaatst:

code:

#contentArea {
    margin-top: 20px;
    padding: 20px 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);;
    position: absolute;
    z-index: 100;
    top: 85px;
    left: 0;
    right: 0;
}

Ik heb alleen wat basic css kennis en heb pas 1x echt een website gemaakt. Nooit css van websites veranderd dus heb geen idee hoe ik dit aan moet pakken aangezien op de homepage deze code wel goed uit pakt (daar is geen #entity). Er zou dus per pagina verschillende stukken css moeten zijn lijkt mij. Hoe heb jij dit opgelost?

Ik heb nog niks specifieks aan de pricewatch gedaan, maar bij mij ziet het er toch iets werkbaarder uit. Ik heb binnenkort geen tijd voor om er wat uitgebreider naar te kijken, maar als je zelf ff wilt onderzoeken kan ik alvast mijn huidige CSS delen.

[MazzaG]

Hier ook van mijn kant een WIP.
Credits naar Chester voor de inspiratie om Material design te doen

Ik ben echter nog niet helemaal tevreden met de styling van de boxes met filteropties. De box shadow is niet helemaal naar mijn wens en een border past niet bij Material design...

[ Voor 36% gewijzigd door MazzaG op 23-05-2017 11:55 ]

[LoeWn]

Mind sharing? @MazzaG

of @Chester of course

[MazzaG]

LoeWn schreef op dinsdag 23 mei 2017 @ 13:20:
Mind sharing? @MazzaG

of @Chester of course

Ik zal hem zeker hier posten als ik klaar ben maar het is nu simpelweg nog te buggy om dagelijks te gebruiken. Ik heb dit in niet heel veel tijd gemaakt en heb een extra lang weekend vanwege hemelvaart dus ik hoop hem uiterlijk zondag af te hebben. Hij krijgt dan later ook een dark versie

[Chester]

LoeWn schreef op dinsdag 23 mei 2017 @ 13:20:
Mind sharing? @MazzaG

of @Chester of course

CSS op pastebin: https://pastebin.com/Ysx41N1s
Het is nog lang niet af, gebruik op eigen risico, etc. etc.

[DennusB]

Chester schreef op dinsdag 23 mei 2017 @ 15:29:
[...]


[afbeelding]

[afbeelding]

CSS op pastebin: https://pastebin.com/Ysx41N1s
Het is nog lang niet af, gebruik op eigen risico, etc. etc.

Gelijk ingesteld. Ziet er top uit

[LoeWn]

Chester schreef op dinsdag 23 mei 2017 @ 15:29:
[...]

...

CSS op pastebin: https://pastebin.com/Ysx41N1s
Het is nog lang niet af, gebruik op eigen risico, etc. etc.

Thanks! Het is echt minder buggy dan verwacht. Echt goed bruikbaar al

Alvast begonnen met material design buttons

code:

.fancyButton {
    background-color: none;
    background-image: none;
    border: none;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 2rem;
    text-shadow: 0px 0px 0px white;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #a41e39;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    transition: .2s ease-out;
}

.fancyButton:hover {
    background-color: #90122c;
    background-image: none;
    border-color: #0a95cd;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
    transition: .2s ease-out;
}

Plus ik heb de kleuren rood wat lichter gemaakt. Ik vond het wel erg donker.
Oja, en de Frontpage items zijn iets veranderd

[ Voor 12% gewijzigd door LoeWn op 23-05-2017 16:19 ]

[MazzaG]

Dan hier ook maar mijn voorlopige code. Ik gebruik niet elk onderdeel van Tweakers dus bugreports zijn welkom als iemand ze tegenkomt! https://pastebin.com/McZitkMt

Edit: mijn code verdient zeker niet de schoonheidsprijs. Ik ben ook nog maar een beginner. Veel dingen hadden veel efficienter gekunt maarja... If it works, it ain't stupid.

[ Voor 30% gewijzigd door MazzaG op 23-05-2017 18:04 ]

[MazzaG]

LoeWn schreef op dinsdag 23 mei 2017 @ 16:04:
[...]


Thanks! Het is echt minder buggy dan verwacht. Echt goed bruikbaar al

Alvast begonnen met material design buttons

code:

.fancyButton {
    background-color: none;
    background-image: none;
    border: none;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 2rem;
    text-shadow: 0px 0px 0px white;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #a41e39;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    transition: .2s ease-out;
}

.fancyButton:hover {
    background-color: #90122c;
    background-image: none;
    border-color: #0a95cd;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
    transition: .2s ease-out;
}

Plus ik heb de kleuren rood wat lichter gemaakt. Ik vond het wel erg donker.
Oja, en de Frontpage items zijn iets veranderd

[afbeelding]

Ik heb net mijn code op Pastebin gezet. Ik heb bijna alle knoppen al volgens Material gestyled. Als je daar zoekt naar alle fancyButton styles heb je ook veel fixes voor knoppen die onbedoeld te veel padding of iets dergelijks kregen

[Hero of Time]

Die optie voor push notificaties ga ik toch nooit gebruiken en zit mij daarom behoorlijk in de weg. Dus, lossen we het op met css.

Cascading Stylesheet:

#webPushContainer {
    display: none;
}

Klaar, weg met die irritante optie waardoor je de muis nog wat verder moet bewegen voordat je de 'markeer alles als gelezen' knop hebt.

[LoeWn]

Material sliders

code:

.sliderBar {
    background: #d4d6d6;
    background-image: none;
    border: 0px solid #fff;
    border-radius: 0px;
    height: 4px;
    position: relative;
}

.sliderBar .selected {
    background: #c72d4c;
    background-image: none;
    left: 0px; 
    position: relative;
    top: 0px;
    width: auto;
    border: 0px solid white; 
}

.sliderPointer {
    cursor: pointer;
    left: 100px;
    position: absolute;
    top: -5px;
    background-color: #c72d4c;
    border-radius: 25px;
    box-sizing: border-box;
    overflow: hidden;
    width: 15px;
    height: 15px;
    padding: 15px 15px 0px 0px;
    margin-left: -1px;
}

Edit: werkt nog niet op mobiel. Dus even een media query toevoegen

[ Voor 6% gewijzigd door LoeWn op 24-05-2017 12:09 ]

[MazzaG]

LoeWn schreef op woensdag 24 mei 2017 @ 11:30:
Material sliders

[afbeelding]

code:

.sliderBar {
    background: #d4d6d6;
    background-image: none;
    border: 0px solid #fff;
    border-radius: 0px;
    height: 4px;
    position: relative;
}

.sliderBar .selected {
    background: #c72d4c;
    background-image: none;
    left: 0px; 
    position: relative;
    top: 0px;
    width: auto;
    border: 0px solid white; 
}

.sliderPointer {
    cursor: pointer;
    left: 100px;
    position: absolute;
    top: -5px;
    background-color: #c72d4c;
    border-radius: 25px;
    box-sizing: border-box;
    overflow: hidden;
    width: 15px;
    height: 15px;
    padding: 15px 15px 0px 0px;
    margin-left: -1px;
}

Edit: werkt nog niet op mobiel. Dus even een media query toevoegen

Ziet er strak uit!
Edit: Ik heb zelf al vanalles geprobeerd om de toggles (wel/niet) de onderstaande look te geven, maar kom er niet uit... Zou het jou lukken?

[ Voor 13% gewijzigd door MazzaG op 24-05-2017 14:05 ]

[Toxic_Dreams]

MazzaG schreef op woensdag 24 mei 2017 @ 14:02:
Edit: Ik heb zelf al vanalles geprobeerd om de toggles (wel/niet) de onderstaande look te geven, maar kom er niet uit... Zou het jou lukken?
[afbeelding]

Bedoel je zoiets?

[ Voor 66% gewijzigd door Toxic_Dreams op 24-05-2017 14:31 ]

[LoeWn]

@MazzaG Ik ben er toevallig wel mee bezig geweest. Enige probleempje wat ik nog heb is de z-index die niet mee wilt werken



Edit: en misschien de kleuren/fonts/schaduws etc nog aanpassen, maar eerst maar eens zorgen dat de rode varient goed toont

[ Voor 23% gewijzigd door LoeWn op 24-05-2017 14:47 ]

[Toxic_Dreams]

LoeWn schreef op woensdag 24 mei 2017 @ 14:47:
@MazzaG Ik ben er toevallig wel mee bezig geweest. Enige probleempje wat ik nog heb is de z-index die niet mee wilt werken

[afbeelding]

Edit: en misschien de kleuren/fonts/schaduws etc nog aanpassen, maar eerst maar eens zorgen dat de rode varient goed toont

Bij z-index moet je altijd een position: x; gebruiken, staat dit erbij?

[MazzaG]

LoeWn schreef op woensdag 24 mei 2017 @ 14:47:
@MazzaG Ik ben er toevallig wel mee bezig geweest. Enige probleempje wat ik nog heb is de z-index die niet mee wilt werken

[afbeelding]

Edit: en misschien de kleuren/fonts/schaduws etc nog aanpassen, maar eerst maar eens zorgen dat de rode varient goed toont

Je bent al verder gekomen dan ik! Ik had het probleem dat het bolletje ineens onder de toggle ging staan. Jij lijkt dat al onder controle te hebben. Top!

[LoeWn]

Toxic_Dreams schreef op woensdag 24 mei 2017 @ 14:58:
[...]


Bij z-index moet je altijd een position: x; gebruiken, staat dit erbij?

Position: x?

Ik ben aan het kloten met absolute en relative.

MazzaG schreef op woensdag 24 mei 2017 @ 15:01:
[...]


Je bent al verder gekomen dan ik! Ik had het probleem dat het bolletje ineens onder de toggle ging staan. Jij lijkt dat al onder controle te hebben. Top!

dan is je bolletje te breed voor de container en schiet hij er dus onder ipv naast. Of te wel, .toggleSwitch width verhogen

[Toxic_Dreams]

LoeWn schreef op woensdag 24 mei 2017 @ 15:03:
Position: x?

Ik ben aan het kloten met absolute en relative.

Waar x dus inderdaad absolute, fixed, static of relative is ( er is tegenwoordig kennelijk ook sticky, maar ik zou atm nog niet weten wat dit doet )



Dit heb ik momenteel, maar ik zou niet weten hoe ik die achtergrond goed verander wanneer je erop klikt, hoe hebben jullie dit gedaan?

[ Voor 25% gewijzigd door Toxic_Dreams op 24-05-2017 15:11 ]

[LoeWn]

Nee ik krijg het niet voor elkaar. Als ik beide spans op absolute zet.. Blijft het bolletje of altijd links, of altijd rechts..

Ik geef het op

[Toxic_Dreams]

LoeWn schreef op woensdag 24 mei 2017 @ 15:10:
Nee ik krijg het niet voor elkaar. Als ik beide spans op absolute zet.. Blijft het bolletje of altijd links, of altijd rechts..

Ik geef het op

Mag ik jouw CSS eens?

[MazzaG]

LoeWn schreef op woensdag 24 mei 2017 @ 15:03:
[...]


Position: x?

Ik ben aan het kloten met absolute en relative.

[...]


dan is je bolletje te breed voor de container en schiet hij er dus onder ipv naast. Of te wel, .toggleSwitch width verhogen

Nou gek genoeg deed hij dat al als .toggleSwitch wel 30px was en het bolletje maar 14px was...

[LoeWn]

Toxic_Dreams schreef op woensdag 24 mei 2017 @ 15:12:
[...]


Mag ik jouw CSS eens?

Sorry, al weggegooid. Als ik het opgeef is het meteen opge*****d met de code ook

[Toxic_Dreams]

LoeWn schreef op woensdag 24 mei 2017 @ 15:38:
[...]


Sorry, al weggegooid. Als ik het opgeef is het meteen opge*****d met de code ook

Oh, jammer weer haha.

[DexterDee]

Cross-post uit het "Feedback op de nieuwe layout" topic omdat misschien niet iedereen daar meeleest en op zoek is naar een oplossing voor de nieuwe layout whitespace

Features:
• Fontgrootte iets kleiner gemaakt en in lijn met de comments
• Tekst in de breedte uitgelijnd (justified)
• FP artikelen op de volle breedte tonen zonder whitespace links/rechts
• Multi-page artikelnavigatie ook in de breedte uitgelijnd
• Social sharing blokje verborgen (social links staan ook al in de header toch )
• Tweakje om de header en de content iets meer marge te geven

Here goes:

Cascading Stylesheet:

#contentArea .centeredContent .article {
    font-size: 13px;
    text-align: justify;
}

#contentArea .centeredContent .article .center, #contentArea .centeredContent .article p, #contentArea .centeredContent .article>ol, #contentArea .centeredContent .article>ul, #contentArea .centeredContent .article>h1, #contentArea .centeredContent .article>h2, #contentArea .centeredContent .article>h3, #contentArea .centeredContent .article>table, #contentArea .centeredContent .article>div, #contentArea .centeredContent .article>blockquote {
    margin-left: 0;
    margin-right: 0;
    max-width: inherit;
}

#contentArea .headingContent {
    margin-left: 0;
    margin-bottom: 20px;
}

#contentArea .headingContent h1 {
    max-width: inherit;
}

#contentArea .centeredContent .article .articleOptions {
    display: none;
}

.nextPrevLinks.large {
    max-width: inherit;
}

.reviewToc {
    width: inherit;
}

.relatedContentContainer {
    padding: 0px;
}

Uiteraard alles zonder garanties, nog niet heel uitgebreid getest

[Senaxx]

Dit is de code die ik momenteel gebruik. Alles word weer netjes aan de linkerkant gezet, en de related content en IT vacatures onder een artikel zijn weggehaald. Ook het font is weer hersteld naar 13px voor de artikelen.

Cascading Stylesheet:

.centered.articleColumn .centeredContent .article p,
.centered.articleColumn > .headingContent.nieuws,
.centered.articleColumn .centeredContent .article h2,
.centered.articleColumn .centeredContent .article h3,
.centered.articleColumn .centeredContent .article .video-wrapper,
.centered.articleColumn .centeredContent .nextPrevLinks,
.centered.articleColumn .centeredContent .reviewToc { margin-left: 30px !important; }
#heroBlock { height: 266px !important; border: 0 !important; }
.heroBackgroundImage, .articleOptions { display: none; }
#contentArea .centeredContent .article { font-size: 13px; }
#contentArea .relatedContent {display: none; }
#contentArea .nextPreviousArticleContainer {display: none; }

[Verwijderd]

Het valt mij op dat, net als mijzelf, mensen custom CSS vooral gebruiken om dingen uit tweakers weg te slopen of wijzigingen terug te draaien. Hoe zien anderen hier dit? Ligt dat aan mij of merken anderen dat ook op?

[Hahn]

Verwijderd schreef op donderdag 22 juni 2017 @ 13:11:
Het valt mij op dat, net als mijzelf, mensen custom CSS vooral gebruiken om dingen uit tweakers weg te slopen of wijzigingen terug te draaien. Hoe zien anderen hier dit? Ligt dat aan mij of merken anderen dat ook op?

En wat is daarmee?

[Verwijderd]

Hahn schreef op donderdag 22 juni 2017 @ 13:12:
[...]

En wat is daarmee?

Vind het gewoon een bijzonder verschijnsel. Tweakers past constant dingen aan, in de hoop dingen te verbeteren, en users slopen dat er dan weer uit cq draaien het terug met custom CSS. Dat lijkt me niet het doel van de wijzigingen toch? Blijkbaar kunnen wij niet zo goed tegen verandering ofzo?

[Hahn]

Verwijderd schreef op donderdag 22 juni 2017 @ 13:16:
[...]

Vind het gewoon een bijzonder verschijnsel. Tweakers past constant dingen aan, in de hoop dingen te verbeteren, en users slopen dat er dan weer uit cq draaien het terug met custom CSS. Dat lijkt me niet het doel van de wijzigingen toch? Blijkbaar kunnen wij niet zo goed tegen verandering ofzo?

Dat laatste sowieso Mensen zijn gewoontedieren, niet alleen Tweakers, dus als er iets verandert dan is de eerste reactie vaak "Maar het werkte toch goed? Waarom veranderen?!"

Maar als je na enige periode van wennen nog steeds niet blij bent met de veranderingen, dan is het ook weer niet zo gek dat mensen dingen zelf gaan terugdraaien.

[Bastien]

Heb een paar dagen de nieuwe layout getest (als abonnee) en het gebrek aan fatsoenlijk uitlijnen, indeling en verschillende fonts heeft mij ertoe gebracht om deze week e.e.a. met 'gejat' CSS aan te passen. Eigenlijk voor het eerst dat ik dat echt met layout dingen doe, eerder wel die stomme duimpjes bijvoorbeeld weggehaald.

Ik zie het nut er ook niet van in om telkens maar zaken compleet op de kop te zetten. Doe ik met mijzelf niet, met mijn huis niet etc. Dus waarom zou een website dat wel om de paar jaar moeten? Om de kudde te volgen?

Maar ik ben blij dat t.net deze optie zo geeft en dat er mensen zijn die o.a. in dit topic aanpassingen aanreiken.

[mschol]

Senaxx schreef op woensdag 21 juni 2017 @ 11:22:
Dit is de code die ik momenteel gebruik. Alles word weer netjes aan de linkerkant gezet, en de related content en IT vacatures onder een artikel zijn weggehaald. Ook het font is weer hersteld naar 13px voor de artikelen.

Cascading Stylesheet:

.centered.articleColumn .centeredContent .article p,
.centered.articleColumn > .headingContent.nieuws,
.centered.articleColumn .centeredContent .article h2,
.centered.articleColumn .centeredContent .article h3,
.centered.articleColumn .centeredContent .article .video-wrapper,
.centered.articleColumn .centeredContent .nextPrevLinks,
.centered.articleColumn .centeredContent .reviewToc { margin-left: 30px !important; }
#heroBlock { height: 266px !important; border: 0 !important; }
.heroBackgroundImage, .articleOptions { display: none; }
#contentArea .centeredContent .article { font-size: 13px; }
#contentArea .relatedContent {display: none; }
#contentArea .nextPreviousArticleContainer {display: none; }

thanks ^O^
dit helpt al een hoop om het een en ander weer goed leesbaar te maken..

[Hahn]

Bastien schreef op donderdag 22 juni 2017 @ 18:32:

Ik zie het nut er ook niet van in om telkens maar zaken compleet op de kop te zetten. Doe ik met mijzelf niet, met mijn huis niet etc. Dus waarom zou een website dat wel om de paar jaar moeten? Om de kudde te volgen?

Jij hebt ook nog steeds je allereerste tv? Allereerste radio? Bank? Koelkast? Etc... Want waarom zou je die moeten upgraden?

Hoef je niet op in te gaan, maar het is natuurlijk een beetje onzin dat je nooit met de tijd meegaat. En voor een site geldt dat nog veel meer: als je niet meegaat met de tijd, dan raak je achterhaald.

[Zeror]

De tekst staat bij mij ook weer links.



CSS kan misschien beter, maar het voldoet voor mij.

Cascading Stylesheet:

#contentArea .centeredContent .article .center, #contentArea .centeredContent .article p, #contentArea .centeredContent .article > ol, #contentArea .centeredContent .article > ul, #contentArea .centeredContent .article > h1, #contentArea .centeredContent .article > h2, #contentArea .centeredContent .article > h3, #contentArea .centeredContent .article > table, #contentArea .centeredContent .article > div, #contentArea .centeredContent .article > blockquote {
    margin-left: inherit;
    margin-right: inherit;
}

#contentArea .headingContent {
    margin-left: 0;
}

.relatedContentContainer {
    padding: 0;
}

#contentArea .centeredContent .articleOptions #shareButtonContent {
    float: right;
    margin-right: -125px;
}

#contentArea .centeredContent .articleOptions #reviewArticleMeta .pageLayout {
    margin-top: 40px;
    position: absolute;
    right: -177px;
}
#contentArea .centeredContent .articleOptions {
    right: 362px;
}

.nextPrevLinks.large.review {
    margin: 15px 0;
}

.reviewToc {
    margin: 0;
}

[-The_Mask-]

Senaxx schreef op woensdag 21 juni 2017 @ 11:22:
Dit is de code die ik momenteel gebruik. Alles word weer netjes aan de linkerkant gezet, en de related content en IT vacatures onder een artikel zijn weggehaald. Ook het font is weer hersteld naar 13px voor de artikelen.

Cascading Stylesheet:

.centered.articleColumn .centeredContent .article p,
.centered.articleColumn > .headingContent.nieuws,
.centered.articleColumn .centeredContent .article h2,
.centered.articleColumn .centeredContent .article h3,
.centered.articleColumn .centeredContent .article .video-wrapper,
.centered.articleColumn .centeredContent .nextPrevLinks,
.centered.articleColumn .centeredContent .reviewToc { margin-left: 30px !important; }
#heroBlock { height: 266px !important; border: 0 !important; }
.heroBackgroundImage, .articleOptions { display: none; }
#contentArea .centeredContent .article { font-size: 13px; }
#contentArea .relatedContent {display: none; }
#contentArea .nextPreviousArticleContainer {display: none; }

Ik mis hier eigenlijk nog dat tabellen en thumbnail plaatjes ook links worden geplaatst, daarmee is die helemaal af wat mij betreft.

Zie bijvoorbeeld een artikel als reviews: OnePlus 5 - High-end, maar net geen high five dit met bovenstaande CSS dan zie je dat de tabel en thumbnails nog gecentreerd staan.

[Hero of Time]

-The_Mask- schreef op dinsdag 27 juni 2017 @ 14:37:
[...]

Ik mis hier eigenlijk nog dat tabellen en thumbnail plaatjes ook links worden geplaatst, daarmee is die helemaal af wat mij betreft.

Zie bijvoorbeeld een artikel als reviews: OnePlus 5 - High-end, maar net geen high five dit met bovenstaande CSS dan zie je dat de tabel en thumbnails nog gecentreerd staan.

Dan moet je met je dev tools een wat grotere selectie maken. Dit is de volledige selectie aan elementen:

Cascading Stylesheet:

#contentArea .centeredContent .article .center,
#contentArea .centeredContent .article p,
#contentArea .centeredContent .article>ol,
#contentArea .centeredContent .article>ul,
#contentArea .centeredContent .article>h1,
#contentArea .centeredContent .article>h2,
#contentArea .centeredContent .article>h3,
#contentArea .centeredContent .article>table,
#contentArea .centeredContent .article>div,
#contentArea .centeredContent .article>blockquote {
margin-left: 20px;

Het stukje '>table' is wat je dan nog moet toevoegen. Geen idee welke voor plaatjes is, maar wat hierboven staat pakt iig alles behalve de ToC onderaan het artikel.

[matroosoft]

Had zojuist weer een ideetje voor een UI verbetering via CSS, maar kom er nog niet uit. Wat ik wil: ik wil snel kunnen zien waar een thread met reacties op een frontpage-artikel eindigt en een nieuwe thread begint. Vaak zie ik al snel of een thread interessant is voor mij of niet maar als ik dan op zoek ga naar de volgende thread is het erg lastig visueel te zien tijdens het scrollen. De reacties die een nieuwe thread vormen zouden eigenlijk gemarkeerd moeten zijn, want aan de afstand tot de linkerborder is het heel lastig te zien. Nu weet ik dat je threads in kan klappen, maar dat is minder eenvoudig dan scrollen, zeker op de telefoon waar het inklapknopje simpelweg aan de kleine kant is. Scrollen is altijd makkelijker.

Ik was dus al snel op zoek naar een selector voor de eerste reactie in de thread. Die is er helaas niet, maar er is wel een ander aanknopingspunt. Een hele thread heeft namelijk een eigen div id. Als je de thread een kleine pijl als achtergrondafbeelding kan meegeven in de linkerbovenhoek dan is het probleem al opgelost. Klein probleempje: de div id is helaas variabel. De id ziet er als volgt uit:

r_*********

Met op de plek van de sterretjes een achtcijferige variabele. Deze lijkt op te lopen aan de hand van de tijd waarop de eerste reactie in de thread is geplaatst. Dus een thread met een eerste reactie geplaatst om 18:00 uur heeft een lagere id dan een thread met een eerste reactie geplaatst om 18:01 uur.

Nu zou je, voor zover mijn kennis van CSS reikt, kunnen selecteren op het eerste gedeelte van de id. Wat ik bedoel is dat je alle div id's aanroept die beginnen met 'r_'. Probleem is dat er meer div id's kunnen zijn die hetzelfde beginnen en ergens anders voor worden gebruikt. Ik zou ook het eerste stukje van de variabele kunnen meepakken, ervan uitgaande dat deze niet snel zal wijzigen. Ik weet alleen niet of ik daarvan uit kan gaan. Heeft iemand anders misschien een idee?

[Hero of Time]

Ik heb met mijn CSS verticale balken van 1 pixel lopen bij reacties aan de linkerkant. De 'threadstarter' heeft dan logischerwijs niks want die springt niet in, de rest wel en bij elke inspringing komt er een extra streepje. Zou dat voldoende zijn voor je? Als ik 't goed heb, is dit de code hiervoor:

Cascading Stylesheet:

.reactie {  border-left: 1px solid #545454; }

[matroosoft]

Hero of Time schreef op donderdag 20 juli 2017 @ 08:30:
Ik heb met mijn CSS verticale balken van 1 pixel lopen bij reacties aan de linkerkant. De 'threadstarter' heeft dan logischerwijs niks want die springt niet in, de rest wel en bij elke inspringing komt er een extra streepje. Zou dat voldoende zijn voor je? Als ik 't goed heb, is dit de code hiervoor:

Cascading Stylesheet:

.reactie {  border-left: 1px solid #545454; }

Is een oplossing inderdaad, al vind ik hem niet helemaal geweldig. Overigens krijgt bij mij de threadstarter ook die extra border meer, misschien heb je nog wat extra CSS waaardoor hij bij jou verdwijnt. Ik kan het zo wel beter zien maar heel mooi is het niet. Lijn wordt zo nu en dan onderbroken en met een drukke thread krijg je erg veel lijnen op je scherm. Maar bedankt voor het meedenken

[Hero of Time]

Ik zie het, maar heel minimaal door al m'n andere CSS. Voornamelijk door de donkere kleuren die ik gebruik. Maar hoe is de lijn dan onderbroken? Ik zie een strakke lijn zonder een pixel verlies in de hele thread.

Overigens zie ik dat het volgende geen lijn geeft bij de eerste comment in een thread:

Cascading Stylesheet:

.reactie .reactie { border-left: 1px solid #F00; }

[4WardNL]

matroosoft schreef op donderdag 20 juli 2017 @ 00:46:
[...] Heeft iemand anders misschien een idee?

Voor zover ik heb kunnen zien / testen, kan je de eerste hoofdreactie van elke thread targeten d.m.v.

Cascading Stylesheet:

#reactieContainer > .reactie { /* styling */ }

Op die manier wordt de styling enkel toegepast op reacties die #reactieContainer als directe parent hebben en dus alleen op de hoofdreacties.

[matroosoft]

4WardNL schreef op vrijdag 21 juli 2017 @ 12:05:
[...]


Voor zover ik heb kunnen zien / testen, kan je de eerste hoofdreactie van elke thread targeten d.m.v.

Cascading Stylesheet:

#reactieContainer > .reactie { /* styling */ }

Op die manier wordt de styling enkel toegepast op reacties die #reactieContainer als directe parent hebben en dus alleen op de hoofdreacties.

Geniaal! Werkt prima zo. Bedankt voor het idee.

Hero of Time schreef op vrijdag 21 juli 2017 @ 00:18:
Ik zie het, maar heel minimaal door al m'n andere CSS. Voornamelijk door de donkere kleuren die ik gebruik. Maar hoe is de lijn dan onderbroken? Ik zie een strakke lijn zonder een pixel verlies in de hele thread.

Overigens zie ik dat het volgende geen lijn geeft bij de eerste comment in een thread:

Cascading Stylesheet:

.reactie .reactie { border-left: 1px solid #F00; }

Ik heb nu toch maar 4ward's idee gepakt, heb liever opmaak bij de eerste dan juist alleen bij de andere. Maar zoals gezegd, bedankt voor het meedenken. Ik gebruik nu dit:

Cascading Stylesheet:

#reactieContainer > .reactie{
border-left: 1px solid #cfd4c9;
}

Geeft een grijze lijn van de ene threadstarter naar de andere.

[Hero of Time]

Dat werkt ook. Ik ben niet zo bekend met alle opties van CSS, zoals het gebruik van > bij selectors.

[Hero of Time]

Op verzoek, en ook voor anderen makkelijker en langer te benaderen, mijn CSS op Gdrive.

[ Voor 32% gewijzigd door Hero of Time op 15-12-2019 10:04 ]

[Lanithro]

MazzaG schreef op dinsdag 23 mei 2017 @ 17:58:
Dan hier ook maar mijn voorlopige code. Ik gebruik niet elk onderdeel van Tweakers dus bugreports zijn welkom als iemand ze tegenkomt! https://pastebin.com/McZitkMt

Edit: mijn code verdient zeker niet de schoonheidsprijs. Ik ben ook nog maar een beginner. Veel dingen hadden veel efficienter gekunt maarja... If it works, it ain't stupid.

Ik heb deze van jou gepakt. Ziet er goed uit. Echter de zoekfunctie mag van mij wel iets opvallender dat grijs op donkerrood is erg onduidelijk. Ik ben geen coder dus zou niet weten waar ik dat aan moet passen.

[Hero of Time]

Lanithro schreef op vrijdag 4 augustus 2017 @ 15:24:
[...]

Ik heb deze van jou gepakt. Ziet er goed uit. Echter de zoekfunctie mag van mij wel iets opvallender dat grijs op donkerrood is erg onduidelijk. Ik ben geen coder dus zou niet weten waar ik dat aan moet passen.

Speel eens met de kleurwaarde in dit stukje code:

Cascading Stylesheet:

/* KLEUREN HEADER */
#searchbar, #top {
background-color: #a41e39;
border-radius: 0;
}

Als je de background-color een heel andere, duidelijke waarde geeft, bijvoorbeeld #00FF00 om 't groen te maken, dan weet je waar het zit. Dan is het een kwestie van color: #hexwaarde; toevoegen, daar of aan het stukje eronder met alleen #searchbar.

[Lanithro]

Hero of Time schreef op vrijdag 4 augustus 2017 @ 15:37:
[...]

Speel eens met de kleurwaarde in dit stukje code:

Cascading Stylesheet:

/* KLEUREN HEADER */
#searchbar, #top {
background-color: #a41e39;
border-radius: 0;
}

Als je de background-color een heel andere, duidelijke waarde geeft, bijvoorbeeld #00FF00 om 't groen te maken, dan weet je waar het zit. Dan is het een kwestie van color: #hexwaarde; toevoegen, daar of aan het stukje eronder met alleen #searchbar.

Het wordt er dan niet beter op. Hij gaat dan over de hele breedte van de pagina de kleur veranderen en niet het zoekveld.

[Hero of Time]

Lanithro schreef op vrijdag 4 augustus 2017 @ 15:43:
[...]

Het wordt er dan niet beter op. Hij gaat dan over de hele breedte van de pagina de kleur veranderen en niet het zoekveld.

Je hebt ook nog het element #searchbar. De reden dat de hele balk verandert is vanwege het element #top wat er bij staat. Iets lager staat #searchbar in z'n eentje. Let wel, als je de background-color verandert is het wellicht handig om het element bij #top te verwijderen.

[TI_Observer]

matroosoft schreef op donderdag 20 juli 2017 @ 00:46:
Had zojuist weer een ideetje voor een UI verbetering via CSS, maar kom er nog niet uit. Wat ik wil: ik wil snel kunnen zien waar een thread met reacties op een frontpage-artikel eindigt en een nieuwe thread begint. Vaak zie ik al snel of een thread interessant is voor mij of niet maar als ik dan op zoek ga naar de volgende thread is het erg lastig visueel te zien tijdens het scrollen. De reacties die een nieuwe thread vormen zouden eigenlijk gemarkeerd moeten zijn, want aan de afstand tot de linkerborder is het heel lastig te zien. Nu weet ik dat je threads in kan klappen, maar dat is minder eenvoudig dan scrollen, zeker op de telefoon waar het inklapknopje simpelweg aan de kleine kant is. Scrollen is altijd makkelijker.

Ik was dus al snel op zoek naar een selector voor de eerste reactie in de thread. Die is er helaas niet, maar er is wel een ander aanknopingspunt. Een hele thread heeft namelijk een eigen div id. Als je de thread een kleine pijl als achtergrondafbeelding kan meegeven in de linkerbovenhoek dan is het probleem al opgelost. Klein probleempje: de div id is helaas variabel. De id ziet er als volgt uit:

r_*********

Met op de plek van de sterretjes een achtcijferige variabele. Deze lijkt op te lopen aan de hand van de tijd waarop de eerste reactie in de thread is geplaatst. Dus een thread met een eerste reactie geplaatst om 18:00 uur heeft een lagere id dan een thread met een eerste reactie geplaatst om 18:01 uur.

Nu zou je, voor zover mijn kennis van CSS reikt, kunnen selecteren op het eerste gedeelte van de id. Wat ik bedoel is dat je alle div id's aanroept die beginnen met 'r_'. Probleem is dat er meer div id's kunnen zijn die hetzelfde beginnen en ergens anders voor worden gebruikt. Ik zou ook het eerste stukje van de variabele kunnen meepakken, ervan uitgaande dat deze niet snel zal wijzigen. Ik weet alleen niet of ik daarvan uit kan gaan. Heeft iemand anders misschien een idee?

div[id^="r_"] { } (de ^ kijkt naar de id waarde die begint met r_). De kans is klein dat hij ergens wordt gebruikt, anders moet je hem beter specificeren, bijv: .post div[id^="r_"] { }

[JKP]

[ Voor 113% gewijzigd door JKP op 26-09-2023 14:49 ]

[SqueakyClean]

Ik ben al een tijdje bezig met een custom layout, maar ben geen IT-er, dus vooral trial en error...

Nu vraag ik me af of ik via ccs het aantal nieuwsitems kan beïnvloeden? Alle nieuwsberichten van de afgelopen week oid zou perfect zijn. Dus op kenmerk tijd of aantal.

Iemand een idee?

[Hero of Time]

Dat kan je niet met CSS aanpassen. Het aantal artikelen dat je ziet wordt door de server bepaald tenzij je er minder wilt, dan maak je het element kleiner. In geval van een aantal in de tracker wordt dat door javascript bepaald met mogelijk server-side beperkingen.

[wizai]

Ik probeer al enige tijd om de onderstaande "Inhoudsopgave" balk dezelfde kleur te krijgen als de menubalk.
Dit gaat via:

code:

reviewToc useVisitedState">   <--- dit is de Div
<h2>Inhoudsopgave</h2>       <--- dit is de tekst

Dit zet ik in de custum CSS code als:

.reviewToc h2{
background-color:#0B1E36;
}

Diverse variaties gevonden en toegepast, helaas blijft het een rode balk.




Heeft iemand hier al iets op gevonden?

[ Voor 15% gewijzigd door wizai op 01-09-2017 14:22 ]

[Hero of Time]

Dit is de volledige selector met kleur codes:

Cascading Stylesheet:

#toc.fixed .reviewToc h2 {
    background-color: #a41e39;
    background-image: -webkit-linear-gradient(top,#a41e39,#9a0e36 68px);
    background-image: linear-gradient(to bottom,#a41e39,#9a0e36 68px);
    border-bottom: 1px solid #333;
    box-shadow: inset 0 -1px 0 #b13941;
}

Zoals je ziet wordt er background-color, -image en box-shadow gebruikt. Uiteindelijk wordt er maar 1 effectief gebruikt. Wil je het dus echt overrulen, dan moet je alle kleur definities meenemen of je gebruikt !important.

[ Voor 8% gewijzigd door Hero of Time op 01-09-2017 14:37 ]

[wizai]

Hero of Time schreef op vrijdag 1 september 2017 @ 14:36:
Dit is de volledige selector met kleur codes:

Cascading Stylesheet:

#toc.fixed .reviewToc h2 {
    background-color: #a41e39;
    background-image: -webkit-linear-gradient(top,#a41e39,#9a0e36 68px);
    background-image: linear-gradient(to bottom,#a41e39,#9a0e36 68px);
    border-bottom: 1px solid #333;
    box-shadow: inset 0 -1px 0 #b13941;
}

Zoals je ziet wordt er background-color, -image en box-shadow gebruikt. Uiteindelijk wordt er maar 1 effectief gebruikt. Wil je het dus echt overrulen, dan moet je alle kleur definities meenemen of je gebruikt !important.

Dat werkt inderdaad beter. Gaaf, bedankt!

[LankHoar]

Geweldig CSS! Ik ben zelf echt een n00b met CSS, maar gelukkig heb ik al meermalen gebruik gemaakt van code van mede tweakers die hier wél raad mee weten

Ik vind het toch maar eens tijd worden voor een donker thema, echter werk Hero of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'" uit de OP helaas niet geweldig meer, het laat de boel er nogal vreemd uitzien.. Zijn er nog anderen die een meer up-to-date donker thema draaien? Ik houd me aanbevolen om je code in te zien!

[Hero of Time]

LankHoar schreef op woensdag 6 september 2017 @ 21:30:
Geweldig CSS! Ik ben zelf echt een n00b met CSS, maar gelukkig heb ik al meermalen gebruik gemaakt van code van mede tweakers die hier wél raad mee weten

Ik vind het toch maar eens tijd worden voor een donker thema, echter werk Hero of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'" uit de OP helaas niet geweldig meer, het laat de boel er nogal vreemd uitzien.. Zijn er nog anderen die een meer up-to-date donker thema draaien? Ik houd me aanbevolen om je code in te zien!

Pssst, paar posts hierboven: Hero of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

[LankHoar]

Hero of Time schreef op woensdag 6 september 2017 @ 22:14:
[...]

Pssst, paar posts hierboven: Hero of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"

Yes, vele malen beter dit! Mijn ogen zijn @Hero of Time dankbaar!

-EDIT- toch gaat er iets mis, ik kan namelijk niet meer mijn profieldingen openen (op mijn profielnaam klikken gaat niet, daar loopt een zoekbalk doorheen). Zo kan ik ook mijn CSS niet meer aanpassen volgens mij

[ Voor 24% gewijzigd door LankHoar op 06-09-2017 22:17 ]

[Hero of Time]

LankHoar schreef op woensdag 6 september 2017 @ 22:16:
[...]


Yes, vele malen beter dit! Mijn ogen zijn @Hero of Time dankbaar!

-EDIT- toch gaat er iets mis, ik kan namelijk niet meer mijn profieldingen openen (op mijn profielnaam klikken gaat niet, daar loopt een zoekbalk doorheen). Zo kan ik ook mijn CSS niet meer aanpassen volgens mij

Hmm, tja, ik doe zelf nog wat met breedtes e.d. Wat is de resolutie van je scherm? Ik heb iig wel een paar bugs in dat menu, achtergrond is donker en de tekst is zwart. Ook de hover highlight werkt niet voor elk item.

Prefs om weer bij je CSS settings te komen: https://tweakers.net/instellingen/layout/.

[LankHoar]

Hero of Time schreef op woensdag 6 september 2017 @ 22:19:
[...]

Hmm, tja, ik doe zelf nog wat met breedtes e.d. Wat is de resolutie van je scherm? Ik heb iig wel een paar bugs in dat menu, achtergrond is donker en de tekst is zwart. Ook de hover highlight werkt niet voor elk item.

Prefs om weer bij je CSS settings te komen: https://tweakers.net/instellingen/layout/.

Full HD is mijn resolutie. Snelle blik doet me zien dat ik af en toe "1200px" en ook 1250 zie staan, moet ik dat veranderen in 1920 en 1900 ofzo?

[Hero of Time]

LankHoar schreef op woensdag 6 september 2017 @ 22:21:
[...]

Full HD is mijn resolutie. Snelle blik doet me zien dat ik af en toe "1200px" en ook 1250 zie staan, moet ik dat veranderen in 1920 en 1900 ofzo?

Het enige wat ik in m'n eigen CSS die ik in m'n profiel heb staan gebruik met 1200px is een @media tag, te weten het volgende:

Cascading Stylesheet:

@media only screen and (min-width: 1200px) {
        #contentArea {
                width: 70% !important;
        }
        #menu { 
                width: 70% !important;
        }
}

Dat zou voldoende moeten zijn. Ik doe op m'n werk niets en bovenstaande is genoeg in principe. Staat dat niet in m'n versie die ik online heb geslingerd? Zal daar morgen of vrijdag eens naar kijken dan.

Negeer onderstaande eigenlijk, dat is legacy zie ik net.

---

Ehm, thuis heb ik voor m'n HTPC ook full HD, maar doe via m'n browser nog wat extra CSS inladen. Zo doe ik het volgende (eigenlijk meer dan dit, maar dit zorgt iig voor een werkbare menubalk en laat het onderaan ook wat netter aansluiten):

Cascading Stylesheet:

/* Set the width of various elements placed in #contentArea */
#menu, #contentArea, .content .tab, .content .tab_active { 
        width: 1475px !important;
}

/* Bottom */
#ticker, #about {
        width: 1450px !important;
}

M'n PC heeft een hogere resolutie (2560x1440), maar heeft het venster niet in de volle breedte open en is de selectie een stuk kleiner met wat ik vergroot.

Cascading Stylesheet:

/* Set the width of various elements placed in #contentArea */
#contentArea {
        width: 1425px !important;
}

#menu { 
        width: 1500px !important;
}

/* Bottom */
#ticker, #about {
        width: 1300px !important;
}

Zie maar welke van de twee je liever gebruikt. Op m'n werk heb ik ook full HD, maar geen idee wat voor code ik daar specifiek nog toevoeg. Aangezien ik daar eigenlijk geen direct issue heb, doe ik blijkbaar ook wat met de breedte van het menu bovenin.

Schiet mij nog te binnen, hoewel ik de social knoppen bij artikelen verberg, zijn ze nog wel zichtbaar bij reviews. Er wordt blijkbaar een andere selector gebruikt bij die artikelen. Helaas voor mij, omdat ik nog wat met breedtes doe, valt het over de tekst heen. Dit komt o.a. door het centreren van de content en het schuift iets op als er rechts wat geplaatst wordt zoals informatie over de auteur. Nog iets wat ik moet fixen en zo gaat er bij elke aanpassing aan de kant van Tweakers iets stuk in mijn code.

[ Voor 13% gewijzigd door Hero of Time op 06-09-2017 23:07 . Reden: Code opnieuw bekeken wat ik werkelijk gebruik. Reactie daarvoor aangepast. ]

[Antrax]

Het was weer eens tijd voor een nieuw jasje. na veel aanpassingen maar dit gedaan. Beetje jammer dat Tweakers geen open source was anders had ik hier en daar nog wat meer kunnen tweaken

Ik heb hier en daar van iedereen wat gepakt en weet dus niet meer wie ik moet crediten. Bedankt in ieder geval voor de mooie oplossingen die er tussen staan

Resultaat (Klik op plaatjes voor voorbeeld (duh):



Stylesheet code: https://pastebin.com/sMXL0RZ3

[Luca]

Een hele tijd geleden eens begonnen met mijn eigen versie van de layout. Beetje a la Material Design met eigen input. Is nog lang niet klaar, maarja. Thoughts?

Screenshots

Reeds gelezen artikels zijn dus lichtgrijs gemaakt. Ikzelf zit nog na te denken hoe ik dat wat eleganter kan doen. Tips?

[ Voor 11% gewijzigd door Luca op 21-09-2017 17:50 ]

[Hero of Time]

Dat lichtgrijs van de gelezen artikels is wel een erg laag contrast met de witte achtergrond. Weet je zeker dat je het zo wilt houden, ipv het iets donkerder maken of een kleur geven?

[Meg]

Weet iemand hoe ik dit leesbaar krijg/wit?

De CSS: https://pastebin.com/71juutVR

[Hero of Time]

Hoe, wat, welk element, welke pagina? En is dat mijn CSS toevallig?

[ Voor 6% gewijzigd door Hero of Time op 21-09-2017 20:38 ]

[Meg]

Hero of Time schreef op donderdag 21 september 2017 @ 20:36:
Hoe, wat, welk element, welke pagina? En is dat mijn CSS toevallig?

Zou kunnen, ik heb die ooit ergens gevonden hier. Maar die screen is gemaakt op deze pagina.

[Hero of Time]

Markimoo schreef op donderdag 21 september 2017 @ 20:45:
[...]

Zou kunnen, ik heb die ooit ergens gevonden hier. Maar die screen is gemaakt op deze pagina.

Weet wel zeker dat het mijn code is, aangezien ik de eerste was met een donker thema. Een paar mensen hebben het overgenomen. De opmaak is ook hoe ik de mijne heb gedaan met blokken voor algemeen, FP en GoT.

Maar je zegt nog niet welk element je een probleem mee hebt. Is het de 'meer informatie'? Is het de knop 'bestel' wat bij jou blijkbaar blauw is? Iets anders? Heb je overigens eerst zelf via 'inspect element' gekeken wat de css ervan is om het zo zelf aan te passen?

[Meg]

Ik heb geen idee hoe de inspect element zou werken om het stuk CSS te vinden - ja nu klink ik dom - maar het gaat vooral om de "meer informatie" die ik niet kan lezen. Alhoewel ik dat blauwe(?) of is het paars(?) graag wit zou hebben.

@Hero of Time

[ Voor 4% gewijzigd door Meg op 21-09-2017 21:42 . Reden: Stiekem heb ik twee linker handen op dit gebied. ]