Mario hatte mich einmal bei einen Treffen gefragt, wie er denn in einem Theme die Schriftgröße verändern könnte, daraus entstand die Idee das zu thematisieren. Am Beispiel des Standardthemes in WordPress zeige ich heute, wie man mit recht einfachen Mitteln fertige Themes individuell anpassen kann.

Im Ordner /wp-content/default/ befindet sich die Datei “style.css”. Diese ist elementar für das WordPress Theme, denn sie definiert nicht nur den Namen und die Eckdaten zum Theme, die in der Design-Verwaltungsoberfläche zu sehen sind, sondern auch die Styledefinitionen der einzelnen HTML Elemente des Themes.

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets
Text Domain: kubrick

	Kubrick v1.5

http://binarybonsai.com/kubrick/

	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/

	The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

Die für uns in diesem Tutorial wichtigen Passagen innerhalb der style.css sind folgende CSS Klassen und ID´s:

• #content
• h1-h6
• h2.pagetitle
• #sidebar h2
• .commentlist p

Beispiel:

Wir wollen den Text innerhalb des Posts oder der Seite im DIV-Container “#content” vergrößern, dann suchen wir in der style.css folgenden Code:

#content {
	font-size: 1.2em;
	}

und ersetzen das mit:

#content {
	font-size: 1.3em;
	}

somit haben wir den Text im Container #content um 0.1em vergrößert ohne, dass andere Inhalte verändert wurden.

Natürlich ist es angenehm für die Leser, wenn die Absätze etwas Luft haben, also fügen wir noch folgendes hinzu:

#content {
	font-size: 1.2em;
	margin-bottom: 1em;
	}

Die Überschriften können natürlich auch nach Belieben – aber nach den Regeln des CSS versteht sich – verändert werden:

h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}

h1 {
	font-size: 4em;
	text-align: center;
	}

#headerimg .description {
	font-size: 1.2em;
	text-align: center;
	}

h2 {
	font-size: 1.6em;
	}

h2.pagetitle {
	font-size: 1.6em;
	}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}

h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: white;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #333;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

und zum guten Schluss nehmen wir uns noch die Schriftgröße in den Kommentaren vor:

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

Was bei dem Bearbeiten in CSS Dateien wichtig ist, dass diese mit einem reinen Texteditor oder geeigneten HTML-Editor bearbeitet werden. Wenn die Datei auf dem Server beschreibbar ist, geht das auch mit dem integrierten Editor unter “Design -> Editor”. Vor jeder Veränderung IMMER ein Backup machen!

So können wir auch alle anderen relevanten Klassen definieren. Weiterführende Informationen zum Thema CSS gibt es z. B. bei www.css4you.de

This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.