Warenkorb Icon umfärben
#1
Hallo,
ich habe ein problem das icon des Warenkorbs oben rechts farblich zu ändern. ich finde die klasse dieses kleinen dreiecks im gelb markierten Bereich nicht heraus. die anderen elemente des Icons habe ich schon geändert, aber bei dem Dreieck habe ich Probleme und bin ziemlich ratlos.
Wäre froh wenn ihr mich helfen könntet :)
...wie ist denn die URL der Webseite?
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
#4
Mich würde jetzt wieder interessieren wie man das kleine graue Dreieck am Warenkorb umfärbt. Ich würde es gerne transparent haben. Aber komme nicht an die "Daten / Namen" dieses Elements. Ein kleiner Screenshoot damit ihr wisst, was ich meine.
Die Adresse der Seite ist http://testphase1000.jimdo.com/
Das ist mal wieder eine sehr, sehr interessante Frage!
...zuerst die niederschmetternde Nachricht: was Du vorhast, geht nicht!
Du kannst versuchen, den Code zu ändern:
2
3
4
5
6
7
8
9
10
11
.j-cart--hover-popup::after, .j-cart--hover-popup:after {
position: absolute;
right: 10px;
top: -30px;
display: block;
width: 0;
height: 10px;
border: 10px solid transparent;
border-bottom-color: red;
}
...das wird das Pfeilchen aber nur erröten lassen:
Du kannst aber mit "FontAwesome" arbeiten:
Dazu musst Du nur FontAwesome bei Dir einbinden:
2
3
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"
type="text/css" />
...und dann den Code entsprechend ändern, z.B.:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.j-cart--hover-popup::after, .j-cart--hover-popup:after {
position: absolute;
right: 10px;
top: -30px;
display: block;
width: 0;
height: 10px;
border: 10px solid transparent;
border-bottom-color: red;
border-bottom-color: red;
content: "\f122";
font-family: FontAwesome;
}
...jetzt musst Du nur das richtige Symbol heraussuchen aus der Liste: https://astronautweb.co/snippet/font-awesome/
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
#6
danke dir. habe es schließlich mit deiner Hilfe doch noch hinbekommen das Dreiceck transparent zu machen. Ich habe die Zeile
border-bottom-color: red;
in
"border-bottom-color: transparent;
geändert. Hier ein Screenshot, bei welchem ich die Hintergrundfarbe geändert habe, damit man wirklich sieht das es transparent ist.
Vielen Dank dir :)
...schon klar, dann ist es weg. Ich dachte, Du wolltest es als transparentes Icon behalten: 
Wenn es einfach nicht da sein soll wäre es aber sauberer, Du würdest es einfach auf "display: none;" setzen.
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
test
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
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
