Seit Version 1.5 bietet WordPress mit seinen Themes fast unendliche Möglichkeiten, dein Blog optisch zu gestalten. Ein Theme besteht aus Templates (den php Dateien), den Bildern (images) und einer oder mehreren StyleSheet Dateien (der style.css). Somit gehören langweilige Blog Layouts der Vergangenheit an. Mit wenigen Änderungen kannst du dein Layout individuell verändern und besser machen. Mit einer einzigen Änderung kannst du das Layout zerstören. Willkommen in der wunderbaren Welt des Designs!

Wenn du Layout Probleme hast, die die style.css oder XHTML Tags betreffen, dann bist Du hier richtig. Für Probleme, die die Templates - also die .php Dateien betreffen - nutze bitte diese Hilfeseiten:Template Tags.

Viele, die ein Layout Problem haben fragen sofort im WordPress Forum. Dort wird dir gerne geholfen, doch es gibt jede Menge Dinge, die du selber reparieren kannst, auch wenn du dich kaum oder gar nicht mit StyleSheets auskennst. Zumindest kannst du dein Problem eingrenzen, dann kann dir schneller geholfen werden.

Inhaltsverzeichnis 1 Bevor du fragst 2 Bevor du fragst 2.1 ID 2.2 CLASS 2.3 HTMLTags 3 Sieh dir HTML und CSS an 3.1 Welche CSS Angabe stylt welchen HTML TAG 3.2 CSS und das Eltern/Kind Prinzip 3.3 "Border" Trick 3.4 "Validate" deine Theme 3.5 "Validate" deine style.css 4 bekannte CSS Fehler 4.1 Andere Hilfen

[bearbeiten] Bevor du fragst

Bevor du fragst 

Hier findest du Basisinformation über StyleSheets und Tipps, wie du Probleme selber lösen kannst.

Sieh dir HTML und CSS an 

HTML und CSS wirken im Hintergrund deiner Website. Mache einen Blick "unter die Haube" deines Blogs und sieh nach, ob dort alles passt.

Grenze dein CSS Problem ein 

Hier findest Du Techniken, wie du dein CSS Problem sichtbar eingrenzen und so verständlich fragen oder selber lösen kannst.

Bekannte CSS Fehler 

Du bist nicht der Erste der ein Problem hat. Hier findest du die gängigsten CSS Probleme und Tipps, diese zu lösen.

Browser Fehler 

Einige Layout Probleme sind auf sogenannte "Browser Bugs" zurückzuführen. Viele Browser interpretieren CSS Standards völlig anders. Hier findest du Tipps, wie du diese "Browser Bugs" erkennst.

BACKUP

• Sichere deine Dateien! Bevor du hier irgendeinen der Tipps ausführst, speichere dir dein Theme woanders ab.
• Dein Theme ist jetzt im Ordner wp-content/themes. Erstelle dort einen Ordner und nenne diesen "safe".
• Kopiere den gesamten Ordner deines Themes und füge ihn in diesen neuen Ordner "safe" ein.
• Ändere nie etwas an den Dateien die in diesem Ordner sind, außer du hast dein Problem wirklich gelöst.

[bearbeiten] Bevor du fragst

Wenn du noch keine oder wenig Ahnung hast was CSS ist und was es macht, dann lies WordPress' CSS. Dort findest du grundsätzliche Information wozu CSS gut ist und wie es mit HTML gemeinsam das Layout deines Blogs gestaltet. Außerdem einige Links, die mehr an Informationen für dich bereithalten.

Du wirst nicht umhin kommen einige Fachausdrücke der StyleSheet Technik kennen zu lernen. Nachfolgend findest du einige, doch dies ist kein StyleSheet Kurs, denn dies würde den Rahmen der Dokumentation sprengen.

HTML (Hyper Text Markup Language) ist dafür zuständig, dass man im Internet überhaupt etwas lesen kann. Die einzelnen Teile dieser Auszeichnungssprache nennt man HTML Tags oder XHTML Tags. CSS (Cascading Style Sheets) ermöglicht jeden einzelnen dieser (X)HTML Tags zu gestalten. Man kann die CSS Angaben direkt in den "Kopf" einer HTML oder PHP Datei schreiben oder in eine Datei "auslagern".

In WordPress sind meist die CSS Angaben in der Datei style.css im Ordner des jeweiligen Themes zu finden. Auf alle Fälle hat eine StyleSheet Datei die Endung ".css". Die HTML Tags sind in allen PHP Dateien deines Themes zu finden.

Achtung: In manchen Themes sind die CSS Angaben direkt in den jeweiligen PHP Dateien zu finden und diese Angaben "überschreiben" die StyleSheet Datei! z.B.: Im Theme "Kubrick" auch in der header.php.

Achtung Plugins: In einigen Plugins sind ebenfalls HTML Tags und CSS Angaben.

CSS Selektorensind in drei große Kategorien eingeteilt: Die ID, CLASS, und HTML Tags.

[bearbeiten] ID

ID ist die Abkürzung für "identification" und ist am besten umschrieben mit: "Es kann nur eine geben", denn eine "ID" darf nur ein einziges Mal vergeben werden. Ein Beispiel:

<div id="header">Titel der Seite</div>

Im StyleSheet (CSS) wird ID mit #header angegeben und kann ungefähr so aussehen:

#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}

[bearbeiten] CLASS

Die Angabe CLASS kann man so oft verwenden wie man mag. Man definiert eine "CLASS" um damit mehrere HTML Tags zu gestalten. Beispiel: Du magst öfter ein Wort mit der Farbe Rot hervorheben, dann schreibe in die CSS folgendes:

.hervorheb { color: red;}oder .hervorheb{color:#ff0000;}

Im HTML muss dann dies so aussehen:

...ich bin ein Fülltext, der einzig dazu geschaffen wurde, um Dir dieses
 <span class="hervorheb">Beispiel in Rot</span> zu zeigen.

Du siehst eine ID wird in der CSS mit einer "#name" angegeben eine CLASS mit einem ".name". Welchen Namen du beiden gibst ist dir überlassen, doch wähle Namen wo du auch "Jahre" danach noch weißt was sie bedeuten und wofür sie stehen. Freizeichen solltest du in diesen Namen jedoch auf keinem Fall verwenden

[bearbeiten] HTMLTags

Du willst einen ganz bestimmten HTML Tag gestalten z.B.: blockquote. Du möchtest, dass alle Deine Zitate gleich aussehen.

<blockquote>Das sind die schönsten Zitate, die es weltweit gibt.</blockquote>

In der CSS werden HTML Tags, also auch unser blockquote ohne "#" und ohne "." angegeben - einfach den Namen des HTML Tags hinschreiben. In diesem Beispiel wird der Text des Blockquotes nach innen gerückt, auf der linken Seite kommt ein blauer Rand, 4px breit und die Schrift wird "italic", also schräg.

blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }

Du kannst alle HTML Tags wie z.B.: body, p, h1, h2, h3, ul, li,cite, a, img auf diese Weise in der CSS gestalten.

Möchtest Du mehr über ID, CLASS, und HTML lernen, dann nutze die Links, die du unter CSS findest.

Achtung! Wenn du eine Angabe in der CSS geändert hast und diese Veränderung wird im Browser nicht sichtbar, kontrolliere, ob nicht in einer PHP Datei eine andere CSS Angabe steht, denn diese überschreibt die StyleSheet Datei.

[bearbeiten] Sieh dir HTML und CSS an

Um herauszufinden was bei deinem Layout nicht passt, ist es sehr hilfreich, wenn du im Quelltext nachsiehst. Dies ist der "Blick unter die Haube."

Unter der schönen Oberfläche einer jeden Internetseite sind eine Menge an Code Angaben, die all das möglich machen was du siehst oder soeben benutzt. Wenn du dies das erste Mal siehst ist es wie der Blick unter die Motorhaube eines Autos. Du weißt, dass all dies nötig ist damit das Auto fährt - bloß was gehört für was?

im Quellcode HTML finden

Den Quellcode kannst du dir von deinem Blog nur ansehen, wenn dieses im Browser (Firefox, IE etc.) erscheint. Rechts oben bei deinem Browser findest du "Ansicht",klickst du auf "Ansicht" findest du "Quellcode" oder "Seitenquelltext ansehen". Ein neues Fenster öffnet sich und du siehst die gesamte HTML Struktur einer HTML Seite deines Blogs. Alle HTML Tags sind zwischen den < und > zu finden.Z.B.: <head> ein Stück tiefer findest du garantiert wo <body>.
Alles was unterhalb von <body> steht und <body> selbst kann mit der CSS Datei gestaltet werden oder gestaltet worden sein. Nimm dir Zeit und lies dich durch den Quelltext einmal durch, so bekommst du ein "Bild" von dem was wo zu finden ist und was du wie ändern kannst.

CSS ansehen

Du kannst die style.css deines Themes mit Wordpad oder jeden anderen Editor öffnen oder du suchst im Quelltext deines Blogs nach dieser Angabe:

<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">

Dieser Link verweist auf die StyleSheet Datei. Klicke doppelt darauf oder tippe die Adresse in die Adresszeile deines Browsers.:

http://www.yoursite.com/wordpress/wp-content/themes/default/style.css

Ändern kannst du die StyleSheet Datei nur in einem Editor (z.B.:WordPad).

In WordPress werden HTML Seiten mit PHP erzeugt. Die Angaben in einer PHP Datei wirken oft chaotisch und unübersichtlich für einen PHP Laien. Doch manchmal musst du so eine PHP Datei öffnen, um Layout Probleme zu lösen. Auch in einer PHP Datei findest du die HTML Tags zwischen den < und > und da du ja alle PHP Dateien deines Themes gesichert hast, kannst du beruhigt auch dort nötige Änderungen vornehmen.

[bearbeiten] Welche CSS Angabe stylt welchen HTML TAG

Um dies finden benötigst du den Quellcode einer HTML Seite deines Blogs und die style.css. Man kann den Quellcode einer HTML Seite durchsuchen. Du hast den Quellcode mit "Ansicht=>Quellecode anzeigen" geöffnet und oben rechts in deinem Browser findest du "Bearbeiten". Dort ist die "Suche", die wirst du öfter brauchen.
Beispiel:
Du möchtest, dass der Titel deines Blogs anders aussieht. Der Titel deines Blogs lautet: "Meine wunderbare Welt." Du suchst im geöffneten Fenster des Quellcodes nach "wunderbare Welt". Rund um diese Worte findest Du die CSS Angaben- etwa so:

<body><div id="page">
	<div id="header">
	<h1>Meine wunderbare Welt</h1>
		<div id="headerimg">
		</div>
			<div class="description">alles von mir und über mich.</div>
		</div>
	<div id="content" class="widecolumn">
  		<div class="post">....

Jeder HTML Tag hat einen Anfang und ein Ende. Das Ende siehst du, wenn ein Schrägstrich dabei ist. Fehlt so eine "Ende Tag", dann kann dies fatale Folgen für das Layout haben.
HTML TAGs haben eine Hierarchie. Z.B.: Du kannst alle h1 Überschriften generell definieren, aber die Überschrift h1, die nur unter #header steht ganz anders. Daher suchst du jetzt in deiner style.css nach h1 und nach #header h1. Findest du nur h1, dann ändere dort die Angaben. Findest du jedoch #header h1, dann darfst du für den Titel deines Blogs auch nur dort etwas ändern.

Was du jetzt noch weißt ist:#page ist für das generelle Layout verantwortlich, weil es gleich nach <body> kommt. Daher wird dieser Tag ziemlich sicher erst in der footer.php wieder geschlossen.
#header wird vor #content .widecolumn geschlossen. Also alles was das Aussehen des "Kopfes" (headers) ausmacht wird mit den CSS Angaben:#header, h1, #headerimg und .description gestaltet.
#content .widecolumn ist für alles darunter verantwortlich und .post für das Aussehen deiner Beiträge.

Fndest du eine dieser Angaben nicht in der style.css deines Themes, dann kann dies der Grund sein wieso das Layout nicht passt.

[bearbeiten] CSS und das Eltern/Kind Prinzip

CSS Angaben haben eine Hierarchie man nennt dies Eltern/Kind Prinzip. Und so wie im ganz normalen Leben halten sich manchmal die Kinder an die Werte der Eltern oder eben nicht. Doch herauszufinden welche CSS Angabe ein Elternteil ist und welche ein Kind oder die Nichte, die Tante ist,ist meist die Hälfte aller Problemlösungen.

Im obigen Beispiel ist #header eine fast selbstständig gewordene Tante, denn die darüberstehende Angabe #page ist noch nicht geschlossen, daher ist diese der allmächtige Patriarch Papa und was der befehlen kann steuert die Angabe <body>, die wie der Großvater zu verstehen ist.

Jeder HTML Tag der noch nicht geschlossen ist hat Auswirkungen auf alle HTML Tags, die unter ihm stehen!

Beispiel 1: Bei #page steht vielleicht eine Breitenangabe:

width="750px"

Du fügst aber unter #headerimg ein Bild ein das 800px breit ist und auch noch padding und margin Werte - und schon ist das Layout kaputt.

Beispiel 2: Du hast herausgefunden, dass #sidebar die Breite dieser bestimmt und möchtest sie breiter haben. Wenn du jetzt nur bei #sidebar einfach den Wert bei der Angabe "width" erhöhst hat entweder die Sidebar oder deine Beiträge keinen Platz mehr, da ja #page fixiert ist auf 750px. Also musst du die "width" Angabe bei der CSS Angabe, die deine Beiträge stylt verringern.

Es gibt einen einfachen Trick um herauszufinden welche CSS Angabe wofür verantwortlich ist. Doch bevor du diesen anwendest sichere alle Dateien deines Themes in einen eigenen Ordner. Solltest du dabei den Überblick verlieren kannst du dies so schnell wieder ändern.

[bearbeiten] "Border" Trick

Mache alle Teile deines Layouts mit einem bunten Rand sichtbar, indem du folgende Angabe zu all den "IDs" und Classen deines style.sheet hinzufügst.

border:solid 1px color

Das Wort "color" ersetze jeweils mit einer anderen Farbe.

Beispiel:

#page { margin:5px; padding:0; border: solid 1px red; }
#header { margin: 10px; padding: 5px; border: solid 1px blue; }
#content { margin:5px 100px 5px100px; padding:10px;
	border: solid 1px green; }
.post { margin:5px; padding:10px; border: solid 1px yellow; }

Speichere die CSS Datei lade sie auf deinen Webspace (klick REFRESH or F5) bei deinem Browser.
Du siehst nun lauter bunte Kästchen und kannst so einzelne Sektionen deines Layouts leichter identifizieren. Siehst du etwas nicht eingerahmt, dann hast du genau diese Angabe in deinem CSS noch nicht gefunden oder sie steht direkt in einer PHP Datei deines themes oder eines Plugins. Aber selbst das hilft dir weiter und auch den Helfern im Forum.

[bearbeiten] "Validate" deine Theme

Tippfehler haben sowohl in HTML wie in einer CSS Datei fatale Folgen. Um diese zu finden nutze die automatische Überprüfung, die dir folgende Website anbietet:Validator.
Wenn Fehler auftauchen aktiviere "Show Source" und klicke dann auf "revalidate". Der Validator sagt genau in welcher Zeile der Fehler ist, wenn du jetzt nach unten scrollst siehst du genau was in der Zeile steht und kannst so den Fehler in der jeweiligen PHP Datei deines Themes beheben.

[bearbeiten] "Validate" deine style.css

Manchmal funktioniert eine CSS Angabe nicht, weil ene Klammer oder ein Strichpunkt vergessen wurde, oder du dich vertippt hast. Der automatische CSS Validator hilft dir diese Fehler zu finden.

[bearbeiten] bekannte CSS Fehler

Wir alle machen Fehler - Tippfehler sind die häufigsten davon.

Tippfehler

leftt ist nicht das gleich wie left und genau deswegen kann die Angabe "left" nicht wirksam werden.
30ps für ein "margin" ergibt kein Resultat, aber 30px schon.

Die Details 

Jede CSS Angabe muss zwischen geschwungenen Klammern stehen und nach jeder Angabe muss ein Strichpunkt kommen.

Falscher Selektor 

All deine Angaben für #content ergeben ein wunderbares Layout, aber wenn im HTML content-right steht sind sie nutzlos.

Falsches Template 

Manche ändern alle Angaben in comments.php aber das richtige wäre comments-popup.php gewesen. Kontrolliere doppelt, ob du im richtigen Template etwas geändert hast, wenn nicht, dann ersetze es mit dem aus deiner Sicherung.

[bearbeiten] Andere Hilfen

WordPress Theme Troubleshooting eine Schritt für Schritt Anleitung mit Bildern. Firefox-Extension für "Web Developer" - installiert einen Toolbar, der auf Knopfdruck z.B. HTML oder CSS validieren lässt, oder auch Ränder, Überlappungen und wasimmer anzeigen kann.