Gästebuch Farben ändern

Sie möchten die Gästebuch Farben ändern, damit das Gästebuch wie ein selbstverständlicher Teil Ihrer Homepage wirkt und nicht wie ein aufgesetzter Fremdkörper? Genau dabei hilft dieser Leitfaden. Wenn Sie das Gästebuch einbinden, startet es mit einer blauen Standardoptik: blauer Hintergrund, dunkelblauer Rahmen, dunkle Schrift in Verdana. Das ist funktional, passt aber selten von allein zu Ihrem eigenen Farbschema.

Die gute Nachricht für Einsteiger: Farben anzupassen ist keine echte Programmierung. Sie verändern nur einige wenige Werte, die festlegen, welcher Farbton an welcher Stelle erscheint. Wir gehen das Schritt für Schritt durch, nennen die konkreten Felder im Admin-Bereich des Gästebuch-Scripts und erklären jeden Begriff, der dabei auftaucht.

Wo die Farben im Gästebuch-Script festgelegt werden

Bevor Sie etwas ändern, hilft es zu wissen, woher die Farben kommen. Im Gästebuch-Script stellen Sie die Farben bequem im Admin-Bereich unter „Gästebuch:“ → „Einstellen“ ein. Die Werte speichert das Script in der Datenbank und setzt sie beim Aufruf automatisch in die Vorlage tpl/template.tpl ein. Dort stehen sie als CSS. CSS ist eine Stilanweisung, die dem Browser sagt, wie Flächen, Texte und Eingabefelder aussehen sollen.

Wer darüber hinaus eingreifen möchte, findet das CSS der Gästebuch-Seite im <style>-Block der Datei tpl/template.tpl. Dort stehen unter anderem der Rahmen um die Einträge (.table_div), die Trennlinie zwischen zwei Einträgen (.line) und die Eingabefelder des Formulars (input, textarea). Die Farbwerte kommen als Variablen wie var(--hintergrundfarbe) aus den Admin-Einstellungen. Eine Farbe steht als Hex-Code mit vorangestelltem Doppelkreuz, etwa #ffffff für Weiß. Die Farbfelder im Admin sind Farbwähler und speichern immer einen Hex-Code. Nur in eigenem CSS gehen auch Namen wie navy.

Die wichtigsten Begriffe und Selektoren kurz erklärt

Damit Sie beim Bearbeiten wissen, welche Stelle welche Farbe steuert, hilft diese Übersicht. Sie verbindet die Felder unter „Gästebuch:“ → „Einstellen“ mit den Stellen, an denen sie im Gästebuch wirken.

Gästebuch Farben ändern: so gehen Sie vor

Jetzt wird es praktisch. Die folgenden Schritte führen Sie durch die Einstellungen im Admin-Bereich. Notieren Sie vorher die bisherigen Farbwerte, damit Sie jederzeit zum Ausgangszustand zurückkehren können.

1. Melden Sie sich im Admin-Bereich an und klicken Sie links unter „Gästebuch:“ auf „Einstellen“.
2. Sie sehen nun die Seite „Gästebuch Einstellen“ mit allen Farbfeldern untereinander.
3. Suchen Sie das passende Feld aus der Tabelle, zum Beispiel „Rahmenfarbe“ oder „Rahmenkopf“.
4. Klicken Sie auf das Farbfeld und wählen Sie Ihren Wunschwert, etwa #eef3f8.
5. Klicken Sie unten auf „Abschicken“. Es erscheint die Meldung „Daten wurden geändert“.
6. Rufen Sie das Gästebuch auf und drücken Sie Strg+F5, um die Seite ohne alten Zwischenspeicher neu zu laden.

Wer lieber direkt im CSS arbeitet, sieht an einem Vorher/Nachher-Beispiel, wie das aussieht. So steht der Rahmen um die Einträge in der Vorlage tpl/template.tpl. Seine Farbe kommt aus dem Feld „Rahmenfarbe“:

