Hey Leute, mir ist aufgefallen, dass Shopware irgendwie seine eigenen Variablen hat und ich frage mich wieso. Aus meiner Erfahrung ist es viel viel besser wenn man hier konsequent mit den Bootstrap Variablen arbeitet, so ensteht aus meiner Sicht nur Verwirrung.
Es macht schon Sinn eigene Variablen für bestimmte Bereiche zu nutzen, aber diese sollen dann bitte von den Bootstrap Variablen vererben und nicht umgekehrt. Für mich als Theme Designer kann im Grunde von den Vorteilen die Bootstrap mir bietet garnicht profitieren.
Habe gerade mal versucht ein Inverses Theme zu bauen, also schwarzer Hintergrund und weiße Schriftfarbe… aber das Theme System lässt mir da wenig bis garkeinen Freiraum. Kann ich für mein Custom Theme auch die base.scss von Shopware aushebeln? Wo werden die Shopware Variablen definiert? Alternativ kann ich die Overrides ja selber schreiben.
In diesem Beispiel werden auch für manche Bootstrap Klassen einfach feste Farbwerte genutzt:
/*
Bootstrap variables
==================================================
Contains all overrides of bootstrap default variables.
https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults
*/
// Color system
$gray-100: #f8f8fa;
$gray-200: #f5f5f8;
$gray-300: #d1d9e0;
$gray-600: #576574;
$gray-800: #3f4c58;
$primary: $sw-color-brand-primary;
$secondary: $sw-color-brand-secondary;
$success: $sw-color-success;
$info: $sw-color-info;
$warning: $sw-color-warning;
$danger: $sw-color-danger;
$light: $gray-100;
$dark: $gray-800;
$headings-color: $sw-headline-color;
// Grid
$grid-gutter-width: 40px;
// Body
$body-bg: $sw-background-color;
$body-color: $sw-text-color;
// Components
$border-color: $sw-border-color;
$border-radius: 3px;
$border-radius-lg: 3px;
$border-radius-sm: 3px;
// Typography
$font-family-base: $sw-font-family-base;
$font-size-base: 0.875rem;
$font-size-lg: 1rem;
$font-size-sm: 0.75rem;
$font-weight-normal: 500;
$h1-font-size: 36px;
$h2-font-size: 28px;
$h3-font-size: 24px;
$h4-font-size: 20px;
$h5-font-size: 16px;
$h6-font-size: 14px;
$headings-font-weight: 700;
$headings-font-family: $sw-font-family-headline;
// Buttons + Forms
$input-btn-padding-y: 0.5625rem;
$input-btn-padding-x: 0.5625rem;
$input-placeholder-color: #b3bfcc;
// Buttons
$btn-padding-y: 2px;
$btn-padding-x: 12px;
$btn-line-height: 34px;
$btn-padding-y-sm: 2px;
$btn-padding-x-sm: 12px;
$btn-font-size-sm: 14px;
$btn-line-height-sm: 30px;
$btn-padding-y-lg: 2px;
$btn-padding-x-lg: 12px;
$btn-font-size-lg: 16px;
$btn-line-height-lg: 38px;
// Forms
$enable-validation-icons: false;
$input-color: #8798a9;
$input-border-color: $gray-300;
$custom-select-indicator-color: $input-color;
// Badges
$badge-font-size: 12px;
// Spinners
$spinner-width: 26px;
$spinner-border-width: 2px;
// Modals
$modal-header-padding-y: 10px;
$modal-header-padding-x: 10px;
// Breadcrumb
$breadcrumb-bg: transparent;
$breadcrumb-border-radius: 0;
// Cards
$card-border-color: transparent;
$card-bg: transparent;
// Tables
$table-accent-bg: #f9f9f9;
Ich kann diese Werte nicht aus meinem Custom Theme überschrieben oder etwas doch?
LG
So, in meiner theme.json habe ich das @Storefront bei style entfernt…
{
"name": "MoorlPixi",
"author": "Showpare AG",
"style": [
"Resources/storefront/style/base.scss"
],
"script": [
"@Storefront",
"Resources/storefront/dist/script/all.js"
],
"asset": [
"Resources/storefront/asset"
]
}
In dieser Reihenfolge sollen die Scripts geladen werden.
Storefront Variablen
Meine Variablen
Storefront Rest inkl. Bootstrap
Mein Rest
Nur so kann ich mir sicher sein, dass die Variablen aus meinem Theme wirklich an allen Stellen genutzt wird und nicht durch das Storefront überschrieben werden…
um diese Reihenfolge abzubilden, passe ich meine base.scss an:
@import "./../../../../../../../platform/src/Storefront/Resources/src/style/variables.scss";
@import "variables"; // hier kann ich die Variablen anpassen....
@import "./../../../../../../../platform/src/Storefront/Resources/src/style/base.scss"; // den Import der Variablen habe ich hier entfernt...
// ... hier folgen meine Anpassungen
Nur leider stelle ich jetzt fest, dass die Anpassung meiner theme.json keine Auswirkung hat. Der Compiler versucht trotzdem erst das Storefront Paket zu laden. Natürlich bekomme ich hier einen Fehler, weil ich in der base.scss den Import der Variablen auskommentiert habe…
Ich habe also keine Möglichkeit in meinem Custom Theme, die SASS Scripts aus dem Storefront zu ignorieren???
LG
Okay ich habs gecheckt, das war ein kleiner Fehler meinerseits…
bei theme:compile werden ja alle verfügbaren Themes kompiliert, deshalb der Fehler…
mit den folgenden Anpassungen habe ich mein gewünschtes Ergebnis erreicht!
theme.json
{
"name": "MoorlPixi",
"author": "Showpare AG",
"style": [
"Resources/storefront/style/base.scss",
"@Plugins"
],
"script": [
"@Storefront",
"Resources/storefront/dist/script/all.js"
],
"asset": [
"Resources/storefront/asset"
]
}
base.scss
@import "./../../../../../../../platform/src/Storefront/Resources/src/style/variables.scss";
@import "variables"; // Meine Variablen
/*
* Vendors
* ------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/vendor/bootstrap';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/vendor/tiny-slider';
/*
* Base stuff
* ---------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/base';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/reboot';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/ie11-fixes';
/*
* Components
* ---------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/alert';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/card';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/backdrop';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/base-slider';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/image-slider';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/product-slider';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/gallery-slider';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/magnifier';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/zoom-modal';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/offcanvas';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/product-box';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/loader';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/modal';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/flags';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/icon';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/pagination';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/cms-block';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/cms-element';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/forms';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/address-editor';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/delivery-status';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/quickview-modal';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/component/payment-method';
/*
* Layout-related sections
* ----------------------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/container';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/top-bar';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/header';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/header-minimal';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/footer';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/main-navigation';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/navigation-flyout';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/navigation-offcanvas';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/offcanvas-cart';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/account-menu';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/search-suggest';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/cookie-permission';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/layout/scroll-up';
/*
* Page-specific styles
* -------------------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/product-detail/product-detail';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/product-detail/configurator';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/product-detail/tabs';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/account';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/aside';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/overview';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/register';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/login';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/address';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/profile';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/order';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/account/order-detail';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/checkout';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/aside';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/cart';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/cart-item';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/register';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/confirm';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/checkout/finish';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/contact/contact';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/newsletter/newsletter';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/page/search/search';
/*
* Skins
* ---------- */
@import './../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/base';
@import "shopware"; // Mein Custom Zeugs
An dieser Stelle würde ich mir wünschen, dass die Imports vom Storefront base.scss in eine Extra Datei kommen könnten, weil wie man sieht muss ich sonst alles einzeln laden, weil ich die variables nicht entfernen darf.
LG
Hallo zusammen,
leider funktioniert der theme:compile Befehl bei mir nicht mehr. Früher wurden die Vendor SCSS, Bootstrap & Co. automatisch gefunden. Jetzt merkert die Console über fehlende mixins, etc.
Ich bin das Tutorial für die Theme-Plugin-Erstellung noch mal komplett durchgegangen und habe alles befolgt.
Hat jemand einen Tipp für mich wie die mixins und Variablen wieder automatisch gefunden werden, wie vorher auch?
Beste Grüße
FloC3
8. Oktober 2019 um 14:46
5
ich würde gern die Variablen aus dem Shopware Theme in meinem eigenen Theme überschreiben. Ganz simpel.
Zum Beispiel $border-radius steht bei Shopware auf 3px ich will aber keine runden Ecken. Also möchte ich $border-radius: 0px; schreiben.
Die 0px greifen dann aber nach einem theme:compile nicht …
bei SW5 war das ja ganz easy einfach die Variablen zu überschreiben…
wisst ihr wie ich das machen kann? Den Rest vom Shopware-Theme will ich schon behalten.