Hi Lars,
.spreadplugin-article .edit-wrapper-integrated {display:none}
#spreadplugin-menu #checkout {display:none}
.spreadplugin-menu #articleSortBy {float:right}
.spreadplugin-menu.fixed {
position:relative;z-index:inherit
}
.spreadplugin-menu {
z-index:inherit
}
.spreadplugin-article-detail .spreadplugin-color-item {
border-radius:50%
}
/* detailseite linke views */
.spreadplugin-article-detail .views-wrapper {
padding-bottom: 10px;
padding-top: 10px;
display: table;
width: 100%;
}
.spreadplugin-article-detail .views-wrapper {
float: left;
margin-top: 60px;
width: 60px;
position: absolute;
}
.spreadplugin-article-detail .views-wrapper .views {
display: table;
margin: 0 auto;
}
.spreadplugin-article-detail ul {
list-style-image: none !important;
list-style-position: inside !important;
list-style-type: disc !important;
}
.spreadplugin-article-detail .image-wrapper {
float: right;
width: 85%;
}
.spreadplugin-article-detail .product-name {
display:none}
.spreadplugin-article-detail .edit-wrapper-integrated::before {
content: "Hier kannst Du Farbe & Größe des Motivs ändern oder eigenen Text oder ein eigenes Bild hinzufügen.";
color: rgba(255, 255, 255, 0);
text-align: left;
font-family: "Open sans";
font-size: 10px;
line-height: 12px;
position: absolute;
width: 0px;
height: 63px;
font-weight: bold;
padding-top: 6px;
padding-left: 43px;
left: 36px;
display: inline-block;
top: -1px;
opacity: 0;
white-space: pre;
background: rgb(245, 31, 111);
border-radius: 0px 6px 6px 0px;
overflow: hidden;
}
.spreadplugin-article-detail .edit-wrapper-integrated:after {
content: "";
position: absolute;
width: 1px;
height: 62px;
font-weight: bold;
left: 67px;
display: inline-block;
top: 0;
border-left: 1px solid #ffffff;
}
.spreadplugin-article-detail .edit-wrapper-integrated i:before {
font-size: 21px;
top: -14px !important;
position: relative;
z-index: 1;
}
.spreadplugin-article-detail .edit-wrapper-integrated i:after {
content: "Motiv bearbeiten";
text-align: center;
font-family: Open sans;
font-size: 10px;
position: absolute;
width: 100%;
left: 0;
display: inline-block;
line-height: 11px;
top: 26px;
z-index: 1;
}
.spreadplugin-article-detail .edit-wrapper-integrated {
position: absolute;
/*margin-top: 85px;*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
padding: 12px 21px !important;
border: 1px solid #f0f0f2 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
color: #f51f6f;
height:63px
}
.spreadplugin-article-detail .edit-wrapper-integrated:hover {
background: #f51f6f;
border: 1px solid #f51f6f !important;
color: #ffffff !important;
}
.spreadplugin-article-detail .edit-wrapper-integrated:hover:before {
opacity: 1;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
width: 185px;
color: rgba(255,255,255,1);
white-space: normal;
}
.spreadplugin-article-detail .views li {
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-o-border-radius: 40px;
-ms-border-radius: 40px;
border-radius: 40px;
overflow: hidden;
width: 65px;
height: 65px;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #eeeeee;
}
Schon einmal ein Anfang 😉
Den Warenkorb habe ich mittels Widget (Unter Widgets befindet sich das Spreadplugin Widget) in den Content eingebunden und dann mit CSS dort positioniert.
Gruß
Thimo
Kannst du uns auch den Code von deiner Warenkorb Anpassung geben? 🙂 So wie es bei dir ist ( das es seitlich rüberswiped usw)
So sollte es passen:
a.spreadplugin-checkout-link.button:before {
border: 0;
}
a.spreadplugin-checkout-link.button {
padding: 0;
}
.spreadplugin-checkout-link.button::after {
font-size: 2em;
}
.spreadplugin-checkout.widget span {
border-radius: 22px;
color: #ffffff;
display: block;
font-size: 12px;
font-weight: 700;
height: 18px;
line-height: 18px;
padding: 0;
position: absolute;
right: -10px;
text-align: center;
top: 32px;
width: 18px;
background-color: #C41E3A;
z-index: 1;
}
Danke für den code! Hab das eben mal getestet und außer dass mein Warenkorb nun weiß ist und die Anzahl in rosa und im Kreis ist, ändert sich nicht wirklich viel. Kein seitliches Aufploppen sondern immernoch wie vorher. Und auch nicht über die volle Länge
Dann mal so 😉
a.spreadplugin-checkout-link.button:before {
border: 0 !important;
}
a.spreadplugin-checkout-link.button {
padding: 0 !important;
}
.spreadplugin-checkout-link.button::after {
font-size: 2em !important;
}
.spreadplugin-checkout.widget span {
border-radius: 22px !important;
color: #ffffff !important;
display: block !important;
font-size: 12px !important;
font-weight: 700 !important;
height: 18px !important;
line-height: 18p !important;
padding: 0 !important;
position: absolute !important;
right: -10px !important;
text-align: center !important;
top: 32px !important;
width: 18px !important;
background-color: #C41E3A !important;
z-index: 1 !important;
}
😉
Vielen Dank nochmal für deine Mühe. Ich meinte jedoch gänzlich das komplette Warenkorb Widget Menü (also als Sidebar usw). Ich habe mir mal bei deiner Seite die CSS Codes durchgeschaut und der Code ab /* ########## WARENKORB WIDGET ########## */ funktionierte tatsächlich so halbwegs auch bei mir und genau mit dem Effekt den ich haben wollte 😀 Nun habe ich aber noch ein paar offene Fragen.
1. Da ich mit Elementor arbeite und meine Spreadplugin Basket Widget Spalte nicht als eine eigene ganze Zeile darstellen möchte sondern diese bei mir höchstens eine Breite von 20-30% hat, verzerrt sich logischerweise vorallem responsiv der Warenkorb, indem er eben nur diese 20-30% an Breite hat. Kann man das austricksen, dass ich trotz kleiner Spaltenbreite den vollen Warenkorb zu Gesicht bekomme? Mit welchen Befehlen kann ich da versuchen zu arbeiten? Ist das nur eine Sache von Margins und Paddings usw?^^
2. Welche CSS Befehle benötige ich, dass mein Warenkorb in responsiver Darstellung beim Öffnen meine restliche Seite nicht mehr anzeigt, also sozusagen den ganzen Bildschirm auch in der Höhe einnimmt und es auch keine Möglichkeit gibt, die restliche Seite mit herunterscrollen zu sehen, solange ich den Warenkorb nicht schließe? Dies hat nämlich auch nicht so ganz funktioniert, wies bei dir der Fall ist.
Alles andere denke ich hab ich soweit 😀 Danke nochmal!
1. Da ich mit Elementor arbeite und meine Spreadplugin Basket Widget Spalte nicht als eine eigene ganze Zeile darstellen möchte sondern diese bei mir höchstens eine Breite von 20-30% hat, verzerrt sich logischerweise vorallem responsiv der Warenkorb, indem er eben nur diese 20-30% an Breite hat. Kann man das austricksen, dass ich trotz kleiner Spaltenbreite den vollen Warenkorb zu Gesicht bekomme? Mit welchen Befehlen kann ich da versuchen zu arbeiten? Ist das nur eine Sache von Margins und Paddings usw?^^
Entweder das oder die Breite des Warenkorbs generell, aber genau kann ich das erst sagen, wenn ich mir das angesehen habe. Leider ist die letzte Änderung nicht auf deiner oben genannten Seite, daher kann ich dir da gerade nicht weiterhelfen 🙂
2. Welche CSS Befehle benötige ich, dass mein Warenkorb in responsiver Darstellung beim Öffnen meine restliche Seite nicht mehr anzeigt, also sozusagen den ganzen Bildschirm auch in der Höhe einnimmt und es auch keine Möglichkeit gibt, die restliche Seite mit herunterscrollen zu sehen, solange ich den Warenkorb nicht schließe? Dies hat nämlich auch nicht so ganz funktioniert, wies bei dir der Fall ist.
Eigentlich so:
@media (max-width: 768px) {
.spreadplugin-cart-contents {
width: 100%;
}
}
