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>

    Virenbereinigung < Server Umzüge, Virenbereinigung

    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.975   Beiträge: 431.488   Mitglieder: 29.055   Aktive Mitglieder: 135
                Willkommen an unser neuestes Mitglied, agrohimprz.

                Online-Benutzer

                Einklappen

                181 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 181.

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

                Die neuesten Themen

                Einklappen

                • Gnosius
                  Mobile und Desktop-Version kombinieren
                  Hallo,

                  mittlerweile habe ich eine kleine Homepage erstellt (mit MS Expression web 4), die nur einige Buttons mit Links zur Weiterleitung enthält.
                  da das Hintergrundbild teils gekachelt wurde, habe ich 2 Versionen erstellt, die unter verschiedenen URLs aufgerufen werden und einmal...
                  17.01.2022, 12:52
                • mawi1512
                  generelle Statisik über Auswahlmenu erstellen
                  Hallo zusammen!
                  Ich würde gerne eine vorgegebene Statistik über eine Mehrfachauswahlmenu anbieten.
                  Was ausgewählt wurde, soll öffentlich als Summe ausgewertet und angezeigt werden.
                  Die Auswertung soll geischert in einer Datenbank oder über eine andere Möglichkeit gesichert werden....
                  17.01.2022, 11:28
                • Comedix
                  Gesucht: Newsletter Script
                  Hallo,

                  das Newsletterscript, das ich auf meiner Homepage verwende, ist in die Jahre gekommen. Ich muss/möchte den Webspace auf PHP 8.0 umstellen und deshalb werde ich mich von meinem alten PHP-Script verabschieden. Verwendet oder kennt jemand eine Newsletter-Software, die er/sie empfehlen...
                  16.01.2022, 14:46
                • dafra1987
                  MediaWiki Editor ändern
                  Hallo,

                  ich habe auf meinem Webspace von Alfahosting eine Instanz von Mediawiki installiert. Allerdings ist der Editor, der da mit "ausgerollt" wurde sehr unglücklich. Ich möchte natürlich auch medial die Seiten aufbauen und in dem Editor gibt es keine Möglichkeit für einen...
                  13.01.2022, 22:58
                • ST747
                  Google indexierung
                  Hallo,
                  ich habe ein paar Unterseiten die nicht indexiert werden:.
                  Gefunden - zur Zeit nicht im Index.

                  Wenn ich dann die Fehleranalyse mache, kommt Property nicht im Konto.
                  Zugriff bestätigt,die Website befindet sich aber nicht auf ihrem Konto.
                  Die gehört aber zu...
                  11.01.2022, 17:49

                Die neuesten Beiträge

                Einklappen

                • Localfu
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Moin Sempervivum,
                  verwende doch bitte mal bitte:
                  Code:
                  @media (orientation: landscape) {
                  body {
                  background-image: url('images/bild3.jpg');
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-position: center;
                  }
                  }
                  
                  @media
                  ...
                  20.01.2022, 00:07
                • Gnosius
                  Mobile und Desktop-Version kombinieren
                  Hallo,

                  mittlerweile habe ich eine kleine Homepage erstellt (mit MS Expression web 4), die nur einige Buttons mit Links zur Weiterleitung enthält.
                  da das Hintergrundbild teils gekachelt wurde, habe ich 2 Versionen erstellt, die unter verschiedenen URLs aufgerufen werden und einmal...
                  17.01.2022, 12:52
                • Gnosius
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Ja, das war's. PC jetzt super, Smartphone hochkant auch. Smartphone (S20 ultra) quer: zeigt noch 1 cm von der nächsten Kachel an. Warum er da nicht auf 100% streckt weiß ich nicht. Vielleicht weil das Bild 1670 breit x 1880 hoch ist (unten abgeschintten ist ok). Das S20 hat 1440x3200 Pixel, läuft...
                  19.01.2022, 21:19
                • Sempervivum
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Bei dem
                  Code:
                  background-size: 100% 100%"
                  muss das Gänsefüßchen durch ein Semikolon ersetzt werden.
                  Und bei portrait fehlt die letzte schließende Klammer.
                  Mit diesem CSS sieht es bei mir ganz gut aus:
                  Code:
                          @media (orientation: landscape) {
                              body {
                  ...
                  19.01.2022, 19:49
                • Gnosius
                  Antwort auf Mobile und Desktop-Version kombinieren
                  So, habe ich erledigt:

                  <!DOCTYPE html>
                  <htmllang="de">
                  <head>
                  <metacharset="UTF-8">
                  <metahttp-equiv="X-UA-Compatible"content="IE=edge">
                  <metaname="viewport"content="width=device-width,...
                  19.01.2022, 18:44
                • Ingo
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Hi,
                  nach DOCTYPE und meta fehlt ein Leerzeichen.
                  Bei font-family mindestens eine gererische Angabe wie serif hinzufügen.
                  Statt .auto-style mit Nummern würde ich "sprechende" Namen wählen.

                  Gruß
                  Ingo
                  19.01.2022, 18:31
                • Sempervivum
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Das hätte ich dazu schreiben sollen: Was Du da unerwünschter Weise siehst, ist CSS und gehört in die <style> Tags, also aus dem <body> löschen und dort hinzu fügen:
                  Code:
                  /* alles was darüber steht wie bisher */
                  .auto-style8 {
                  font-family: "Belwe Bd BT";
                  ...
                  19.01.2022, 17:23
                • Gnosius
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Vielen Dank an alle, ich habe versucht, die Tipps mit meinen linken Händen umzusetzen.....

                  Der Text beginnt jetzt so...:

                  <!DOCTYPEhtml>
                  <htmllang="de">
                  <head>
                  <metacharset="UTF-8">
                  <metahttp-equiv="X-UA-Compatible"content="IE=edge">...
                  19.01.2022, 17:07
                • Sempervivum
                  Antwort auf Mobile und Desktop-Version kombinieren
                  Du kannst auch die Orientierung, Hoch- oder Querformat mit einer Mediaquery abfragen:
                  Code:
                  @media (orientation: landscape) {
                      body { background-image: url(images/bg-landscape.jpg); }
                  }
                  @media (orientation: portrait) {
                      body { background-image: url(images/portrait.jpg);
                  ...
                  18.01.2022, 22:14
                • Comedix
                  Gesucht: Newsletter Script
                  Hallo,

                  das Newsletterscript, das ich auf meiner Homepage verwende, ist in die Jahre gekommen. Ich muss/möchte den Webspace auf PHP 8.0 umstellen und deshalb werde ich mich von meinem alten PHP-Script verabschieden. Verwendet oder kennt jemand eine Newsletter-Software, die er/sie empfehlen...
                  16.01.2022, 14:46
                Lädt...
                X