Button in bestehenden HTML5 Code einbinden

sab1802 schrieb am 05.11.2018 um 12:53 Uhr

Hallo alle zusammen!

Ich verwende den WD11 Premium und habe folgendes Problem. Ich habe einen HTML5 Code für einen Konfigurator bekommen, den ich auf der Website einbauen möchte. Das habe ich mit Platzhalter versucht und es funktioniert auch. Mein Problem ist, dass ich nicht weiß wie oder wo ich das Layout dieses Konfigurators im Code ändern kann. Der Code ist so generiert, dass nur ein graues Hintergrundfeld erscheint, mit einem weißen Textfeld darin. Wenn man auf den Text klickt öffnet sich dieser besagte Konfigurator auch problemlos und funktioniert nur optisch ist das eine Katastrophe.

Jetzt ist meine Frage, kann man da ein Bild bzw. einen Button, den ich mir aus dem Content heruntergeladen habe, einbauen oder darüberlegen, damit eben nicht das graue Feld sonder der Button zu sehen ist? Und wenn das möglich ist, wie stelle ich das an?

Würde mich sehr freuen wenn mir jemand helfen könnte!

Vielen Dank und LG

 

Kommentare

BeRo schrieb am 05.11.2018 um 13:21 Uhr

[...] Mein Problem ist, dass ich nicht weiß wie oder wo ich das Layout dieses Konfigurators im Code ändern kann [...]

Wenn Du den HTML Code hier postest, kann Dir wahrscheinlich geholfen werden.
So "ins Blaue hinein" iregendwelche Codemanipulationen als Lösung vorzuschlagen macht nicht viel Sinn 😍

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

sab1802 schrieb am 05.11.2018 um 13:39 Uhr

Entschuldigung! Da hast du natürlich recht. Also hier der Code:

