Letzte Aktualisierung am 15. September 2012 von Jungsi
Lange hat ja 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 Katergorien verknüpft. Dadurch muss ich nicht soviele einzelne Seiten „bauen“ sonder mach lieber mehr einzelne Artikel und ordne diese den richtigen Kategorien zu. Dazu musste ich natürlich auch die Kategorien erweitern – diese sind nun 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 Plugin klinkt sich in die Seitenerstellung ein.
Der Rest war dann alle im Theme „Atahualpa“ zu lösen – immer wieder erstaunlich was man da alle 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 stiess 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 hab zwar einige Hinweise gefunden nur hat bisher 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“)