Theme Flow Template Anpassung für Dummis

Deutsches Forum
1

und für Faule. Auf die Gefahr hin, dass ich mir hiermit von den Profis ”Prügel” einhandele, hier meine laienhafte Vorgehensweise zur Farbanpassung des Flow-Themes.

Die korrekte Vorgehensweise, grunt fürs bearbeiten und kompilieren der Less-Dateien habe ich zur Kenntnis genommen. Allerdings habe ich überhaupt keine Lust mich darin einzuarbeiten. Ich gehe nächstes Jahr in Rente.

Es geht mir ja nur darum, die Farben etwas zum Charakter meines Sortiment anzupassen. Blau ist ja für den Wassersport ganz passend, für mein kleines Sortiment sollte es was mit Ziegelrot sein.

Die Hintergrundfarbe kann ja in den Einstellungen des Themes geändert werden.

Schön ist, das im Eingabefeld für den HEX-Wert nicht nur einzelne Werte; sondern auch ein hübscher Verlauf akzeptiert wird, z.B. background-color: #9e1100; background-image: -moz-linear-gradient(top,#ae1300,#870d00); background-image: -webkit-gradient(linear,0 0,0 100%,from(#ae1300),to(#870d00)); background-image: -webkit-linear-gradient(top,#ae1300,#870d00); background-image: -o-linear-gradient(top,#ae1300,#870d00); background-image: linear-gradient(to bottom,#ae1300,#870d00); background-repeat: repeat-x;

Wobei die Hexwerte natürlich beliebig sein können. Diesen Verlauf hatte ich der CSS des Templates meiner Main-Page entnommen. Es geht also schon in Richtung Corporate Identity.

Mit einem geeigneten Editor jetzt noch per "suchen und ersetzen” die Farben der Schaltflächen in der styles.min.css geändert, natürlich das Logo in meinen Farben eingefügt und den Begrüßungstext etwas farblich gestaltet. Voila, mein Shop sieht aus wie für mich gemacht.

Was auf diese Weise nicht geht, die Farbe der Shopping-bag oben rechts ändern und die Farbe der Schaltflächen beim mouse-over. Damit kann ich leben!

Begriffsverwirrung in der Überschrift: Bei meinem bevorzugten CMS werden Themes als Templates bezeichnet

2

nein, hier bekommt niemand deswegen Prügel :wink:
Ich halte grunt auch für einen Fehlgriff.

In der Tat habe ich vor paar Tagen eine Anleitung geschrieben, wie man grunt durch anfänger- und v.A. benutzerfreundliches Tool ersetzt, mit dem man solche Sachen im Flow Theme anpassen kann.
Allerdings fehlte mir noch die Zeit zum ausführlichen Testen, daher ist es noch unveröffentlicht.

Es sind weder Dev-Skills, noch besondere Software auf dem Server nötig, alles passiert auf dem lokalen PC. Falls jemand Lust hat es auszuprobieren, hier ist die Zusammenfassung:

  1. Benötigt wird dieses Tool: https://prepros.io/ (kostenlos)
  2. Dort legt man ein neues Projekt an (+ Symbol links unten) und navigiert zum shop root auf dem lokalen PC
  3. Für Stylesheet Anpassungen muss man application/views/flow/build/less/flow.less finden und “output path” einstellen:
  4. Für JS Anpassungen die Datei main.js:
  5. danach Rechtsklick auf die main.js Datei -> Open FIle
    das öffnet die Datei im Editor und man muss diese Zeilen am Anfang der Datei einfügen:
// @prepros-prepend  "../vendor/bootstrap/js/bootstrap.js"
// @prepros-prepend  "../vendor/bootstrap-select/js/bootstrap-select.js"
// @prepros-prepend  "../vendor/jquery-bootstrap-validation/js/jqBootstrapValidation.js"
// @prepros-prepend  "../vendor/jquery-unveil/js/jquery.unveil.js"

(warum, erkläre ich dann ausführlicher in der finalen Anleitung)
Speichern nicht vergessen. Wenn man “Auto Compile” angeklickt hat, sollte unten rechts eine Meldung kommen “success”

Jetzt noch die Datei auf den Server laden.
(das kann das Programm aber auch, in den Einstellungen kann man FTP oder SFTP Server hinterlegen)

Ich komme wahrscheinlich erst nächstes Wochenende zum Testen, aber vielleicht traut sich jemand.
Freue mich auf Rückmeldung

1 Like
3

Vielen Dank für die interessante Vorschau,

nach Ostern gehe ich dran

4

+1

blabla fülltext

5

Moinsen,

ich hatte Prepros schon mal vor längerer Zeit in einem V2B Tutorial über Bootstrap/CSS gesehen.
Habe es nach Vanillas Anleitung installiert und muss sagen: Top!!
Funktioniert einwandfrei.
Meine Entwicklungsumgebung ist auf einem Ubuntu 16.04LTS Linux eingerichtet.
Mit NETBEANS als IDE und Prepros unter Linux installiert.

Habe mal eben in der Variables.less @brand-primary sowie @brand-secondary verändert und schwupps kam dieses kleine Fenster mit der Änderungsbestätigung aus Prepros und die Veränderungen waren sofort im Browser sichtbar, Danke Vanilla für diesen Tipp.

Was mich brennend interessiert ist, warum die Zeilen in die main.js kopiert werden müssen, das sind doch nur Kommentarzeilen, oder?

Beste Grüße
Thomas

6

diese Kommentare ersetzen praktisch die Funktion von grunt, die mehrere JS Dateien (Bootstrap, anderes Zeug und main.js) zu einer einzelnen scripts.min.js verschmelzen.


"@prepros-prepend" bewirkt, dass die entsprechende Datei am Anfang eingefügt wird.

7

@vanilla thunder: Danke für die Anleitung.Die Theme-Änderung mit Prepros hat bei mir soweit funktioniert und war nicht allzu schwer.

@brand-primary und @brand-secondary in der variables.less geändert und schon hatte ich den Shop in den Wunschfarben.

Es gibt hier nur zwei Elemente, die komischerweise nicht die Farben gewechselt haben:

  • der Warenkorb rechts oben
  • das Cookie-Notiz-Feld ganz oben
    (die sind beide noch in blau)

Woran kann das liegen? “Greifen” die nicht auch auf @brand-primary und @brand-secondary zu?

Danke und mfg

8

@sabs.
Manche Elements sidn, wie in Azur,
als png hinterlegt unter

out/flow/img

z.B. basket.png

Diese Bilder solltest Du mit einem Bildbearbeitungsprogramm einfärben.

9

Hi,
im Flow-Theme könnte man den Farbton der Warenkorb-Tasche schon mit CSS/Less ändern:
So wie hier :cool:

10

@MichaelH, DANKE! Die basket.png ist die im out/flow/img sowie in out/mobile/img, nehme ich mal an…
Muss man dann nur diese 2 Dateien austauschen, neu laden, history löschen und das wars?
Menno, bei mir klappt das nicht…

@nickname: danke auch für deine Hilfe! Ich habe aber nicht nach einer kostenpflichtigen Lösung gesucht und Eigenwerbung finde ich hier nicht so toll :frowning:

Gewisse Texthintergründe (Cookie Notiz, “Ihr Warenkorb ist leer”) waren, trotz Prepros, noch in dem blau der Demo-Version (obwohl bei mir brand-primary hellgrau und brand-secondry orange sind). Ich habe diese manuell in der styles.min.css (Element hieß alert-info) geändert, jetzt das alles CI konform :slight_smile:

VG sabs

11

Hier noch eine Alternative zu Prepros:http://koala-app.com/
Funktioniert exakt so wie Prepros, soweit ich das gestestet habe. Dort wird mit Rechtsklick auf flow.less bzw. main.js der Pfad angepasst.
In der main.js dann diese Zeilen einfügen:

// @koala-prepend “…/vendor/bootstrap/js/bootstrap.js”
// @koala-prepend “…/vendor/bootstrap-select/js/bootstrap-select.js”
// @koala-prepend “…/vendor/jquery-bootstrap-validation/js/jqBootstrapValidation.js”
// @koala-prepend “…/vendor/jquery-unveil/js/jquery.unveil.js”

Der Unterschied zu Prepros ist, das es auch in der Vollversion kostenlos ist.
Bei Prepros kommt ja nach kurzer Zeit immer wieder das Hinweisfenster.

Btte nicht falsch verstehen: Prepros ist wirklich nicht teuer und die $29 absolut wert, ich wollte hiermit nur eine Alternative aufzeigen.

Gruß
Thomas

12

Also ich bin für diese ganzen neuen Programme wohl zu blöd…
Ich habe alles so gemacht wie ihr angegeben habt aber wenn ich auf open file drücke passiert gar nichts.
Brauche ich da noch ein anderes Programm zu oder was fehlt mir?

Grüße

1 Like
13

Moin Zusammen,

Farben und Co hab ich alles wunderbar anpassen können.
Jedoch habe ich das Problem das mir auf dem smarten Phone die Headergrafik
in voller Breite angezeigt wird… Diese wird warum auch immer nicht Responsive verkleinert.
Hat jemand bereits eine Möglichkeit gefunden diese “Responsive” zu machen oder ggf.
eine andere Grafik anzeigen zu lassen? Eine die ggf. die passende Größe bereit hält?

Danke und Grüße,

Stefan

14

Hallo zusammen,
die manuelle Anpassung der Shop-Farben an das eigene Corporate Identity durch “Suchen & Ersetzen” in der jeweiligen css-Datei geht recht einfach und flott.

Einzig die Farbe der Shopping-Bag (blaues großes Warenkorb Symbol) oben rechts kann hiermit nicht angepasst bzw. geändert werden.

Wenn es nur um diese Anpassung/Änderung geht, braucht nicht extra ein Tool oder Anwendung installiert werden.

Man öffnet die shoppingbag.svg Datei (…application\views\flow\tpl\layout\svg\shoppingbag.svg) in einem HTML Editor. Ich verwende Dreamweaver, denke aber das es auch mit anderen Editoren problemlos geht.

Hierin befindet sich im Code gleich am Anfang 4-7 Zeile:

.st0{fill: #e83f4e;} 
<symbol id="shoppingBag">

Hier wird die Farbe für das Symbol definiert, und nur hier kann man die Farbwerte für die Shopping-Bag manuell individuell ändern.

3 Likes
15

Genau so habe ich es vor knapp einem Jahr auch gemacht, als ich noch gar keine Ahnung hatte. Einfach und funkioniert.

1 Like
16

Hallo zusammen!

  1. Ist es sinnvoll oder überhaupt machbar, ein child-theme im live-betrieb anzulegen (natürlich nach vorh. sicherung vom shop und der db) ?
  2. Wenn ja, kann ich der vorgehensweise von @vanilla folgen?

Eigentliches Ziel ist ein update von aktuell CE 4.10.5 auf die 6.
Hat vllt. jemand einen Plan?
Danke schon mal, Michael

17

machbar ja, sinnvoll eher nicht.

Kommt im Endeffekt auf die Menge der Anpassungen an und wie gut die Person mit HTML und Smarty umgeht.

Weil es ein live Shop ist, sieht natürlich jeder Besucher sofort, wenn irgendwas kaputt ist. Die meisten gehen auch weg, wenn die Seite kaputt aussieht (“was für ein Shopbetreiber stellt denn eine kaputte Seite ins Internet? unseriös…”), geschweige denn gänzlich unbenutzbar ist.

Sollten die Anpassungen allerdings so klein sein und der Anpasser so gut, dass quasi nichts schief gehen kann (wie z.B. Farbe oder Sidebar von Links nach rechts zu verschieben), kann man sowas natürlich auch live machen.
Ich würde lügen, wenn ich sage, ich hätte sowas nie gemacht :smiley:

1 Like
18

Hallo @vanilla,danke für deine Meinung.

Ich habe auch nicht wirklich ein gutes Gefühl,im Live-Betrieb etwas zu ändern. Meine Kenntnisse in HTML sind recht brauchbar, Smarty eher nicht.
Ist es wohl möglich, die Version 6.0.2 der CE unter XAMPP zu installieren und zu testen? Mein Problem ist der Bug mit den Auswahllisten in der jetzigen Version (landen beim Klick sofort im Warenkorb). Ich habe einen Artikel mit 1040 Varianten,das sind keine Antwortzeiten sondern Lieferfristen.
Siehe hier: [https://shop.gentschenfeld.de/Schliesszylinder/Dom/Dom-Doppelzylinder-Schliesszylinder-ix-6HT.html]

Ist der Bug in der 6er-Version gefixt?
Ich weiß,das gehört jetzt nicht wirklich zum Thema,wollte jedoch kein neues aufmachen.
Vielen Dank.

19

@neuling2 die CE 6.0.2 bekommst auf jeden Fall unter XAMPP zum laufen.

Und die Antwortzeiten vom Server sind wirklich Lieferfristen :-/

20

ich habs im Gedächtnis, dass der Bug auch für 4.10 schon gefixt wurde