Gedurende de jaren dat ik dit weblog heb onderhouden heb ik een aantal verschillende thema’s voor het uiterlijk van WordPress gebruikt, de software waar dit weblog op draait. Het standaard WordPress thema vond ik niet mooi, daarom gebruikte ik K2 in plaats daarvan. K2 werd op een gegeven moment niet meer onderhouden, wat betekende dat het niet meer compatibel was met nieuwe versies van WordPress. Toen vond ik Tarski, wat na een aantal jaren ook niet meer onderhouden werd.
Op dat punt wisselde ik terug naar de standaard thema’s van WordPress, die tegen die tijd beter waren geworden. Zelfs met de standaard thema’s moest ik naarmate de tijd vorderde overstappen naar nieuwere versies, omdat meer recente standaard thema’s beter gebruik maakten van nieuwe functionaliteit in WordPress. Ik maakte kleine aanpassingen aan die thema’s met de child theme functionaliteit om ze te laten aansluiten op mijn smaak. Maar uiteindelijk raakte ik ook ontevreden met de standaard thema’s.
Het huidige standaard thema, Twenty Nineteen, werd mij te veel. Ten eerste omdat de WordPress ontwikkelaars beslisten om gebruikers geen optie te geven voor het toevoegen van een zijbalk (sidebar), in tegenstelling tot eerdere standaard thema’s. Het mag waar zijn dat inhoud van zijbalk toch naar de voet van de pagina wordt verplaatst als je dit weblog bezoekt op een mobiel apparaat met een klein scherm, maar het blijft handig om te hebben voor grotere schermen. Op dit moment laat de zijbalk een zoekveld en de categorieën op mijn weblog zien.
Maar de opmaak van Twenty Nineteen is een ernstiger probleem. Op kleinere schermen ziet het er goed uit, maar wanneer je het thema bekijkt op grotere 23 inch monitor met een Full HD resolutie van 1920 bij 1080 pixels zal je het wel zien. Mijn kennis van CSS is nog beperkt, maar wat ik begrijp van de CSS code van het thema is dat de maximum breedte van de inhoud altijd relatief is aan de schermomvang. Ik geloof dat de volgende code in het style.css bestand hier voor verantwoordelijk is::
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
Zoals je ziet hebben de entry classes een relatieve breedte die wordt berekend op basis van de breedte van de viewport voor schermen die minstens 1168 pixels breed zijn. Dit is een slechte zaak omdat dit leidt tot lange regellengte op grote schermen, wat het oncomfortabel maakt om de tekst te lezen. Tenzij ik iets mis in de code, zou dit betekenen dat de regellengte dus nog extremer zou zijn als je Twenty Nineteen op een grotere monitor met 4K resolutie zou bekijken. Een ander probleem dat ik heb met het theme is dat het systeemlettertypen gebruikt voor de inhoud van het weblog:
.entry .entry-content .wp-block-verse {
font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-size: 22px;
line-height: 1.8;
}
Dit betekent dat Twenty Nineteen eerst kijkt of er bekende lettertypen aanwezig zijn die standaard worden gebruikt op de Mac OS, iOS en Windows besturingssystemen. Als die niet aanwezig zijn, wordt teruggevallen naar het standaard serif lettertype dat wordt gebruikt op het systeem. Op mijn Fedora Linux systeem is dat Liberation Serif. Dus in andere woorden: het thema ziet er verschillend uit op basis van het besturingssysteem dat wordt gebruikt om het weblog te bezoeken. Voor mij is dat onwenselijk. Daarnaast is de grootte van het lettertype 22 pixels in CSS code, wat naar mijn smaak erg groot is. Ik merk daar wel bij op dat de px lengte in CSS niet voor een absoluut aantal pixels staat, maar een relatieve lengte is die afhankelijk is van de pixeldichtheid van het scherm. Omdat je naast de 23 inch monitor met 1920 bij 1080 pixels ook telefoons zoals de Samsung Galaxy S10 hebt met een 6,4 inch scherm en 3040 bij 1440 pixels.
Samengevat geeft het het Twenty Nineteen thema in combinatie met een Full HD resolutie op een 23 inch monitor dus paragrafen van weblog posts die 932 pixels breed zijn met een lettergrootte van 22 pixels (deze keer in de absolute zin). Laten we dat eens vergelijken met de website van de Volkskrant. Als ik die website bekijk met dezelfde monitor dan hebben paragrafen een maximum breedte van 590 pixels en wordt het lettertype CapitoliumNews op 20 pixels gebruikt in plaats van systeemlettertypen. Dit zorgt voor een veel kortere regellengte, welke ik als normaal en fijn beoordeel. Die website ziet er goed uit en leest comfortabel.
Ik had veel tijd kunnen spenderen aan het maken van een nieuw child theme voor Twenty Nineteen om het aan te passen naar mijn wensen, maar ik besloot in plaats daarvan naar het Astra thema over te stappen. Dit thema is vrij populair, dus ik verwacht niet dat dit snel verlaten zal worden door de ontwikkelaars. Hoewel het een aantal betaalde opties heeft, is de gratis basisfunctionaliteit voor mij adequaat. Ik vind het een fijn thema vanwege de goed doordachte standaardinstellingen, de optie voor een zijbalk en het gemak waarmee het aan te passen is. Het biedt veel opties zonder dat je de CSS code moet doorploegen en een child theme moet maken. Paragrafen van weblog posts hebben blijkbaar standaard een maximum breedte van 600 pixels, wat ik fijn vind.
Ik heb de volgende opties aangepast in de customizer van Astra om het thema naar mijn voorkeuren aan te passen:
- Layout → Header → Site Identiteit = Aanzetten “Site Tagline weergeven”.
- Layout → Blog → Blog overzicht = Zet “Losse post content” naar “Volledige breedte” en zet “Blog meta” naar “Publicatiedatum, Categorie en Reacties”.
- Layout → Blog → Blog bericht = Zet “Post meta” naar “Publicatiedatum, Categorie en Reacties”.
- Typografie → Hoofd typografie = Set “Font family” naar “Source Serif Pro” en “Font grootte” naar “18”.
Met name de optie om een verschillend lettertype te selecteren is handig. Standaard gebruikt Astra ook systeemlettertypen omdat ze sneller laden. Het biedt echter ook de optie om alle lettertypen die beschikbaar zijn via Google Fonts te selecteren, wat een zeer grote keuzevrijheid geeft. Van deze vind ik het Source Serif Pro lettertype mooi. In tegenstelling tot de systeemlettertypen optie wordt dit lettertype gebruikt voor het thema ongeacht het besturingssysteem van de bezoeker. Dit garandeert een uniform uiterlijk voor mijn weblog.
Ten slotte heb ik ook wat speciale CSS toegevoegd om de opmaak van tabellen aan te passen. De standaard opmaak van tabellen in Twenty Nineteen ziet er voor mij erg onaantrekkelijk uit, helaas doet Astra dat niet beter. Ik heb deze CSS code geleend van het Lovecraft thema:
/* Tables */
table {
border: 0;
border-left: 0;
border-right: 0;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
font-size: 1em;
margin: 2.5em 0;
width: 100%;
}
th, td {
border-left: 0;
border-right: 0;
padding: 2%;
margin: 0;
overflow: visible;
line-height: 100%;
border-bottom: 1px solid #DDD;
}
caption {
color: #111;
text-align: center;
padding: 2%;
}
thead {
vertical-align: bottom;
white-space: nowrap;
}
th {
font-weight: bold;
}
table tbody > tr:nth-child(odd) > td { background: #f9f9f9; }