Feature: Custom CSS how-to?

[nachtnet]

Naar aanleiding van o.a. dit topic: GoT krijgt een schermruimte opvretend Google design ?! vraag ik mij af waarom er niet een (minimale) HOW-TO aanwezig is om Custom Tweakers CSS toe te passen.

Voor UBB/RML is er deze: Overzicht van UBB-codes

Er zijn wel Show jouw custom CSS topics, maar die zijn voor mij echt een maatje te groot en onoverzichtelijk. Ik kan nu niet eens goed vinden welke CSS bestanden is waar kan downloaden om te bewerken en in te zetten als Custom-CSS.

[ Voor 6% gewijzigd door nachtnet op 04-01-2019 13:58 ]

[dec0de]

je gaat naar instellingen, scroll naar beneden naar custom stylesheet, en daar klik je eigen stylesheetinstellingen toepassen, ervanuitgaande dat je die feature hebt gekocht.

om te weten welk element je wil aanpassen, gebruik je element inspecteren

[Hero of Time]

@Lets find it, dat laatste is denk nou net waar deze feature voor is. Hoe gebruik je het, waar vind je om iets aan te passen en wat hebben welke zaken invloed op. Geef een link een kleur en het kan op meer plekken veranderen dan je in eerste instantie merkt. Hoe maak je dan het onderscheid tussen de link in een reactie, die in de berichtheader, in de tracker, op het forumoverzicht, etc.

@nachtnet, volgens mij vraag je eigenlijk om een snelcursus CSS.

[nachtnet]

Niet alleen dat, ook vraag ik om een globale how-to om de originele css structuur te kunnen bekijken en wat hoe met elkaar samen hangt. Zoals in jouw @Lets find it antwoord. Nu is het bij aankoop van de feature css 'zoek het allemaal zelf maar uit'

[b2vjfvj75gjx7]

Custom CSS is easy - je kan er van alles mee doen.

[Hahn]

b2vjfvj75gjx7 schreef op zaterdag 5 januari 2019 @ 18:45:
[Afbeelding]

Custom CSS is easy - je kan er van alles mee doen.

Oh ja, door deze screenshot kan nu iedereen het.



Wat is precies het nut van deze post?

[nachtnet]

@b2vjfvj75gjx7 dat het kan is 1 (en dat snap ik)
Hoe het kan en waar te beginnen is 2. (Zeker voor de tweakers zoals ik die geen/weinig css kaas gegeten hebben)


Met ubb/rml weet ik inmiddels redelijk de weg, o.a. Door de genoemde faq/overzicht ubb. (zie f1 topics)

Mijn punt is als ik aan de gang wil om mijn tweakers (forum) iets aa te passen ik nu niet weet waar en hoe te beginnen.

[ Voor 42% gewijzigd door nachtnet op 05-01-2019 19:05 ]

[b2vjfvj75gjx7]

Hahn schreef op zaterdag 5 januari 2019 @ 18:47:
[...]


Wat is precies het nut van deze post?

Laten zien hoe eenvoudig het is om een modulair / scalable SCSS (less / sass | sassy css) interface te maken, mits je de juiste compilers hebt draaien.

Overigens ben ik striptekenaar, van CSS heb ik nauwelijks kennis - kan je nagaan.

[Hahn]

b2vjfvj75gjx7 schreef op zaterdag 5 januari 2019 @ 19:11:
[...]

Laten zien hoe eenvoudig het is om een modulair / scalable SCSS (less / sass | sassy css) interface te maken, mits je de juiste compilers hebt draaien.

Dat laat je screenshot totaal niet zien. Het enige wat je screenshot laat zien is dat je er van alles mee kan, maar niet dat het eenvoudig is en al helemaal niet hoe je het moet doen.

[b2vjfvj75gjx7]

nachtnet schreef op zaterdag 5 januari 2019 @ 18:51:
@b2vjfvj75gjx7 dat het kan is 1 (en dat snap ik)
Hoe het kan en waar te beginnen is 2. (Zeker voor de tweakers zoals ik die geen/weinig css kaas gegeten hebben)


Met ubb/rml weet ik inmiddels redelijk de weg, o.a. Door de genoemde faq/overzicht ubb. (zie f1 topics)

Mijn punt is als ik aan de gang wil om mijn tweakers (forum) iets aa te passen ik nu niet weet waar en hoe te beginnen.

Volgens mij heeft Tweakers geen ontwerpers in dienst;

Ze "flikkeren" gewoon zonder enige logica allemaal buttons en elementen in het scherm en de developers voeren het - zonder te kijken naar de UX / UI / UA - zo goed mogelijk uit.

Dus vanuit de ontwerpers van Tweakers hoef je geen hulp te verwachten; er zijn geen ontwerpers aanwezig (check alleen maar de wildgroei van typografische conventies, totaal onbruikbare icons en de afwezigheid van een roadmap op het gebied van ux / ui design).

[NMe]

nachtnet schreef op vrijdag 4 januari 2019 @ 13:56:
Er zijn wel Show jouw custom CSS topics, maar die zijn voor mij echt een maatje te groot en onoverzichtelijk. Ik kan nu niet eens goed vinden welke CSS bestanden is waar kan downloaden om te bewerken en in te zetten als Custom-CSS.

Uit die vraagstelling blijkt een beetje dat je niet helemaal begrijpt hoe CSS zelf werkt. Zodra je weet wat CSS is begrijp je denk ik ook wel dat het ondoenlijk is om het soort how-to waar je hier om vraagt te schrijven.

CSS staat voor Cascading Style Sheet. Dat eerste woord is belangrijk: cascading. CSS wordt toegepast op volgorde van specificiteit en wanneer die specificiteit hetzelfde is, de volgorde waarop het ingelezen wordt door je browser. Stel Tweakers heeft een stukje CSS dat alle paragrafen blauwe tekst geeft:

Cascading Stylesheet:

p { color: blue }

Jij vindt blauw lelijk en ziet liever rood. Dan kun je in de custom CSS, die later wordt toegevoegd aan je browser dan de algemene, dit doen:

Cascading Stylesheet:

p { color: red }

Je hoeft dus geen CSS te downloaden, je voegt gewoon alleen die ene regel toe aan je eigen custom CSS.

Nou komt het niet vaak voor dat je dermate globaal dingen stylet. Meestal wil je classes (kunnen vaker op dezelfde pagina voorkomen) en ID's (uniek per pagina) gebruiken om te verwijzen naar specifieke delen van de pagina. Stel je wil echt alleen de inhoud van berichten op GoT rood maken, dan inspecteer je met je browser zo'n bericht en zie je dat de container waar die post omheen staat een class messageContent heeft. Je kan dus zoiets doen:

Cascading Stylesheet:

.messageContent { color: red }

...en dan zijn alle berichten op GoT rood.

Nou is het verder ondoenlijk om echt uit te leggen wat je moet aanpassen om wat te doen. Dat hangt er maar net allemaal vanaf wat je precies wil aanpassen, en om het nog ingewikkelder te maken verandert elke CSS-update potentieel iets waardoor die omschrijving niet meer accuraat zou zijn. Custom CSS gebruiken vereist dat je ofwel iets van kennis hebt van CSS, ofwel dat je het overneemt van iemand die het al voor je gedaan heeft. Een simpele how-to anders dan "hier staat het tekstvakje, daar staat een CSS-tutorial, leef je uit" gaat er realistisch bezien gewoon niet kunnen komen.

[nachtnet]

Met een aantal van de pointers uit dit topic ben ik iig een stap dichterbij het gewenste resultaat gekomen. Tags zijn niet meer rond maar terug vierkant, De groene "alles" knop is weer grijs.

Cascading Stylesheet:

#tweakbase_relations .rbProductlist .item .thumb,
#tweakbase_relations .rbProductlist .item .thumb img {
    height: 20px;
    width: 26px;
}
#tweakbase_relations .rbProductlist .item p.desc {
    margin-top: 0;
}
#tweakbase_relations .rbEntitylist .relatedSubject {
    border-radius: 00px;
    background: #014A93;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
}

.filterPosts ul li.active {
        border-color: #d9d9d9;
    background: #DDDDDD;
}
.filterPosts ul li.active a {
    color: #666;
}