Dabei ging es insbesondere um die Darstellung von Code-Blöcken, die Formatierung von Tabellen sowie die mobile Ansicht im Portrait-Modus. Ziel war es, die Styles des verwendeten WordPress-Themes gezielt an meine eigenen Anforderungen und den technischen Stil der Webseite anzupassen.

Code

Die Standard-Abstände innerhalb des umschließenden Containers sowie des eigentlichen Code-Blocks haben mir optisch nicht zugesagt. Da ich im Regelfall eher Quellcode und Kommandozeilenausgaben dokumentiere, sollte sich die Darstellung auf der Seite eher daran orientieren.

Der Code-Block soll bündig links beginnen, einen grauen Hintergrund besitzen und zusätzlich durch einen Rahmen hervorgehoben werden. Durch den zusätzlichen Border-Pixel wurde die Formatierung jedoch beeinflusst, weshalb das box-sizing entsprechend angepasst wird. Dabei ist zu beachten, dass das umschließende pre-Element die Klasse wp-block-code besitzt und nicht das eigentliche code-Element. Deshalb werden Hintergrundfarbe auf dem pre-Element und die Abstände auf dem code-Element gesetzt. Andernfalls entsteht zwischen pre und code ein unerwünschter weißer Bereich.

Inline-Code soll hingegen ohne zusätzliche Abstände dargestellt werden und keinen eigenen farblichen Hintergrund besitzen.

.wp-block-code{
	padding:0.75em;
	margin-bottom:1em; 
	border-radius: 5px;
	border-style: solid;
	border-width:1px;
	box-sizing: content-box;
}

Tabellen

Der Abstand unterhalb der Tabelle war mir in der Standarddarstellung zu groß, da das umschließende Element bereits einen eigenen unteren Abstand besitzt. Daher wurde der zusätzliche margin-bottom der Tabelle entfernt.

Außerdem sollte die Tabellenüberschrift farblich hervorgehoben werden. Die Hintergrundfarbe wird dabei gezielt auf die th-Elemente innerhalb des thead gesetzt. Dadurch bleibt die Formatierung flexibel, falls th-Elemente später zusätzlich beispielsweise für die erste Spalte innerhalb des Tabelleninhalts verwendet werden sollen.

.wp-block-table table {
	margin-bottom:0px;
}

.wp-block-table table > thead > tr > th {
	background-color:#6d6d6d;
	color:white;
	border-color:#2b2b2b
}

Website-Titel

Auf mobilen Geräten im Portrait-Modus war der Seitentitel in Kombination mit Logo und Beschreibung zu groß, wodurch der Text umgebrochen ist. Deshalb wurde die Schriftgröße innerhalb einer Media Query gezielt für Geräte im Hochformat reduziert.

Dadurch bleiben Titel, Beschreibung und Logo auch auf kleineren Displays sauber ausgerichtet und die Darstellung wirkt insgesamt kompakter und aufgeräumter.

@media screen and (orientation: portrait){
	.site-branding .site-title{font-size:1.1em;}
	.site-branding .site-description{font-size:0.6em;}
}

Changelog

29.05.2026

Nach einem Update des Themes können mehrere Einstellungen zu den Code-Blocks entfernt werden. Die alten Einstellungen vermerke ich hier und ergänze die neuen Einstellungen direkt oben im Artikel.

.wp-block-code{
	margin-bottom:1em; 
	padding:0em;
	background: #e0e0e0;
	border-radius: 5px;
	border-style: solid;
	border-width:1px;
	box-sizing: content-box;
}

.wp-block-code code {
	font-family: Consolas, "Courier New", monospace;
	margin:0em; 
	padding:0.5em;
}

code {
	font-family: Consolas, "Courier New", monospace;
	margin:0em; 
	padding:0em;
	background-color:none;
}

Der Beitrag Formatanpassungen für Tabellen, Code und Titelleiste erschien zuerst auf Maximilian Krieg.

Beim Aufruf des Blog-Eintrags selbst wird das Bild korrekt dargestellt und danach wird auch eine andere Auflösung im Blog-Layout verwendet. Um dieses Darstellungsverhalten zu ändern, stelle ich die Mediengröße im Theme von 300×300 auf 1024×1024 um. Ein Aufruf der Website im Nachgang bestätigt die nun korrekte Darstellung.

Der Beitrag WordPress – Änderung Blog-Bildgröße erschien zuerst auf Maximilian Krieg.

Vor der Anpassung sehen die Bilder bei Nicht-Standard-Bildschirmgrößen zum Beispiel wie folgt aus. Ebenfalls wird bei Transparenz ein grauer Hintergrund eingefügt statt einem weißen.

Nach Prüfung mehrerer Optionen habe ich mich daher dazu entschiedenen das vorhandene Theme direkt im CSS zu bearbeiten. Folgende Einstellungen sind in der Customify: style.min.css aktiv und beeinflussen das Bild-Layout.

.posts-layout .entry-thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    line-height: 0;
    background-color: #d5d5d5;

}

.posts-layout .entry-thumbnail {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    line-height: 0;
    /*background-color: #d5d5d5;*/
    padding:1em;
}

Am Smartphone sind nun in der vertikalen Ausrichtung die Bilder am unteren Ende abgeschnitten. Hierzu wird noch etwas Padding im Style für den Medientyp unten ergänzt.

@media screen and (max-width: 568px)
.posts-layout.layout--blog_classic .entry-media {
    margin-right: 0;


}

@media screen and (max-width: 568px)
.posts-layout.layout--blog_classic .entry-media {
    margin-right: 0;
    /*padding-bottom: 2em;*/
}

Update 26.11.2023: Padding-Bottom: 2em; wurde wieder deaktiviert.

@media screen and (max-width: 568px)
.posts-layout .entry-media {
    margin-bottom: 1em;
    width: 100%!important;
    padding-top: 56.25%;
}

@media screen and (max-width: 568px)
.posts-layout .entry-media {
    margin-bottom: 1em;
    width: 100%!important;
    /* padding-top: 56.25%; */
}

Update 01.06.2024: Padding padding:1em; wieder deaktiviert.

.posts-layout .entry-thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    line-height: 0;
    background-color: #d5d5d5;

}

.posts-layout .entry-thumbnail {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    line-height: 0;
    /*background-color: #d5d5d5;*/
    /*padding:1em;*/
}

Durch die Anpassung betten sich die Bilder im Blog-Layout besser in das gegebene Theme auf verschiedensten Bildschirmgrößen ein. Im Vollbild-Modus sowie am Smartphone kann ich keinen Unterschied feststellen.

Der Beitrag WordPress – Anpassung CSS für Entry-Images erschien zuerst auf Maximilian Krieg.

Die letzten beiden Bereiche möchte ich zusammenlegen, um hier einen kurzen About-Text zu hinterlegen, der es einem Besucher einfacher macht die Seite kontextuell einzuordnen. Hierfür installiere ich das Plugin Simple Author Box und konfiguriere es entsprechend um. Da nur ein Autor auf dieser Seite agieren wird, genügt es, dass ein Text eingeblendet wird. Social Icons, Webseite und Mail-Adresse sind bereits über das Theme abgebildet.

Die Box sieht wie folgt aus und beinhaltet Link zum Autor, eine Beschreibung und ein Profilbild.

Im Widget-Menü wird das Widget hierfür entsprechend im Footer-Sidebar-3-Bereich eingebettet.

Schlussendlich entfernen wir den Footer-Sidebar-4-Bereich aus dem Theme, wodurch sich der Footer-Sidebar-3-Bereich den freien verfügbaren Platz nimmt. Das Layout sieht vor der Umstellung wie folgt aus.

Nach der Umstellung sieht es im Layout wie folgt aus. Man könnte alternativ die Breite auch fest definieren.

Der Beitrag WordPress – Author-Widget und Anpassung Footer erschien zuerst auf Maximilian Krieg.

Neben der Installation von WordPress, den Plugins und dem Theme als solches, nehme ich mehrere Änderungen am Theme vor. Zum Einsatz kommt das Theme Customify von PressMaximum. Es handelt sich somit um Version 7 meines Blog.

