Checkout-Botton bearbeiten

28.07.2016 03:56
#1
ch

Guten Abend,

Ich versuche den Ausblendungseffekt der Schrift im "Checkout-Button" zu entfernen. Die Schrift soll also auch nach anklicken des Buttons sichtbar bleiben. Jedoch ohne Erfolg. Hat jemand vielleicht eine Idee für mich?

Im Anhang ist ein Bild, welches den "Checkout-Button" im gedrückten Zustand zeigt. (den Loadingspinner habe ich schon ausgeschaltet)


 Antworten

 Beitrag melden
28.07.2016 15:47
avatar  az_
#2
avatar
az_

Hallo @christian10,

versuch mal dieses Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
/* shop-addtocard-response
-----------------------------------------------*/
.cc-shop-addtocard-response,
.j-shop-addtocard-response,
.j-shop-addtocard-response--message,
.j-shop-addtocard-response--item-details,
.j-shop-addtocard-response--item-title,
.j-shop-addtocard-response--item--variant,
.j-shop-addtocard-response--item-price,
.j-shop-addtocard-response--action,
.j-shop-addtocard-response--backward,
.j-shop-addtocard-response--forward {
background-color: #fff !important;
}
 
.j-shop-addtocard-response--message p { text-align: left; }
 
.j-shop-addtocard-response--action,
.j-shop-addtocard-response--backward,
.j-shop-addtocard-response--forward {
background: #fff; border: 1px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;
border:1px solid #999;
}
 

/*Schaltflächen forward/backward
---------------------------------------------*/
.j-shop-addtocard-response--forward:link:hover, .j-shop-addtocard-response--forward:visited:hover {
color: #fff!important;
background-color: #C2441F !important;
border-color: #999 !important;
}
 
.j-shop-addtocard-response--backward:link:hover, .j-shop-addtocard-response--backward:visited:hover {
color: #333!important; border-color: #999 !important;
}
 
/*
body .j-shop-addtocard-response .j-shop-addtocard-response--backward:link:hover, body .j-shop-addtocard-response .j-shop-addtocard-response--backward:visited:hover, body .j-shop-addtocard-response .j-shop-addtocard-response--backward:link:active, body .j-shop-addtocard-response .j-shop-addtocard-response--backward:visited:active, body .j-shop-addtocard-response .j-shop-addtocard-response--backward:link:focus, body .j-shop-addtocard-response .j-shop-addtocard-response--backward:visited:focus,
 
body .j-shop-addtocard-response .j-shop-addtocard-response--forward:link:hover, body .j-shop-addtocard-response .j-shop-addtocard-response--forward:visited:hover, body .j-shop-addtocard-response .j-shop-addtocard-response--forward:link:active, body .j-shop-addtocard-response .j-shop-addtocard-response--forward:visited:active, body .j-shop-addtocard-response .j-shop-addtocard-response--forward:link:focus, body .j-shop-addtocard-response .j-shop-addtocard-response--forward:visited:focus {
background-color: #C2441F;
border-color: #999;
}
*/
 
 




...die Farben kannst Du dann ja selbst anpassen. Hoffe, das hilft Dir!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
28.07.2016 18:03
#3
ch

Nicht wirklich, oder ich verstehe es nur nicht.

@az_
Ich habe dein Skript ausprobiert und bin nicht zu dem gewünschten Ergebnis gekommen. Ich möchte ja, dass der Text, welcher im Button steht, nicht ausblendet wenn man auf den Button klickt.


Hat es vielleicht was mit diesem hier zu tun?

span.j-shop-addtocard-response--forward-button-text

... aber mehr finde ich nicht heraus. Ich habe sachen wie visibility: none und color: #000 ausprobiert ... ist das ein hover effekt der die schrift ausblenden lässt?


 Antworten

 Beitrag melden
29.07.2016 23:49
avatar  az_
#4
avatar
az_

keine Anhnung... ich glaub es ist ein JS-onclick event. Musste mal forschen, wär mir aber nicht wichtig. Ich würde den button einfach grau machen (grey) und fertig.

LG, az

PS: ...tolle Arbeit übrigens, Deine Seite!


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
05.08.2016 21:09
#5
ch

.j-shop-addtocard-response--forward.is-loading .j-shop-addtocard-response--forward-button-text {
opacity: 1 !important;
}

... mehr war es anscheinend nicht :)


 Antworten

 Beitrag melden
05.08.2016 22:17 (zuletzt bearbeitet: 05.08.2016 22:18)
avatar  az_
#6
avatar
az_

...ah super!

ich schau es mir gleich an (auf http://www.yunkbox.com/)

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!