Ankündigung

Einklappen
Keine Ankündigung bisher.

PayPal-Button ignoriert CSS befehle

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • PayPal-Button ignoriert CSS befehle

    Hallo leute,

    ich hoffe mir kann hier jemand weiterhelfen :-)
    folgende Situation.

    Ich habe eine WordPress Seite mit Woocommerce und PayPal Anbindung.


    Auf der Produktseite erscheint der PayPal checkout Button so wie ich es wollte. Soweit so gut. Nur ist mir der Button zu breit.
    Also wollte ich über die Konsole (F12) das Element ausfindig machen und per CCS Befehl verkleinern. Einfach mit width:50% oder so. Habe das in der Konsole getestet und hat auch funktioniert.
    Nun habe ich es im Flatsome Theme das ich verwende und Custom Code ebenfalls eingegeben, aber der Button reagiert nicht darauf (Siehe Bilder im Anhang).

    Hab Folgendes eingefügt:

    .paypal-button.paypal-button-shape-pill {
    border-radius: 18px;
    width:50%;
    }


    Und wie gesagt, wenn ich es in der Konsole so eingebe Funktioniert es. Bei Flatsome dann nicht mehr.

    Betroffene URL: https://crypto-gin.de/produkt/crypto...-dry-gin-05-l/

    Danke euch schonmal.
    You do not have permission to view this gallery.
    This gallery has 2 photos.

  • #2
    Cache geleert hast du?
    https://arnego2.com <Webseiten, Umbau ab €80, SEO ab €105 im Monat>

    VPS 4GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

    Kommentar


    • #3
      Ja Cache mehrfach geleert und auch nach 24 stunden keine veränderung

      Kommentar


      • #4
        Hallo koseb

        Wenn ich mittels Dev-Tools (F12) den oben benannten Link betrachte (Black Forest Dry Gin) an finde ich darin die CSS-Direktive '.payball-button'. Darin ist hinterlegt: width: 100%. Wenn ich hier den Haken rausnehme dann ist dein PayPal gerade so schmall dass der Text passt ('auto').

        .paypal-button {
        border: 1px solid transparent;
        border-radius: 0 3px 3px 0;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border: none;
        vertical-align: top;
        cursor: pointer;
        overflow: hidden;
        }

        Als Quelle für die Direktive benannt ist "buttons?style.label=checkout&style.layout=horizon tal&style.color=gold..."

        Er holt sich also die Definition des Buttons online direkt von PayPal. Ob das seitens PayPal so sein muss und auch nicht geändert werden darf weiß ich nicht. Aber wenn du es ändern willst versuch folgendes:

        CSS wird 'upside-down' verarbeitet. Daher wird eine bereits definierte Eigenschaft überschrieben wenn an späterer Stelle diese Eigenschaft neu definiert wird. Daher schau mal in dein Script wann diese PayBal-Definition eingebunden wird. Dies erfolgt oftmals mit einer Anweisung wie <link rel="stylesheet" href="https://www.paypal.com/smart/buttons" />.

        Nach dieser Einbindung bindest du deine eigene CSS ein. Da dann deine CSS nach der Fremd-CSS interpretiert wird erhalten deine Definitionen Vorrang (überschreiben also die bisherigen Definitionen).

        So kannst du einzelne Bereiche einer bereits extern eingebundenen CSS neu definieren - muss aber DANACH erfolgen! Letzte Anweisung überfährt bereits vorhandene Anweisung.

        Oder du nutzt die CSS-eigene Priorisierung. Diese besagt, dass je näher am Element definiert wird diese Definition "Vorfahrt" hat. Wenn du also direkt beim Button einen Style angibst (<button style="width:50%;">) wirkt diese Anweisung IMMER.

        Du solltest dann aber auch noch den Parameter !important hinzufügen. Dies verhindert, dass an späterer Stelle eine andere Definition die bereits bestehende Definition überfährt. Die via PayPal eingebundene Definition ist zum Glück ohne !important definiert :-)
        ________
        Megabyte66
        ________

        Kommentar


        • #5
          Hi Megabyte,


          vielen Dank für Deine Hilfe, so wie du es beschrieben hast, sollte es doch funktionieren.
          Kann deine Schritte auch alle nachvollziehen, nur hängt es bei mir bei dem wohl einfachsten Schritt.
          Woher weiß ich, wo das Script gespeichert ist bzw. welches ich bearbeiten muss? Kann ich irgendwie über den Seitenquelltext den Dateipfad herausfinden? Hab mir den Webspace mal runtergeladen, finde aber die CSS-Datei dazu nicht.

          Also ich verstehe nicht, wie ich rausbekomme, wo der CSS-Code gespeichert ist.

          Vielen Dank noch mal für deine Hilfe!

          Kommentar


          • #6
            koseb

            Das Problem (oder Segen, je nach dem...) mit CSS ist, dass es theoretisch überall eingebunden werden kann. Fast immer werden die CSS-Direktiven aber als externe Datei gespeichert und innerhalb des <head> mittels <link rel="stylesheet" href="Pfad_zur_Datei.css"> eingebunden.

            Wenn ich mir den Quelltext deiner betroffenen Seite ansehe finde ich jede Menge (ca. 30-50) Links zu css-Dateien. Das ist mitunter dem klassischen Baukasten-System geschuldet (WordPress, Woocommerce...). Jeder Baukasten bindet je nach gewählten Modulen einen echten Wirrwarr an css-Dateien ein. Hier die betreffende Datei zu finden ist Stecknadel im Heuhaufen suchen. Und das nächste Problem wird sein, dass die externe Datei eher nicht bearbeitet werden kann da diese fast ausschließlich auf den Servern der Modulanbietern liegen und daher keine Zugriffsrechte vorhanden sind.

            Tipp:

            Zu Beginn eines Scripts (siehe auch deinen Quelltext) gibt es IMMER einen Befehl (besser 'TAG') der den Anfang des Kopfes einer HTML-Datei definiert: <head>. Ab da beginnen dann - ich nenne es mal 'interne Informationen' für Browser und Server - etliche Zeilen Code die der Benutzer nicht angezeigt bekommt. Diese dienen in erster Linie der Informationen zwischen Browser und Server oder aber auch Hinweise für Suchmaschinen. Hier findest du auch die Dutzende Verweise zu den vielen CSS-Dateien die bei dir eingebunden werden.

            Scroll hier nun dein Script abwärts bis du </head> findest. Dieser Tag definiert das Ende des Kopfbereichs. Danach folgt der <body> - der eigentliche (und auch sichtbare) Teil einer Webseite...

            Du kannst auch strg+f benutzen und nach </head> suchen - geht schneller...

            Gib nun direkt VOR der </head>-Zeile folgende Zeile ein:


            <style>
            .paypal-button { width:50% !important; }
            </style>

            Da nun diese Anweisung die Letzte ist im <head>-Bereich sollte sie evtl. bereits gesetzte Direktiven 'überfahren' - Zuletzt ersetzt davor...

            Damit könnte es dir egal sein wo der Button definiert wird und ob du darauf Zugriff hast... du überschreibst es einfach. Dank dem angefügten '!important' sollten evtl. nachfolgende Überschreibungen unterdrückt werden.

            Fazit: Versuch gar nicht erst die Definition umzuschreiben sondern versuch, diese Direktive zu überschreiben!
            Denn wie gesagt: Selbst wenn du die betreffende CSS-Datei findest bezweifle ich, dass du darauf schreibrechte hast!

            Versuchs mal und kannst dich dann ja gerne nochmal melden...
            Zuletzt geändert von Megabyte; 23.11.2021, 19:53.
            ________
            Megabyte66
            ________

            Kommentar


            • #7
              koseb - Ergänzung:

              Öffne mal mit F12 die Entwickler-Tools (bei deiner Problemseite). Wie beschrieben findest du dort die folgende Zeilen:

              .paypal-button {
              border: 1px solid transparent;
              border-radius: 0 3px 3px 0;
              position: relative;
              width: 100%;
              box-sizing: border-box;
              border: none;
              vertical-align: top;
              cursor: pointer;
              overflow: hidden;
              }

              Genau in diesem Abschnitt findest du auch eine Angabe wo die Quelle der Direktive zu finden ist:

              https://www.paypal.com/smart/buttons...gPayments=true

              Wenn du den Link aufrufst kommt eine Darstellung des Buttons. Wenn du dir hier nun den Seitenquelltext ansiehst dann findest du dort deine Button-Definition (width:100% steht in Zeile 80). Da die Datei auf paypal.com liegt wirst du sie sicher nicht umschreiben können :-)

              Komisch finde ich die Länge der URL - sollte sie nach Hypertext Transfer Protocol nicht bei max. 255 Bytes begrenzt sein? *lol*
              ________
              Megabyte66
              ________

              Kommentar


              • #8
                admin

                Mein letzter Post hier wurde als Spam deklariert :-(. Bitte freimachen da ich denke dass jemand auf Antwort wartet :-)
                ________
                Megabyte66
                ________

                Kommentar

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen

                Themen: 56.952   Beiträge: 431.322   Mitglieder: 28.881   Aktive Mitglieder: 150
                Willkommen an unser neuestes Mitglied, DannyMam.

                Online-Benutzer

                Einklappen

                175 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 174.

                Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                • arnego2
                  Antwort auf IP Blacklist und Mails versenden
                  nei da kann man IP, Domain und hash abfragen.
                  Es gibt auch soinst eine Menge an Bllacklist Checkern....
                  Gestern, 22:03
                • Webhelfer
                  Antwort auf IP Blacklist und Mails versenden
                  @arnego2:
                  Aber dort kann man nur IPs eingeben und keine Domains?!?!
                  Ja, die IP meines Webservers und meines Mailservers teile ich mit allen anderen Kunden meines Hosters.

                  Diese IP ist, wie gesagt, zum Glück dort nicht eingetragen.
                  Aber meine Absender IP.
                  24.11.2021, 00:07
                • basti1012
                  Antwort auf PCR TEST corona
                  Alles Mist.
                  Letztes Jahr hieß es wir müssen impfen , sonst können wir die Pandemie nie stoppen.
                  Dieses Jahr heißt es wir müssen boostern, sondern können wir das nicht stoppen.
                  Nächstes Jahr wahrscheinlich nochmal boostern und so weiter. usw.

                  Ich hatte heute mein...
                  23.11.2021, 22:38
                • Megabyte
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  admin

                  Mein letzter Post hier wurde als Spam deklariert :-(. Bitte freimachen da ich denke dass jemand auf Antwort wartet :-)
                  23.11.2021, 20:12
                • Megabyte
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  koseb - Ergänzung:

                  Öffne mal mit F12 die Entwickler-Tools (bei deiner Problemseite). Wie beschrieben findest du dort die folgende Zeilen:

                  .paypal-button {
                  border: 1px solid transparent;
                  border-radius: 0 3px 3px 0;
                  position: relative;
                  width: 100%;...
                  23.11.2021, 20:08

                Die neuesten Beiträge

                Einklappen

                • arnego2
                  Antwort auf IP Blacklist und Mails versenden
                  nei da kann man IP, Domain und hash abfragen.
                  Es gibt auch soinst eine Menge an Bllacklist Checkern....
                  Gestern, 22:03
                • Webhelfer
                  IP Blacklist und Mails versenden
                  Hallo,

                  zuerst muss ich erwähnen, dass ich KEINE Massenmails, KEIN Spam und KEINE Newsletter versende, sondern ganz normal Mails.
                  Mal an Person x, mal an Person y, usw..

                  Auf einige meiner Mails erhalte ich keine Antwort.
                  Ok, es kann auch sein, dass die betreffende...
                  14.11.2021, 01:27
                • Webhelfer
                  Antwort auf IP Blacklist und Mails versenden
                  @arnego2:
                  Aber dort kann man nur IPs eingeben und keine Domains?!?!
                  Ja, die IP meines Webservers und meines Mailservers teile ich mit allen anderen Kunden meines Hosters.

                  Diese IP ist, wie gesagt, zum Glück dort nicht eingetragen.
                  Aber meine Absender IP.
                  24.11.2021, 00:07
                • basti1012
                  Antwort auf PCR TEST corona
                  Alles Mist.
                  Letztes Jahr hieß es wir müssen impfen , sonst können wir die Pandemie nie stoppen.
                  Dieses Jahr heißt es wir müssen boostern, sondern können wir das nicht stoppen.
                  Nächstes Jahr wahrscheinlich nochmal boostern und so weiter. usw.

                  Ich hatte heute mein...
                  23.11.2021, 22:38
                • ST747
                  PCR TEST corona
                  Hi, es gibt Dinge, die glaubt man nicht.

                  Der PCR-Test ist normal nur 48 Stunden gültig und kostet bei uns um die 70 EUR. Wer den schneller will, muss über 100 EUR zahlen, falls es überhaupt geht.

                  Nun hatte ich gefragt, wie lange es dauert, bis der Test vorliegt. Antwort:...
                  08.11.2021, 18:34
                • Megabyte
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  admin

                  Mein letzter Post hier wurde als Spam deklariert :-(. Bitte freimachen da ich denke dass jemand auf Antwort wartet :-)
                  23.11.2021, 20:12
                • koseb
                  PayPal-Button ignoriert CSS befehle
                  Hallo leute,

                  ich hoffe mir kann hier jemand weiterhelfen :-)
                  folgende Situation.

                  Ich habe eine WordPress Seite mit Woocommerce und PayPal Anbindung.


                  Auf der Produktseite erscheint der PayPal checkout Button so wie ich es wollte. Soweit so gut. Nur...
                  You do not have permission to view this gallery.
                  This gallery has 2 photos.
                  19.11.2021, 12:32
                • Megabyte
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  koseb - Ergänzung:

                  Öffne mal mit F12 die Entwickler-Tools (bei deiner Problemseite). Wie beschrieben findest du dort die folgende Zeilen:

                  .paypal-button {
                  border: 1px solid transparent;
                  border-radius: 0 3px 3px 0;
                  position: relative;
                  width: 100%;...
                  23.11.2021, 20:08
                • Megabyte
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  koseb

                  Das Problem (oder Segen, je nach dem...) mit CSS ist, dass es theoretisch überall eingebunden werden kann. Fast immer werden die CSS-Direktiven aber als externe Datei gespeichert und innerhalb des <head> mittels <link rel="stylesheet" href="Pfad_zur_Datei.css">...
                  23.11.2021, 19:49
                • koseb
                  Antwort auf PayPal-Button ignoriert CSS befehle
                  Hi Megabyte,


                  vielen Dank für Deine Hilfe, so wie du es beschrieben hast, sollte es doch funktionieren.
                  Kann deine Schritte auch alle nachvollziehen, nur hängt es bei mir bei dem wohl einfachsten Schritt.
                  Woher weiß ich, wo das Script gespeichert ist bzw. welches ich...
                  23.11.2021, 15:54
                Lädt...
                X