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.

#write.as #css #wordpress #website #hacks

Ruim twee jaar geleden ben ik begonnen met een blogje op WordPress.com, dat ongeveer een keer per maand een notitie oplevert. In die tijd had ik helemaal geen verstand van #WordPress, en ik had ook weinig tijd om me er helemaal in te verdiepen. Ik vond WordPress.com een prima manier om eenvoudig en simpel een mooie blog te maken. De templates van WordPress zijn onovertroffen, naar mijn idee. Echt prachtig werk van deskundige ontwerpers en vaak zelfs 'gratis'. Ja, 'gratis' is natuurlijk relatief, want ik betaalde per maand een klein bedrag voor het gebruik van WordPress.com. Het leuke is dat je helemaal niet hoeft te denken aan het onderhoud van de infrastructuur en de software. Ik merk echt niet dat er bijvoorbeeld nu de nieuwste versie van PHP draait. Dat was mijn bedoeling ook, en dat kon ook voor een klein bedrag. Dat bedrag is nu echt flink verhoogd. Wat nu te doen? Hier een gedachtegang met veel terzijdes. Precies zoals het een goede internet-zapper betaamt.

In de tijd dat ik WordPress gebruik is de jaarlijkse prijs van het “personal abonnement” gestegen van 38 euro naar 60 euro volgend jaar maart. Dat is een flinke verhoging. Maar toch, als ik kijk naar de prijzen van bedrijven die webruimte verhuren en tegelijk WordPress ondersteunen, dan is WordPress.com eigenlijk met die prijsstijging best redelijk. Nadeel is wel dat ik geen andere plug-ins kan gebruiken dan de plug-ins die al klaargezet zijn door WordPress.com, en dat is wel mogelijk bij de concurrentie. Wat dat betreft is WordPress.com dus wel een heel stuk duurder. En als je echt plug-ins wil gebruiken, dan is dit “personal abonnement” geen optie, en de andere abonnementen van WordPress.com zijn dan toch een stuk duurder dan de concurrentie. Voor mij geldt: heel af en toe heb ik wel gedacht om een plug-in te gebruiken, of de “CSS” wat aan te passen, maar uiteindelijk ben ik blij dat het gewoon niet kan bij mijn abonnement van WordPress.com.

Afgedwongen eenvoud

Want eigenlijk waardeer ik die afgedwongen eenvoud wel. In het gebruiken van plug-ins met javascript ligt ook een “security-risico” besloten, er kunnen toch lekken ontstaan, waardoor iemand je site kan overnemen. Die plug-ins hebben dan constant je aandacht nodig. Op dezelfde manier ben ik trouwens blij met mijn Linux distributie “Elementary OS”. Op mijn computer kun je bijvoorbeeld niet makkelijk meerdere vensters van dezelfde applicatie open hebben staan. Ik heb Windows-gebruikers gezien die 10 keer notepad geopend hadden. Zoek dan maar uit welke je wil hebben. Met Elementary lukt je dat helemaal niet. Daar moet je het maar met tabbladen binnen een applicatie voor elkaar krijgen om jezelf gek te maken. (Maar dit terzijde). Die afgedwongen eenvoud spreekt mij dus wel aan. Daarom heb ik ook eens gekeken naar #write.as, dat super minimalistisch is. Maar eerlijk gezegd lijkt dat weer te Spartaans voor mij. Voor 6 euro per maand kun je het uiterlijk een beetje aanpassen aan je wensen. Je moet dan wel de vaardigheid hebben om de “CSS” aan te passen. Dit write.as is geschikt als je niet gevolgd of getrackt wil worden, en vooral als je wil dat je lezers niet gevolgd worden. Daartegenover staat wel dat je site wat moeilijker vindbaar is in Google, door alle nadruk op privacy.

Dus toch gewoon bij WordPress.com blijven? En in ieder geval wat meer foto's maken en minder screenshots in mijn blogje? Dat natuurlijk ook. Maar fotograferen, dat moet ik nog leren. (Lijkt me een mooie tekst voor een carnavalshit, maar dat terzijde.) Toch is er nog wel een overweging te maken.

Thuis

Ik kan namelijk ook redeneren, waarom niet alles helemaal zelf regelen, en het daarbij toch eenvoudig houden? Nu heb ik het samen met iemand thuis voor elkaar gekregen een WordPress-site klaar te zetten, gewoon op een oude afgedankte laptop. Je kunt op een oude laptop Linux (bijvoorbeeld Ubuntu) installeren, en wellicht server-tools (zoals SSH en SFTP) toevoegen, maar zelfs dat hoeft eigenlijk nog niet eens als je op de laptop zelf inlogt. Dan natuurlijk de hele stapel van programma's (Linux Apache MySql Php) op die laptop zetten, en vervolgens WordPress installeren vanaf de “org”-website. Als je site uiteindelijk op je computer werkt dan kun je een domein aanvragen, en bij die provider instellen dat alle browseraanvragen (requests) voor dat domein naar je router (extern ip-adres) gestuurd worden. Om de router thuis niet alle vrijheid te geven de requests voor de website naar zomaar een computer uit je thuisnetwerk te sturen is het belangrijk dat je die laptop een “static ip-adres” geeft en ook het liefst met een kabeltje aan die router hangt, en je de router vertelt dat al die browser-requests naar dat statische ip-adres gestuurd (forwarded) moeten worden. Als laatste komt het groene slotje aan de beurt: zorgen voor een versleutelde verbinding. We zagen dat je gratis https kunt krijgen via Cloudflare. Met Let's encrypt (via de tool certbot) lukte het ook, maar dat levert weer waarschuwingen in de browser op: “deze website kennen we niet”. Dat komt, denk ik, door het feit dat certificaten worden gebruikt om te versleutelen, maar ook voor authentificatie. Het versleutelen gaat prima met “Let's encrypt”. Maar de browser weet door het zelfgetekende certificaat van Let's encrypt niet zeker of jij werkelijk bent die je zegt dat je bent. Dat je die foutmelding niet krijgt bij een “shared certificate” bij Cloudflare lijkt me eigenlijk dan ook niet echt eerlijk. Als je Cloudflare gebruikt, moet je de “nameservers” bij je provider van het domein ook veranderen in die van Cloudflare. Een nadeel van het werken met Cloudflare kan zijn, dat je je bezoekers aan spionage blootstelt. Er zijn daar namelijk veel gratis statistische analyses mogelijk, en Cloudflare kan dan natuurlijk meegluren.

Maar het kan dus wel, alles in eigen beheer, met alleen de kosten voor een domeinregistratie. En de installatie is niet zo heel moeilijk.

Stofzuiger

Toch neig ik ernaar om gewoon bij WordPress.com te blijven. Die thuiscomputer moet altijd aan blijven staan. Voor een laptop is dat niet zo erg, maar stel dat je in plaats van twee en een halve bezoeker per dag, miljoenen bezoekers krijgt! Zo populair wordt je website natuurlijk. Dan mag je daar een dure machine neerzetten die qua stroomverbruik een flinke stofzuiger makkelijk verslaat. Natuurlijk gaat dat niet gebeuren, maar het opschalen bij wat meer drukte is toch makkelijker bij een shared hosting bedrijf. Dat gaat daar allemaal automatisch (na een bankbetaling dan). Bovendien heb je in de computer-staat-thuis-situatie je thuisnetwerk een beetje opengezet naar buiten toe, en ik ben nu eenmaal geen beveiligingsexpert, die alle risico's goed kan inschatten en die gaten in het netwerk kan ontdekken en dichtmaken. Een VPS (een privé-server in de cloud) huren dan, en daar hetzelfde op doen: #LAMP installeren en zorgen voor domein en certificaat? Ja, dan kom je eigenlijk al heel dicht bij het bedrag dat bedrijven vragen voor totale WordPress hosting. Dus ja.... Hoe doe jij dat? Ik hou me voorlopig maar bij het eenvoudige “personal abonnement” van Wordpress.com, ook al is dat snel in prijs gestegen en kun je er niet veel extra mee. Mocht de prijsstijging volgend jaar weer van de gekke worden, dan denk ik dat ik wel naar write.as overstap. En dat ik dan daar maar wat in de CSS ga prutsen, om het wat fleuriger te maken.