"Design anpassen" ist zu unauffällig

@lovetee

Vielen Dank für den Code… läuft super… ausser bei Tank Tops… ist das nur bei mir so?

Ist bei mir auch so… :thinking:

Danke für die Erklärung für Blondinen :wink: Ich hab es sogar hinbekommen und du weißt, dass das was heißt :grimacing: :stuck_out_tongue_winking_eye:

oh bei dir funktionieren die Tank Tops jetzt?

Nein, leider nicht

das wird meiner Meinung nach auch nicht wirklich funktionieren… die Fotos plus Edit Button unter dem Produkt sind bei den Shirts und Hoodies 5 an der Anzahl. Bei Produkten wo es unter dem Hauptbild nur 3 Fotos plus Edit Button = Anzahl 4 gibt funktioniert es nicht. Ich glaube auch fast das dies mit CSS nicht lösbar sein wird… da die Child Elemente (Fotos und Edit Button) ja fix von Spreadshirt vergeben sind…

Bei Shirts wäre der Edit Button Child Element 5, beim Tank Top Child Element 4… ich denke darum wird lovetee das nicht eingebaut haben… und ich weiss jetzt schon das Spreadshirt das egal sein wird… da die Spreadshops sowieso sehr stiefmütterlich behandelt werden

EDIT: Vielleicht weiss aber Lovetee da eine Lösung…

Ich glaube so war es tatsächlich, müsste man noch einmal schauen ob es andere Selektoren gibt, die man dafür verwenden kann.

1 Like

Bin gespannt was da noch verwendet werden könnte…ich hab ein wenig geschaut bin aber kein CSS Profi

:nth-last-child(1) könnte vielleicht die Lösung sein. Habe es aber noch nicht umfassend getestet.

.SprdMain .sprd-detail-images__views > button:nth-last-child(1) {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1) svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1) span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1)::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1)::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1):hover {
box-shadow: none;
background-color: darkred
}
2 Likes

Cool…ich schau Mal am Abend…gilt das nur für Produkte mit 3 Produkt Bildern oder ?

@Berliner_Original

gute Idee… leider ist das Last Child Element bei den Produkten mit 5 Bildern das Element das runterscrollt zu den Product Views

Habs mir eben mal genauer angeschaut. Der Edit-Button hat doch eine eigene Klasse! Problem erledigt würde ich sagen ohne es getestet zu haben:

.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit:hover {
box-shadow: none;
background-color: darkred
}
3 Likes

Danke dir :pray:, schaut gut aus soweit.

1 Like

Super! Also bei mir funktionierts.
Sticker da, Button weg :+1: :slight_smile:

1 Like

Ich hab da mal ein Problem :smiley:
Wenn man den Edit - Button Shop auf dem PC betrachtet, sieht es super aus.
Steig ich allerdings mit dem Tablet ein-- so. 120566914_399815947694936_5122460739009954606_n
Sprich - Button verdeckt das Produkt.
Kann mir bitte wer verraten was ich falsch gemacht hab bzw. helfen wie ich diese Ansicht ändern kann? :grinning:

Da musst das CSS für mobil dementsprechend anpassen… es wird aber immer einen Teil des Designs überdecken

Mit CSS :+1: Und dann kannst du es platzieren wo Du möchtest.

Nö, weil ich absolut keine Ahnung habe wie das geht! :grimacing:

Das ist schlecht… CSS wirst brauchen wenn dir die Standardsachen nicht passen.

Meine Empfehlung ist das du dich anfängst mit CSS zu beschäftigen :slight_smile:

Stimmt, bloß halt jetzt nicht. Ist grad stressig.
Auf der To do List für nächstes Jahr :smiley: