Pro-Tipp: Theme erstellen mit den CLI Tools (Command Line Interface Tools)

Pro-Tipp: Theme erstellen mit den CLI Tools (Command Line Interface Tools)

Alexander Wolf 07. Oktober 2015 1
Wie wir ein Theme erstellen, wissen wir. Für die, die es doch nicht wissen. Check it out: Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst Jetzt gehen wir aber einen Schritt weiter und erstellen ein Theme mit den CLI Tools. CLI steht für C ommand- l ine i nterface. Es gibt einige Begriffe. Kommandozeile, Befehlszeile, Terminal oder Konsole. Damit können wir schon einiges anfangen.
Social Media Icon mit Link im Footer

Social Media Icon mit Link im Footer

Alexander Wolf 01. Oktober 2015 13
Social Media ist wichtig. Deswegen wollen wir auch unsere Social Media Seiten auf unserem Shop verlinken. Unten links im Footer ist ein toller Platz dafür. Ihr könnt selbstverständlich schauen wo es euch am besten gefällt. Die icons nehmen wir von Font Awesome . Jetzt gibt es zwei Wege die Social Media Icons einzubauen:
Wie du einen Demo Shopware Shop auf DigitalOcean installierst

Wie du einen Demo Shopware Shop auf DigitalOcean installierst

Alexander Wolf 27. September 2015 8
Wir alle entwickeln Themes. Tolle Themes. Die besten Themes. Irgendwie müssen wir den anderen unsere Themes präsentieren. Natürlich können wir lokal mit MAMP ( Wie geht das? ) einen Shopware 5 Shop aufsetzen und Screenshots machen. Das sollten wir auch tun, damit es was zu sehen gibt im Store. Aber eine Live Demo ist besser. Die Besucher können unser Theme wirklich erleben und anfassen. Alles klar!
Git nutzen für Theme Entwicklung

Git nutzen für Theme Entwicklung

Alexander Wolf 18. September 2015 4
Wie kann eure Theme Entwicklung noch professioneller werden? Ein großer Punkt ist: Git. Git ist ein Tool für Versionsverwaltung, d.h. wir verwalten damit verschiedene Versionen unserer Software. In diesem Fall von unseren Themes. Kurzes Beispiel: Wir haben ein super tolles Theme. Arbeiten fleißig an diesem Theme und merken irgendwann, dass wir etwas kaputt gemacht haben. Ja, auch Profis machen mal was kaputt.
Theme: FlatResponsive ab jetzt im Shopware Store

Theme: FlatResponsive ab jetzt im Shopware Store

Alexander Wolf 10. September 2015 22
Unser erstes Theme ist fertig gestellt. Erinnert ihr euch? In dem Beitrag http://8mylez.com/blog/shopware-5-theme-erstellen/ , ging es um genau dieses Theme. Das Responsive Theme von Shopware gefällt uns sehr, daher wollten wir es einfach darstellen. Nicht zu viel, deswegen nur mit LESS. Wie sieht es denn jetzt aus?
Dein erstes Theme im Community Store in 4 Schritten

Dein erstes Theme im Community Store in 4 Schritten

Alexander Wolf 05. September 2015 2
Wochenlange Arbeit, Blut und Schweiß, eure ganze Energie. Alles gegeben für eine einzige Sache: Das erste Theme im Community Store! So viel Energie und Leidenschaft reingepumpt. Wochenlang an eurem Theme gearbeitet. Es wird Zeit sich zu verabschieden. Ganz so dramatisch ist es nicht. Wir sollten uns sogar freuen. Das Theme erblickt sozusagen das erste Mal das Licht der Welt oder in diesem Fall den Community Store. Wie läuft das nun ab? Schwer ist es nicht. Ihr merkt schon: Shopware ist ein geniales und super einfaches System. Es sind nur 4 Schritte: 1. Theme erstellen 2. Vertrag mit Shopware 3. Plugin erstellen 4. Hochladen Lasset die Spiele beginnen.
Pro-Tipp: CSS Befehle mit den Chrome Dev Tools suchen

Pro-Tipp: CSS Befehle mit den Chrome Dev Tools suchen

Alexander Wolf 01. September 2015 2
Ihr seid schlau und guckt euch den Code mit "Element untersuchen" bzw. mit den Chrome Dev Tools an. Das ist auf jeden Fall schon der erste richtige Schritt in einfache Theme Entwicklung. Jetzt habt ihr ein Element gefunden und wollt es anpassen. In den Chrome Developer Tools habt ihr es schnell gefunden.
Logo Größe anpassen mit Less für Shopware 5

Logo Größe anpassen mit Less für Shopware 5

Alexander Wolf 27. August 2015 56
Ihr habt euer Logo ausgetauscht aber irgendwie ist es für euch einfach zu klein? Kein Problem! Heute zeige ich euch, wie ihr ganz einfach und in nur 5 Schritten die Größe eures Logos anpassen könnt. Vorab schonmal die Schritte, weiter unten mit Erklärung: Eigenes Theme erstellen und Logo einbinden Datei all.less anlegen Datei header.less anlegen Größe verändern Cache leeren und das Theme kompilieren Gar nicht so schwer oder? Los geht's!
Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht

Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht

Alexander Wolf 22. August 2015 23
UPDATE: Falls ihr Grunt nutzt um eure Themes zu entwicklen, braucht ihr die Einstellung nicht, da dies Grunt für euch übernimmt und die CSS Sourcemap erstellt. Wie ihr das anstellt: Shopware 5 Theme Entwicklung mit Grunt Heute einen kurzen Beitrag und zwar einen Pro Tipp! Für die Pro's unter uns. Problem: Wir wollen ein Theme entwickeln / anpassen. An sich kein Problem. Die Preisfrage nun: Was ist aber immer etwas nervig? Genau! Wenn wir in den Chrome Developer Tools das richtige Element gefunden haben, welches wir anpassen wollen, wissen wir nicht in welcher LESS Datei sich der Code dafür befindet.
Shopware 5 Theme Entwicklung mit Grunt

Shopware 5 Theme Entwicklung mit Grunt

Alexander Wolf 19. August 2015 26
Im letzten Beitrag haben wir uns angeschaut wie wir unser Theme mit LESS anpassen können. Wie ihr bereits gemerkt habt, muss LESS jedenfalls kompiliert werden. Es wird einfach in CSS übersetzt. Dieses Kompilieren können wir automatisieren. Wie? Mit Grunt . Was genau das ist und wie es funktioniert, findet ihr auf deren Website. Ich zeige euch nur wie ihr eure Themes damit zum Laufen bekommt um euch etliche Klicks zum Kompilieren zu ersparen.

Das Shopware eBook für Einsteiger!

Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.Zum 8mylez Store

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 Shop erstellst und verwaltest

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie du deine Shop Geschwindigkeit optimierst
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Die Ups! Ein Fehler ist aufgetreten! Fehlermeldung

8mylez gehört zu

© 2016-2017