Zahlung per Überweisung Text position ändern

[remus78]

Moin Forum

 

bei der Bestellung im schritt 3 wird gefragt ob via Überweisung oder Paypal bezahlt werden soll

wo kann ich die position des textes ändern, ich möchte das der text mehr nach rechts geht weil mein Logo breiter ist als das original

 

in der global.css Zeile 7822 steht die position des Logos aber vom text habe ich nichts gefunden:

 

p.payment_module {

  margin-bottom: 10px; }

  p.payment_module a {

    display: block;

    border: 1px solid #d6d4d4;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    font-size: 17px;

    line-height: 23px;

    color: #333;

    font-weight: bold;

    padding: 33px 40px 34px 99px;

    letter-spacing: -1px;

    position: relative; }

    p.payment_module a.bankwire {

      background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb; }

    p.payment_module a.cheque {

      background: url(../img/cheque.png) 15px 15px no-repeat #fbfbfb; }

    p.payment_module a.cash {

      background: url(../img/cash.png) 15px 15px no-repeat #fbfbfb; }

    p.payment_module a.cheque:after, p.payment_module a.bankwire:after, p.payment_module a.cash:after {

      display: block;

      content: "\f054";

      position: absolute;

      right: 150px;

      margin-top: -11px;

      top: 50%;

      font-family: "FontAwesome";

      font-size: 25px;

      height: 22px;

      width: 14px;

      color: #777; }

    p.payment_module a:hover {

      background-color: #f6f6f6; }

    p.payment_module a span {

      font-weight: bold;

      color: #777; }

 

 

Danke

[Shad86]

Naja man kann nur vermuten solange dies nicht schon jemand gemacht hat.

Kannst du uns keinen Link geben, am besten von irgendeinem Produkt das man gerade in den Warenkorb schmeissen kann?

 

Ansonsten kannst du selber per Rechtsklick auf den Text, "Element Untersuchen" oder ähnliches (je nach Browser) anklicken. Dann zeigt er dir ja auch welche CSS Befehle darauf zugreifen. Da kannst du dann fröhlich rum probieren bis du den Text da hast wo du ihn haben willst. Und wenn du das passende Ergebniss hast, machst du die Änderungen noch in der angegebenen Datei und Zeile, lädst es neu per FTP hoch und schon hast du es.

 

Du kannst halt dem Text ein margin-left geben damit er von links einen Abstand bekommt oder du gibst dem Bild ein padding-right damit alles vom Bild aus abstand hält.

[Scully]

Die einfachste Lösung ist, dass man die Logos in Höhe und Breite identisch anlegt und die entsprechenden Originale überschreibt.

Sinnvollerweise macht man zuvor von den Logos eine Kopie für den Fall der Fälle.

 

Bankwire liegt z.B. meist in diesem Pfad

/themes/default-bootstrap/img/bankwire.png

Bei unterschiedlicheen Breiten oder Höhen hat man sonst immer Probleme weil die Darstellung der Payment Module bzw. der einzelnen Zeilen mit den Grafiken keine Tabelle ist.

[rictools]

bei der Bestellung im schritt 3 wird gefragt ob via Überweisung oder Paypal bezahlt werden soll

wo kann ich die position des textes ändern, ich möchte das der text mehr nach rechts geht weil mein Logo breiter ist als das original

Ich kann nicht ganz folgen, es steht da eine Frage in der Art "Möchten Sie per Überweisung oder per PayPal bezahlen?"? Ich kenne nur eine Auflistung der zur Verfügung gestellten Zahlungsmethoden, die sich aber weit unterhalb des Shop-Logos befindet (oder was meinst du mit "mein Logo"?). Was für ein Template verwendest du?

 

Zumindest einen Screenshot solltest du uns geben.

[Scully]

Tja, ohne dass man den Shop sehen kann, können wir nur rätseln.

 

Aber: mit Übersetzungen oder festen Textbausteinen im Theme kann man ja alles überschreiben.

Normal ist es aber, dass die Zahlungsart im letzten Bestellschritt angezeigt wird.

 

PayPal ist insofern eine Ausnahme, als dass hier bei Aktivieren des "Express-Checkout" eine fast schon penetrante Art des Hervorhebens auf fast jeder Seite implementiert ist. Das kann man ja aber dort abschalten.

[remus78]

also der shop wäre hier: http://3dkennzeichenhalter.ch/index.php

das theme ist das standard von Prestashop default-bootstrap

 

paypal habe ich natürlich nach installiert

[Shad86]

Also das Icon der Banküberweisung hat 64 x 64px falls du deins im selben Format anlegen möchtest.

Paypal wird bei mir mit einem Fragezeichen angezeigt, er kann das Bild also nicht finden.

 

Und wenn du es mit CSS lösen möchtest fügst du in deine global.css folgendes ein:

 

p.payment_module img {
  padding-right: 32px;
}

 

aber guck mal vorher in der Datei ob es das "p.payment_module img" nicht schon gibt, dann kannst du das padding da mit rein packen. Und den Wert musst du natürlich testen, wenn der Shop dein Logo wieder findet.

[remus78]

der pfad zum paypal logo von haus aus war falsch

Ich dachte wenn ich das Überweisen Logo ersetze wird die schrift nach rechts verschoben, leider kommt die schrift dann über das Logo

[Shad86]

Das liegt daran das dort das Bild als Hintergrundbild des ganzen Kastens festgelegt ist und nicht wie bei Paypal als Bild daneben.

 

In dem fall änderst du in der global.css in Zeile 7837:

p.payment_module a.bankwire {
    background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb;
        background-color: rgb(251, 251, 251);
    padding-left: 185px;
}

Das padding-left sollte die Schrift nach rechts schieben.

[Claudiocool]

ich hab da auch ewig gebraucht, bis es überall gepasst hat....

 

Zuerst mal müssen alle Logos das identische Format haben, sonst ist es schon von Anfang an zum Scheitern verurteilt....

 

Dann gehts in die CSS und da kann man ziemlich viel rumprobieren, bis das dann passt, vor allem, wenn man mehrere Endgeräte nutzt, z.B. im Handy Quer- und Hochformat, da kommt Freude auf. :-)

[remus78]

Das liegt daran das dort das Bild als Hintergrundbild des ganzen Kastens festgelegt ist und nicht wie bei Paypal als Bild daneben.

 

In dem fall änderst du in der global.css in Zeile 7837:

p.payment_module a.bankwire {
    background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb;
        background-color: rgb(251, 251, 251);
    padding-left: 185px;
}

Das padding-left sollte die Schrift nach rechts schieben.

 

Vielen Dank das funktioniert