Grafikbutton statt CSS für "In den Warenkorb"

[urlaubsreif]

Hallo,

ich würde ganz gerne anstelle des CSS Buttons für "In den Warenkorb" einen Grafikbutton einbauen, ohne eine neue Klasse definieren zu müssen und dann in die php eingreifen zu müssen. Sonst wär's ja einfach 😉

Ich habe nun in meiner custom "theme.css" die folgende Anweisung eingebaut:

#article_buyfield .submit,

input[type="submit"],
button[type="submit"],
button[type="image"]
{
background: transparent url('images/buttonbuynow.png') no-repeat center;
color: transparent;
border:none;
}


So weit, so gut, so schick ..

Button ist da, wo er hingehört.


Aaaaaber ...


Leider taucht der Button jetzt im gesamten "fieldset" auf, sprich, auch als submit Button in den Tabs für "Empfehlungen" und "Frage zum Produkt"


Hat jemand vielleicht einen Hinweis, ob überhaupt, und wenn ja, wie das Problem zu lösen wäre?


Daaaanke!

 

[ag-websolutions.de]

AW: Grafikbutton statt CSS für "In den Warenkorb"

versuchs mal mit

#article_buyfield .choose_quantity .submit,
button[type="submit"]
{
background: transparent url('images/buttonbuynow.png') no-repeat center;
color: transparent;
border:none;
}

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Hach,
die ag-websolutions gefällt mir immer besser 🙂

Herzlichen Dank für die rasante Hilfe, wir nähern uns vielleicht einer Lösung ..
Schnipsel funktioniert für die Tabs allerbestens.

Musste allerdings erweitern, sonst ersetzt der Button auch die icons für Vergleichsliste und Wunschzettel:

#article_buyfield .choose_quantity .submit,
input[type="submit"],
button[type="submit"]
button[type="image"]
{
background: transparent url('images/button_buy_now.png') no-repeat center;
color: transparent;
border:none;
min-height: 30px; !important;
}

Nur taucht der Button jetzt - grob überprüft - bei der Versandkostenkalkulation auf, der Versandkostenübersicht und bei den "Kundentags"

😕 Und nun?

Zum angucken geht's hier lang ..
http://testshop.jtl-shop.de/cbeyer/Startseite

Btw .. ich habe gestern auf Eurer Seite das schicke Paypal Modul gesehen. Ist das nun inkludiert in Shop 3, oder habe ich das nur für Testzwecke gleich mit freigeschaltet bekommen? Das ist ja geradezu ein "must have"!

🙂

Lieben Gruß

 

[trendgo]

AW: Grafikbutton statt CSS für "In den Warenkorb"

wollte das gleich gestern im "warenkorb" machen bin verzweifelt und habe nun wieder css 😡

 

[ag-websolutions.de]

AW: Grafikbutton statt CSS für "In den Warenkorb"

was hast du gegen css?

Mein obiges code-Beispiel IST css

 

[trendgo]

AW: Grafikbutton statt CSS für "In den Warenkorb"

mage ne grafik, kann man mehr mit machen, natürlich gern in einer css datei eingebunden, damit wie mein vorredner nicht alles neu erstellt werden muß per ID

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Die Lösung von ag web solutions funzt auch net wirklich ..
es werden nunmehr sitewide alle grauen submit buttons überschrieben mit dem warenkorb button

 

[ag-websolutions.de]

AW: Grafikbutton statt CSS für "In den Warenkorb"

die lösng war auch nicht getestet...sonst hätte ich nicht geschrieben

versuchs mal mit ...

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Das war auch kein Vorwurf ..
nur eine Feststellung 😉
ich habe ja schon geahnt, das würde 'ne größere Nummer

Wenn mich nicht alles täuscht, dann sind die grauen Buttons jene, die von den Javascripten generiert werden, oder? Und die greifen dann halt auf die css Definition .submit zurück.

 

[urlaubsreif]

Gelöst: Grafikbutton statt CSS für "In den Warenkorb"

Da muss man aber wirklich erstmal drauf kommen ..

dass der Warenkorb-Button schlichtweg 'nen bescheuerten Namen hat, weil er "choose_quantity button" heißt.

Folgenden Code in die theme.css einfügen:

#article fieldset.article_buyfield .choose_quantity button[type="submit"] {
vertical-align: middle;
background: transparent url('images/button_buy_now.png') no-repeat center;
color: transparent;
border:none;
min-height: 30px; !important;
}

und schon funzt es.

-----------------

Wer aus der Listenansicht noch die schrecklichen Graumauswarenkorbbuttons entfernen, und durch hübsche bunte ersetzen möchte, füge folgendes ein:

#styled_view li.list .article_buy input[type="submit"] {
vertical-align: middle;
background: transparent url('images/button_buy_now.png') no-repeat center;
color: transparent;
border:none;
min-height: 30px; !important;
min-width: 130px; !important;
}

Die Werte für min-height und min-width leiten sich ab aus der Größe des Grafik-Buttons

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Und weil der IE 😡 mal wieder zickt und die Grafikbuttons munter überschreibt, bekommt er seine Extrawurst:

Vor der abschließenden Klammer jeweils einsetzen

/*IE Hack*/

overflow: hidden;
text-indent: -999px;
font-size: 0;
line-height: 0;

Das sollte funktionieren. Getestet mit dem IE 8.

 

[trendgo]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Hast Du den Code, auch für den "Kassen"-Button

file:///C:/Users/PC/AppData/Local/Temp/moz-screenshot-50.png
file:///C:/Users/PC/AppData/Local/Temp/moz-screenshot-51.png

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Im Augenblick nicht 😉

Aber versuche doch mal, den Warenkorb CSS Code analog anzuwenden auf:

#basket_checkout a.submit {
padding: 0.45em !important;


}

page.css, Zeile 983
müsstest Du dann entsprechend in Deine theme.css eintragen

P.S. kleine Korrektur noch
da, wo in meinem Code !important steht, sollte natürlich vorher kein Semikolonabschluss sein. Also Semikolon löschen.

 

[trendgo]

AW: Grafikbutton statt CSS für "In den Warenkorb"

ne passiert gar nichts, vielleicht war ich aber auch einfach zu do.... es anzuwenden

 

[urlaubsreif]

AW: Grafikbutton statt CSS für "In den Warenkorb"

Vielleicht verstehen wir auch einfach was anderes unter "Kassenbutton"

Meinst Du den im Aufklappfeld unter dem Warenkorb oben?

Dann müsstest Du an

#headlinks table.articles tbody tr.bottom button + button {
margin-left: 4px;


}

schrauben.
page.css, Zeile 506

Und mache Dich unbedingt mit FireBug vertraut. Der erzählt Dir nämlich haarklein, welche Definition angesprochen wird. Dazu musst Du nur mit der Maus auf das Element gehen, schon lässt sich das ablesen 😉