Bootstrap 5.3

In the standard design, you have the option of creating and storing your own Bootstrap style to adapt the iFrame to your CI in terms of color and appearance. Changing the style with Bootstrap requires knowledge of HTML, CSS & Bootstrap and is only intended for experts. Support is available on the Internet: Bootstrap Docs.

You can make basic changes such as background and text color, font type and size as well as the colors of the individual buttons yourself with just a few clicks. If you have any other wishes, we will be happy to offer you a style based on your template. Simply send us an e-mail to: support@edoobox.com.

Create or change bootstrap style

To create your own bootstrap style or change an existing one, first navigate to the Design Manager and select the standard design. To edit existing styles, simply click on one of the existing Bootstrap styles. If you would like to create a new style, select the "Add" button A, which is located below the Bootstrap Styles title.

To begin with, you should give your bootstrap style a name, ideally something that is easy to recognize and remember, like the name of your company. In our example, the style could be called edoobox-style .

Colors

Colors can be easily adjusted by either using the Color Picker B or by selecting the hex code using Adobe Color CC. The main components where you can adjust the colors are:

--bs-primary = Buy voucher now button and link color
--bs-success = Login button
--bs-info = Details button
--bs-warning = Waiting list button
--bs-danger = Error messages / cancel booking button
--bs-white = Background color of the iFrame
--bs-gray-900 = Global text color of the iFrame
--bs-black = Navigation text color

Mass

Here you can define the standard spacing(padding and margin) for the components (--bs-spacer C) and the standard style of the frame (--bs-border-style D). You also have the option of defining the extent of the rounding of the corners of buttons(--bs-border-radius E). You can find out more about the different screen sizes here: Bootstrap 5.3 Documentation

Further settings

These bootstrap variables are configuration options that enable or disable certain features and behaviors of Bootstrap. Here is an explanation for each of these variables:

Customize font

If you would like to adjust the font in the preview, you can do this very easily under Font:

The first field with font-family-sans-serif is intended for sans serif fonts, such as Arial, Helvetica or Comic Sans. The second field with font-family-monospace is intended for monospaced (non-proportional) fonts. This means that each character has the same width. Examples of such fonts are Courier or Consolas.

Example: Comic Sans

If you would like to use the Comic Sans font, enter font-family-sans-serif folgendes ein:

"Comic Sans MS", "Comic Sans"

Select a suitable font from Google Fonts(https://fonts.google.com/ ) and insert it.

To ensure that edoobox actually uses this new font, you can now insert this CSS code into the Page Footer template in a code widget in the Design Manager and adjust the value behind family to your font name:

Here is the code you can copy:

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

You can then replace "Oswald" with your font name.

Related instructions

• Designing the booking process with the Design Manager

• Template | Body - Tender - 1 Offers overview

• Template | Body - Tender - 2 Offer details

• Template | Body - Registration / Booking procedure - 5 Registration: Participant form

Keywords for these instructions

Bootstrap ¦ CSS Code ¦ Design Style ¦ Design Manager