Einkaufswagen
hallo @Amy
...schreib mal die URL Deiner Seite! Ich hab so was schon mal gemacht. Wäre nett, es hier noch einmal dokumentieren zu können :)
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
Hallo @Amy,
...danke für die URL! Versuch mal folgenden Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.j-cart-icon {
background:
url(http://cdn1.iconfinder.com/data/icons/androiddevicons/shopping.png)
rgba(55,255,255,.5)
no-repeat center left !important;
width: 100px;
height:100px;
border:2px solid #666;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-radius: 55px;
padding:0px;
}
.j-cart-icon::before, .j-cart-icon:before {content:""; /*"";*/}
.j-cart-item-amount{margin-left:20px; color:#666;}
.j-cart-item-amount {line-height:4.8; font-size:130%; font-weight:bold;}
</style>
...das sähe dann so aus:
...auf http://zurich-test.jimdo.com/shop/ habe ich es auch noch einmal ausgetestet - mit ein paar anderen Parametern:
Der Trick ist folgender:
Das Symbol des Warenkorbs ist bei den neuen Jimdo-Designs ein Satzzeichen einer Jimdo-Symbol-Schriftart.
Durch den Eintrag content:"" bei j-cart-icon:: before verhindere ich, dass das Zeichen geladen wird.
Die Anweisung:
2
3
4
5
6
.j-cart-icon {
background:
url(http://cdn1.iconfinder.com/data/icons/androiddevicons/shopping.png)
rgba(255,255,255,.5)
no-repeat center left !important;"
}
...weist dem Warenkorb dann ein anderes Symbol per CSS-Hintergrundgrafik zu.
Ein frohes Neues Jahr wünsche ich 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
Hallo @Amy,
...na klar, das geht auch! Schau Dir mal http://zurich-test.jimdo.com/shop an, da habe ich es anders gemacht. Die Hintergrundfarbe kannst Du beliebig anpassen. Und Du kannst auch eine beliebige Grafik für den Warenkorb nehmen.
...mein Beispiel oben sollte nur erklären, wie es geht. Das hier passt wahrscheinlich besser zu Deinem Design:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.j-cart-icon {
background:
url(http://cdn1.iconfinder.com/data/icons/androiddevicons/shopping.png)
#000 /*#000 = schwarzer BG*/
no-repeat center left !important;
width: 80px;
height: 50px;
border: 2px solid #666; /*#666 = grauer Rahmen*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:1px;
}
.j-cart-icon::before, .j-cart-icon:before {content:"";}
.j-cart-item-amount{margin-left:25px; color:#999; /*#999 = Schriftfarbe dunkles Grau*/}
.j-cart-item-amount {line-height:2.8; font-size:130%; font-weight:bold; /*Line-height anpassen bei anderem Wert für 'height' */}
</style>
...das sähe dann so aus:
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
Hallo @Amy,
...oder Du lässt den Einkaufswagen so, wie Jimdo ihn standardmäßig vorsieht, und änderst nur die Farben:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.j-cart-icon {
background:#fff;
width: 80px;
height: 55px;
border: 2px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:1px;
}
.j-cart-icon::before, .j-cart-icon:before {color: #000;}
.j-cart-item-amount{color:#000;}
.j-cart-item-amount {line-height:3.5; font-size:100%; font-weight:bold;}
</style>
...das sähe dann so aus:
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
...oder so:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.j-cart-icon {
background:#000;
width: 80px;
height: 55px;
/*border: 1px solid #000;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:0px;
}
.j-cart-icon::before, .j-cart-icon:before {color: #fff;}
.j-cart-item-amount{color:#fff;}
.j-cart-item-amount {line-height:3.5; font-size:100%; font-weight:bold;}
</style>
...für anders herum: 
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
...oder so:
2
3
4
5
6
7
8
9
10
11
<style>
.j-cart-icon {
background:rgba(255,255,255,.8);
width:60px;
height:40px;
}
.j-cart-icon::before, .j-cart-icon:before {color:#000;}
.j-cart-item-amount{color:#000;}
.j-cart-item-amount {line-height:2.5; font-size:100%; font-weight:bold;}
</style>
...auch nicht schlecht :)
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
...klar, das geht auch! Du musst nur Dein eigenes Symbol irgendwo im Internet hochladen, dann kannst Du es einfügen. zb kannst Du es hier als Datei anhängen oder auf Deiner eigenen Webseite irgendwo auf einer versteckten Seite.
Dann kannst Du mit der URL Deines Bildes in der CSS-Anweisung:
2
3
4
.j-cart-icon {
background:
url(...)
}
...dieses Bild als Hintergrund für das Warenkorb-icon festlegen.
LG, az
PS: ...dieser Warenkorb:
...liegt zB hier: https://files.homepagemodules.de/b644478/...n2_eBwFtmdn.png
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
...nö, das klappt. Vielleicht musst Du die Background-size noch anpassen - der Wagen ist zu groß für die Grafik bzw. den Platzhalter.
Versuch mal:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
/*<![CDATA[*/
.j-cart-icon {
background:
url(https://files.homepagemodules.de/b644478/f8t87p530n2_eBwFtmdn.png) transparent no-repeat center left !important;
background-size: 55% !important;
width: 80px;
height: 50px;
border: none; /* 2px solid #666; /*#666 = grauer Rahmen*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:1px;
}
.j-cart-icon::before, .j-cart-icon:before {content:"";}
.j-cart-item-amount{margin-left:25px; color:#000; /* Schriftfarbe */}
.j-cart-item-amount {line-height:2.8; font-size:130%; font-weight:bold; /*Line-height anpassen bei anderem Wert für 'height' */}
/*]]>*/
</style>
...der sollte so aussehen: 
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
Jetzt anmelden!
Jetzt registrieren!
