Anpassung der Hallendarstellung mit eigenem CSS

Mit eigenem CSS kann die Darstellung der Halle und ihrer Stände in weiten Grenzen angepasst werden.

Tipps zur Anpassung

  1. Kleine Änderungen zuerst testen — zu große Eingriffe können andere Layoutbereiche beeinflussen.
  2. Eigene CSS-Farben oder Variablen verwenden, um Corporate Design zu berücksichtigen.
  3. Hover-Effekte sparsam einsetzen — sie erhöhen die Interaktivität, können aber unruhig wirken.
  4. Eigene CSS-Dateien pro Halle vermeiden — das Feld „Eigene CSS-Einstellungen“ ist der richtige Ort.
  5. Bei Bedarf kann CSS jederzeit über das Backend-Feld „Eigene CSS-Einstellungen“ geändert werden.

Logo und Hintergrundbild in der Standliste

Die Stände in einer Halle können als Liste angezeigt werden. Dabei wird auf der linken Seite jedes Standes das Stand-Logo angezeigt. Mit CSS kann stattdessen oder zusätzlich das Hintergrundbild des Stands angezeigt werden.

Hintergrundbild anzeigen

.booth-list-bg-image {
    display: block !important;
}

Logo ausblenden

.booth-list-logo {
    display: none !important;
}

800

Unschärfe des Hintergrundbildes

Der Grad der Unschärfe des Hallenhintergrunds lässt sich ebenfalls über CSS einstellen. Der Standardwert ist 10px.

Unschärfe 50px

.blurred {
    filter: blur(50px);
}

800
Unschärfe 50px

Unschärfe 3px

.blurred {
    filter: blur(3px);
}

800
Unschärfe 3px

Kompakte Darstellung der Stände

Durch Verkleinern der Kacheln kann die Darstellung der Stände kompakter erfolgen:

.booth-card-content {
    height: 160px;
}
.booth-card {
    width: 270px;
}

800
Kompakte Darstellung der Stände in einer Halle

Ausschalten des Hintergrundbildes

Das Hintergrundbild einer Halle kann mit CSS auch vollständig ausgeschaltet werden:

.background-image {
    display: none;
}

In diesem Fall kann es sinnvoll sein, für die Halle eine Hintergrundfarbe einzustellen:

.fairhall-booth-list {
    background-color: #dd9999;
}

800
Halle ohne Hintergrundbild mit Hintergrundfarbe

Beispiel für die Anpassung des "Halle geschlossen" Hinweisschilds

Das Beispiel ist nicht schick, aber es zeigt, was geht :-)

.hall-closed-banner {
    background:
        repeating-linear-gradient(135deg, #000 0, #000 10px, #ffeb3b 10px, #ffeb3b 20px),
        rgba(255,255,255,0.8);
    background-blend-mode: lighten;
    border: 5px solid red;
}

800
Geschlossene Halle mit angepasstem Hinweis