Skip to main content
Skip table of contents

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. Verwenden Sie zum Erstellen und Ändern der Styles den Chrome Browser von Google, andere Browser liefern zum Teil fehlerhafte Dateien. 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 selbst vornehmen. Haben Sie noch mehr Wünsche, offerieren wir Ihnen gerne einen Style nach Ihrer Vorlage (Mail an support@edoobox.com).

Bootstrap Style erstellen oder ändern

Um einen eigenen Bootstrap Style zu erstellen oder einen bestehenden zu ändern, navigieren Sie zum 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.

Snag_36938ad.png

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 zum Beispiel der Name Ihrer Unternehmung. In unserem Beispiel könnte der Style edoobox-style genannt werden.

Farben

Snag_1a84aa7f.png

Bootstrap Style Farben: via Color-Picker Farbe auswählen

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 Buttons zum Anpassen sind folgende:

--bs-primary = Jetzt Gutschein kaufen Button
--bs-success Anmelde Button
--bs-info = Details Button
--bs-warning = Warteliste Button
--bs-danger = Fehlermeldungen / Buchung annullieren Button
--bs-secondary = Mehr lesen Button

Masse

Snag_36f3768.png

Bootstrap Style Masse: Standardabstände einstellen

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 Screen Grössen finden Sie hier: Bootstrap 5.3 Dokumentation

Weitere Einstellungen

Grundlagen (Scaffolding)

Hier können Sie die Hintergrundfarbe, die globale Textfarbe und die Schriftfarbe der Links anpassen:

Hintergrundfarbe definieren

@body-bg = Hintergrundfarbe des iFrames
@text-color = globale Textfarbe des iFrames
@link-color = Linkfarbe
@link-hover-color = Linkfarbe, wenn man mit der Maus drüber fährt
@link-hover-decoration = Effekt, wenn man mit der Maus über den Link fährt

Typografie

Hier können Sie die Schriftart und -grösse ändern. Suchen Sie sich bei Google Fonts (https://fonts.google.com/ ) eine passende aus und fügen Sie diese ein.

Gewünschte Font suchen, das Plus Symbol (Select this font) anklicken und unten am Bildschirmrand auf den dunklen Balken klicken.

Font hinzufügen

Bei Specify in CSS den Teil hinter font-family kopieren und bei den 3 @font-family’s auf Bootstrap einfügen. Ersetzen Sie dann die einfachen Anführungszeichen mit den doppelten und nehmen Sie das Semikolon am Schluss raus.

Anpassung der Famely
Typography im BootBootstrap

Damit edoobox diesen neuen Font auch tatsächlich verwendet, können Sie nun im Design Manager diesen CSS Code im Template Seiten Footer einfügen und den Wert hinter families auf Ihren Font Namen anpassen:

Font im Footer hinzufügen

Hier der Code, den Sie kopieren können:

@import url(‚https://fonts.googleapis.com/css?family=Oswald‚);

„Oswald“ können Sie dann mit Ihrem Font Namen ersetzen.

Am Schluss klicken Sie auf «Compile and Download» und fügen den neu gewonnenen ZIP-Ordner im Design Manger hinzu:

ZIP-Ordner im Design Manager hinzufügen

Tipp: ZIP-Ordner

Den ZIP-Ordner entpacken, die CSS Datei nach Ihren Wünschen anpassen und den Ordner wieder in einen ZIP-Ordner umwandeln.

Verwandte Anleitungen

Stichwörter für diese Anleitung

Bootstrap ¦ CSS Code ¦ Scaffolding ¦ Design Style ¦ Typografie

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.