Online Buchungsformular - Transparenter Hintergrund iframe?

[MeisterAdebar]

Erster Test beim einbinden des Formulars in die eigene Website zeigt, der Hintergrund sollte transparent sein.

Oder hat das einen designtechnischen Hintergrund mit dem schwarz?

Wenn ich folgende Änderungen in der Konsole vornehme, sieht das bei mir gut aus und mein Hintergrund wird dargestellt:

body {
    background-color: transparent !important;
}

:root {
    --fhb-bg: transparent;
}

.fhb-booking-root {
    background: transparent !important;
}

vs.

Im iframe wird der Titel gar nicht dargestellt, das war mir nicht klar. ¯_(ツ)_/¯

Warum muss die Schrift so klein sein, mit font-size:.6rem und small?

[developeregrem]

Hi, in den Settings für die Online-Buchung können nichttechnische Nutzer via Color-Picker einfach eine Hintergrundfarbe definieren. Der Standard Color-Picker unterstützt aber kein transparent -.-
Wer mehr machen möchte, kann direkt unter "Eigenes CSS" die Optik komplett customizen. Dort kannst du dann einfach den Wert von oben hineinschreiben

body {
    background-color: transparent !important;
}
.fhb-booking-root {
    background: transparent !important;
}

Stimmt, im embed mode hatte ich mich bewusst gegen die Überschrift entschieden. Wer das einbettet, kann einfach eine eigene Überschrift oder einleitenden Text über das iframe schreiben.
Und zur Größe: Ich fand es bei meinem Theme einfach zu groß, insbesondere auf dem Handy. Deswegen hatte ich das kleiner gemacht.

[MeisterAdebar]

Thx. Ich hab mich mehr oder weniger gestern das erste mal mit beschäftigt, das man CSS angeben kann hatte ich gekonnt übersehen.

Das mit der Transparenz klappt auf Anhieb.

Die Schriftgröße anzupassen mag mir erstmal aber nicht gelingen, keiner meiner Versuche mag greifen.
Cache hab ich immer gelöscht:

/* Ändert die Beschriftungen (Anreise, Abreise, etc.) */
.fhb-booking-root .form-label {
    font-size: 0.85rem !important;
}

/* Ändert den Text innerhalb der Eingabefelder */
.fhb-booking-root .form-control {
    font-size: 1rem !important;
}

/* Ändert die Schrift auf dem Button */
.fhb-booking-root .btn {
    font-size: 0.9rem !important;
}

/* Erhöhte Spezifität durch Kombination von Klassen */

/* 1. Labels: Wir zielen direkt auf .form-label, auch wenn .small vorhanden ist */
.fhb-booking-root label.form-label, 
.fhb-booking-root .small {
    font-size: 0.75rem !important; /* Hier deine 12px / 0.75rem */
}

/* 2. Eingabefelder: Hier nutzen wir den Tag + Klasse */
.fhb-booking-root input.form-control,
.fhb-booking-root select.form-control {
    font-size: 1rem !important;
}

/* 3. Button: Spezifisch für den Button-Typ */
.fhb-booking-root button.btn,
.fhb-booking-root .btn-outline-primary {
    font-size: 0.9rem !important;
}

/* Dieser Selektor erzwingt die Größe für ALLE Labels und Inputs innerhalb des Containers */
div.fhb-booking-root label, 
div.fhb-booking-root .form-label, 
div.fhb-booking-root .small {
    font-size: 0.75rem !important; /* 12px */
    display: inline-block !important; 
}

div.fhb-booking-root input.form-control {
    font-size: 1rem !important;
}

div.fhb-booking-root button.btn {
    font-size: 0.9rem !important;
}

[MeisterAdebar]

Alles gut, keine Ahnung was schief lief. Sry.

So wie der erste Gedanke war, ist schon korrekt und funzt:

/* Ändert die Beschriftungen (Anreise, Abreise, etc.) */
.fhb-booking-root .form-label {
    font-size: 1rem !important;
}

/* Ändert den Text innerhalb der Eingabefelder */
.fhb-booking-root .form-control {
    font-size: 2rem !important;
}

/* Ändert die Schrift auf dem Button */
.fhb-booking-root .btn {
    font-size: 2rem !important;
}

[MeisterAdebar]

Es verwirrt mich schon die ganze Zeit, darum hab ich auch nicht gleich gemerkt dass das CSS gegriffen hatte.

Der Inhalt des iframe ist doch "gestaucht" oder ist das Einbildung?

Größenangaben muss ich grösser wählen wie normal,. An was liegt das ?

So siehts bisher aus:

