Frage zu Less - Variablen

Hallo, ich möchte das Responsive-Theme ändern. Die LESS Dateien habe ich bereits kopiert. Nun lese ich überall von den Color-Variablen die bereits definiert sind wie zb. @brand-primary. Leider kann ich diese in keiner Datei finden - also zumindest nicht in den varaibeln Dateien die vorhanden sind (Less Variables Ordner). Kann mir jemand auf die Sprünge helfen ? Danke

Schau mal in die Theme.php vom Responsive Theme. Dort werden diese definiert.

okay, danke habs gefunden. Ich Dummerchen - wie konnte ich nur davon ausgehen das die Styles über Less-Variablen definiert werden :wink: Die Theme.php wird ja beim Erstellen des Templates im neuen Theme mit kopiert. Allerdings mit dem Verweis zum Original Responsive-Theme. Wie ist das nun: Ersetze ich meine Theme.php komplett durch die Originale oder kopiere ich die private Function($themeColorDefaults) in mein Theme.php ? Danke, Ivo

Hi Ivo, nein, das geht nicht. Die Variablen kannst du „nur“ über den ThemeManager ändern. Du kannst aber dafür in deinem Theme eine Vorlage erstellen, die du dann über den ThemeManager importieren kannst. Stichwort: createConfigSets Heiner

Hallo Heiner, danke für die Info zu createConfigSets. Werde mal versuchen mich da rein zu lesen. Grüße

Du kannst die Variablen trotzdem mit deiner eigenen Farbe in einer .less Datei überschreiben. Dafür solltest Du allerdings ein eigenes Theme angelegt haben. Das kann Sinn machen, wenn Du eine Farbe nicht global ändern möchtest, sondern nur für z.B. die Startseite. Gruß

Hallo, ich habe versucht mit Hilfe der createConfigSets Funktion ein neues Farbschema mit meinem Template auszugeben. /\*\* \* Helper function to merge default theme colors with color schemes \* @param ArrayCollection $collection \*/ public function createConfigSets(ArrayCollection $collection) { $set = new ConfigSet(); $set-\>setName('\_\_color\_scheme\_NAME\_\_')-\>setDescription( '\_\_color\_scheme\_NAME\_description\_\_' )-\>setValues( array\_merge( $this-\>themeColorDefaults, ['brand-primary' =\> '#009ee0'] ) ); $collection-\>add($set); } Dazu habe ich noch use Doctrine\Common\Collections\ArrayCollection; use Shopware\Components\Theme\ConfigSet; in die theme.php in meinem Theme hinzugefügt. Leider bekomme ich im Backend nur eine Fehlermeldung: Ups! Ein Fehler ist aufgetreten! Die nachfolgenden Hinweise sollten Ihnen weiterhelfen. Config set \_\_color\_scheme\_NAME\_\_ defined without values array. in Shopware/Components\Theme\ConfigSet.php on line 151 Leider finde ich auch keine Hinweise, wie man in Shopware Farbshemata mit seinem Template mitliefern kann. Weiß es jemand besser?

Hi, die „$this->themeColorDefaults“ ist eine private Variable vom Responsive-Theme. Die kannst du in deinem Theme nicht wiederverwenden. Daher auch die Fehlermeldung: Config set __color_scheme_NAME__ defined without values array Heiner

1 „Gefällt mir“

