© 2018
A MarketPress Theme

WordPress_Kolumne_staged

WordPress Kolumne #3: Wie kann ich die Schriftgröße in meinem Theme anpassen?

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

Toolempfehlung
Am besten testet man im Vorfeld im Firebug die Änderungen, bevor man diese in der echten CSS Datei verändert und speichert. Firebug ist eine Erweiterung für den Firefox Browser und ein unersetzliches Tool für Webentwickler. zur Downloadseite von Firebug auf Mozilla.org

3 Kommentare

  1. Hallo Birgit, die Formatierung der Schriftgrössen ist ja sehr simpel, eigentlich doch ab WP 2.9.2. kommt es mir so vor, als ob dort der CSS Code etwas getunt wurde. Jedenfalls klemmts vehement an einigen Formatierungen. MfG Micha

    Antworten ›
    • Hallo Michael,

      so ist das oft mit den neuen Versionen. Zumal jetzt mit WordPress 3.0 auch ein neues Standardtheme mitgeliefert wird, muss man erst einmal auf die Suche gehen, wo was deklariert wird. Aber dabei kann gut die Erweiterung für den Firefox „Webdeveloper Toolbar“ und „Firebug“ helfen.

      Liebe Grüße
      Birgit

      Antworten ›

1 Pingback

  1. Immer Freitag: Die Wordpress Kolumne mit Birgit Olzem – Ausgabe #3

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

WP Camp Webring
%d Bloggern gefällt das: