Ankündigung

Einklappen
Keine Ankündigung bisher.

PayPal-Button ignoriert CSS befehle

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

  • Megabyte
    antwortet
    admin

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

    Einen Kommentar schreiben:


  • Megabyte
    antwortet
    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*

    Einen Kommentar schreiben:


  • Megabyte
    antwortet
    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.

    Einen Kommentar schreiben:


  • koseb
    antwortet
    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!

    Einen Kommentar schreiben:


  • Megabyte
    antwortet
    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 :-)

    Einen Kommentar schreiben:


  • koseb
    antwortet
    Ja Cache mehrfach geleert und auch nach 24 stunden keine veränderung

    Einen Kommentar schreiben:


  • arnego2
    antwortet
    Cache geleert hast du?

    Einen Kommentar schreiben:


  • koseb
    hat ein Thema erstellt PayPal-Button ignoriert CSS befehle.

    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.

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

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

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