.table_div {
    border: var(--ausgabetabelle-rf) 1px solid;
    width: var(--breite);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Einen eigenen Hintergrund für den Eintragsbereich gibt es als Einstellung nicht. Für ein helles Blau-Schema mit weicherem Rahmen ergänzen Sie deshalb am Ende des <style>-Blocks diese Regel. Die Werte können Sie übernehmen und nur die Hex-Codes austauschen:

.table_div {
    border-color: #154d80;
    background-color: #eef3f8;
}

Sehen Sie keine Veränderung, liegt das fast immer am Zwischenspeicher des Browsers oder daran, dass eine andere Angabe weiter unten in der Datei Ihre überschreibt. CSS gewinnt im Zweifel mit der spezifischeren oder zuletzt notierten Regel. Prüfen Sie dann, ob es eine zweite Stelle mit demselben Selektor gibt.

Passende Farbpaletten finden, die zu Ihrer Seite passen

Technisch ist das Ändern schnell erledigt. Schwieriger ist meist die Frage, welche Töne harmonieren. Orientieren Sie sich an den Farben, die Ihre Homepage ohnehin nutzt, und legen Sie für Hintergrund, Schrift, Buttons und Links jeweils einen festen Wert fest. Drei erprobte Kombinationen als Startpunkt:

Eigene Farbtöne erzeugen Sie am bequemsten mit einem Color-Picker, etwa dem in den Entwicklertools von Chrome oder Firefox (Taste F12) oder einem Online-Werkzeug wie htmlcolorcodes.com. Den fertigen Hex-Wert übernehmen Sie in das passende Farbfeld unter „Gästebuch:“ → „Einstellen“.

Lesbarkeit und Kontrast nicht vergessen

Schöne Farben nützen wenig, wenn die Einträge Ihrer Besucher schlecht lesbar sind. Helle Schrift auf hellem Grund verschwindet, dunkel auf dunkel ebenso. Verlassen Sie sich nicht nur auf das Auge, sondern messen Sie das Kontrastverhältnis. Die Web-Richtlinie WCAG empfiehlt für normalen Fließtext mindestens 4,5:1, für große Überschriften 3:1.

Prüfen lässt sich das in Sekunden mit einem kostenlosen WCAG-Kontrast-Checker wie dem WebAIM Contrast Checker oder dem Kontrast-Werkzeug in den Browser-Entwicklertools. Sie geben Schrift- und Hintergrundfarbe ein und sehen sofort, ob der Wert ausreicht. Dunkler Text auf hellem Untergrund erreicht diese Vorgaben fast immer mühelos und bleibt auf jedem Bildschirm gut lesbar.

Häufige Fragen

Meine Farbänderung wird nicht sichtbar, woran liegt das? In den allermeisten Fällen am Browser-Zwischenspeicher. Laden Sie die Seite mit Strg+F5 neu. Bleibt es dabei, prüfen Sie, ob Sie auf „Abschicken“ geklickt haben und die Meldung „Daten wurden geändert“ erschienen ist.

Wie ändere ich die Farbe der Schaltflächen und des Kopfbereichs? Den Kopfbereich färben Sie unter „Gästebuch:“ → „Einstellen“ mit den Feldern „Rahmenkopf“ und „Schriftfarbe, Kopf“. Für Eingabefelder und die Schaltfläche gibt es keine Farbeinstellung. Dafür ergänzen Sie im <style>-Block von tpl/template.tpl Regeln für input, textarea und input[type="submit"].

Wie stelle ich eine Hover-Farbe für Links ein? Die Vorlage kennt nur eine Linkfarbe, die Sie im Feld „Linkfarbe“ einstellen. Für einen Effekt beim Überfahren mit der Maus ergänzen Sie im <style>-Block von tpl/template.tpl die Regel a:hover { color: #ihrwert; } mit Ihrem gewünschten Hex-Code.

Gibt es im Admin-Bereich eine Farbeinstellung? Ja, unter „Gästebuch:“ → „Einstellen“ stellen Sie Hintergrund, Rahmen, Rahmenkopf und Trennlinie sowie Schrift-, Link- und Meldungsfarben ein. Das hat den Vorteil, dass Sie alle Farben an einer einzigen Stelle bündeln und das Gästebuch ohne Dateibearbeitung an Ihr restliches Webdesign angleichen können.

Verwandte Themen

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

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

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