Eigenes Theme – Teil 7 – Beiträge stylen

Damit die Beiträge selbst was gleichsehen müssen wir noch das CSS dafür gestalten. Am Besten ist es du erzeugst im Editor (auf HTML Ansicht) einen Post in deinem Blog in dem alle Tags vorkommen, die du so einsetzen willst. (h1-h6, em, strong, p, Bilder links, rechts & mittig mit Unterschrift, Aufzählungen usw.)
Wenn du jetzt diesen Beitrag ansiehst, so sieht das eher mager aus. Also gilt es mal die Standard HTML Tags zu stylen. Den h1 Tag haben wir bis jetzt nur in Verbindung mit der Klasse titel gestyled. Du kannst also innerhalb deiner Beiträge andere h1 Tags verwenden, wenn du diese für so wichtig hältst (siehe SEO Überlegungen).
Sourcecode ordentlich zu stylen ist schwierig, weshalb man den mal beiseite lassen und auf ein späteres Plugin warten sollte.

Styling von Bildern

Wordpress bietet dem Verfasser eines Artikels die Möglichkeit Bilder hochzuladen und diese Einzufügen. Dabei kann man sie in der Größe ändern, von Text umfließen lassen und eine Unterschrift daruntersetzen. Dies funktioniert aber natürlich nur, wenn es auch im CSS Stylesheet implementiert ist. Hier mal ein Basisstyling, mit dem die Bilder in netten Rahmen dargestellt werden. Diese Namen sind durch Wordpress vorgegeben und können nicht geändert werden.

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto; margin-right: auto;
    text-align: center;
}
.alignleft {
    float: left; margin-right: 10px;
}
.alignright {
    float: right; margin-left: 10px;
}
.wp-caption {
    text-align: center;
    background: #eeffee; 
	border:1px solid grey;
    padding: 6px 5px 5px 5px;
    margin-top: 3px; margin-bottom: 10px;
}
.wp-caption img {
    margin: 0; padding: 0; border: 1px solid #cde;
}
.wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px;
    margin: 0; padding-top: 2px;
}

Mit diesen Schritten müßten auch unsere Posts ganz gut aussehen. Schau dir mal einige Posts durch und verfeinere eventuell noch das Aussehen… Dann gehts weiter im nächsten Teil.

«  -  »


2 Antworten

  1. [...] Teil 7 : Jetzt erzeugen wir das nötige CSS um unsere Beiträge mit allen möglichen HTML Tags gut aussehen zu lassen [...]

  2. Hello! Please e-mail me your contacts. I have a question webmaster@bravto.ru” rel=”nofollow”>……

    Thank you!!!…

Gib deinen Senf dazu

XHTML: Du kannst in deiner Antwort folgende Tags benützen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">