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.

Da WordPress inzwischen intensiv mit Block-Elementen im visuellen Editor arbeitet und dabei deutlich semantischeren HTML-Code erzeugt, habe ich mich entschieden, das Thema neu aufzulegen und entsprechend anzupassen.

Bevor es an die Umsetzung geht, schauen wir uns kurz an, warum der Halbgeviertstrich bei Zitaten verwendet wird. Im Deutschen (und auch international) ist der Halbgeviertstrich (–) der Standard für:

• Autorenangaben bei Zitaten
• Gedankenstriche im Satz
• Aufzählungsähnliche Hervorhebungen

Diesen Halbgeviertstrich möchte ich vor der Quellenangabe automatisch per CSS einfügen, sodass keine manuellen typografischen Anpassungen im eigentlichen Inhalt mehr erforderlich sind. Dafür lohnt sich ein genauerer Blick auf die von WordPress erzeugte HTML-Struktur. Als Beispiel dienen das folgende Zitat und die zugehörige Quellenangabe.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

http://www.loremipsum.de

WordPress erzeugt aus dem Block folgenden HTML-Code, den ich zur besseren Lesbarkeit nachträglich eingerückt habe.

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua.
    </p>
    <cite>http://www.loremipsum.de</cite>
</blockquote>

Um den Halbgeviertstrich automatisch zu ergänzen, füge ich folgenden CSS-Code im Custom-CSS-Bereich meines WordPress-Themes hinzu. Auf diese Weise wird der Strich zentral über das Stylesheet gesteuert und bei allen Zitaten einheitlich dargestellt, ohne dass er manuell im Editor eingefügt werden muss. Das sorgt nicht nur für eine konsistente Typografie, sondern trennt auch sauber Inhalt und Darstellung

blockquote > cite::before { 
    content: "— ";
}

Der Beitrag Quellenangaben für das blockquote-Element 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.

Für deine Installation ist keine Standard-Telefonregion festgelegt. Dies ist erforderlich, um Telefonnummern in den Profileinstellungen ohne Ländercode überprüfen zu können. Um Nummern ohne Ländercode zuzulassen, füge bitte "default_phone_region" mit dem entsprechenden ISO 3166-1-Code der gewünschten Region hinzu.

Um dies zu korrigieren, gehen wir in die config.php und ergänzen am Ende folgenden Eintrag.

'default_phone_region' => 'DE',

Siehe auch:

• Standard-Telefonregion festlegen – Nextcloud community
• Nextcloud: default_phone_region – Standard Telefon-Region festlegen

Der Beitrag Nextcloud – default_phone_region erschien zuerst auf Maximilian Krieg.

Die PHP-Speichergrenze liegt unterhalb des empfohlenen Wertes von 512MB.

Dies ist dem Umstand geschuldet, dass die neuste Nextcloud-Version auch PHP 8.X erfordert. In der Basiskonfiguration sind in der php.ini jedoch nur 128MB aktiviert. Diesen Wert habe ich noch nicht angepasst. Da ich php-fpm als Prozessmanager nutze, handelt es sich bei der Anpassung um die Konfigurationsdatei mit dem Pfad /etc/php/8.2/fpm/php.ini.

; Maximum amount of memory a script may consume
; https://php.net/memory-limit
memory_limit = 128M

Aus diesem Grund wird das Memory-Limit für PHP 8.2 auf meinem Server auf 512MB erhöht. Zu Zwecken der Nachvollziehbarkeit wird der alte Wert nur auskommentiert und beibehalten.

; Maximum amount of memory a script may consume
; https://php.net/memory-limit
;memory_limit = 128M
memory_limit = 512M

Anschließend wird der PHP-FPM-Dienst neu gestartet, damit die neue Konfiguration aktiv wird.

sudo systemctl restart php8.2-fpm.service

Siehe hierzu auch:

• Nextcloud 20 – PHP Speichergrenze/memory_limit – Non-english support / Deutsch (german) – Nextcloud community
• Fehler: Die PHP-Speichergrenze liegt unterhalb des empfohlenen Wertes von 512MB – Non-english support / Deutsch (german) – Nextcloud community

Der Beitrag Nextcloud – PHP-Speichergrenze liegt unterhalb des empfohlenen Wertes von 512MB. 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.

Zur besseren Nachvollziehbarkeit möchte ich die Änderungen 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.

Symptom

Bei der Installation, Aktualisierung und Deinstallation von Paketen über apt-get werden konstant die folgenden Fehlermeldungen geworfen.

locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory

Problem

Während meiner Recherche bin ich auf unterschiedlichste Begründungen gestoßen, deren Ursachen jedoch nicht eindeutig auf das von mir betriebene System zutreffen. Lasse ich mir die Locale mittels locale ausgeben, erhalte ich folgende Ausgabe.

# locale
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
LANG=en_US.UTF-8
LANGUAGE=
LC_CTYPE="en_US.UTF-8"
LC_NUMERIC=de_DE.UTF-8
LC_TIME=de_DE.UTF-8
LC_COLLATE="en_US.UTF-8"
LC_MONETARY=de_DE.UTF-8
LC_MESSAGES="en_US.UTF-8"
LC_PAPER=de_DE.UTF-8
LC_NAME=de_DE.UTF-8
LC_ADDRESS=de_DE.UTF-8
LC_TELEPHONE=de_DE.UTF-8
LC_MEASUREMENT=de_DE.UTF-8
LC_IDENTIFICATION=de_DE.UTF-8
LC_ALL=

An dieser Stelle ist auffällig, dass sowohl deutsche und englische Parameter gesetzt sind. Für eine qualifizierte Fehlerdiagnose fehlen mir fundierte Kenntnisse bezüglich Linux. Versuche ich die Locale mittels update-locale LANG=de_DE.UTF-8 zu setzen, erhalte ich erneut die vorherigen Fehlermeldungen. An diesem Punkt schlussfolgere ich für mein Problem, dass die deutsche Locale in irgendeiner Form fehlerhaft ist.

Lösungsstrategie

Locales generieren

In einem Beitrag wird zu der Problematik einer fehlerhaften Locale empfohlen, sie neu zu generieren und im Anschluss zu rekonfigurieren.

# sudo locale-gen de_DE.UTF-8
Generating locales...
  de_DE.UTF-8... up-to-date
Generation complete.

# sudo dpkg-reconfigure locales
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
        LANGUAGE = (unset),
        LC_ALL = (unset),
        LC_PAPER = "de_DE.UTF-8",
        LC_ADDRESS = "de_DE.UTF-8",
        LC_MONETARY = "de_DE.UTF-8",
        LC_NUMERIC = "de_DE.UTF-8",
        LC_TELEPHONE = "de_DE.UTF-8",
        LC_IDENTIFICATION = "de_DE.UTF-8",
        LC_MEASUREMENT = "de_DE.UTF-8",
        LC_TIME = "de_DE.UTF-8",
        LC_NAME = "de_DE.UTF-8",
        LANG = "en_US.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
Generating locales...
  de_DE.UTF-8... up-to-date
Generation complete.

Auch während der Rekonfiguration sind die Fehlermeldungen präsent. Eine erneute Durchführung des Befehls dpkg-reconfigure bewirkt keine Änderung an der Ausgabe bzw. Problematik. An dieser Stelle bin ich am Überlegen, ob das Problem generell im Zusammenhang mit der deutschen Locale begraben liegt. Als Alternativlösung versuche ich mir stattdessen die englische Locale zu erzeugen und im Anschluss dpkg-reconfigure durchzuführen.

# sudo locale-gen en_US.UTF-8
Generating locales...
  en_US.UTF-8... done
Generation complete.

# sudo dpkg-reconfigure locales
Generating locales...
  de_DE.UTF-8... done
  en_US.UTF-8... up-to-date
Generation complete.

Die Rekonfiguration verläuft erfolgreich. Ich versuche zunächst die deutsche Locale zu setzen und überprüfe danach die Einstellungen.

# update-locale LANG=de_DE.UTF-8

# locale
LANG=de_DE.UTF-8
LANGUAGE=
LC_CTYPE="de_DE.UTF-8"
LC_NUMERIC="de_DE.UTF-8"
LC_TIME="de_DE.UTF-8"
LC_COLLATE="de_DE.UTF-8"
LC_MONETARY="de_DE.UTF-8"
LC_MESSAGES="de_DE.UTF-8"
LC_PAPER="de_DE.UTF-8"
LC_NAME="de_DE.UTF-8"
LC_ADDRESS="de_DE.UTF-8"
LC_TELEPHONE="de_DE.UTF-8"
LC_MEASUREMENT="de_DE.UTF-8"
LC_IDENTIFICATION="de_DE.UTF-8"
LC_ALL=

Die Ausgabe von locale stimmt nun mit meinen Erwartungen überein und es werden keine Fehlermeldungen mehr ausgegeben. Das Problem scheint somit vorerst gelöst zu sein.

Der Beitrag Deutsche Locale in Ubuntu nicht richtig gesetzt erschien zuerst auf Maximilian Krieg.

Globales Seitenlayout

Die hier beschriebenen Styles sind abhängig von dem aktuell eingesetzten Template. Bei einem Wechsel muss ich sie individuell neu anpassen. Vorwiegend habe ich die Fußzeile kleiner gemacht, da sie einen viel zu große Abstand in alle Richtungen hat. Weiterhin habe ich die Differenzierung zwischen dem Hintergrund, dem Menü und den eigentlichen Inhalten durch Schatteneffekte und farbliche Hervorhebung weiter verstärkt.

.sidebarImages {
float:left;width:100%;
}

.copyright{
margin:0;
}

.t3-copyright {
padding:1rem 0;
}

#t3-footer{
    margin-top:1rem;
}

.t3-mainnav{
	box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.t3-mainbody{
	background-color:white;
	box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.t3-wrapper{
	background-color:#f1f1f1;
}

Inhaltslayout

Diese Styles beziehen sich auf die Inhalte der Artikel meiner Seite. Sie verbessern die Struktur und Lesbarkeit. Da ich sie regelmäßig benötige, werde ich auch den HTML-Quelltext an dieser Stelle präsentieren. Ich vermeide den Einsatz von Klassen, um eine höhere Kompatibilität mit älteren Beiträgen zu erzielen und den Quelltext einfach zu halten. Ich setzte stattdessen bevorzugt Selektoren ein.

Tabellenlayout

Tabellen sollen bei mir die maximale Seitenbreite ausnutzen. Durch die prozentuale Angabe skalieren sie auch gut bei mobilen Geräten oder Monitoren unterschiedlicher Größe. Da das Template nur horizontale Linien bei Tabellen verwendet, habe ich eine zellenbasierte Umrandung eingeführt. Wenn möglich verwende ich auch das caption-Tag. Damit es auffällt, habe ich den rot eingefärbt. Ich bin aktuell noch unentschlossen, ob ich eine Nummerierung der Tabellen, wie bei den Bildern, einführen möchte.

table {
width:100%;
	margin-bottom:10px;
}

td, th {
padding: 0.5rem; 
border: 1px solid #dddddd;
}

caption{
	font-style: italic; 
color:red; 
	text-align:center;
}

<table>
<caption>Überschrift</caption>
<thead>
<tr><th>Quelltext</th><th>Ergebnis</th></tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</tbody>
</table>

Zitate

Um die Qualität meiner Beiträge zu verbessern und meinen eigenen wissenschaftlichen Ansprüchen gerecht zu werden, verwende ich verstärkt blockquote– und cite-Elemente. Der eingefügte Text ist kursiv, um ihn noch deutlicher hervorzuheben. Vor der Quelle wird automatisch ein Strich eingefügt, damit sie etwas eingerückt wird.

blockquote > p {
	font-size: 14px; 
	font-style:italic;
}

blockquote > footer > cite::before { 
content: "— ";
}

<div class="mkrEbeneStart>
<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<footer><cite>http://www.loremipsum.de/</cite></footer>
</blockquote>
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.http://www.loremipsum.de/

Bilder

Ich definiere zunächst, dass alle Bilder auf meiner Seite zentriert sein sollen. Weiterhin werden Bilder, die ich in Artikeln verwende, zusätzlich mit einer Beschriftung und Nummerierung versehen, wie bei einer wissenschaftlichen Arbeit.

img {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	margin-bottom:10px;
	width:100%;
}

.mkrEbeneStart img + figcaption:before{
	counter-increment: cBilder;
	content: "Abb. " counter(cBilder) ": ";
}

.mkrEbeneStart figcaption{
	text-align:center;
	padding-bottom:1rem;
}

<div class="mkrEbeneStart">
<figure><img title="Grauer Kasten" src="images/uploads/2015/20150618-grauerkasten.png" alt="Grauer Kasten" /><figcaption>Grauer Kasten</figcaption></figure>
<figure><img title="Grauer Kasten" src="images/uploads/2015/20150618-grauerkasten.png" alt="Grauer Kasten" /><figcaption>Grauer Kasten</figcaption></figure>
</div>

Überschriften

In einem früheren Artikel habe ich bereits beschrieben, wie man eine automatische Nummerierung bei Überschriften realisiert. Ich spanne ein div um den Bereich auf, der nummerierte Überschriften verwenden soll. Ich mache dies, um Konflikte mit dem jetzigen oder einem zukünftigen Template zu vermeiden. Aktuell halte ich es so, dass in neuen Artikeln alle Überschriften durchnummeriert werden. Ich verwende zwar keine <h5>-Überschriften, habe aber provisorisch den Style angelegt. Ich achte weiterhin darauf, dass jede Ebene in einer eigenen section liegt. Ein umschließendes header-Tag für die Überschriften vermeide ich, da es dann Probleme mit der Nummerierung gibt. Neu an dieser Stelle ist ebenfalls, dass auf der obersten Ebene der Counter für die Bildnummerierung initialisiert wird.

.mkrEbeneStart{
	counter-reset: ebene1 cBilder;
}

.mkrEbeneStart h3{
	counter-reset: ebene2;
}

.mkrEbeneStart h4{
	counter-reset: ebene3;
}

.mkrEbeneStart h3:before{
	content: counter(ebene1) " ";
	counter-increment: ebene1;
}

.mkrEbeneStart h4:before{
	content: counter(ebene1) "." counter(ebene2) " ";
	counter-increment: ebene2;
}

.mkrEbeneStart h5:before{
	counter-increment: ebene3;
	content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
}

<div class="mkrEbeneStart">
<section>
<h3>Überschrift</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
</section>
<section>
<h3>Überschrift</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<section>
<h4>Überschrift</h4>
<article><header>
<p>Hier steht eine Frage oder Aussage</p>
</header><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></article>
</section>
</section>
</div>

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Hier steht eine Frage oder Aussage

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Arbeitsblöcke

Ich vermeide bewusst die tiefe Stufung mit Überschriften, da sonst mehr Aufwand in die Strukturierung als in die eigentlichen Inhalte fließt. Für konkrete Inhalte und Aufgabenstellungen verwende ich daher article-Elemente. Defizite in der hierarchischen Strukturierung akzeptiere ich an dieser Stelle. Damit genau zu sehen ist, wo ein thematischer Block abschließt, ziehe ich einen dünnen Rand um den Artikel herum.

.mkrEbeneStart article>header>p{
	font-weight: bold;
}

.mkrEbeneStart article{
	border: 1px dashed #dddddd;
	margin: 1rem 0; 
	padding:1rem;
}

<article><header>
<p>Hier steht eine Frage oder Aussage</p>
</header><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></article>

Hier steht eine Frage oder Aussage

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Der Beitrag CSS-Anpassungen und HTML-Vorlagen erschien zuerst auf Maximilian Krieg.