PopUp Builder Hintergrund transparent

[scherenschlag]

Moin.
Nochmal Frage zum PopUp von MBR.
Kann ich den Hintergrund transparent machen?
Also das in meinem Beispiel nur die schwarze Karte ohne den braunen Rand ist.
Man müsste dann auch das schließen Kreuz anpassen.
(Ich weiß. Werner hat da was tolles gemacht.)
https://www.gaststaette-zur-sonne.de

[Martin73]

Hallo Thomas,

Du hast im Editor des Popup-Blocks stehen:
.modal-content {
background: @cardBg;
........ }

Hier ersetzt Du "@cardBg" durch "transparent"!

Evtl. musst Du am Kreuz gar nichts ändern.

Martin

[Werner-Zenk.de]

Ich muss sagen das ich deine gestalteten Seiten immer wieder toll finde

Also das in meinem Beispiel nur die schwarze Karte ohne den braunen Rand ist.

Dann hast du eine schwarze Karte und einen schwarzen Pop-up Hintergrund. Die Karte soll doch eine Tafel darstellen auf der man mit Kreide etwas geschrieben hat, da gehört meiner Meinung nach ein Rahmen unbedingt dazu.

[Tommy Herrmann]

Moin,

bei meinem Popup vom Mobirise "Popup Builder" kann ich am Zahnrad eine Farbe wählen wie z.B. grau:

#cccccc

Diesen Eintrag finde ich als "input" Feld im "Code Editor " wieder:

<input type="color" title="Hintergrundfarbe" name="cardBg" value="#cccccc">

Ändere den Wert (value) in "transparent", also dann so:

<input type="color" title="Hintergrundfarbe" name="cardBg" value="transparent">

Dem zum Schließen, kannst Du eine andere CSS geben - im rechten Bereich "CSS Editor" vom "Code Editor" schreibst Du z.B. ganz unten die class="close" um in z.B. Weiß:

Code: Alles auswählen

.close {
  color: white;
}

P.S.:

Genau wie Werner sagt - probiere das mal, ich denke das sieht "falsch" aus, zumindest müsste dann um den Inhalt auch eine weiße Kante (border) oder so.

P.P.S.

Na wie fleißig

Als ich meinen Editor zur Antwort geöffnet hatte, hatte noch niemand geantwortet - und dann gleich 3

... es kann auch so wie von Martin beschrieben sein. Die Codes der Popups sind unterschiedlich - je nach Version.

[scherenschlag]

Na dann schaut mal bitte....
https://www.gaststaette-zur-sonne.de

Danke Euch
scherenschlag

[Tommy Herrmann]

Moin,

danke für das Feedback

Ist doch prima - kann man so machen oder auch so lassen wie vorher. Ist Geschmacksache, würde ich mal sagen. So ein wenig "verloren" wirkt das Kreuz zum Schließen jetzt schon.

[scherenschlag]

Auf'm Smartphone kommt das Kreuzchen besser rüber.
Ich hatte mir allerdings gerade auch schon überlegt das Kreuz zentriert zu setzen. Fett.
Wie bekommt man das denn hin?

[Martin73]

Na so wie Tommy oben geschrieben hat. Alles über .close ! Ich würde erst mal
.close {
color: white;
background-color: brown oder Rahmenfarbe vom Popup;
border-radius: 30px;
}
machen.
Zentiert ist schwierig:
.cid-spguqcHmx3 .modal-header .close {
position: absolute;
top: 1px;
right: 15rem;
margin: -1rem -1rem -1rem auto;
padding: 1rem;
opacity: .75;
}
Passt dann aber am Smartphone nicht! Eigentlich ist das ein Flex-Element, d.h. es müsste mit justify-item: center gehen. Macht es aber nicht!

[scherenschlag]

Moin Martin.
Hatte ja schon dran gearbeitet und eine andere Tafel mit transparenten Hintergrund eingebaut.
War nur die Frage nach dem Schließen Kreuz. Muss ja nicht zwingend mittig sein. War mal wieder so 'ne Idee von mir. Pudding ist sowieso wieder raus.

[Tommy Herrmann]

Moin,

also das Schließen-Symbol mittig zu setzen geht nur über dem Modal-Header, sonst ist die Schrift dazwischen.

Das ginge, mit diesen CSS-Anweisungen, zentriert so:

width: 50%; margin: auto;

<button style="width: 50%; margin: auto;" type="button" class="close" data-dismiss="modal" aria-label="Close">

Du musst also den gesamten (im Screenshot markierten) Block vom Schließen-Button kopieren und ein Stück höher (über der Header-Class) wieder einfügen.

Sieht dann so im Code Editor aus:

gesamten Button-Code über Modal-Header

... und so auf der Seite:

[scherenschlag]

Astrein.....
Klappt wunderbar.