Okay, dazu habe ich nun private $themeColorDefaults = ["brand-primary" =\> "#D9400B", "brand-primary-light" =\> "saturate(lighten(@brand-primary,12%), 5%)", "brand-secondary" =\> "#5F7285", "brand-secondary-dark" =\> "darken(@brand-secondary, 15%)", "gray" =\> "#F5F5F8", "gray-light" =\> "lighten(@gray, 1%)", "gray-dark" =\> "darken(@gray-light, 10%)", "border-color" =\> "@gray-dark", "highlight-success" =\> "#2ECC71", "highlight-error" =\> "#E74C3C", "highlight-notice" =\> "#F1C40F", "highlight-info" =\> "#4AA3DF", "body-bg" =\> "darken(@gray-light, 5%)", "overlay-bg" =\> "#000000", "overlay-opacity" =\> "0.7", "text-color" =\> "@brand-secondary", "text-color-dark" =\> "@brand-secondary-dark", "link-color" =\> "@brand-primary", "link-hover-color" =\> "darken(@link-color, 10%)", "rating-star-color" =\> "@highlight-notice", "btn-default-top-bg" =\> "#FFFFFF", "btn-default-bottom-bg" =\> "@gray-light", "btn-default-hover-bg" =\> "#FFFFFF", "btn-default-text-color" =\> "@text-color", "btn-default-hover-text-color" =\> "@brand-primary", "btn-default-border-color" =\> "@border-color", "btn-default-hover-border-color" =\> "@brand-primary", "btn-primary-top-bg" =\> "@brand-primary-light", "btn-primary-bottom-bg" =\> "@brand-primary", "btn-primary-hover-bg" =\> "@brand-primary", "btn-primary-text-color" =\> "#FFFFFF", "btn-primary-hover-text-color" =\> "@btn-primary-text-color", "btn-secondary-top-bg" =\> "@brand-secondary", "btn-secondary-bottom-bg" =\> "@brand-secondary-dark", "btn-secondary-hover-bg" =\> "@brand-secondary-dark", "btn-secondary-text-color" =\> "#FFFFFF", "btn-secondary-hover-text-color" =\> "@btn-secondary-text-color", "panel-header-bg" =\> "@gray-light", "panel-header-color" =\> "@text-color", "panel-border" =\> "@border-color", "panel-bg" =\> "#FFFFFF", "label-color" =\> "@text-color", "input-bg" =\> "@gray-light", "input-color" =\> "@brand-secondary", "input-placeholder-color" =\> "lighten(@text-color, 15%)", "input-border" =\> "@border-color", "input-focus-bg" =\> "#FFFFFF", "input-focus-border" =\> "@brand-primary", "input-focus-color" =\> "@brand-secondary", "input-error-bg" =\> "desaturate(lighten(@highlight-error, 38%), 20%)", "input-error-border" =\> "@highlight-error", "input-error-color" =\> "@highlight-error", "input-success-bg" =\> "#FFFFFF", "input-success-border" =\> "@highlight-success", "input-success-color" =\> "@brand-secondary-dark", "panel-table-header-bg" =\> "@panel-bg", "panel-table-header-color" =\> "@text-color-dark", "table-row-bg" =\> "#FFFFFF", "table-row-color" =\> "@brand-secondary", "table-row-highlight-bg" =\> "darken(@table-row-bg, 4%)", "table-header-bg" =\> "@brand-secondary", "table-header-color" =\> "#FFFFFF", "badge-discount-bg" =\> "@highlight-error", "badge-discount-color" =\> "#FFFFFF", "badge-newcomer-bg" =\> "@highlight-notice", "badge-newcomer-color" =\> "#FFFFFF", "badge-recommendation-bg" =\> "@highlight-success", "badge-recommendation-color" =\> "#FFFFFF", "badge-download-bg" =\> "@highlight-info", "badge-download-color" =\> "#FFFFFF"]; ebenfalls in die theme.php eingefügt. Ist das so gewollt? Gibt es ein Tutorial dazu? Wie hat sich Shopware das gedacht, Theme-Vorlagen mit dem Template auszugeben?

Das würde mich ehrlich gesagt auch interessieren! :wink:

Hallo, habt ihr dazu zufällig schon eine Lösung gefunden? :slight_smile:

Also, ich habe ein CustomTheme, welches vom Responsive abgeleitet ist / erbt.
In dessen Theme.php habe ich nichts weiter gemacht, nur in meiner eigenen all.less (bzw einem include, aber egal) einige der Farbvariablen überschrieben, etwa so:

// overwriting responsive theme’s color variables:
@brand-primary: #575757;

Und das hat dann tatsächlich alle Vorkommnisse der Farbe @brand-primary im compilierten Gesamt-Final-CSS wie gewünscht ersetzt.
Man kann sich also mal alle Farbvariablen aus der Theme.php des Responsive Themes in seine eigene .less holen, erstmal auskommentieren und bei Bedarf anpassen.
Auf diese Weise - so meine Beobachtung bislang - können diese Farbvariablen jetzt auch im Shopware5 Backend > Theme Manager > Theme Konfiguration > Farb Konfiguration nicht mehr überschrieben werden.
 

Bei Farb-Variablen-Änderungen einfach nur die LESS neu kompilieren reicht allerdings nicht , es muss schon das Theme neu gebaut und der Cache einmal geleert werden.

Beachten sollte man bei dieser Lösungsvariante (verwende ich teilw. selbst so) allerdings dass dies mit Grunt zusammen nicht funktioniert, bzw. zusätzliche Schritte notwendig sind, siehe Querverweis: https://forum.shopware.com/discussion/29480/feedback-shopware-und-grunt

Wäre es nicht eleganter die Config für das eigene Theme anzupassen? Damit bleibt keine Config-Leiche zurück, die sowieso keinen Sinn ergibt. Das Überladen der Variablen direkt im .less funktioniert natürlich, aber mich würde interessieren ob man die Config nicht entsprechend adaptieren kann. Kann man sicher, habe mich mit dem Thema aber noch nicht beschäftigt ^^…

Hallo,

grundsätzlich könnt Ihr ja eine eigenen Theme Config für Euer eigenes Custom Theme bauen:
Theme.php

Hier ist es so, wenn Ihr ein Feld mit dem System-Namen eines bereits existierenden Feldes anlegt, wird das ursprüngliche Feld überschrieben und aus der vererbten Konfiguration entfernt und in Eure eigene übernommen. Hier könnt Ihr dann auch einen eigenen Default-Wert für das Feld setzen.

Sonnige Grüße,
Phil

2 „Gefällt mir“

Thx Phil… genau das habe ich gesucht :slight_smile: