Schriftfarben ändern

Die Schriftfarbe für den Text der Beiträge ändere ich im “#body”-Bereich, ich habe mich mit “color: #006666;” für einen Grünton entschieden.
Die Überschriften h1 (der Blogtitel), h2 (die Beitragstitel) und h3 (die Überschriften in der Sidebar) bekommen die gleiche Farbe. h2 und h3 bekommen, wie bei h1 schon hier geschehen, den Zusatz “text-decoration: none;”, damit sie nicht unterstrichen sind.

Die Links sollen ebenfalls in dieser Farbe dargestellt werden, zusätzlich orange unterpunktet und mit orangener Schriftfarbe beim Überfahren mit der Maus. Allerdings soll das nur für die Links in den Beiträgen gelten, nicht für alle anderen. Daher setze ich in der index.php die Zeile, die mit “php the_content” anfängt, in einen weiteren “div”-Container mit der Klasse “beitrag”. Der style.css füge ich dann hinzu:

weiterlesen…

Optische Abgrenzung einzelner Beiträge

Um die einzelnen Beiträge optisch voneinander abzugrenzen, möchte ich sie jeweils mit einem Rahmen umgeben. Dazu muss ich in der index.php zunächst festlegen, was dieser Rahmen umfassen soll. Ich möchte den jeweiligen Beitrag mitsamt der Kommentare eingerahmt haben. Um das zu erreichen, setze ich den Text ab der h2-Überschrift (dem Beitragstitel) bis hinter den php-Befehl, der die Kommentare aufruft (comments_template) in einen “div”-Container, dem ich class=”single” zuweise. Diese Klasse definiere ich in der style.css mit einem weißen Hintergrund, einem gepunkteten Rand, einem Innenabstand und einem Abstand nach unten:

Den gleichen Rand füge ich auch bei “#sidebar” ein.

Schriftart und -größe ändern

Ich möchte eine serifenlose Schriftart haben. Für die Wahl der Schriftart für eine Website ist diese Auflistung aller standardmäßig mit den jeweiligen Windowsversionen installierten Schriftarten hilfreich. Denn es nutzt nichts, hier im Blog eine superextravagante Schriftart zu verwenden – solange nur ich sie auf meinem Rechner installiert habe und 99 % der Leute, die meine Seite besuchen, nicht, sehen diese 99 % meine Seite nur in einer Standardschriftart wie Arial oder Times New Roman.

Daher entscheide ich mich für Verdana und füge in der style.css unter “#body” hinzu: ‘font-family: Verdana, Arial, Sans-Serif;’. Die Größe ändere ich bei “#post” mit ‘font-size: 0.8em;’ und bei “#sidebar”, da die Schrift hier etwas kleiner sein soll, mit ‘font-size: 0.7em;’

Die Überschriften über den einzelnen Beiträgen sind mir zu groß, ich möchte sie auch nicht unterstrichen haben. In der index.php sind sie als h2 definiert, daher füge ich der style.css hinzu:

Reihenfolge im Admin-Menü

Momentan bin ich hauptsächlich damit beschäftigt, Dateien in meinem Theme zu bearbeiten. Da ist es recht lästig, im Admin-Menü immer erst “Themes” und dann “Theme Editor” anzuklicken. Durch eine kleine Änderung in der Datei wp-admin/menu.php kann aber erreicht werden, dass bei Anklicken von “Themes” sofort die Spalte “Theme Editor” aktiv ist:
Diese Zeile:

ändern in:

Vor solchen Änderungen sollte natürlich immer eine Kopie der Originaldatei gemacht werden, damit diese, falls mal etwas schief geht, wieder hochgeladen werden kann.

Blog-Name

Ich ändere im Admin-Menü unter “Optionen” den Titel des Blogs in “WordPress 1.5 Testblog”. In der header.php ist er als h1-Überschrift definiert; damit er anders aussieht als bisher, muss ich also in der style.css für h1 etwas entsprechendes eintragen.
Erstmal soll er nur zentriert sein und – obwohl er als Link zum jeweils aktuellen Eintrag fungiert – nicht unterstrichen sein. Also ergänze ich die style.css folgendermaßen:

Link-Liste

Die Links, die bei jeder WP-Installation automatisch mit eingerichtet werden, habe ich im Admin-Menü unter Links -> Links verwalten gelöscht und unter -> Link hinzufügen Links zu Seiten, auf die ich in diesem Blog verweise, hinzugefügt.
Damit nicht mehr “Blogroll” sondern “Links” darüber steht, ändere ich diese Bezeichnung in der sidebar.php.

Die einzelnen Links (und auch alles andere, das in der sidebar steht) sind als unsortierte Liste definiert. Standardmäßig ist vor jedem Listenpunkt dieser Liste ein Punkt. Damit dieser Punkt nicht erscheint, füge ich in der style.css ein: