Neu Evo Child Installation

[Nadana86]

Hallo miteinander,

ich möchte gerne das Evo Child nutzen / lernen, was es damit auf sich hat. Ich scheitere direkt am Anfang. Als Ausgangspunkt: Ich arbeite zur Zeit mit einem Test Shop mit FTP Zugang. Zur Zeit ist Evo mit dem Theme Spacelab aktiviert. Erstes Ziel wäre es mit dem Child vor allem die Farbe des Footers zu ändern und natürlich dazu zu lernen.

Ich habe das Child runtergeladen von https://gitlab.com/falk.jtl/evo-child-vorlage und per Filezilla hochgeladen.

Die weiteren Anweisungen sind folgende:

"Die bootstrap.css muß aus den less-Dateien kompiliert werden, diese ist also immer gut gefüllt, da sie auch für ein
Child alle Angaben des Parents enthält.

Parent Theme ändern
Zum Ändern des Parent-Theme müssen lediglich die Pfade für die Imports in base.less
und variables.less angepasst werden. Anschließend muss die bootstrap.css neu
kompiliert werden."

Kann mir jemand erklären, was dies in der Praxis bedeutet? Was genau muss ich tun?

Wenn es geht bitte nicht nur auf die Doku verweisen, denn die ist leider für Beginner nicht wirklich verständlich.

Danke.
Nadine

 

[Nadana86]

"Die bootstrap.css muß aus den less-Dateien kompiliert werden, diese ist also immer gut gefüllt, da sie auch für ein
Child alle Angaben des Parents enthält.

Nur um zu schauen, ob ich das alles vielleicht doch richtig verstehe:
Nachdem ich das Child im Adminbereich aktiviert habe, kann ich auch im Adminbereich unter Plugins den Evo Theme Editor benutzen um dort Anpassungen mit CSS vorzunehmen. Danach würde ich das Theme kompilieren. Diese Änderungen werden in der boostrap.css gespeichert (von der ich grundsätzlich die Finger zu lassen habe...)

Parent Theme ändern
Zum Ändern des Parent-Theme müssen lediglich die Pfade für die Imports in base.less
und variables.less angepasst werden. Anschließend muss die bootstrap.css neu
kompiliert werden."

Dies würde nur zutreffen, wenn ich ein anderes Parent Theme als Evo benutzen wollte?

 

[Mirko.Schmidt User deaktiviert]

Hallo,
ja über den Evo-Theme-Editor lassen sich die .less Dateien gut bearbeiten. Es wäre aber empfehlenswert eher ein eigenes Theme anzulegen und in diesem das Spacelab zu inkludieren und dann darauf aufbauent Änderungen vorzunehmen. Dazu in dem Evo-Child von FPrüfer einfach unter my-evo/less/theme.less den ersten Import abändern:

@import "../../base/less/base";

@import "../../../../Evo/themes/spacelab/less/theme";

Dann wird im my-evo Theme das Spacelab inkludiert und kann noch erweitert werden.

 

[FPrüfer]

Hallo,
Analog zum Hinweis von Mirko muss auch noch die my-evo/less/variables.less angepast werden, damit das "geerbte" Spacelab auch wirklich wie das Originale aussieht.

 

[FPrüfer]

Hallo Nadine,

Nur um zu schauen, ob ich das alles vielleicht doch richtig verstehe:
Nachdem ich das Child im Adminbereich aktiviert habe, kann ich auch im Adminbereich unter Plugins den Evo Theme Editor benutzen um dort Anpassungen mit CSS vorzunehmen. Danach würde ich das Theme kompilieren. Diese Änderungen werden in der boostrap.css gespeichert (von der ich grundsätzlich die Finger zu lassen habe...)

Grundsätzlich hast du das richtig verstanden. Du solltest dich jedoch mal mit den Unterschieden von CSS und LESS auseinandersetzen, um die Vorteile von LESS und dem notwendigen Kompilieren zu verstehen.
Wenn du nur kleine Änderungen vornehmen oder auch einfach nur CSS benutzen möchtest, um ein paar Farben o.ä. zu ändern, dann kannst du diese CSS-Änderungen einfach in die /css/mytheme.css schreiben. Bei diesen Änderungen muss nichts neu kompiliert werden.

Dies würde nur zutreffen, wenn ich ein anderes Parent Theme als Evo benutzen wollte?

Genau!

 

[Nadana86]

Grundsätzlich hast du das richtig verstanden. Du solltest dich jedoch mal mit den Unterschieden von CSS und LESS auseinandersetzen, um die Vorteile von LESS und dem notwendigen Kompilieren zu verstehen.
Wenn du nur kleine Änderungen vornehmen oder auch einfach nur CSS benutzen möchtest, um ein paar Farben o.ä. zu ändern, dann kannst du diese CSS-Änderungen einfach in die /css/mytheme.css schreiben. Bei diesen Änderungen muss nichts neu kompiliert werden.

Danke euch beiden, das war sehr hilfreich!

Ich denke, dass ich farblich das meiste erreiche, wenn ich die variables.less abändere, richtig? Und wenn ich dann noch individuelle Änderungen habe würde ich die am ehesten also in mytheme.css schreiben? Darunter würde also auch die Farbe des Footers fallen?
Hoffentlich ist die folgende Frage nicht total daneben: Ist der Unterschied zwischen der mytheme.css und der theme.less nur, dass das eine "nur" CSS benutzt, das andere aber LESS? Wenn ja, welche der beiden Dateien hat Priorität, wenn ich in beiden etwas ändere, was aber gegensätzlich ist?

Ich hatte mir gestern abend mal den Livestyler angesehen, der aber mit aktiviertem Evo-Child gar nicht funktioniert hatte. Ich vermute, das liegt daran, dass ich die URL im theme.less nicht angegeben habe und der LiveStyler somit nichts hatte, worauf er zurück greifen kann?

Danke schonmal!

Gruß,
Nadine

 

[FPrüfer]

Ich denke, dass ich farblich das meiste erreiche, wenn ich die variables.less abändere, richtig? Und wenn ich dann noch individuelle Änderungen habe würde ich die am ehesten also in mytheme.css schreiben? Darunter würde also auch die Farbe des Footers fallen?

Der "korrekte" Weg um dauerhafte Änderungen am eigenen Theme vorzunehmen, ist der über LESS und das Einkompilieren in die bootstrap.css. Damit sind dann ALLE Style-Angaben in EINER CSS-Datei. Wenn du dich also für den Weg über LESS entscheidest, dann benötigst du die mytheme.css nicht.

Hoffentlich ist die folgende Frage nicht total daneben: Ist der Unterschied zwischen der mytheme.css und der theme.less nur, dass das eine "nur" CSS benutzt, das andere aber LESS? Wenn ja, welche der beiden Dateien hat Priorität, wenn ich in beiden etwas ändere, was aber gegensätzlich ist?

In der mytheme.css kann nur CSS benutzt werden. In den LESS-Dateien ist beides möglich. Wie bereits gesagt, wenn du den Weg über LESS benutzen möchtest, dann benötigst du die mytheme.css nicht.
Zur "Priorität": Die bootstrap.css wird vor der mytheme.css geladen, so dass in mytheme.css alle Änderungen aus dem LESS überschrieben werden können. Die mytheme.css hat - wenn du so willst - damit Priorität.

Ich hatte mir gestern abend mal den Livestyler angesehen, der aber mit aktiviertem Evo-Child gar nicht funktioniert hatte. Ich vermute, das liegt daran, dass ich die URL im theme.less nicht angegeben habe und der LiveStyler somit nichts hatte, worauf er zurück greifen kann?

Wenn du den Live-Styler mit dem eigenen Theme benutzen möchtest, dann musst du den kompletten Inhalt aus /templates/Evo/themes/spacelab/less/variables.less in /templates/DeinChild/themes/my-theme/less/variables.less kopieren, damit der Live-Styler die Variablen erkennt. Der Import reicht dann an der Stelle nicht. Damit musst du dann aber bei Updates darauf achten, evtl. Änderungen zu übertragen.