geBILDet

Archiv für 12. März 2009

Nehmen wir an, Sie möchten Ihren Besuchern ein an das Seiten-Layout angepasstes Kommentarerlebnis ermöglichen. Standard sind diese farblosen Kästen mit schwarzer Schrift, in die Ihre Besucher “Name (benötigt)“, “Email (wird nicht veröffentlicht) (benötigt)” und “Website” sowie den Kommentartext eingeben können. Da wollen Sie nun ein wenig Farbe oder gar ein Bild einfügen? Kein Problem, das ist in wenigen Momenten bewerkstelligt.

Zunächst brauchen Sie nur eine Vorstellung davon, wie das aussehen soll. Möchten Sie eine Farbe oder ein Bild? Dann öffnen Sie im Dashboard von WordPress die Datei style.css und suchen nach Phrasen wie diesen:

#commentform input bzw. #commentform textarea. (Die in Ihrem speziellen Fall auch etwas andere Namen tragen können; wenn Sie gleich den Code sehen, haben Sie aber einen Anhaltspunkt, was Sie an der entsprechenden Stelle vorfinden sollten.

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
background: url('images/kubrickbgcolor.jpg');
color: #ffffcc;
}

“Width” bestimmt die Länge des Eingabefeldes, “padding” den Innenabstand des Inhalts zum Rand und “margin” einen transparenten Abstand zum nächsten Element.  Während “padding” mit der Farbe oder dem Bild Ihrer Wahl aufgefüllt wird, ist “margin” tatsächlich durchsichtig und sieht genau aus wie Ihre Seite, auf der Sie Ihre Inhalte präsentieren. (Die entsprechende CSS-Referenzen finden Sie hier und hier).

Im Falle unserer Seite wollten wir den Hintergrund gerne in den Eingabefeldern haben. Entsprechend haben wir den Pfad zu eben dieser Bilddatei eingefügt: background: url('images/kubrickbgcolor.jpg');

Da dieser recht dunkel ist, haben wir mit color: #ffffcc; die Textfarbe angepasst hell gestaltet. Schließlich sollen Ihre Besucher auch lesen können, was sie schreiben.

Möchten Sie statt eines Bildes lieber eine Farbe? Kein Thema, ersetzen Sie einfach den background: url -Teil mit diesem: background: #000000; . Im Beispiel ist Schwarz codiert, Sie können aber auch jede andere Farbe eingeben.

Analog dazu ergänzen Sie den Bereich #commentform textarea auf die gleiche Weise.

Unser Ergebnis können Sie sich zum Beispiel unterhalb dieses Artikels ansehen, wenn Sie ihn in der Einzelansicht gelesen haben.

Good light and good nuck!