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.

Insbesondere, dass das Bild zum Artikel passt, den Inhalt aufgreift und nicht von hunderten anderen Websites verwendet wird, ist mir dabei besonders wichtig. Deshalb habe ich mir einen festen Prompt aufgebaut, der automatisch das Thema eines Artikels analysiert und daraus ein passendes Titelbild im gleichen Stil erzeugt. Der Prompt analysiert dabei automatisch den jeweiligen Blog-Artikel und leitet daraus Technik, Schlagworte, Hardware, Fehlerbilder oder typische Konzepte ab.

Besonders wichtig ist mir:

• Ein konsistentes Design über alle Artikel hinweg
• Klare technische Motive statt chaotischer „KI-Collagen“
• Gute Lesbarkeit auch als kleines Thumbnail
• Moderne Comic-/Vector-Optik mit professionellem Tech-Look
• Fokus auf EIN zentrales Element oder Thema
• Nicht zu viele Effekte
• Keine überladenen Enterprise-Marketing-Grafiken
• Klare Komposition
• Technische Wiedererkennbarkeit
• Genügend Platz und Ruhe im Bild

In diesem Beitrag stelle ich den verwendeten Prompt vor (eher als kopierfähige Vorlage für mich selbst) und zeige, wie sich damit relativ konsistente Blog-Artikelbilder erzeugen lassen.

Erstelle ein hochwertiges Blog-Artikelbild im konsistenten Stil eines modernen privaten IT-/Tech-Blogs.

WICHTIG:
Analysiere zuerst automatisch den folgenden Artikel und leite daraus Thema, Technik, Schlagworte, mögliche Hardware, Fehlerbilder oder technische Konzepte ab:

[[URL]]

Nutze den Inhalt des Artikels als Grundlage für Motiv, Symbolik, Titeltext und technische Darstellung.

──────────────────────────────
FORMAT
──────────────────────────────
- Exakt 1280 x 809 Pixel
- Optimiert für WordPress Blog-Header und Thumbnail
- Gute Lesbarkeit auch in kleiner Vorschau
- Cinematic Wide Composition
- Motiv nicht mittig gequetscht
- Ausreichend Abstand zu den Bildrändern

──────────────────────────────
STIL
──────────────────────────────
- Konsistenter Stil über alle Artikel hinweg
- Moderner privater IT-Blog
- Comic-/Vector-inspirierter Semi-Realismus
- Klare geometrische Formen
- Leichte Outline-/Illustration-Optik
- Hochwertige Tiefenwirkung
- Ruhige Komposition
- Nicht überladen
- Kein generisches Stockfoto
- Kein fotorealistisches Datacenter
- Keine übertriebenen SciFi-Effekte
- Keine UI-Screenshots
- Keine Textwände
- Fokus auf EIN zentrales technisches Element

──────────────────────────────
FARBSTIL
──────────────────────────────
Primärfarben:
- Dunkelblau
- Anthrazit
- Stahlgrau

Akzentfarben:
- Gelb
- Orange
- Rot für Warnungen/Fehler
- Cyan nur sehr dezent

Licht:
- Cinematic Lighting
- Weiche Schatten
- Leicht dramatische Beleuchtung
- Technische Atmosphäre

──────────────────────────────
KOMPOSITION
──────────────────────────────
- Ein Hauptobjekt im Fokus
- Ruhiger Hintergrund
- Große freie Flächen
- Technisches Objekt leicht perspektivisch
- Wenige zusätzliche Symbole oder Warnhinweise
- Keine unnötigen Details

──────────────────────────────
TEXT IM BILD
──────────────────────────────
- Große prägnante Headline passend zum Artikel
- Optional kleine Subline
- Moderne fette Typografie
- Weiß/Gelb Farbkombination
- Sehr gute Lesbarkeit

──────────────────────────────
MOTIVREGELN
──────────────────────────────
Das Motiv MUSS thematisch zum Artikel passen.

Beispiele:
- Netzwerkprobleme → Sei kreativ und passe es auf den Artikel an
- Security → Firewall, Shield
- Routing → Netzwerkpfade, Router
- PowerShell → Terminal, Konsole
- WLAN → Access Point, Funkwellen
- Monitoring → Diagramme, LEDs, Statusanzeigen

Nur wenige Elemente verwenden.
Lieber simpel und stark statt komplex und überladen.

──────────────────────────────
LOGOS & HERSTELLER
──────────────────────────────
Wenn der Artikel sich klar auf einen Hersteller bezieht:
- Herstellerlogo dezent integrieren
- Geräte optisch an den Hersteller anlehnen
- Keine exakten Produktfotos
- Stilisiert und illustrativ

──────────────────────────────
QUALITÄT
──────────────────────────────
- Professionelles Tech-Blog-Niveau
- Konsistentes Branding-Gefühl
- Hochwertige Illustration
- Modern
- Ruhig
- Klar
- Technisch
- Wiedererkennbarer Stil

Der Beitrag Konsistente Blog-Artikelbilder mit KI erzeugen 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.

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.

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.

Beschreibung von ImageMagick

ImageMagick ist ein freies Softwarepaket zur Erstellung und Bearbeitung von Rastergrafiken. Außerdem lassen sich Bilder dynamisch generieren, weshalb es auch im Bereich der Webanwendungen verwendet wird. Die von ImageMagick angebotenen Funktionen reichen vom Zusammenfügen mehrerer Bilder über das Hinzufügen bzw. Erzeugen von einfachen Formen und Schrift, Verzerrungen, Größenveränderung und Drehen der Bilder bis zu Filterfunktionen wie Unschärfe, Solarisation, Kontrastanpassung oder Invertierung.https://de.wikipedia.org/wiki/ImageMagick

Beschreibung des Angriff

Der als ImageTragick bezeichnete Angriff nutzt eine Sicherheitslücke in ImageMagick aus, um Kommandozeilenbefehle, die sich als Bilddateien ausgeben, auf einem verwundbaren Server auszuführen und diesen zu übernehmen. Dies geschieht beispielsweise, wenn in Web-Applikationen der Upload von Bildern für Anwender erlaubt ist oder ein Administrator eine infizierte Datei hochlädt. Der Exploit nutzt dabei aus, dass ImageMagick bei seinem Delegate-Feature unzureichende Filter anwendet und die Injektion von Befehlen in die Shell zulässt.

Lösung

Mithilfe einer Policy-Datei kann die Ausführung von schadhaften Dateien beziehungsweise Befehlen vermieden werden. Hierfür muss die Datei /etc/ImageMagick/policy.xml um die folgenden Zeilen ergänzt werden.

<policymap>
  <policy domain="coder" rights="none" pattern="EPHEMERAL" />
  <policy domain="coder" rights="none" pattern="URL" />
  <policy domain="coder" rights="none" pattern="HTTPS" />
  <policy domain="coder" rights="none" pattern="MVG" />
  <policy domain="coder" rights="none" pattern="MSL" />
  <policy domain="coder" rights="none" pattern="TEXT" />
  <policy domain="coder" rights="none" pattern="SHOW" />
  <policy domain="coder" rights="none" pattern="WIN" />
  <policy domain="coder" rights="none" pattern="PLT" />
</policymap>

Eine detaillierte Beschreibung des Angriffes und der Maßnahmen ist auf imagetragick.com (Link) zu finden.

Der Beitrag Vermeidung des ImageMagick-Exploits erschien zuerst auf Maximilian Krieg.

Beschreibung von ImageMagick

ImageMagick ist ein freies Softwarepaket zur Erstellung und Bearbeitung von Rastergrafiken. Außerdem lassen sich Bilder dynamisch generieren, weshalb es auch im Bereich der Webanwendungen verwendet wird. Die von ImageMagick angebotenen Funktionen reichen vom Zusammenfügen mehrerer Bilder über das Hinzufügen bzw. Erzeugen von einfachen Formen und Schrift, Verzerrungen, Größenveränderung und Drehen der Bilder bis zu Filterfunktionen wie Unschärfe, Solarisation, Kontrastanpassung oder Invertierung.https://de.wikipedia.org/wiki/ImageMagick

Beschreibung des Angriff

Der als ImageTragick bezeichnete Angriff nutzt eine Sicherheitslücke in ImageMagick aus, um Kommandozeilenbefehle, die sich als Bilddateien ausgeben, auf einem verwundbaren Server auszuführen und diesen zu übernehmen. Dies geschieht beispielsweise, wenn in Web-Applikationen der Upload von Bildern für Anwender erlaubt ist oder ein Administrator eine infizierte Datei hochlädt. Der Exploit nutzt dabei aus, dass ImageMagick bei seinem Delegate-Feature unzureichende Filter anwendet und die Injektion von Befehlen in die Shell zulässt.

Lösung

Mithilfe einer Policy-Datei kann die Ausführung von schadhaften Dateien beziehungsweise Befehlen vermieden werden. Hierfür muss die Datei /etc/ImageMagick/policy.xml um die folgenden Zeilen ergänzt werden.

<policymap>
  <policy domain="coder" rights="none" pattern="EPHEMERAL" />
  <policy domain="coder" rights="none" pattern="URL" />
  <policy domain="coder" rights="none" pattern="HTTPS" />
  <policy domain="coder" rights="none" pattern="MVG" />
  <policy domain="coder" rights="none" pattern="MSL" />
  <policy domain="coder" rights="none" pattern="TEXT" />
  <policy domain="coder" rights="none" pattern="SHOW" />
  <policy domain="coder" rights="none" pattern="WIN" />
  <policy domain="coder" rights="none" pattern="PLT" />
</policymap>

Eine detaillierte Beschreibung des Angriffes und der Maßnahmen ist auf imagetragick.com (Link) zu finden.

Der Beitrag Schließen von CVE-2016–3714 (ImageMagick) erschien zuerst auf Maximilian Krieg.