<div id="Rehau5b0524c5_BtnFormGenerator"></div><script type="text/javascript">document.addEventListener("DOMContentLoaded", function(event){function createBtn(){var placeForBtn=document.querySelector('#Rehau5b0524c5_BtnFormGenerator'); var button='<button class="Rehau5b0524c5_btn">Angebot in 60 Sek.</button>'; placeForBtn.innerHTML=button}function createFrame(){var checkFrame=document.querySelector('.Rehau5b0524c5_frameContainer'); if (checkFrame !=null){return}else{var body=document.querySelector('body'); var placeForFrame=document.createElement('div'); var frame='\ <div class="Rehau5b0524c5_frameContainer">\ <div class="Rehau5b0524c5_loader"></div>\ <iframe src="https://www.rehau-home.at/external-calculator/74" height="100%" width="100%" class="Rehau5b0524c5_iframe"></iframe>\ <div class="Rehau5b0524c5_btnClose"></div>\ </div>\ '; body.appendChild(placeForFrame); placeForFrame.innerHTML=frame}var btnClose=document.querySelector('.Rehau5b0524c5_btnClose'); btnClose.onclick=function(){var frameContainer=document.querySelector('.Rehau5b0524c5_frameContainer'); var check=frameContainer.classList.contains('Rehau5b0524c5_show'); if (check==!1){frameContainer.classList.add('Rehau5b0524c5_show')}else{frameContainer.classList.remove('Rehau5b0524c5_show'); var iframe=document.querySelector('.Rehau5b0524c5_iframe'); iframe.classList.remove('Rehau5b0524c5_visible');}}}function style(){var style=document.createElement('style'); style.type='text/css'; style.innerHTML='\ @keyframes skBounce{\ 0%, 100%{\ transform: scale(0.0);\}\ 50%{\ transform: scale(1.0);\}\}\ .Rehau5b0524c5_loader{\ position: absolute!important;\ z-index: 1!important;\ width: 100px!important;\ height: 100px!important;\ top: calc(50% - 50px)!important;\ left: calc(50% - 50px)!important;\}\ .Rehau5b0524c5_loader:before, .Rehau5b0524c5_loader:after{\ content: ""!important;\ width: 100%!important;\ height: 100%!important;\ border-radius: 50%!important;\ background-color: #000!important;\ opacity: 0.6!important;\ position: absolute!important;\ top: 0!important;\ left: 0!important;\ -webkit-animation: skBounce 1.5s infinite ease-in-out!important;\ animation: skBounce 1.5s infinite ease-in-out!important;\}\ .Rehau5b0524c5_loader:after{\ -webkit-animation-delay: -1.0s!important;\ animation-delay: -1.0s!important;\}\ .Rehau5b0524c5_iframe{\ position: relative!important;\ z-index: 2!important;\ background: transparent!important;\ border: medium none!important;\ border-spacing: 0!important;\ color: #26589F!important;\ font-family: "PT Sans Narrow", sans-serif!important;\ font-size: 16px!important;\ font-weight: normal!important;\ line-height: 1.42rem!important;\ list-style: none outside none!important;\ margin: 0!important;\ padding: 0!important;\ text-align: left!important;\ text-decoration: none!important;\ text-indent: 0!important;\ transition: all .3s ease!important;\ opacity: 0;\ border: 1px solid #eaeaea!important;\ width: 100%!important;\ height: 100%!important;\}\ .Rehau5b0524c5_iframe.Rehau5b0524c5_visible{\ opacity: 1;\}\ .Rehau5b0524c5_btnClose{\ position: fixed!important;\ z-index: 2!important;\ right: 20px!important;\ top: 20px!important;\ width: 30px!important;\ height: 30px!important;\ cursor: pointer!important;\ transition: all .3s ease!important;\}\ .Rehau5b0524c5_btnClose:hover{\ opacity: 0.5!important;\}\ .Rehau5b0524c5_btnClose:before,\ .Rehau5b0524c5_btnClose:after{\ position: absolute!important;\ left: 15px!important;\ content: ""!important;\ height: 30px!important;\ width: 2px!important;\ background-color: #333!important;\}\ .Rehau5b0524c5_btnClose:before{\ transform: rotate(45deg)!important;\}\ .Rehau5b0524c5_btnClose:after{\ transform: rotate(-45deg)!important;\}\ .Rehau5b0524c5_btn{\ display: -webkit-inline-box!important;\ display: -webkit-inline-flex!important;\ display: -ms-inline-flexbox!important;\ display: inline-flex!important;\ -webkit-box-orient: horizontal!important;\ -webkit-box-direction: normal!important;\ -webkit-flex-flow: row wrap!important;\ -ms-flex-flow: row wrap!important;\ flex-flow: row wrap!important;\ border: 0!important;\ -webkit-box-align: center!important;\ -webkit-align-items: center!important;\ -ms-flex-align: center!important;\ align-items: center!important;\ -webkit-box-pack: center!important;\ -webkit-justify-content: center!important;\ -ms-flex-pack: center!important;\ justify-content: center!important;\ font-weight: 500!important;\ height: 48px!important;\ width: auto!important;\ font-size: 14px!important;\ background-color: #747473!important;\ color: #fff!important;\ border-radius: 2px!important;\ padding: 0 30px!important;\ text-align: center!important;\ -moz-appearance: none!important;\ -ms-appearance: none!important;\ -webkit-appearance: none!important;\ cursor: pointer!important;\ font-family: Helvetica, Arial, Sans-Serif!important;\ font-weight: 400!important;\ line-height: 1!important;\}\ .Rehau5b0524c5_frameContainer{\ background-color: rgba(241, 241, 241, .8)!important;\ position: fixed!important;\ z-index: -99999999!important;\ top: 0!important;\ left: 0!important;\ right: 0!important;\ bottom: 0!important;\ display: -webkit-box!important;\ display: -ms-flexbox!important;\ display: flex!important;\ -webkit-box-align: center!important;\ -ms-flex-align: center!important;\ align-items: center!important;\ -webkit-box-pack: center!important;\ -ms-flex-pack: center!important;\ justify-content: center!important;\ pointer-events: none!important;\ opacity: 0!important;\ transition: all .3s ease!important;\}\ @media screen and (min-width:1025px){\ .Rehau5b0524c5_frameContainer{\ padding: 60px!important;\}\}\ @media screen and (max-width:1024px){\ .Rehau5b0524c5_frameContainer{\ padding: 0px!important;\}\}\ .Rehau5b0524c5_show{\ z-index: 2147483647!important;\ pointer-events: auto!important;\ opacity: 1!important;\}\ '; document.getElementsByTagName('head')[0].appendChild(style)}function behavior(){var btn=document.querySelector('.Rehau5b0524c5_btn'); btn.onclick=function(){createFrame(); var frame=document.querySelector('.Rehau5b0524c5_frameContainer'); var check=frame.classList.contains('Rehau5b0524c5_show'); if (check==!1){frame.classList.add('Rehau5b0524c5_show'); var iframe=document.querySelector('.Rehau5b0524c5_iframe'); setTimeout(function(){iframe.classList.add('Rehau5b0524c5_visible');}, 3000);}else{frame.classList.remove('Rehau5b0524c5_show')}}}style(); createBtn(); behavior();});</script>

