Letzte Aktualisierung am 21. Oktober 2025 von Jungsi
Lange hat mein altes Design nicht hergehalten. 😉 Nachdem ich in der letzten Zeit viel auf anderen Blogs unterwegs war, habe ich mich nochmal zu einem neuen Design entschlossen. Dabei habe ich auch im Hintergrund wieder einiges geändert – u. a. führt ein Teil der Links oben in den Menüs nicht mehr auf extra Seiten, sondern sind nun mit Kategorien verknüpft. Dadurch muss ich nicht so viele einzelne Seiten „bauen“ sondern mach lieber mehr einzelne Artikel und ordne diese den richtigen Kategorien zu. Dazu musste ich natürlich auch die Kategorien erweitern – diese sind jetzt am Ende der rechten Leiste zusammen mit der jeweils enthaltenen Anzahl an Artikeln zu sehen.
Dabei gab es noch Klippen zum Umschiffen 😉 Für die Verlinkung der Menüs mit den Kategorien habe ich das Plugin „Page Links To“ verwendet. Das Plug-in klinkt sich in die Seitenerstellung ein.
Der Rest war dann alles im Theme „Atahualpa“ zu lösen – immer wieder erstaunlich, was man da alles einstellen kann 😉
Unter -> Overall Style & Config -> Body, Text & Links habe ich unter Body Style die Hintergrund-Farbe eingestellt, die Font-Größe (font-size: 0.8em) und wonach ich länger suchte: Ich wollte den Abstand zwischen den Zeilen vergrößern, um eine bessere Lesbarkeit zu erreichen: line-height: 20px;
Später stieß ich dann auf das Problem, dass sich meine Seite plötzlich der Breite des offenen Browser-Fensters anpasste und bei kleinen Fenstern plötzlich so schmal war, dass man nichts mehr lesen konnte. Die Einstellung, um das anzupassen, ist unter -> Overall Style & Config -> Style & configure LAYOT:
Was ich bisher nicht geschafft habe, ist das Menü und das Bild oben „überlappen“ zu lassen – ich habe zwar einige Hinweise gefunden, nur bisher hat keiner davon die richtige Wirkung erzielt.
Dafür ist nun der Blog-Titel mehr oder weniger transparent in das Bild „gerutscht“ 😉 -> Header Area -> Header Image -> Overlayd Blog Titel/Tagline Style
Ich habe einfach den dort im Beispiel vorgeschlagenen Code verwendet und nur die Farbe des Rands geändert.
Um die rechte Sidebar durch einen senkrechten Strich vom Artikelbereich etwas abzutrennen, habe ich unter
-> Sidebar & Widgets -> Style & configure SIDEBARS -> RIGHT INNER sidebar style:
border-left: dashed 1px #FFFFFF;
Waagrechter Strich unter den Widgets:
-> Sidebars & Widgets -> Style WIDGETS -> Widget Content Box:
border-bottom: solid 1px #C0C0C0;
Zeile mit Datum, Autor usw. unter dem Titel eines Artikels:
-> Post & Pages -> Edit POST/PAGE INFO ITEMS -> BYLINE: Homepage:
<image(date-gray.gif)> %date('j. F Y')% <image(user-gray.gif)> %author-linked% <image(comment-gray.gif)> %comments('0 Kommentare', 'Ein Kommentar', '% Kommentare', 'Kommentare sind geschlossen')% <image(eye-gray.gif)> %edit('bearbeiten')%Für die obere Zeile mit Code musste ich mich nun z.B. auch mal wieder mit HTML beschäftigen – damit der Browser das nicht als Code liest, sondern als Text, muss man drei der Zeichen, die häufig darin vorkommen, „austauschen“ 😉
Ersetzen Sie das Zeichen & durch die Zeichenfolge & („Ampersand“)
Ersetzen Sie das Zeichen < durch die Zeichenfolge < ; („lower than“)
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gr; („greater than“)