Golf CSS-Vorlagen

Anpassbare Golf-CSS-Vorlagen für Clubs und Golfplätze

Golf-CSS-Vorlagen definieren das Aussehen wiederkehrender Komponenten eines Golfprojekts – vom Startzeiten-Slot bis hin zu Tarifübersichten für Mitgliedschaften. Typografieskala, Abstände und Farbpalette sind vordefiniert und harmonieren bereits miteinander. Rahmen, Hintergründe und Schaltflächenzustände sind ebenfalls festgelegt und lassen sich passgenau auf Ihren Club abstimmen.

Startzeiten-Klassen mit Zustandsmodifikatoren

Jeder Bestandteil der Benutzeroberfläche erhält eigene visuelle Regeln, die durch die Vorlage konsistent gehalten werden:

• Startzeiten-Slots teilen sich eine gemeinsame Basisklasse, während Modifikatoren belegte Slots abdunkeln, offene Slots umranden und den ausgewählten Slot mit der Akzentfarbe hervorheben.
• Die hervorgehobene Mitgliedschaftsstufe erhält einen dickeren Rahmen, einen getönten Hintergrund und einen auffälligeren Button.
• Turnierzeilen wechseln sich farblich ab oder nutzen feine Trennlinien, wobei das Datum fetter formatiert wird als das Spielformat.
• Kurs-Karten verwenden dasselbe Innenabstandsmaß, denselben Eckenradius und dieselbe Überschriftenhöhe wieder, sodass für eine neue Trainerkarte keine zusätzlichen Regeln erforderlich sind.

Da diese Elemente gemeinsame Klassen nutzen, kann eine einzige Regel alle Buchungs-Buttons umgestalten, und ein einzelner Modifikator reicht aus, um gezielt nur das empfohlene Angebot anzupassen.

Zeilenumbruch dichter Raster bei schmalen Breakpoints

Ein morgendlicher Abschlagplan mit Terminen alle acht oder zehn Minuten bündelt Dutzende Slots in einer einzigen Zeile. Auf schmalen Bildschirmen bricht diese Zeile um; eine Mindestbreite pro Slot zusammen mit einem festen Abstand bestimmt, wie viele Zeiten pro Zeile Platz finden. Bei einem definierten Breakpoint wechselt die Zeile der Mitgliedschaften zu einer vertikalen Flex-Ausrichtung. Breite Turniertabellen scrollen entweder innerhalb ihres eigenen Containers oder reduzieren jede Zeile zu einem kompakten Block.

Abstände können je nach Komponente variieren – von dichten Startzeiten-Slots über mittlere Abstände zwischen Karten bis hin zu großzügigem Freiraum um Banner des Platzes. Mit den Responsive Modes von Nicepage lassen sich Abstände, Stapelung und Ausrichtung pro Gerät anpassen, ohne Media Queries schreiben zu müssen.

Kontrast auf Fairway-Fotos

Ein heller Himmel und sonnenbeschienener Rasen bieten weißen Überschriften oft zu wenig Kontrast, weshalb Fotobereiche ein dunkleres Overlay benötigen. Club-Farbpaletten setzen zudem häufig auf Grüntöne, und ein grüner Buchungs-Button auf einem grünen Fairway geht leicht unter. Ein kontrastierender Akzent löst dieses Problem, sofern er in jedem Zustand gut sichtbar bleibt.

Hover- und Fokus-Zustände sollten Farbe oder Umrandung deutlich verändern. Ein eingedrückter Look kennzeichnet den aktiven Zustand, und ein deaktiviertes Datum ohne freie Zeiten sollte so weit verblassen, dass es sofort als nicht verfügbar erkennbar ist.

Nicepage Theme Colors übertragen die Farbpalette auf die gesamte Benutzeroberfläche, während Custom CSS für lokale Ausnahmen sorgt – wie etwa ein temporäres Sponsorenbanner für ein einzelnes Turnier. Eine Golf-CSS-Vorlage ist besonders pflegeleicht, wenn Palette und Typografie an einer zentralen Stelle angepasst werden können. Ihre Zustände sollten zudem konsistent bleiben und ihre Abstände über alle Breakpoints hinweg zuverlässig funktionieren.