Spelen en knoeien met CSS
Een website leuker maken, dat geeft voldoening. Het is alleen niet zo gemakkelijk. Ik ben zelf helemaal geen designer, en daarom kies ik liever een ontwerp van iemand die iets heeft gemaakt wat ik mooi vind. Op mijn nieuwe plek write.as zijn er wel templates van mensen die iets gemaakt hebben, maar dat zijn er niet zoveel. Op mijn blogje mistynotes.wordpress.com had ik het “libretto”-thema, en daar was ik wel tevreden mee. Dit heb ik nu gebruikt om mistynotes.nl vorm te geven met css. Lees hoe dat in zijn werk gaat op write.as.
Afkijken
Dus eigenlijk is het gewoon “afkijken” van een ander. Maar van afkijken kun je veel leren, nietwaar? In ieder geval heb ik vandaag het uiterlijk van mistynotes.nl zo veranderd, dat ik er tevreden mee ben. Allereerst wilde ik de kleuren van de site goed zetten. En dan op zo'n manier dat de achtergrond en het tekstgedeelte nèt een andere kleur hebben. Precies zoals dat bij het libretto thema werkt dus. Bij het bepalen hoe dat moet heb ik ook weer afgekeken, namelijk van andere thema's die voor write.as beschikbaar zijn. Ik heb geleerd dat het tekst-gedeelte met een “article”-tag te vinden is. Deze tag kun je gebruiken als “selector” in je css. Allereerst even de kleur van de achtergrond bepalen.
body {
background: #f2f1ed;
}
En dan die van het “article”
article {
padding-top: 50px;
background-color: #faf9f5;
-moz-box-shadow: 1px 1px 2px #eae9e5;
-webkit-box-shadow: 1px 1px 2px #eae9e5;
box-shadow: 1px 1px 2px #eae9e5;
}
En je ziet dat ik er ook een klein schaduwtje aan geplakt heb, en de bovenkant iets (50 pixels) naar beneden geduwd heb. Steeds afkijken dus.
Koppen
Daarna vond ik dat de kleur en hoe de kopjes eruit zien wat meer moesten lijken op het libretto-thema. Daarom heb ik de twee belangrijkste koppen een opvallende kleur gegeven, en de kleinere tussenkopjes een kleur die op grijs lijkt. Ook heb ik het font-type aangepast. Nu weet ik niet zeker of dit laatste altijd goed werkt. Maar ik denk dat, als het niet werkt, terug gevallen wordt op het oorspronkelijk lettertype. Dus dat is dan geen ramp.
h1, h2 {
font-family: libretto-icons;
color: #943526;
padding-top:15px;
text-align: center;
}
h3, h4 {
color: #787065;
}
.post-title, .dt-published {
color: #787065 !important;
font-family: libretto-icons;
text-align: center;
}
Samen met de kopjes heb ik ook nog wat veranderd aan het tijdstempel, of eigenlijk de tekst met de datum van publicatie (.post-title, .dt-published). Ik wilde de kop en deze datum gecentreerd hebben. Ook wilde ik vóór en na de datum een tilde zetten. In het libretto-thema is dat een mooi figuurtje, maar hier bij de minimalisten van write.as past dat misschien niet zo, dus een tilde is snel gemaakt, en is natuurlijk ook makkelijker. De datum kan ik vinden met de tag “time”. Ik gebruik natuurlijk de f-12 knop in de browser om alles “onder de motorkap” te kunnen bekijken.
time::before {
content: "~";
}
time::after {
content: "~";
}
Beginletter
Wat ik ook leuk vind, is dat de beginletter van een tekst soms wat groter gemaakt wordt. Doet me denken aan die middeleeuwse monniken die hele mooie tekeningen maakten van die eerste letter. Ik ben wat bescheidener en maak het alleen wat groter en geeft het een ander kleurtje.
/* <p:first-of-type> is of no use, because there is always an image in the first paragraph in my blog*/
p:nth-child(2) {
display:inline-block !important;
}
p::first-letter {
font-size: 120%;
color: #787065;
}
Het was een heel gedoe om te vinden hoe dat nou moest. Want ik heb in mijn blog als eerste altijd een plaatje, een “image”, vlak onder de titel. Dus ik kon geen gebruik maken van de css-mogelijkheid “first-of-type”, om alleen de eerste paragraaf van zo'n mooi versierinkje te voorzien. Alle paragrafen, is gewoon teveel van het goede, vind ik. Nu is het zo, dat bij write.as alle paragrafen al als “inline”-display staan gedefinieerd. Hierdoor kun je de letters ervan niet van veranderen. Wist ik ook niet, hoor. 
Dus ik moest zoeken hoe ik de eerste paragraaf kan veranderen in “display:inline-block”, omdat je daar de eerste letter dan weer wel van kunt veranderen. De website w3schools heeft mij hierbij heel erg geholpen. Wat een puzzel is dat css toch! Ik vond de css manier om kindjes te zoeken: p:nth-child(2), het tweede kind is de klos. Want in de eerste staat kennelijk het plaatje. Write.as zet steeds alles in een paragraaf, kennelijk. Nou, dat tweede kindje moest ik veranderen, en er ook nog voor zorgen dat ik voorrang krijg op de andere instellingen van write.as. Daarom staat er !important achter. Waarschijnlijk snap je er geen hol van, maar je komt er vanzelf achter als je het probeert. Lees dit stukje dan nog maar eens door.
Opblazen
Het Libretto thema zoals dat oorspronkelijk werkte, maakte de hoofd-illustraties bij het artikel groter dan het kader. Nu is dat niet meer zo bij WordPress.com, sinds de nieuwste release. Geen idee waarom niet, en ik krijg daar ook geen antwoord. Maar goed, dat is helemaal niet zo erg. Want in tegenstelling tot WordPress.com is het bij write.as wel mogelijk hier en daar wat aanpassingen aan het uiterlijk te doen.
.e-content{
overflow: visible;
}
div.e-content img.img_main{
margin-left: -100px;
margin-right: -100px;
max-width: 132% !important;
width: 132%;
}
Dit was eerlijk gezegd ook niet makkelijk voor mijn onervaren css-vaardigheden. De f-12 knop en w3schools zijn dan wel een grote hulp. Uiteindelijk is het me wel gelukt. Als je uit de artikelen die op de hoofdpagina staan, er ééntje kiest en je gaat dan dus naar het artikel, dan zie je ineens een groter plaatje. Alsof je het artikel openmaakt en uitpakt.
Alles bij elkaar
Ik weet niet of het echt robuust en gedegen is. Dat is altijd wel het probleem als je begint met iets waar je weinig ervaring mee hebt. Soms moest ik helaas met !important wat uit de minimalistische “styleguide” van write.as breken. Maar goed, de tijd zal het leren. 
Mocht je hetzelfde thema willen gebruiken, daar heb ik helemaal geen probleem mee. Hier heb je het hele stukje css. Je ziet hier ook dat ik plaatjes links of rechts iets buiten het kader en in de marge gedrukt, kan tonen. Voor de plaatjes moet je dan wel de html-wijze gebruiken en niet de mark-down, tijdens het schrijven. Bijvoorbeeld:
<img src="https://i.snap.as/1ziyarj.png" alt="Prutsen met css" class="img_main"/>
voor het hoofdimage, of
<img src="https://i.snap.as/DhLCcpI.png" alt="kwastcss" class="img_left"/>
voor een beeld aan de zijkant. En denk er dan ook aan, dat als je zelf het artikel niet begint met een plaatje, dat je dan p:nth-child(2) verandert in p:nth-child(1). Als je iets ziet dat beter kan, wat heel goed mogelijk is natuurlijk, dan houd ik me aanbevolen!
Opdracht
Je ziet overigens ook dat ik het “published with write.as” hier beneden weggehaald heb. Met Javascript. Dat kan natuurlijk ook met css. Dat is een leuke leeropdracht voor je. Probeer het stukje met css weg te krijgen. Ik heb het wel op mijn “over mij” pagina gezet. Want ere wie ere toekomt. Het hoeft alleen niet op iedere pagina van mijn blogje te staan, nietwaar? Laat het maar weten als je vragen hebt. In ieder geval ben ik tevreden over het uiterlijk van mistynotes.nl. Of dat morgen ook nog zo is, dat is natuurlijk afwachten.