Gästebuch mit CSS gestalten

Ihr Gästebuch mit CSS gestalten heißt: Sie legen selbst fest, wie Einträge, Eingabefelder und Buttons auf Ihrer Seite aussehen. CSS steht für "Cascading Style Sheets" und ist die Sprache, mit der im Web die Optik beschrieben wird - Farben, Schriftgrößen, Abstände, Rahmen und Effekte beim Überfahren mit der Maus.

Während HTML den Inhalt liefert (ein Name, ein Kommentar, ein Absende-Button), kümmert sich CSS allein um das Aussehen. Beides bleibt sauber getrennt. Das ist der praktische Teil: Sie ändern die Gestaltung Ihres Gästebuchs jederzeit, ohne den Inhalt oder die Programmlogik anzufassen.

Was CSS macht und wie eine Regel aufgebaut ist

Stellen Sie sich HTML als Rohbau eines Hauses vor und CSS als Farbe, Tapete und Möbel. Der Rohbau steht fest, das Erscheinungsbild bestimmen Sie. Eine CSS-Regel besteht immer aus einem Selektor (welches Element wird angesprochen) und einem oder mehreren Eigenschaft-Wert-Paaren in geschweiften Klammern.

Ein allgemeines Beispiel für eine Eintrags-Box. Im Gästebuch-Script wirkt es erst, wenn jeder Eintrag in gaestebuch.php eine eigene Klasse bekommt:

.eintrag {
  background-color: #f5f5f5;   /* heller Hintergrund */
  padding: 12px;               /* Innenabstand zum Rand */
  border: 1px solid #ccc;      /* dünner grauer Rahmen */
  border-radius: 8px;          /* leicht abgerundete Ecken */
  margin-bottom: 16px;         /* Abstand zum nächsten Eintrag */
}

Zeile für Zeile: background-color färbt den Kasten dezent ein, padding schafft Luft zwischen Text und Rand, border zeichnet eine feine Trennlinie, border-radius rundet die Ecken ab, und margin-bottom setzt jeden Eintrag etwas vom nächsten ab. Damit Sie sehen, welche Bereiche sich überhaupt anpassen lassen, hilft die folgende Übersicht.

Die echten Klassennamen im Gästebuch-Script finden

Damit Ihre Regeln greifen, müssen die Selektoren zu dem passen, was das Script tatsächlich ausgibt. Das kostenlose Gästebuch-Script erzeugt die Eintragsliste als Tabelle mit wenigen festen Klassen. IDs haben nur die Formularfelder, etwa #name oder #message. Die wichtigsten finden Sie in dieser Tabelle.

Sie müssen sich diese Namen nicht merken, denn Ihr Browser zeigt sie Ihnen direkt an. Klicken Sie auf der Gästebuch-Seite mit der rechten Maustaste auf das Element, das Sie ändern möchten, und wählen Sie "Untersuchen" (alternativ Taste F12). Die Entwicklertools öffnen sich und markieren das HTML-Element samt seiner Klasse oder ID. Diesen Namen übernehmen Sie eins zu eins als Selektor in Ihre CSS-Datei. In den Entwicklertools können Sie sogar Werte testweise verändern und sofort sehen, wie es aussieht - übernommen wird aber nur, was Sie anschließend in Ihre Datei schreiben.

Ihre CSS-Datei einbinden

Damit der Browser Ihre Regeln lädt, braucht er einen Verweis auf die Datei. Üblich und übersichtlich ist eine eigene Datei namens style.css, die Sie einmal im Kopf der Seite verknüpfen. Der Verweis gehört in den <head>-Bereich:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Im Gästebuch-Script steht dieser <head> in der Datei tpl/template.tpl. Dort tragen Sie die Zeile direkt vor </head> ein, also nach dem vorhandenen <style>-Block. So werden Ihre eigenen Regeln zuletzt geladen und können die Standardwerte überschreiben. Liegt style.css im selben Ordner wie die aufgerufene Seite, genügt der Dateiname; liegt sie woanders, geben Sie den Pfad an, etwa href="css/style.css". Grundsätzlich gibt es drei Wege, CSS unterzubringen.

• Inline: Das CSS steht direkt an einem einzelnen HTML-Element. Schnell für einen Test, aber unübersichtlich bei größeren Änderungen.
• Im Seitenkopf: Die Regeln stehen gesammelt zwischen <style>-Tags im <head>. Brauchbar für eine einzelne Seite.
• In einer eigenen CSS-Datei: Alle Regeln liegen in einer Datei, die Sie einmal einbinden. Das ist die empfohlene Variante, weil Sie alles an einer Stelle pflegen.

Typische Anpassungen für Einsteiger

Sie müssen nicht alles auf einmal beherrschen. Schon mit wenigen Eigenschaften werten Sie ein Gästebuch sichtbar auf. Die folgenden gehören zu den am häufigsten genutzten und sind leicht zu verstehen.

Besonders lebendig wirkt ein Button, der auf die Maus reagiert. Dafür gibt es den Zustand :hover, der nur dann greift, wenn der Mauszeiger über dem Element liegt. Der Absende-Button des Scripts hat keine eigene Klasse. Sie sprechen ihn deshalb mit input[type="submit"] an:

input[type="submit"] {
  width: auto;
  background-color: #154d80;
  color: #ffffff;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #0066cc;   /* Farbe beim Überfahren */
}

Der Button ist normalerweise dunkelblau und wird heller, sobald jemand mit der Maus darüberfährt. So ein kleiner Effekt signalisiert, dass das Element anklickbar ist, und kostet Sie nur zwei zusätzliche Zeilen.

Vorher und nachher: der spürbare Unterschied

Bevor Sie viel verändern, lohnt ein ehrlicher Blick auf den Ausgangszustand. Ein unbearbeitetes Gästebuch zeigt die Einträge oft als schlichte Liste: gleiche Schrift, kaum Abstand, keine klare Trennung zwischen den Beiträgen. Das funktioniert, wirkt aber beliebig.

Nach wenigen Regeln sieht dasselbe Gästebuch deutlich aufgeräumter aus: Jeder Eintrag sitzt in einer eigenen Box mit hellem Hintergrund und abgerundeten Ecken, zwischen den Beiträgen liegt sichtbar Luft, der Name des Besuchers hebt sich farblich ab, und der Absende-Button reagiert auf die Maus. Inhaltlich hat sich nichts geändert - nur das Auge findet sich sofort besser zurecht. Im Gästebuch-Script kommen Sie mit den Selektoren aus der Klassentabelle und den Einstellungen im Admin schon weit. Eine eigene Box je Eintrag braucht zusätzlich eine Klasse in gaestebuch.php.

Worauf Sie beim Gestalten achten sollten

Gestaltung soll helfen, nicht ablenken. Bevor Sie loslegen, lohnt ein Blick auf ein paar einfache Regeln, die Ihr Gästebuch sauber und auf allen Geräten benutzbar halten.

1. Sorgen Sie für ausreichend Kontrast zwischen Text und Hintergrund, damit alles gut lesbar bleibt.
2. Verwenden Sie nicht zu viele verschiedene Farben und Schriftarten - zwei bis drei reichen.
3. Prüfen Sie das Ergebnis auch auf dem Smartphone, denn viele Besucher schreiben mobil.
4. Ändern Sie immer nur eine Sache und schauen Sie sich das Ergebnis an, bevor Sie weitermachen.

Der Vorteil beim kostenlosen Gästebuch-Script: Farben, Schrift und Breiten stellen Sie im Admin unter „Gästebuch:“ → „Einstellen“ ein, eigene CSS-Regeln ergänzen Sie in tpl/template.tpl. Gegen die Inline-Angaben der Eintragsliste hilft nur !important. Darüber hinaus binden Sie Ihre eigene style.css ein, lesen die echten Klassennamen über die Entwicklertools aus und passen sie Schritt für Schritt an. Fangen Sie klein an - eine Farbe hier, ein Abstand dort - und tasten Sie sich vor. So lernt man CSS am verlässlichsten.

Häufige Fragen

Wo finde ich die CSS-Klassen meines Gästebuchs? Klicken Sie auf der Gästebuch-Seite mit der rechten Maustaste auf das gewünschte Element und wählen Sie "Untersuchen" (oder drücken Sie F12). Die Entwicklertools des Browsers zeigen Ihnen das HTML samt Klasse oder ID, die Sie dann als Selektor verwenden.

Wo muss der Link zur CSS-Datei stehen? Der Tag <link rel="stylesheet" href="style.css"> gehört in den <head>-Bereich, im Script also in die Datei tpl/template.tpl. Tragen Sie ihn direkt vor </head> nach dem <style>-Block ein, damit Ihre Regeln Vorrang haben.

Warum greift meine CSS-Regel nicht? Häufige Gründe sind ein falsch geschriebener Selektor, ein nicht eingebundenes Stylesheet oder eine bestehende Inline-Angabe, die stärker wirkt. Prüfen Sie in den Entwicklertools, ob die Regel überhaupt geladen und ob sie durchgestrichen, also überschrieben, dargestellt wird.

Brauche ich für einen Hover-Effekt JavaScript? Nein. Ein Farbwechsel beim Überfahren mit der Maus gelingt allein mit CSS über den Zustand :hover, wie im Button-Beispiel gezeigt.

Verwandte Themen

Diese Beiträge führen das Thema weiter und helfen Ihnen beim nächsten Schritt:

• Gästebuch optisch an Webdesign anpassen
• Gästebuch Farben ändern
• Gästebuch Layout anpassen
• Gästebuch Schriftart ändern
• Responsives Gästebuch erstellen
• Eigenes Logo im Gästebuch einfügen

Dieser Beitrag wurde von der Redaktion von gaestebuch-script.de erstellt und zuletzt im Juni 2026 fachlich überprüft.