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.
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:
@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:
@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.
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.
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:
Den ZIP-Ordner entpacken, die CSS Datei nach Ihren Wünschen anpassen und den Ordner wieder in einen ZIP-Ordner umwandeln.