Neues Theme

Das folgende Bild zeigt das aktuelle Blog, das mit WordPress und dem Customify-Theme umgesetzt wurde (der Screenshot wurde 2024 rückwirkend erstellt). Im Artikel Umstieg auf ein neues Theme aus dem Jahr 2014 habe ich die vorherige Iteration des Blogs beschrieben.

Der Wechsel von Joomla mit dem Magazine-Theme von GavickPro zu WordPress mit Customify bedeutete vor allem eine Veränderung der gestalterischen Ausrichtung: weg vom klassischen Magazinlayout, hin zu einem reduzierten, übersichtlicheren Blogdesign.

Abweichungen vom Standard-Design

Zur besseren Nachvollziehbarkeit möchte ich ebenfalls einige Anpassungen in diesem Beitrag festhalten.

Für ein einheitliches Design wird dem Button im Header noch ein Font Awesome (FA)-Icon hinzugefügt. Da der Button auf das Kontaktformular verweist, habe ich mich für das Message-Icon entschieden.

Viele der sozialen Netzwerke im Standard werden von mir nicht verwendet. Diese werden ausgeblendet statt sie zu löschen. Dafür werden andere Plattformen ergänzt und in allen Profilen die korrekten URLs hinterlegt.

Schlussendlich ersetze ich die Standardfarben durch den gleichen Farbton, der auch in der Leiste verwendet wird. Mit den Standardfarben der Social Network Icons sah es vorher eher wie Farbfehler aus. Damit die Icons sich korrekt abheben, wird die Icon Color auf weiß gesetzt. Das gleiche wird für den Hover-Style vorgenommen.

Zuletzt wird das Layout für Blog Posts umgestellt, dass das Thumbnail respektive Beitragsbild nicht über sondern links neben dem Text erscheint.

Der Beitrag WordPress – Installation und Anpassung neues Theme erschien zuerst auf Maximilian Krieg.

Die vorherigen Iterationen des Blogs habe ich im Artikel Evolution des Blogs seit 2008 mit Screenshots belegt und die jeweiligen Entscheidungen zu den Versionswechseln ausgeführt. In diesem Artikel gehe ich auf die neueste Version 6 genauer ein.

Version 6

Nachdem ich anfänglich ziemlich begeistert von meet_gavern von GavickPro war, so hat mich das relativ simple Layout nach einer Weile nicht mehr zufrieden gestellt. Ich wollte ein Theme mit mehr Effekten, das modern und dennoch sehr sauber wirkt. Schlussendlich bin ich bei Magazine von GavickPro gelandet und nach einigen Mühen ist die Seite endlich vollständig migriert.

Besonders gereizt haben mich hierbei die vollständige Unterstützung von K2 und die linke Toolbar mit den Verknüpfungen zu meinen Accounts in den sozialen Netzwerken.

Mit dem Umstieg auf ein neues Theme habe ich zusätzlich ein paar interne Regeln für mich selbst aufgestellt bezüglich der Namensvergabe bei Studien-Mitschriften, dem Tagging der Beiträge und dem konsequenten Einsatz von Intro-Texten.

Der Beitrag Umstieg auf ein neues Theme erschien zuerst auf Maximilian Krieg.

Version 1

Die erste Version meines Blogs habe ich noch mit Mediawiki betrieben. Ich wollte mir eine richtige Wissensdatenbank aufbauen. Stabil, wenig Probleme, hervorragend um Beiträge zu verknüpfen. Ich habe mich dennoch davon abgewandt, weil ich nicht sehr zufrieden mit der Verwaltung und Erstellung der Inhalte gewesen bin. Ich wollte dann doch eher etwas mit einem chronologischen Verlauf haben, weniger ein Netzwerk aus Beiträgen. Zudem habe ich die Entscheidung getroffen, dass Beiträge künftig in dem standardisierten HTML geschrieben werden sollen und nicht mehr mit dem sehr eigenen Wiki-Markup.

Version 2

