Bootstrap 5.3

Im Standard-Design haben Sie die Möglichkeit einen eigenen Bootstrap Style zu erstellen und hinterlegen, um das iFrame in Farbe und Aussehen weitgehend Ihrem CI anzupassen. Eine Änderung des Styles mit Bootstrap benötigt Kenntnisse in HTML, CSS & Bootstrap und ist nur für Experten gedacht. Support dazu erhalten Sie im Internet: Bootstrap Docs.

Basic Änderungen wie Hintergrund- und Textfarbe, Schriftart und –Grösse sowie die Farben der einzelnen Buttons können Sie mit wenigen Klicks selbst vornehmen. Haben Sie noch mehr Wünsche, dann offerieren wir Ihnen gerne einen Style nach Ihrer Vorlage. Schreiben Sie uns ganz einfach eine Mail an: support@edoobox.com.

Bootstrap Style erstellen oder ändern

Um einen eigenen Bootstrap Style zu erstellen oder einen bestehenden zu ändern, navigieren Sie zunächst in den Design Manager und wählen Sie das Standard-Design an. Um bestehende Styles zu bearbeiten, klicken Sie einfach auf einen der bereits vorhandenen Bootstrap Styles. Möchten Sie einen neuen Style erstellen, wählen Sie den «Hinzufügen» Button A, der sich unterhalb des Titels Bootstrap Styles befindet.

Standard Design: Bootstrap Style hinzufügen

Zu Beginn sollten Sie Ihrem Bootstrap Style einen Namen geben, idealerweise etwas, das leicht zu erkennen und zu merken ist, wie der Name Ihrer Unternehmung. In unserem Beispiel könnte der Style edoobox-style genannt werden.

Farben

Farben können einfach angepasst werden, indem Sie entweder den Color-Picker B verwenden oder den Hex-Code mithilfe von Adobe Color CC auswählen. Die wichtigsten Komponenten, bei denen Sie die Farben anpassen können, sind:

--bs-primary = Jetzt Gutschein kaufen Button und Linkfarbe
--bs-success = Anmelde Button
--bs-info = Details Button
--bs-warning = Warteliste Button
--bs-danger = Fehlermeldungen / Buchung annullieren Button
--bs-white = Hintergrundfarbe des iFrames
--bs-gray-900 = globale Textfarbe des iFrames
--bs-black = Textfarbe Navigation

Masse

Hier können Sie den Standardabstand (Padding und Margin) für die Komponenten festlegen (--bs-spacer C) sowie den Standardstil des Rahmens bestimmen (--bs-border-style D). Zusätzlich haben Sie die Möglichkeit, das Ausmass der Abrundung der Ecken bei Buttons zu definieren (--bs-border-radius E). Mehr zu den verschiedenen Bildschirm Grössen finden Sie hier: Bootstrap 5.3 Dokumentation

Weitere Einstellungen

Diese Bootstrap-Variablen sind Konfigurationsoptionen, die bestimmte Features und Verhaltensweisen von Bootstrap aktivieren oder deaktivieren. Hier ist eine Erklärung für jede dieser Variablen:

Variablen	Beschreibung
`--bs-enable-rfs`	Aktiviert das Responsive Font Sizing (RFS), das die Schriftgrösse je nach Viewport-Grösse automatisch anpasst.
`--bs-enable-caret`	Aktiviert das Caret-Symbol (kleiner Pfeil), das oft bei Dropdowns angezeigt wird.
`--bs-enable-cssgrid`	Aktiviert die CSS Grid-Unterstützung in Bootstrap.
`--bs-enable-rounded`	Aktiviert die abgerundeten Ecken für Elemente.
`--bs-enable-shadows`	Aktiviert Schatteneffekte für Bootstrap-Komponenten.
`--bs-enable-dark-mode`	Aktiviert den Dark-Mode in Bootstrap.
`--bs-enable-gradients`	Aktiviert Farbverläufe in Bootstrap-Komponenten.
`--bs-enable-transitions`	Aktiviert CSS-Übergangseffekte in Bootstrap.
`--bs-enable-grid-classes`	Aktiviert die Grid-Klassen in Bootstrap.
`--bs-enable-smooth-scroll`	Aktiviert das sanfte Scrollen auf der Webseite.
`--bs-enable-reduced-motion`	Aktiviert die reduzierte Bewegung für Benutzer, die Bewegungseffekte minimieren möchten (z.B. für Barrierefreiheit).
`--bs-enable-button-pointers`	Aktiviert den Zeiger (Cursor) für Buttons.
`--bs-enable-negative-margins`	Aktiviert negative Margin-Klassen in Bootstrap.
`--bs-enable-validation-icons`	Aktiviert Validierungsicons bei Formularen.
`--bs-enable-container-classes`	Aktiviert Container-Klassen in Bootstrap.
`--bs-enable-important-utilities`	Aktiviert die Verwendung von `!important` in Bootstrap-Utilities.
`--bs-enable-deprecation-messages`	Aktiviert Warnmeldungen für veraltete Funktionen in Bootstrap.

Schriftart anpassen

Möchten Sie die Schriftart oder Grösse in der Vorschau anpassen, können Sie dies ganz einfach via Code Widget machen.

Beispiel:

CODE

body { 
  font-family: 'Helvetica', sans-serif !important; 
  font-size: 14px !important; 
}