.top-bar {
background-color: #008ebd;
}
Begleitmaterial zum Webinar "Das Einmaleins des Shop-Designs"
In Das Einmaleins des Shop-Designs - mit eigenem CSS zum individuellen Webshop haben wir dir gezeigt, wie man mit dem Plugin CustomCSS und einigen einfachen Handgriffen weitreichende Änderungen am Design des Ceres-Webshops erzielen kann. Da man im Eifer des Gefechts nicht immer durch ein fast einstündiges Video klicken muss, findest du hier alle Anpassungen, die wir dir im Webinar eingebaut haben.
Das notwendige kostenlose Plugin findest du hier . Wie man das Plugin dem System hinzufügt, erfährst du auf unserer Handbuchseite zu Plugins.
1. CSS-Anpassungen
1.1. Hindergrundfarbe der Top-Bar ändern
Mit dem folgenden CSS-Snippet lässt sich die Hintergrundfarbe des Header-Widgets Top-Bar ändern. Gib hierfür einen eigenen Hex-Wert für die Hintergrundfarbe an.
1.2. Schriftart des Titelleisten-Widgets ändern
Das folgende CSS-Snippet ändert die Schriftart des ShopBuilder-Widgets Titelleiste.
.widget-title-bar {
font-family: Comic Sans MS, Helvetica, Arial, sans-serif;
}
1.3. Schriftgröße im Titelleisten-Widgets ändern
Mit dem folgenden CSS-Snippet kannst du die Schriftgröße des Texts im Widget Titelleiste ändern. Gib dazu die Schriftgröße in px an.
.widget-title-bar h1 {
font-size: 50px;
}
1.4. Hintergrundbild ändern
Das folgende CSS-Snippet zeigt ein Hintergrundbild in deinem plentyShop an, das du über eine URL einbindest.
.wrapper-main {
background-image: url();
}
1.5. Transparenten Layer über Hintergrundbild legen
Mit dem folgenden CSS-Snippet kannst du einen transparenten Layer über dein Hintergrundbild legen.
.main .container-max {
background-color: rgba(255,255,255,0.8);
}
1.6. Parallax-Effekt von Kategoriebildern entfernen
Das folgende CSS-Snippet entfernt den Parallax-Effekt des Kategoriebilds.
.parallax-img-container-inner {
background-attachment: scroll !important;
}
1.7. Textfarbe der Artikelnamen in Artikellisten ändern
Mit dem folgenden CSS-Snippet änderst du die Farbe von Artikelnamen in Artikellisten. Gib dazu einen Hex-Wert für die Farbe des Texts an. Das Snippet beinhaltet auch die Schriftgröße.
.thumb-title {
color: #008ebd !important;
font-size: 18px;
text-shadow: 1px 1px 1px lightblue;
}
1.8. Rahmen für Artikel in Artikellisten
Das folgende CSS-Snippet zeigt einen Rahmen um Artikel in Artikellisten an.
.cmp-product-thumb {
border: 1px solid lightgray;
border-radius: 5px;
}
1.9. Abstände der Artikellisten ändern
Mit diesem CSS-Snippet kannst du die Abstände zwischen Artikellisten anpassen.
.product-list li {
padding-left: 5px;
padding-right: 5px;
}
1.10. Zum Warenkorb hinzufügen-Symbol entfernen
Wenn du das Zum Warenkorb hinzufügen-Symbol auf Artikelkacheln entfernen willst, kannst du dafür das folgende CSS-Snippet verwenden.
.add-to-basket-lg-container {
display: none;
}
1.11. Streichpreis einfärben
Dieses CSS-Snippet bestimmt die Farbe des Streichpreises.
.crossprice {
color: red !important;
}
1.12. Den Hover-Effekt der Artikelliste auf der Artikelansicht hinzufügen
Wenn du den Hover-Effekt, also die Hervorhebung des Bilds wenn du mit der Maus darüber schwebst, auch auf der Artikeleinzelansicht einbinden willst, kannst du dafür folgendes CSS-Snippet verwenden.
.owl-lazy {
transition: transform 0.4s;
}
.owl-lazy:hover {
transform: scale(1.05);
}