Bootstrap

Jedem neu erstellten Design können Sie einen der 25 vorgegebenen Styles zuordnen, um so das iFrame in Farbe und Aussehen weitgehend Ihrer Website anzugleichen. Bei Bedarf erstellen Sie mithilfe von Bootstrap einen eigenen Style.

Für jede Hauptkategorie (für Profis auch pro Unterkategorie) können Sie ein anderes Design mit einem anderen Style hinterlegen.

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 (https://getbootstrap.com/).

Die HTML Components (https://getbootstrap.com/components/) können Sie in Ihren Beschreibungen miteinbeziehen.

Basic Änderungen wie Hintergrund- und Textfarbe, Schriftart und –grösse sowie die Farben der einzelnen Buttons können Sie selber vornehmen. Haben Sie noch mehr Wünsche, offerieren wir Ihnen gerne einen Style nach Ihrer Vorlage.

Design Style

In der Box Bootstrap Styles – edoobox Design im Design Manager können Sie aus 25 vorgegebenen Styles auswählen. Es ist kein passender dabei? Kein Problem! Ändern Sie einen naheliegenden Style indem Sie auf den Stift-Button klicken.

Gewünschten Bootstrap Style auswählen

Zu beachten!

Diese Styles sind von uns nicht vollumfänglich getestet worden, es kann zu unerwarteten Darstellungsergebnissen führen. Wählen Sie in diesem Fall wieder den edoobox Start Style, oder versuchen Sie es mit einem anderen Style und ändern Sie diesen.

Änderungen in Bootstrap vornehmen

Farben

Hier können Sie z.B. die Farben der verschiedenen Buttons ändern:

Farben auf Bootstrap hinterlegen

@brand-primary = Jetzt Gutschein kaufen Button
@brand-success = Anmelde Button
@brand-info = Details Button
@brand-warning = Warteliste Button
@brand-danger = Fehlermeldungen / Buchung annullieren Button

Den Hex Code für die Farbe können Sie mit Adobe Color CC (https://color.adobe.com/de/create/color-wheel/) generieren.

Grundlagen (Scaffolding)

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

Hintergrund- und Textfarbe festlegen

@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.

Gewünschte Font auswählen

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.

Die Google Font hinterlegen

Damit edoobox diese neue 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:

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:

Compile and Download anklicken und ZIP Ordner erhalten

In die Einstellungen des Designs wechseln

ZIP Ordner mit eigenem Style hinzufügen

Tipp

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

Updated on 1. Mai 2019

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support