Gästebuch Layout anpassen

Wenn Sie das Gästebuch Layout anpassen möchten, geht es darum, wie die einzelnen Bausteine auf der Seite angeordnet sind: das Eingabeformular, die Liste der vorhandenen Einträge und die Abstände dazwischen. Layout meint die sichtbare Struktur, also wo etwas steht und wie viel Platz es bekommt, noch bevor Sie über Farben oder Schriftarten nachdenken.

Viele Einsteiger verwechseln Layout und Design. Das Design betrifft das Aussehen wie Farbe, Schrift und Rahmen. Das Layout dagegen klärt: Steht das Formular oben oder unten? Liegen Name und E-Mail nebeneinander oder untereinander? Wie viel Luft trennt zwei Einträge? Diese Fragen zum Layout lösen wir hier mit den Einstellungen im Admin-Bereich und mit CSS in der Vorlage des Gästebuch-Scripts.

Wo das Layout im Gästebuch-Script festgelegt wird

Bevor Sie etwas verschieben, sollten Sie wissen, an welcher Stelle die Gestaltung überhaupt steht. Beim Gästebuch-Script steht das Formular in der Vorlage tpl/template.tpl. Die Eintragsliste baut dagegen gaestebuch.php zusammen, dort ändern Sie nur mit Vorsicht etwas.

Die zentrale Datei ist tpl/template.tpl im Ordner Ihrer Installation. Ihr <style>-Block im Seitenkopf enthält alle CSS-Regeln der Gästebuch-Seite. Einige Maße stellen Sie ganz ohne Datei im Admin unter „Gästebuch:“ → „Einstellen“ ein: „Breite des Gästebuch“, „Breite der Eingabefelder“ und die Anzahl der Einträge pro Seite. Öffnen Sie diese Datei mit einem reinen Texteditor wie Notepad++ oder dem Editor Ihres FTP-Programms, nicht mit einem Office-Programm. Die folgende Tabelle zeigt, welcher Bereich sich womit anpassen lässt:

Mehr zur Logik dahinter erklärt der Artikel Gästebuch mit CSS gestalten. Wenn Sie sich noch unsicher fühlen, lohnt vorab ein Blick in die CSS-Grundlagen, weil Selektoren und Eigenschaften dort vom Boden auf erklärt werden.

Abstände zwischen den Einträgen festlegen

Sind die Einträge zu eng, wirkt das Gästebuch unruhig und der einzelne Beitrag geht unter. Das ist die dankbarste erste Änderung, weil Sie das Ergebnis sofort sehen. Ergänzen Sie dazu im <style>-Block von tpl/template.tpl eine Regel für die Trennlinie .line, die zwischen zwei Einträgen steht, und eine für die Zellen der Eintragsliste:

.line {
  margin: 24px 0;
}
.table_div td {
  padding: 4px 16px;
}

Was die einzelnen Zeilen bewirken, lesen Sie hier auf einen Blick. So können Sie jeden Wert gezielt nach Ihrem Geschmack erhöhen oder verkleinern:

• margin: 24px 0 schafft über und unter der Trennlinie 24 Pixel Luft, damit zwei Beiträge nicht ineinanderlaufen.
• padding: 4px 16px setzt in jeder Zelle der Eintragsliste Innenabstand, sodass der Text nicht direkt am Rand klebt und der Eintrag "atmen" kann.
• Farbe der Trennlinie heißt das Feld im Admin, mit dem Sie die Linie einfärben. Sie macht klar, wo ein Beitrag endet.

Im Gästebuch-Script hat ein Eintrag keine eigene Klasse. Ansprechen lassen sich die Trennlinie .line und die Zellen über .table_div td. Das sehen Sie auch selbst, wenn Sie mit der rechten Maustaste auf einen Eintrag klicken und "Untersuchen" wählen.

Name und E-Mail nebeneinander setzen

Standardmäßig stehen die Formularfelder untereinander, was auf dem Smartphone gut passt. Auf breiten Bildschirmen wirkt es jedoch aufgeräumter, Name und E-Mail in eine Zeile zu legen. Das erreichen Sie mit Flexbox.

Vorher liegen beide Felder einfach gestapelt übereinander. Nachher teilen sie sich eine Zeile. Legen Sie dazu in tpl/template.tpl die beiden Eingabefelder in eine gemeinsame Tabellenzelle, umschließen Sie sie dort mit <div class="feldzeile"> und ergänzen Sie:

.feldzeile {
  display: flex;
  gap: 16px;
}
.feldzeile input {
  flex: 1;
}
 
@media (max-width: 600px) {
  .feldzeile {
    flex-direction: column;
  }
}

display: flex stellt die Felder nebeneinander, gap: 16px hält sie auf Abstand und flex: 1 verteilt die Breite gleichmäßig. Der @media-Block ist wichtig: Unter 600 Pixel Bildschirmbreite rutschen die Felder wieder untereinander, damit auf dem Handy nichts gequetscht wird. Diesen Schritt sollten Sie nie weglassen.

So gehen Sie als Einsteiger Schritt für Schritt vor

Damit das Anpassen nicht zur Rätselei wird, hilft eine feste Reihenfolge. Diese Schritte gelten unabhängig davon, welches Detail Sie ändern.

1. Sichern Sie zuerst die Originaldatei tpl/template.tpl als Kopie, damit Sie jederzeit zurück können.
2. Überlegen Sie, welchen einzelnen Bereich Sie ändern wollen (Formular, Liste, Abstände).
3. Nehmen Sie genau eine kleine Änderung vor und speichern Sie die Datei.
4. Laden Sie die Datei per FTP wieder hoch und öffnen Sie das Gästebuch im Browser.
5. Prüfen Sie das Ergebnis auch in der schmalen Handy-Ansicht, bevor Sie weitermachen.

Erscheint Ihre Änderung nicht? Dann ist fast immer der Browser-Cache schuld: Der Browser zeigt noch die alte Version. Laden Sie die Seite mit Strg+F5 (am Mac Cmd+Shift+R) neu, damit das aktuelle Stylesheet geholt wird. Verwandte Anpassungen behandeln die Artikel Gästebuch Farben ändern, Gästebuch Schriftart ändern und Gästebuch optisch an das Webdesign anpassen.

Häufige Fragen

Wo finde ich die CSS-Datei? In Ihrer Installation steht das CSS im <style>-Block der Datei tpl/template.tpl. Verbinden Sie sich per FTP mit Ihrem Webspace, dort sehen Sie die Verzeichnisstruktur und können die Datei herunterladen, bearbeiten und wieder hochladen.

Meine Änderung wird nicht angezeigt, was tun? In über 90 Prozent der Fälle liegt es am Browser-Cache. Drücken Sie Strg+F5 für einen vollständigen Neuaufbau. Hilft das nicht, prüfen Sie, ob Sie die richtige Datei bearbeitet haben und ob der Selektor (zum Beispiel .line oder .table_div) wirklich in tpl/template.tpl vorkommt.

Kann ich etwas kaputtmachen? Solange Sie nur den <style>-Block in tpl/template.tpl ändern, bleibt die Funktion des Gästebuchs unberührt. Platzhalter wie <!--{NAME}--> dürfen Sie nicht löschen. Im schlimmsten Fall sieht es kurz seltsam aus. Mit Ihrer gesicherten Kopie spielen Sie den alten Stand in Sekunden wieder ein.

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 mit CSS gestalten
• Responsives Gästebuch erstellen
• Gästebuch Farben ändern
• Gästebuch für mobile Ansicht optimieren
• Gästebuch Schriftart ändern

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