<!-- Start Booking -->
<section id="surround" data-nav data-title="Anfragen" class="bg-light">
    <div class="container px-2 py-5">
        <!-- Titel -->
        <div class="text-center">
            <h2 class="pb-2 border-bottom text-uppercase">
                Availability checken
            </h2>
            <p class="fs-5">
            coming soon
            </p>
        </div>
            <!--<div class="text-center">
            🚧 DIESER ABSCHNITT WIRD NOCH POLIERT 🚧
        </div>-->
        
        <iframe 
    id="fhb-booking" 
    class="mx-auto d-block"
    src="https://blub.tailcab18f.ts.net/book?embed=1" 
    style="border:0; width:100%; max-width:960px; min-height:200px; outline: none;" 
    loading="lazy" 
    title="Online Booking">
</iframe>
<script>window.addEventListener("message",function(e){if(e.data&&e.data.type==="fhb-resize"){document.getElementById("fhb-booking").style.height=e.data.height+"px"}});</script>
    </div>
</section>

[developeregrem]

Hm, zumindest habe ich da nicht bewusst etwas in die Richtung gebaut.
Ich habe deine Werte von oben auch mal bei mir eingegeben und das wirkt jetzt schon verdammt groß alles :D Ist das so gewollt?
Das hier ist mit embed=0

[MeisterAdebar]

Nee, so hab ich halt festgestellt dass das CSS greift.

Aber ich habs mir jetzt mal genauer angeschaut.
Ich bin Laie und erarbeite mir das alles selbst, ohne beruflichen Hintergrund. Meine Webseite hab ich mehr oder weniger von Hand geschrieben, keine Vorlage, vermutlich weniger professionell, aber ich bin mittlerweile stolz das es so ist wie es ist.
Bei mir nutz ich fs-5 für "normale" Schrift 🙄 Darum kam mir deine Vorlage so klein vor.
fs-5 sind 1,25rem. Wenn ich das so angebe passt das bei mir.
Bin selbst etwas erstaunt, ich dachte irgendwie das ist wie Schriftgröße 12.

[MeisterAdebar]

Da passt doch was nicht:

Für den Text "Oben"
1. Suche ▶ 2. Auswahl ▶ 3. Details

muss ich 2rem angeben, das er so groß ist wie der unten mit 1.25rem

body {
    background-color: transparent !important;
}
.fhb-booking-root {
    background: transparent !important;
    font-size: 2rem !important;
}

/* Ändert die Beschriftungen (Anreise, Abreise, etc.) */
.fhb-booking-root .form-label {
    font-size: 1.25rem !important;
}

/* Ändert den Text innerhalb der Eingabefelder */
.fhb-booking-root .form-control {
    font-size: 1.25rem !important;
}

/* Ändert die Schrift auf dem Button */
.fhb-booking-root .btn {
    font-size: 1.25rem !important;
}

[developeregrem]

Moin,
du müsstest in dem Fall direkt die badge Variable überschreiben:

.fhb-booking-root .badge {
    --bs-badge-font-size: 1.25rem;
}

Hintergrund: Wenn du es so wie bei dir machst greift die Vererbung und der Standardwert der Variable. Im Umliegenden div gibt es nochmal ein small (Schriftgröße 0,875), die Variable von badge hat nochmal 0,75 gesetzt.
Das berechnet sich dann wie folgt
Badge Größe = deine größe * 0.875 * 0.75 macht bei 2rem also am Ende 1.3125rem

[MeisterAdebar]

Danke

So siehts bei mir jetzt aus, das letzte Stück "bunt" hätt ich gerne auch noch weg.
Die Avatare hätte ich gerne auch grau, wie die Ausstattungs Icons, scheint aber gar nicht so einfach zu sein.

body {
    background-color: transparent !important;
}
.fhb-booking-root {
    background: transparent !important;
}

.fhb-booking-root .badge {
    --bs-badge-font-size: 1.25rem;
}

/* Ändert die Beschriftungen (Anreise, Abreise, etc.) */
.fhb-booking-root .form-label {
    font-size: 1.25rem !important;
}

/* Ändert den Text innerhalb der Eingabefelder */
.fhb-booking-root .form-control {
    font-size: 1.25rem !important;
}

/* Ändert die Schrift auf dem Button */
.fhb-booking-root .btn {
    font-size: 1.25rem !important;
    color: #000000 !important;
}

[developeregrem]

Das wird nicht so einfach gehen. Das ist aktuell einfach ein Emoji. Die Farbe gibt also dein Betriebssystem vor.
Nicht wirklich gut, ich ändere das in ein Font Awesome Icon in der nächsten Version. Dann kannst du des via color ändern.
Ich werde auch die Buttons und die Suchfelder oben (inkl. Schrift oben) wieder auf normal stellen. Du hast mich erfolgreich davon überzeugt, dass das zu klein ist 😁

[developeregrem]

Das icon kannst du jetzt so ändern:

.fhb-booking-root {
  /* only change color by using the color var */
  --fhb-occupancy-icon-color: red;
}
/* or if you want to change more than the color */
.fhb-booking-root .fhb-occupancy-icon {
  color: green;
  font-size: 2rem;
}