Vielen Dank fürs Helfen!

fm-b schrieb am 05.11.2018 um 14:07 Uhr

Hier hättest du mal den angepassten Code. Suche hier mal bitte nach "[ERSETZEN]" und trage dort die URL zu deinem Bild ein.

Änderungen:

  • Hintergrundfarbe des Buttons (grau) entfernt
  • Abstand zum Rand innerhalb des Buttons entfernt
  • Bild-Element eingefügt

 

<div id="Rehau5b0524c5_BtnFormGenerator"></div><script type="text/javascript">document.addEventListener("DOMContentLoaded", function(event){function createBtn(){var placeForBtn=document.querySelector('#Rehau5b0524c5_BtnFormGenerator'); var button='<button class="Rehau5b0524c5_btn"><img src="[ERSETZEN]" alt="Button" /></button>'; placeForBtn.innerHTML=button}function createFrame(){var checkFrame=document.querySelector('.Rehau5b0524c5_frameContainer'); if (checkFrame !=null){return}else{var body=document.querySelector('body'); var placeForFrame=document.createElement('div'); var frame='\ <div class="Rehau5b0524c5_frameContainer">\ <div class="Rehau5b0524c5_loader"></div>\ <iframe src="https://www.rehau-home.at/external-calculator/74" height="100%" width="100%" class="Rehau5b0524c5_iframe"></iframe>\ <div class="Rehau5b0524c5_btnClose"></div>\ </div>\ '; body.appendChild(placeForFrame); placeForFrame.innerHTML=frame}var btnClose=document.querySelector('.Rehau5b0524c5_btnClose'); btnClose.onclick=function(){var frameContainer=document.querySelector('.Rehau5b0524c5_frameContainer'); var check=frameContainer.classList.contains('Rehau5b0524c5_show'); if (check==!1){frameContainer.classList.add('Rehau5b0524c5_show')}else{frameContainer.classList.remove('Rehau5b0524c5_show'); var iframe=document.querySelector('.Rehau5b0524c5_iframe'); iframe.classList.remove('Rehau5b0524c5_visible');}}}function style(){var style=document.createElement('style'); style.type='text/css'; style.innerHTML='\ @keyframes skBounce{\ 0%, 100%{\ transform: scale(0.0);\}\ 50%{\ transform: scale(1.0);\}\}\ .Rehau5b0524c5_loader{\ position: absolute!important;\ z-index: 1!important;\ width: 100px!important;\ height: 100px!important;\ top: calc(50% - 50px)!important;\ left: calc(50% - 50px)!important;\}\ .Rehau5b0524c5_loader:before, .Rehau5b0524c5_loader:after{\ content: ""!important;\ width: 100%!important;\ height: 100%!important;\ border-radius: 50%!important;\ background-color: #000!important;\ opacity: 0.6!important;\ position: absolute!important;\ top: 0!important;\ left: 0!important;\ -webkit-animation: skBounce 1.5s infinite ease-in-out!important;\ animation: skBounce 1.5s infinite ease-in-out!important;\}\ .Rehau5b0524c5_loader:after{\ -webkit-animation-delay: -1.0s!important;\ animation-delay: -1.0s!important;\}\ .Rehau5b0524c5_iframe{\ position: relative!important;\ z-index: 2!important;\ background: transparent!important;\ border: medium none!important;\ border-spacing: 0!important;\ color: #26589F!important;\ font-family: "PT Sans Narrow", sans-serif!important;\ font-size: 16px!important;\ font-weight: normal!important;\ line-height: 1.42rem!important;\ list-style: none outside none!important;\ margin: 0!important;\ padding: 0!important;\ text-align: left!important;\ text-decoration: none!important;\ text-indent: 0!important;\ transition: all .3s ease!important;\ opacity: 0;\ border: 1px solid #eaeaea!important;\ width: 100%!important;\ height: 100%!important;\}\ .Rehau5b0524c5_iframe.Rehau5b0524c5_visible{\ opacity: 1;\}\ .Rehau5b0524c5_btnClose{\ position: fixed!important;\ z-index: 2!important;\ right: 20px!important;\ top: 20px!important;\ width: 30px!important;\ height: 30px!important;\ cursor: pointer!important;\ transition: all .3s ease!important;\}\ .Rehau5b0524c5_btnClose:hover{\ opacity: 0.5!important;\}\ .Rehau5b0524c5_btnClose:before,\ .Rehau5b0524c5_btnClose:after{\ position: absolute!important;\ left: 15px!important;\ content: ""!important;\ height: 30px!important;\ width: 2px!important;\ background-color: #333!important;\}\ .Rehau5b0524c5_btnClose:before{\ transform: rotate(45deg)!important;\}\ .Rehau5b0524c5_btnClose:after{\ transform: rotate(-45deg)!important;\}\ .Rehau5b0524c5_btn{\ background-color: transparent;\ display: -webkit-inline-box!important;\ display: -webkit-inline-flex!important;\ display: -ms-inline-flexbox!important;\ display: inline-flex!important;\ -webkit-box-orient: horizontal!important;\ -webkit-box-direction: normal!important;\ -webkit-flex-flow: row wrap!important;\ -ms-flex-flow: row wrap!important;\ flex-flow: row wrap!important;\ border: 0!important;\ -webkit-box-align: center!important;\ -webkit-align-items: center!important;\ -ms-flex-align: center!important;\ align-items: center!important;\ -webkit-box-pack: center!important;\ -webkit-justify-content: center!important;\ -ms-flex-pack: center!important;\ justify-content: center!important;\ font-weight: 500!important;\ width: auto!important;\ font-size: 14px!important;\ color: #fff!important;\ border-radius: 2px!important;\ text-align: center!important;\ -moz-appearance: none!important;\ -ms-appearance: none!important;\ -webkit-appearance: none!important;\ cursor: pointer!important;\ font-family: Helvetica, Arial, Sans-Serif!important;\ font-weight: 400!important;\ line-height: 1!important;\}\ .Rehau5b0524c5_frameContainer{\ background-color: rgba(241, 241, 241, .8)!important;\ position: fixed!important;\ z-index: -99999999!important;\ top: 0!important;\ left: 0!important;\ right: 0!important;\ bottom: 0!important;\ display: -webkit-box!important;\ display: -ms-flexbox!important;\ display: flex!important;\ -webkit-box-align: center!important;\ -ms-flex-align: center!important;\ align-items: center!important;\ -webkit-box-pack: center!important;\ -ms-flex-pack: center!important;\ justify-content: center!important;\ pointer-events: none!important;\ opacity: 0!important;\ transition: all .3s ease!important;\}\ @media screen and (min-width:1025px){\ .Rehau5b0524c5_frameContainer{\ padding: 60px!important;\}\}\ @media screen and (max-width:1024px){\ .Rehau5b0524c5_frameContainer{\ padding: 0px!important;\}\}\ .Rehau5b0524c5_show{\ z-index: 2147483647!important;\ pointer-events: auto!important;\ opacity: 1!important;\}\ '; document.getElementsByTagName('head')[0].appendChild(style)}function behavior(){var btn=document.querySelector('.Rehau5b0524c5_btn'); btn.onclick=function(){createFrame(); var frame=document.querySelector('.Rehau5b0524c5_frameContainer'); var check=frame.classList.contains('Rehau5b0524c5_show'); if (check==!1){frame.classList.add('Rehau5b0524c5_show'); var iframe=document.querySelector('.Rehau5b0524c5_iframe'); setTimeout(function(){iframe.classList.add('Rehau5b0524c5_visible');}, 3000);}else{frame.classList.remove('Rehau5b0524c5_show')}}}style(); createBtn(); behavior();});</script>

 

sab1802 schrieb am 05.11.2018 um 20:45 Uhr

@fm-b

Hallo fm-b! Vielen Dank für deine Antwort und das Umschreiben des Codes! Kannst du mir bitte nochmal helfen? Ich habe für das Bild eine URL mit imgur.com erstellt und diese bei "[ERSETZEN]" eingetragen. Das Bild ist gespeichert und im Programm vorhanden. Leider zeigt mir die Vorschau nur ein X und den alt-Text an, aber nicht das Bild. Was mache ich falsch? 😟 LG

fm-b schrieb am 05.11.2018 um 21:03 Uhr

Was die genaue Umsetzung innerhalb des Web Designers angeht, muss ich leider @BilderMacher oder @BeRo um Hilfe bitten. Ich selbst arbeite nicht damit und kann leider nur auf Code-Ebene weiterhelfen, tut mir Leid!

Aber ich denke, dass genannte User sicherlich einen Weg über die WD-Bordmittel zur Verfügung stellen können.

Wenn du das Bild auf imgur hochgeladen hast, müsstest du es eig. auch verlinken können.
Beachte, dass du nicht die URL zu der imgur-seite einfügen musst, sondern die des Bildes selbst.
(imgur URL öffnen, Rechtsklick auf das Bild und dann die Adresse kopieren. Diese in das src-attribut ("[ERSETZEN]") innerhalb des Codes einfügen.)

sab1802 schrieb am 05.11.2018 um 21:56 Uhr

@fm-b 

Ok! Habe es mit beiden URLs probiert aber bei beiden kam leider nur das X. Vielleicht haben ja die Beiden noch eine Idee.

Auf jeden Fall vielen Dank dir für deine bisherige Hilfe! Schönen Abend noch!😊👋

 

sab1802 schrieb am 05.11.2018 um 22:23 Uhr

@fm-b

Es funktioniert!!!! 😍 Ich hab es nochmal von vorne versucht und jetzt klappt es!

1000 Dank an dich!!!!! 😊👍

BeRo schrieb am 05.11.2018 um 22:29 Uhr

👍

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

sab1802 schrieb am 06.11.2018 um 07:03 Uhr

@BeRo

Das ist noch die geschummelte Version mit einem externen Link 😇. Da ich noch ein paar Änderungen machen muss, hab ich die Website noch nicht neu geladen. Aber ja, es sieht genau so aus nur eben, dass sich der Konfigurator nicht auf einer neuen Seite/Tab öffnet, sondern integriert ist. 😊