Die Umwandlung der Beiträge in konformes HTML hat enorm viel Zeit in Anspruch genommen. Dennoch waren irgendwann die Beiträge umgewandelt und in ein neues System eingepflegt worden – ein WordPress. Ein Jahr lang habe ich versucht mich damit anzufreunden und war dann frustriert genug um mich erneut umzusehen. Zwei große Faktoren haben mich weg getrieben. Erstens, dass die Seite nicht korrekt dargestellt wird, wenn man die Domain ändert ohne die Konfiguration anzupassen und zweitens, dass Bilder nicht mit relativen Pfaden in den Beiträgen eingestellt werden, obwohl es ein Medien-Center gibt.

Version 3

Ein anderes CMS musste sofort her. Dieses mal habe ich mit den gewonnen Erfahrung lange evaluiert und schlussendlich bin ich bei Joomla gelandet. Ich war sofort von der einfachen Verwaltung fasziniert. Da ich das Standard-Theme jedoch zu langweilig fand, wurde es direkt mit dem Master-Template von Yootheme ersetzt.

Version 4

Auch wenn ich mit Joomla sehr zufrieden war, so stieß ich an die Grenzen der Standard-Artikel von Joomla und deren Flexibilität. Ich wollte ein System, das mehr wie SharePoint von Microsoft arbeitet – ein Content Construction Kit (CCK) war also gefragt. Yootheme bietet zwar Zoo an, dieses hat mir jedoch nicht gefallen. Ich wechselte also im nächsten Schritt mein Template zu Zenith von ThemeXpert und zu K2 als CCK.

Version 5

Derweil im 5. Semester angekommen habe ich einiges über HTML5, CSS, Javascript und weitere Web-Technlogien gelernt. Bei einem genaueren Blick unter die Motorhaube des Templates wurde mir schwindlig lauter Fehler. Als ich ein notwendiges Update machen wollte, musste ich feststellen, dass die Urheber selbst massive Probleme mit ihrer Website hatten. Zügig habe ich mich nach einem anderen Template umgesehen und bin bei meet_gavern von GavickPro gelandet.

Allerdings steht es noch aus die alten Beiträge aus WordPress zu konvertieren. Das heißt ich werde den Code noch auf HTML5 anpassen, die Bilder neu hochladen und richtig einbinden müssen. Ich habe mir vorgenommen ab dem 1.10.2013 jeden Tag einen Beitrag hochzuladen. Ich hoffe mal ich halte die Disziplin ein 🙂

Der Beitrag Die Entwicklung des Blogs seit 2008 erschien zuerst auf Maximilian Krieg.

Beim Einsatz des Templates meet_gavern von Gavick Pro, in Verwendung mit dem Content Creation Kit (CCK) K2, tritt das Problem auf, dass die Pagination, also die Seitennavigation, im Fußbereich der Tag-View horizontal dargestellt wird. In der User-View und Categorie-View sieht alles normal aus. Dieser Fehler tritt auch auf der Seite des Entwicklers von meet_gavern auf.

Lösung

Über den Browser-Inspektor (Rechtsklick ? Element untersuchen) kann man sehen, dass für die Pagination in der Tag-View folgende Stylesheet-Klasse festgelegt ist <ul class="pagination-list"> und in der Category-View <ul class="pager pagination-list">. Trägt man die Klasse pager ebenfalls ein, so ist der Fehler behoben.

Damit die fehlende Klasse als Style eingetragen wird, muss unter "../template/meet_gavern/html/com_k2/templates/default/tag.php" der letzte Abschnitt angepasst werden. In der Category-View wird nämlich ganz deutlich der fehlende Eintrag über eine String-Ersetzung nachgetragen.

Alt

<?php 
echo str_replace('</ul>', 
'<li class="counter">'.$this->pagination->getPagesCounter().'</li></ul>', 
$this->pagination->getPagesLinks());
?>

Neu

<?php
$pagination = str_replace('</ul>', 
'<li class="counter">'.$this->pagination->getPagesCounter().'</li></ul>',
$this->pagination->getPagesLinks());
echo str_replace('pagination-list', 'pager pagination-list', $pagination);
?>

Der Beitrag meet_gavern – Navigation in Tag-View ist nicht formatiert erschien zuerst auf Maximilian Krieg.